design-md-creator

name	design-md-creator
description	Generate a spec-compliant DESIGN.md file for any brand, product, or project. Produces a 9-section design system document in the getdesign.md format — covering visual atmosphere, color palette, typography, components, layout, elevation, do's/don'ts, responsive behavior, and an agent prompt guide. Use when asked to create, write, or generate a DESIGN.md, design system document, or brand design specification.
argument-hint	<brand-name>
allowed-tools	Read, Write, WebSearch, WebFetch

DESIGN.md Creator

Your task: produce a complete, spec-compliant DESIGN.md for $ARGUMENTS.

Reference files (read these first)

Before writing anything, read:

1. DESIGN_MD_SPEC.md — the full 9-section specification (field schemas, table formats, naming conventions, quality tiers)
2. examples/stripe-DESIGN.md — a full-tier reference showing expected depth, tone, and formatting

Both files are in the same directory as this skill file.

Workflow

Step 1 — Load the spec

Read DESIGN_MD_SPEC.md. Internalize:

• The exact 9 section names and their order
• Table schemas for typography, elevation, and breakpoints
• The color entry format: - **Name** (\#hex`): role description`
• Required prose elements: Key Characteristics bullets, Shadow Philosophy paragraph
• The 13 authoring rules in §9 of the spec

Step 2 — Load the example

Read examples/stripe-DESIGN.md. Note:

• How Section 1 opens with atmospheric prose before the Key Characteristics list
• How Section 3's typography table is structured (Role / Font / Size / Weight / Line Height / Letter Spacing / Notes)
• How Section 4 uses **Bold inline headers** (not ####) for component variants
• How Section 6's elevation table + Shadow Philosophy paragraph work together
• How Section 9's Example Component Prompts are formatted as quoted, specific, technical prompt strings
• The overall depth: ~320 lines, all subsections present, concrete values throughout

Step 3 — Research the brand

For the brand $ARGUMENTS, gather enough context to write specific, accurate values:

• If it's a well-known brand: use your training knowledge of their visual identity
• If you need to verify: use WebSearch or WebFetch to inspect their website
• Target: real hex codes, real font names, real spacing values — never generic placeholders

Key questions to answer before writing:

• What is the primary background color? (near-black, white, off-white, branded?)
• What is the primary accent / CTA color?
• What font(s) do they use? (proprietary, Google Fonts, system?)
• What is the typographic weight signature? (light = 300, bold = 700-900, mixed?)
• What is their border-radius philosophy? (sharp = 0-4px, rounded = 8-16px, pill = 9999px?)
• What is their elevation approach? (shadows, border-opacity, flat?)
• What makes their design unmistakably them? (color combo, type treatment, interaction pattern?)

Step 4 — Load the template

Read template.md. Use it as your structural scaffold — fill every section with real brand-specific content.

Step 5 — Write the DESIGN.md

Produce the complete file. Requirements:

• Title: # Design System Inspired by {BrandName} (exact format)
• All 9 sections present, in order, numbered ## 1. through ## 9.
• Every color value in backticks: `#hex`
• Every font name in backticks: `Inter`
• Typography table: minimum columns Role, Font, Size, Weight, Line Height, Letter Spacing, Notes
• Elevation table: exactly 3 columns — Level, Treatment, Use
• Breakpoints table: 3 columns — Name, Width, Key Changes
• Shadow Philosophy: bold label **Shadow Philosophy**: followed by explanatory prose
• Key Characteristics: 6–9 bullets in element — descriptor format
• Do's and Don'ts: ### Do and ### Don't subsections, 7–9 bullets each
• Iteration Guide: numbered list (not bullets), most important rule first
• Base unit in Section 5: always Base unit: 8px
• Section 9 is always last

Aim for Full Tier quality: ~200–330 lines, all subsections present, concrete values.

Step 6 — Save the output

Write the file to DESIGN.md in the current working directory (or a path the user specifies).

Confirm the output path when done.

Validation checklist

Before saving, verify:

• Title matches # Design System Inspired by {BrandName} exactly
• All 9 sections present with correct heading text
• Section 1 has prose paragraphs + **Key Characteristics:** bullet list (6–9 items)
• Section 2 has ### subsections for color groups; all hex values in backticks
• Section 3 has Font Family, Hierarchy table (7 cols), and Principles subsections
• Section 4 has Buttons, Cards, Navigation subsections with **Bold variant** headers
• Section 5 has Spacing System (Base unit: 8px), Grid, Whitespace Philosophy, Border Radius
• Section 6 has elevation table (Level / Treatment / Use) + **Shadow Philosophy**: paragraph
• Section 7 has ### Do and ### Don't with 7+ bullets each
• Section 8 has Breakpoints table + Touch Targets + Collapsing Strategy + Image Behavior
• Section 9 has Quick Color Reference + Example Component Prompts + Iteration Guide (numbered)
• No placeholder text (no {...}, [...], TODO, TBD, or generic filler)
• No #### headings — use **Bold inline headers** for component variants
• No $ARGUMENTS left unsubstituted in the output

Quality bar

The output should be indistinguishable in format and depth from the files at getdesign.md. An AI agent consuming the DESIGN.md should be able to generate on-brand UI components from Section 9 alone, and use Sections 2–4 for precise styling decisions.

Do not write a summary of what you created. Just write the file and state the output path.