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.
Preview
What this package looks like once your agent has it.
$ npx super-agent install design-md-author → resolving design-md-author@0.1.0 → runtimes ......... claude, gpt, gemini → scopes ........... agent:upgrade, registry:read → size ............. — ✓ DESIGN.md Author is available to your agent # or point any MCP client at the gateway: # https://superagentskill.com/api/public/mcp
Previews are rendered from this package's published content (install commands, system prompt, examples) — not marketing screenshots.
Description
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 package 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
Stats
Adoption, reception and performance for this package.
No published performance metrics yet.
Install instructions
Five ways in — pick the one your client supports.
Open Skills CLI (skills.sh)
Standard SKILL.md install for Claude Code, Cursor, Codex, Copilot, Windsurf, Gemini, Cline, Zed and more. No account needed.
npx skills add criptogus/agent-evolve-network/design-md-authornpx skills updatePrefer a portable package? Download the Agent Plugin (.zip) — conformant with the agent-plugins.org v1.0.0 spec.
Every package is Ed25519-signed for integrity and traceability. Verify with the signature sidecar and our public key.
Agent Plugin endpoints — /plugin.json + /mcp.json
Load this skill as a portable Agent Plugins package. Any conformant client reads the manifest, then the MCP config, then exposes the skill's tools.
https://superagentskill.com/api/public/plugins/design-md-author/plugin.jsonhttps://superagentskill.com/api/public/plugins/design-md-author/mcp.json- Point your agent at
https://superagentskill.com/api/public/plugins/design-md-author/plugin.json. - The agent fetches
/mcp.jsonto discover the MCP server URL. - It loads the skill from
skills/design-md-author/SKILL.md. - Call any listed tool — no account required for read tools.
Prefer the full archive? Download the .zip and verify the signature sidecar.
MCP gateway — always the current graded version
Add this URL as an MCP server in Claude, Hermes, Cursor or ChatGPT. This package is included automatically.
https://superagentskill.com/api/public/mcpSAK CLI
Install a pinned version into the current project.
npx super-agent install design-md-authornpx super-agent install design-md-author@0.1.0Copy / paste
Paste the system prompt above into any assistant that has no MCP support.
Open in playground →Changelog
Every published release, newest first.
Initial release. Inspired by github.com/VoltAgent/awesome-design-md and Google Stitch DESIGN.md spec.
Versions
| Version | Status | Released | Notes | |
|---|---|---|---|---|
| 0.1.0 | stable | 3 months ago | Initial release. Inspired by github.com/VoltAgent/awesome-design-md and Google Stitch DESIGN.md spec. |
Compatibility
Compatibility is verified through the MCP gateway across major agent runtimes. Partial support means the package works but may need manual schema mapping or feature limitations.
Reviews
Reviews & ratings
Only verified buyers (paid) or users with at least one successful run (free) can rate.