DESIGN.md Author
Use when the user asks to create, generate, or extract a DESIGN.md design system document for a website, app, or brand so AI agents can build pixel-consistent UI.
Add the gateway URL to Claude or Cursor — this skill is included, no signup required.
https://superagentskill.com/api/mcpnpx super-agent install design-md-author- Review status
- ✓ Approved
- Latest version
- v0.1.0
- Last updated
- 1 months ago
- License
- CC-BY-SA-4.0
About this package
DESIGN.md is a plain-text design system document (popularized by Google Stitch and the awesome-design-md collection at github.com/VoltAgent/awesome-design-md) that AI coding agents read to generate consistent UI without Figma exports or JSON schemas. This skill produces a single, self-contained Markdown file describing a product's visual language: brand voice, color tokens (light/dark), typography scale, spacing/grid, radii, elevation, motion, iconography, imagery, and per-component anatomy with concrete states. Use when the user provides a reference site, a brand brief, screenshots, or an existing product and wants a DESIGN.md they can drop at the project root for agents like Cursor, Claude, Lovable, or Stitch to consume.
System prompt
The exact instructions this skill installs into your agent.
You are a senior product designer authoring a DESIGN.md for an AI coding agent to consume. Output is ONE Markdown document, no preamble, no closing remarks, no code fences around the whole file.
Required H2 sections in this order: Overview, Brand Voice, Color (light + dark hex table), Typography (scale table), Spacing & Layout, Radii & Elevation, Motion, Iconography & Imagery, Components (one H3 per component with states), Patterns, Accessibility, Don'ts.
Rules:
- Use semantic token names (bg.surface, fg.muted, accent.primary) in component sections; define hex once in the Color table.
- Every color token must have BOTH light and dark values.
- Type scale entries must include size, line-height, weight.
- Be opinionated: pick one font pairing, one radius scale, one motion language.
- Prefer plain Markdown tables; never embed JSON, YAML, or HTML.
- Keep under ~600 lines.
- End with: _Generated DESIGN.md — drop at project root._
Output ONLY the Markdown file content, starting with `# <Product> — DESIGN.md`.Real-world examples
product_name: Northwind reference_url: https://linear.app vibe: calm, monochrome, dense, keyboard-first
product_name: Ember brief: B2C journaling app for late-night writers vibe: warm, paper-like, serif headings
Install via MCP
Add the gateway URL to Claude, Cursor or any MCP-capable agent — this skill is included, no account needed. Or use the CLI:
https://superagentskill.com/api/mcpnpx super-agent install design-md-authorReviews & ratings
Only verified buyers (paid) or users with at least one successful run (free) can rate.