awesome-design-md

name	awesome-design-md
description	Create a DESIGN.md style baseline BEFORE building UI. Use FIRST when no design draft exists — installs a proven visual style, then invoke `frontend-design` to implement. For borrowing a known product style, getting consistent typography/colors/spacing, or needing a fast visual starting point.
installCatalogName	awesome-design-md
clients	["codex","claude","gemini","opencode","hermes"]
scopes	["global","project"]
defaultInstall	{"global":true,"project":false}
tags	["general","design","ui","essential"]
repoTargets	["codex","claude","gemini","opencode","hermes"]

Awesome DESIGN.md

Use this skill when you want to apply a proven visual style to a project by adding a DESIGN.md file from the VoltAgent awesome-design-md collection.

Trigger

• User wants UI to look like a known product/site style.
• User asks to add or refresh DESIGN.md for coding-agent UI output.
• User wants consistent typography, colors, spacing, and component styling before UI implementation.
• User has no design稿 and needs a fast, high-quality visual starting point.

Preconditions

• Run from the target project root.
• npx is available.
• If DESIGN.md already exists, decide whether to overwrite (--force) or write to another path (--out).

Workflow

1. List available design slugs:

npx --yes getdesign@latest list

2. Install a selected style:

npx --yes getdesign@latest add <slug>

Behavior:

• First install writes ./DESIGN.md.
• If DESIGN.md already exists, CLI writes ./<slug>/DESIGN.md.

3. Overwrite the active DESIGN.md when required:

npx --yes getdesign@latest add <slug> --force

4. Write to a custom output path (optional):

npx --yes getdesign@latest add <slug> --out ./docs/DESIGN.md

5. Verify output exists and is readable:

ls -la DESIGN.md <slug>/DESIGN.md 2>/dev/null

6. Tell the coding agent to follow the file before UI tasks.

No-Design-Draft Fast Path

When user has no design draft, pick one baseline slug by product intent:

• B2B/SaaS dashboard: linear, vercel, supabase
• Marketing landing page: framer, stripe, notion
• Documentation: mintlify, hashicorp, mongodb
• E-commerce/consumer: airbnb, shopify, nike
• Media/editorial: theverge, wired, spotify

Then run:

npx --yes getdesign@latest add <slug> --force

This gives the agent an explicit style anchor immediately, avoiding generic defaults.

Fuzzy Style Request Mapping

When user only gives a vague style intent, map it to a usable slug quickly:

• 极简专业 / SaaS 感: linear, vercel
• 增长营销 / 品牌展示: framer, stripe
• 文档知识库 / 开发者文档: mintlify, hashicorp, mongodb
• 电商消费 / 商品导向: shopify, airbnb, nike
• 媒体杂志 / 视觉冲击: theverge, wired, spotify

Execution rule:

1. Pick one primary slug from user intent.
2. Install with overwrite for deterministic output:

npx --yes getdesign@latest add <slug> --force

3. If user gives no domain cue, default to linear for generic SaaS web apps.

Prompt Pattern

• Use DESIGN.md as the source of truth for UI decisions in this task.
• Follow color roles, typography hierarchy, spacing scale, and component states from DESIGN.md.
• If a UI decision is unclear, prefer consistency with DESIGN.md over introducing new styles.

Guardrails

• Treat templates as inspiration and implementation guidance, not official brand endorsement.
• Keep accessibility checks (contrast, keyboard focus, touch targets) even when following a template.

Upstream

• Repository: https://github.com/VoltAgent/awesome-design-md
• License: MIT
• CLI usage shown by npx --yes getdesign@latest --help