design-systems:create

Create Design System

Generate a complete, opinionated DESIGN.md from a short description.

Input

The user provides a short description of the desired aesthetic direction. Examples:

• "dark editorial for a privacy-focused developer tool"
• "warm minimal for a recipe app"
• "brutalist for a crypto exchange"

If no description is provided, ask for one:

question: "Describe the design direction in a few words"
options:
  - label: "Dark editorial"
    description: "Moody, magazine-inspired, serif-forward"
  - label: "Clean minimal"
    description: "Extreme reduction, one accent color, invisible UI"
  - label: "Bold brutalist"
    description: "Hard edges, high contrast, raw structure"
  - label: "Warm organic"
    description: "Natural textures, warm palette, flowing forms"

Generation Flow

Step 1: Load References

Read these files before generating anything:

• ${CLAUDE_SKILL_DIR}/references/anti-slop.md — patterns to avoid
• ${CLAUDE_SKILL_DIR}/references/aesthetic-seeds.md — non-default starting directions
• ${CLAUDE_SKILL_DIR}/references/design-md-schema.md — strict output schema

Step 2: Select Aesthetic Seed

Based on the user's description, select the most appropriate seed from aesthetic-seeds.md. The seed provides:

• Font pairing candidates (display + body + mono)
• Color derivation strategy
• Spatial philosophy
• Elevation approach
• Natural prohibitions

The seed is a starting direction, not a template. Adapt and build on it based on the user's specific needs. Combine elements from multiple seeds if the description warrants it.

Step 3: Generate DESIGN.md

Follow the strict schema from design-md-schema.md exactly. Generate all 7 sections with all required subsections.

Anti-Slop Enforcement — CRITICAL:

For EVERY design decision, cross-check against anti-slop.md. This is not optional. The following checks are mandatory:

Section	Anti-Slop Checks
Typography	No Inter, Roboto, Open Sans, Lato, Arial as primary. Weight contrast must be extreme (not 400 vs 600). Size jumps 3x+ between levels.
Colors	No purple/indigo gradient defaults. No pure #000000 or #ffffff. Palette has one dominant + sharp accent, not evenly distributed. No cyan-on-dark neon default.
Layout	Prohibitions must ban at least one layout anti-pattern. No uniform spacing throughout.
Shadows	No box-shadow: 0 4px 6px rgba(0,0,0,0.1). All shadows hue-tinted or otherwise distinctive.
Components	No border-radius: 8-12px + generic shadow combo. No left-border accent on all cards. Button hierarchy (primary/secondary/tertiary) must be visually distinct.
Do's/Don'ts	Must include relevant AI Slop checklist items as Don'ts.