get-design

name

get-design

description

Retrieve and adapt DESIGN.md-style references from getdesign.md into production-quality HTML/CSS/JS. Use this skill whenever the user asks for a UI, landing page, dashboard, component, or single-file HTML inspired by a company name, brand style, concept, color palette, mood, emotion, or getdesign.md catalog entry. This skill should trigger even when the user does not explicitly say "DESIGN.md" if they ask for code that feels like Stripe, Linear, Airbnb, Apple, Nike, Vercel, Notion, Supabase, fintech, luxury automotive, editorial media, developer tools, playful SaaS, cinematic dark, warm minimal, etc.

get-design

Turn a user's brand/style intent into a grounded design reference and then into runnable frontend code. The core move is: retrieve a relevant DESIGN.md-style reference from getdesign.md or the getdesign API, synthesize it with UI/UX craft guidance, and implement original HTML that borrows design principles without copying a brand wholesale.

Companion Skills

When this skill triggers for HTML or UI code generation, also consult these local skills if they are available:

• /Users/frappuchanee/.agents/skills/ui-ux-pro-max/SKILL.md for product-fit, accessibility, layout, interaction, typography, color, and responsive quality checks.
• /Users/frappuchanee/.agents/skills/frontend-design/SKILL.md for bold aesthetic direction, distinctive composition, typography, motion, and non-generic visual execution.

Use their guidance as quality controls. Let getdesign.md provide the source inspiration; let the companion skills shape the final interface into polished code.

Use Cases

Use this skill when the user says things like:

• "Apple 느낌으로 프리미엄 랜딩 페이지 HTML 만들어줘."
• "기업명은 Linear, 컨셉은 조용한 생산성, 색상은 보라 포인트."
• "따뜻하고 친근한 fintech 대시보드를 getdesign.md 스타일 참고해서 만들어줘."
• "Notion + Airbnb 무드로 SaaS onboarding 화면을 HTML로."
• "검은 배경, 고급차 브랜드 같은 긴장감, 골드 포인트."

Do not use this skill for exact brand cloning, deceptive impersonation, logo misuse, or making a page that pretends to be the referenced company. Treat every reference as independent inspiration.

Inputs To Extract

From the user request, identify:

• brand: explicit company or product name, if any.
• concept: product category or page type, such as SaaS, AI agent, fintech, portfolio, dashboard, e-commerce, editorial, automotive.
• visual keywords: colors, density, typography feel, layout motifs, shapes, surface treatment.
• mood: emotional tone, such as calm, premium, playful, urgent, cinematic, trustworthy, futuristic.
• deliverable: default to a self-contained .html file unless the user asks for React, Next.js, Vue, etc.
• constraints: mobile/desktop needs, dark/light mode, assets, language, accessibility, framework.

If the request is underspecified, make a reasonable design choice and state it briefly in the final response. Avoid stopping for clarification unless the missing detail changes the output format or legal/safety posture.

Retrieval Workflow

1. Search The Catalog

Prefer the live catalog first:

python3 /Users/frappuchanee/.agents/skills/get-design/scripts/search_catalog.py "<user brand concept colors mood>"

The script uses the bundled catalog seed and tries to refresh from https://getdesign.md/ when network access works. It returns candidate brands, slugs, descriptions, and getdesign pages.

If the script is unavailable or stale, search/open:

• https://getdesign.md/
• https://getdesign.md/design-md
• https://getdesign.md/<slug>/design-md

Select 1 primary reference and, when useful, 1 secondary reference. The primary reference should explain the main visual system; the secondary reference can add a missing dimension, such as "Linear precision + Airbnb warmth".

2. Retrieve The Design Reference

For a known getdesign.md catalog slug, use the install command shown on the detail page:

npx getdesign@latest add <slug>

Run it from the user's project root when a project exists. If this writes DESIGN.md, read it before coding.

If the user gives a public URL instead of a catalog brand, use the official API when appropriate:

curl "https://api.getdesign.app/?url=https://example.com" \
  -H "Accept: text/markdown" \
  -o example.design.md

If network/API access fails, fall back to the catalog page description plus the bundled seed. Be honest about the fallback.

3. Make The Reference Usable

Before writing code, distill the selected reference into a short internal design brief:

• Visual atmosphere: 3-5 words plus one sentence.
• Color roles: background, surface, text, accent, border, semantic colors.
• Typography direction: display/body/mono choices and hierarchy.
• Layout motifs: grid, density, whitespace, image treatment, navigation pattern.
• Components: buttons, cards, forms, tables, hero, sidebar, dashboards, media blocks.
• Motion: transitions, reveal behavior, hover/focus states.
• Adaptation rule: what to preserve, what to transform for the user's own product.

Keep only what serves the user's concept. Do not reproduce brand logos, exact marketing copy, trademarked visuals, or misleading identity.

HTML Implementation Workflow

Default deliverable: one self-contained HTML file with embedded CSS and minimal JavaScript only when useful.

1. Define the product concept and aesthetic thesis in your own words.
2. Use semantic HTML landmarks: header, main, section, nav, footer, forms with labels, buttons as buttons.
3. Use CSS custom properties for the design system: color roles, type scale, spacing, radius, shadows, motion.
4. Build the actual requested experience as the first screen. Avoid making a generic explanation page.
5. Use original layout and copy tailored to the user's concept. Reference the chosen brand's principles, not its identity.
6. Apply ui-ux-pro-max checks: contrast, touch targets, mobile responsiveness, keyboard focus, reduced motion, stable dimensions, no horizontal scroll.
7. Apply frontend-design checks: distinctive typography, memorable composition, intentional mood, refined spacing, and non-generic motion/details.
8. Include responsive behavior for at least mobile (375px) and desktop (1440px) viewports.
9. If a dev server is needed, start it and verify in the browser. For a standalone HTML file, browser-open or inspect it directly when possible.

Design Selection Heuristics

Use this rough mapping when the user gives mood/concept instead of a company:

• Premium white space, cinematic product, consumer tech: Apple, Meta, HP.
• Precise minimal SaaS, quiet productivity: Linear, Vercel, Cal.com, Notion.
• Developer dark, code-first, infrastructure: Supabase, Resend, Expo, Cursor, Warp, HashiCorp.
• Friendly workspace, colorful structured data: Airtable, Figma, Miro, Intercom.
• Fintech trust or trading urgency: Stripe, Coinbase, Wise, Revolut, Binance, Kraken.
• Luxury black, high-performance, dramatic editorial: BMW, BMW M, Ferrari, Lamborghini, Bugatti, SpaceX.
• Editorial/media density: WIRED, The Verge, Pinterest.
• Retail/lifestyle and image-led commerce: Nike, Shopify, Starbucks, Airbnb.
• AI cinematic or model platform: Claude, Mistral AI, Cohere, ElevenLabs, Runway, Together AI, xAI.

For hybrid prompts, combine references deliberately:

• "Linear + Airbnb" means precise structure with warmer surfaces, not a 50/50 visual mashup.
• "Stripe + Nike" means gradient sophistication plus bold campaign scale, not both brands' colors at full volume.
• "Notion + Supabase" means warm content hierarchy with developer-oriented dark/code surfaces.

Quality Bar Before Delivery

Before claiming the work is done, check:

• The chosen getdesign references are named in your notes or final summary.
• The HTML is original and does not impersonate the reference brand.
• CSS uses tokens instead of scattered one-off values.
• Typography has a clear hierarchy and does not default to generic Arial/Inter unless the reference requires it.
• Interactive elements have visible hover/focus states and 44px+ hit targets.
• Mobile layout has no horizontal overflow and no text overlap.
• Motion respects prefers-reduced-motion.
• The first viewport is the actual usable/design experience, not a meta description of the skill.

Output Pattern

When returning results, keep it concise:

• Mention the selected reference(s) and why they fit.
• Provide the absolute path to the generated HTML file.
• Mention verification performed, or state what could not be verified.

If you also wrote a DESIGN.md or downloaded a catalog reference, include its absolute path.