Design MD Generator

Generate structured DESIGN.md files from any website URL. The output follows the Google Stitch DESIGN.md format with 9 standard sections.

Workflow

Step 1: Capture the site

Use the browser tool to load the target URL and take a screenshot:

browser action=navigate url="<TARGET_URL>"
browser action=screenshot
browser action=snapshot

Step 2: Extract CSS tokens

Run the extraction script to pull all design tokens from the page's computed styles:

# From the skill directory
node {baseDir}/scripts/extract-tokens.js "<TARGET_URL>"

The script outputs a JSON file with:

• All unique colors (background, text, border, accent)
• Font families, sizes, weights, line-heights, letter-spacing
• Border radii, shadows, spacing values
• Component patterns (buttons, cards, inputs)

Step 3: Generate DESIGN.md

Using the extracted tokens + screenshot for visual context, write a DESIGN.md with these 9 sections:

Writing Guidelines

• Be specific: Use exact hex values, px sizes, font weights — not "dark blue" or "large text"
• Be opinionated: Describe the atmosphere like a design critic, not a spec sheet
• Name colors semantically: "Lobster Coral" not "Red 1", "Deep Sea" not "Background Dark"
• Include states: Every interactive component needs default + hover + active + focus states
• Show hierarchy: List surfaces from darkest to lightest, text from brightest to dimmest
• Agent-ready prompts: Write Section 9 prompts that another AI agent can copy-paste to build matching UI

Output

Save the generated file as DESIGN.md in the target location specified by the user.

Optionally generate:

• preview.html — A visual catalog page showing color swatches, type scale, and component samples
• preview-dark.html — Same catalog on dark surface

Reference

See references/format-spec.md for the complete section-by-section format specification with examples.

See references/example-linear.md for a high-quality example (Linear's DESIGN.md).