design-skill

---

name: design-skill description: Use when the user wants to BUILD a UI (page, component, dashboard, landing, app) and explicitly references a recognizable brand's visual style — for example "make it look like claude.com", "Apple-style settings panel", "Stripe-clean pricing page", "Linear-style empty state". Also triggers on Chinese requests like "按 X 风格做 / 仿 X 的设计 / 像 X 一样". The skill orchestrates a three-step workflow: (1) load the matching DESIGN.md spec from this skill's references/ (claude + apple are bundled; 71 more available via fetch_design.sh from VoltAgent/awesome-design-md), (2) layer accessibility / touch / responsive rules from ui-ux-pro-max if installed, (3) layer anti-slop implementation patterns from minimax-skills:frontend-dev if installed. The bundled DESIGN.md files are full design-token specs (~30-37k chars each, 11 sections covering color / typography / layout / components / responsive). Use this whenever the user names a specific brand or product as the visual target, even if they don't say "DESIGN.md" — the brand reference is the trigger. Do NOT use for generic "build a nice UI" requests with no brand named. user-invocable: true allowed-tools: Read, Write, Edit, Bash, Glob, Grep

design-skill

Take a user's "build X that looks like " request and produce code that actually matches, by combining three sources:

1. Brand visual spec — DESIGN.md for that brand (color / typography / components / do's-don'ts)
2. Universal UX rules — accessibility, touch targets, responsive behavior (via ui-ux-pro-max if available)
3. Implementation anti-patterns — React/CSS pitfalls to avoid (via minimax-skills:frontend-dev if available)

Each source alone is incomplete. DESIGN.md tells you the look but not the rules. UX rules tell you what's correct but not what's beautiful. Frontend-dev tells you how to write code but not what to draw. Combined, you get a real, usable design.

Step 0 — Identify the brand

Parse the user request for an explicit brand / product reference:

Phrase pattern	Brand to load
"like claude", "claude.com style", "Claude 风格", "warm editorial"	claude
"like apple", "iOS-style", "Apple HIG", "Cupertino", "Apple 风格"	apple
"like X" (any other brand from awesome-design-md)	bash scripts/fetch_design.sh X to pull on demand

Bundled (no fetch needed): references/claude.md, references/apple.md.

If user names a brand NOT in this skill's references/ folder, run:

bash scripts/fetch_design.sh <brand-slug>

The script downloads from https://github.com/VoltAgent/awesome-design-md/main/design-md/<slug>/DESIGN.md and saves to references/<slug>.md for future reuse. See references/AVAILABLE.md for the full list of 73 brands.

If the user does NOT name a specific brand — don't use this skill. Fall back to minimax-skills:frontend-dev for generic UI work.

Step 1 — Read the DESIGN.md spec

Read the relevant file from references/<brand>.md. Files are ~25-37k chars, 11 H2 sections:

1. Overview (atmosphere, traits)
2. Colors (tokens: brand, surface, text, semantic)
3. Typography (font family + scale)
4. Layout (spacing + container + whitespace)
5. Elevation & Depth (shadows / tonal)
6. Shapes (radius scale + imagery rules)
7. Components (nav, buttons, cards, inputs, badges, footer specs)
8. Do's and Don'ts
9. Responsive Behavior
10. Iteration Guide
11. Known Gaps

Pay particular attention to §2 Colors, §7 Components, §8 Do's and Don'ts.

Step 2 — Layer UX rules (optional but recommended)

If ui-ux-pro-max:ui-ux-pro-max skill is available in available_skills, invoke it via the Skill tool with the user's task. It returns:

• Touch target sizes (≥ 44pt iOS / 48dp Android)
• Color contrast minimums (4.5:1 body, 3:1 large)
• Focus state rules
• Reduced motion handling
• Loading/empty/error states required

These rules override anything in DESIGN.md that would violate them (e.g., if DESIGN.md shows a 12px button but ui-ux-pro-max requires 44px touch target, use 44px).

If ui-ux-pro-max not installed, apply the built-in checklist:

• Body text ≥ 16px
• Interactive elements ≥ 44×44px (mobile) / 32×32px (desktop with mouse)
• Color contrast 4.5:1 for text, 3:1 for large/UI
• Visible focus ring on every interactive element
• prefers-reduced-motion respected on all animations
• Loading / empty / error states for every async region

Step 3 — Apply frontend-dev anti-slop (optional but recommended)

If minimax-skills:frontend-dev is available, invoke it. Otherwise, follow these built-in rules:

Anti-pattern	Replacement
Emoji as icons (🚀 ⚙️ 🎨)	Inline SVG sprite (Lucide / Phosphor / Heroicons style, 1.5-2px stroke)
Animating width / height / top / left	Only animate transform / opacity / filter / clip-path
useState for continuous mouse-follow animations	Use useMotionValue / useTransform (Framer) or CSS transform directly
Inter font	Use Geist / Outfit / Satoshi (or the brand's specified font)
Pure black #000 on light bg	Use #1c1917 / #0f172a style near-blacks
3-column equal card grids (Bento default)	Use border-t / divide-y / asymmetric splits
Default unstyled shadcn/ui	Customize tokens and spacing
Centered hero when variance > 4	Force split-screen or asymmetric
Placeholder URLs (unsplash / picsum / placeholder.com)	Generate / supply real assets

Step 4 — Synthesize and produce code

With the three sources in hand, produce the requested UI:

1. Use the DESIGN.md color tokens by name (e.g., bg-surface.panel, text-text.primary). Don't inline hex; use CSS custom properties or Tailwind aliases.
2. Use the DESIGN.md typography tokens for font-size + weight + line-height.
3. Use the DESIGN.md component specs for padding / radius / heights.
4. Apply UX rules (touch / contrast / focus) wherever brand spec is ambiguous or violates accessibility.
5. Follow frontend-dev anti-slop for implementation choices.
6. State explicitly which DESIGN.md / brand was loaded at the top of your output.

Output template

# Output: <component name>, <brand> style

> Source: design-skill / references/<brand>.md  (DESIGN.md §§ used: 2,3,7,8)
> UX layer: ui-ux-pro-max  /  built-in checklist
> Impl: minimax-skills:frontend-dev  /  built-in anti-slop

[CODE: HTML / React / Vue / whatever the user asked for]

## Design rationale

- **Color**: I used <token names> from the spec for <reason>
- **Typography**: <font + scale tokens used>
- **Components**: <specs followed>
- **Accessibility**: <touch / contrast / focus decisions>

Adding a new brand

If you need a brand not bundled (and not in upstream awesome-design-md):

1. Check the available list:

   cat references/AVAILABLE.md
   

2. If it's there, fetch:

   bash scripts/fetch_design.sh <slug>
   

3. If it's NOT in upstream (e.g., openai / google), do not hand-fabricate. Tell the user the brand isn't available and suggest the closest match from the list.

Anti-patterns (do NOT do these)

• Mixing two DESIGN.md styles in one output (e.g., Apple typography + Stripe colors) — pick one. If user wants a blend, they need to write their own DESIGN.md.
• Using a brand-name as decoration without loading its DESIGN.md ("I'll make it Apple-style" then producing generic flat design).
• Hand-fabricating a DESIGN.md for a brand not in upstream — produces hallucinated colors. Just tell the user it's unavailable.
• Ignoring DESIGN.md §8 Do's and Don'ts — those are red-line rules from the analyst.
• Using DESIGN.md without UX layer — you'll ship a beautiful inaccessible page.
• Not declaring the source brand at the top of your output — user needs to audit.

See also

• references/AVAILABLE.md — full list of 73 brands available via fetch_design.sh
• scripts/fetch_design.sh — on-demand fetch from upstream
• Upstream: https://github.com/VoltAgent/awesome-design-md
• Preview gallery: https://getdesign.md
• Companion skills (auto-invoked if installed):
  • ui-ux-pro-max:ui-ux-pro-max — UX rules (a11y, touch, responsive)
  • minimax-skills:frontend-dev — implementation anti-slop