design-md-creator - SKILL.md Agent Skill

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: 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:

DESIGN_MD_SPEC.md — the full 9-section specification (field schemas, table formats, naming conventions, quality tiers)
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.