# Awesome Design Md

> Use curated DESIGN.md references from VoltAgent/awesome-design-md for brand/style inspiration, design-system drafting, frontend visual direction, UI mood matching, promptable design docs, or copying an existing reference DESIGN.md into a project. Trigger when user mentions DESIGN.md, Google Stitch design docs, "make it like a known brand", "use a design reference", "brand style guide", "visual system inspiration", or asks for Apple, Stripe, Linear, Vercel, Notion, or similar design language. Always adapt references without cloning brand identity or violating project AGENTS constraints.

- Skill: `maybackcompany/awesome-design-md` (Agent Skill, multi-file: 147 files)
- Install (CLI): `npx skillmds@latest add maybackcompany/awesome-design-md`
- Raw SKILL.md: https://api.skillmd.com/api/skills/maybackcompany/awesome-design-md/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: MaybackCompany (https://skillmd.com/u/maybackcompany)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/maybackcompany/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:

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

Search catalog:

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

Show reference path:

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

Copy a reference into current project:

```bash
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:

```markdown
**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.