Awesome Design Md

Awesome DESIGN.md

Use this skill to select, inspect, or copy curated DESIGN.md references from VoltAgent/awesome-design-md. The bundled catalog contains public website-inspired design docs for many brands and product categories.

Core Rule

Use DESIGN.md files as reference language and structure, not as permission to clone another brand. Translate patterns into the current product's own brand DNA, tokens, and constraints.

Project AGENTS.md, kishi-design-architect, and current user instructions outrank any bundled reference. If a reference suggests purple gradients, heavy blur, slow motion, emoji icons, giant shadows, or other banned patterns, adapt or reject those details.

Bundled Resources

• references/design-md/<brand>/DESIGN.md: source design docs.
• references/source-readme.md: upstream repo overview and collection index.
• references/source-license.txt: upstream MIT license.
• scripts/design_md.py: list, search, show, and copy references.

Quick Commands

List catalog:

python3 ~/.codex/skills/awesome-design-md/scripts/design_md.py list

Search catalog:

python3 ~/.codex/skills/awesome-design-md/scripts/design_md.py search "developer tool dark precise"

Show reference path:

python3 ~/.codex/skills/awesome-design-md/scripts/design_md.py show linear.app

Copy a reference into current project:

python3 ~/.codex/skills/awesome-design-md/scripts/design_md.py copy linear.app ./DESIGN.md

Workflow

1. Identify desired vibe, product category, and project constraints.
2. Run search for broad requests, or show <brand> for named references.
3. Read only the selected DESIGN.md file, not the whole catalog.
4. Extract useful patterns:
   • atmosphere
   • color roles
   • typography hierarchy
   • component rules
   • layout rhythm
   • depth/elevation
   • responsive behavior
   • do/don't guardrails
5. Convert into project-native decisions:
   • use existing tokens when present
   • rename colors semantically
   • preserve current logo/brand identity
   • avoid proprietary brand marks and exact copy
   • keep accessibility and performance constraints
6. When asked to create a DESIGN.md, write a project-specific doc using the selected references as inspiration.
7. When asked to build UI, use the chosen reference as one input, then follow kishi-design-architect and project frontend rules.

Selection Heuristics

• Developer tools: vercel, linear.app, cursor, raycast, warp, supabase, resend, mintlify.
• AI/agent products: voltagent, claude, mistral.ai, together.ai, replicate, runwayml.
• Enterprise/SaaS: airtable, notion, intercom, hashicorp, ibm, mongodb.
• Fintech: stripe, wise, coinbase, revolut, mastercard.
• Consumer/editorial: apple, nike, spotify, wired, theverge, pinterest.
• Luxury/automotive: bugatti, ferrari, lamborghini, bmw, tesla.

Prefer references by product fit, not fame. For Quasar/FiveM education, usually start with developer-tool clarity (vercel, linear.app, mintlify) plus academy/community warmth (notion, intercom), then adapt to Quasar identity.

Output Pattern

When using this skill, include:

**Reference Chosen**
- name:
- why:
- source path:

**Adaptation Rules**
- keep:
- change:
- reject:

**Project DESIGN.md / UI Direction**
- tokens:
- typography:
- components:
- layout:
- motion:
- accessibility:

For code work, final response should stay concise: files changed, reference used, adaptation choices, verification.

Guardrails

• Do not copy another brand's logo, trademarked assets, exact marketing copy, or proprietary identity.
• Do not import raw brand palettes into components when project tokens exist.
• Do not treat reference docs as truth for current project accessibility or performance.
• Do not load multiple large references unless comparison is necessary.
• Do not add this catalog wholesale to app output; use it as internal design guidance.