awesome-design-md

name: awesome-design-md description: Use when the user wants a DESIGN.md file, wants a frontend to match a known product aesthetic like Vercel, Linear, Notion, Stripe, or Apple, or wants to browse and install the local awesome-design-md template library backed by the official getdesign package.

Awesome Design MD

Overview

This skill installs and applies locally vendored DESIGN.md templates from the official getdesign package. Use it for frontend redesigns, landing pages, dashboards, or component work when the user wants a specific brand-inspired visual system or asks for a DESIGN.md.

When to use this skill

The user asks for a DESIGN.md.
The user asks to make a page look like a known product or brand.
The user wants a curated design direction before you implement UI.
The user wants to browse, list, or install templates from the awesome-design-md library.

Core workflow

1. Pick the right template

If the user names a brand, resolve it with python scripts/apply_template.py list.
If the user describes a vibe instead of a brand, shortlist 2-4 candidates from references/templates/manifest.json and explain the tradeoffs briefly.
Do not load every template into context. Read only the chosen template file from references/templates/<brand>.md.

2. Install `DESIGN.md` into the target project

Run python scripts/apply_template.py install <brand> --project <project-root>.
By default this writes <project-root>/DESIGN.md.
Do not overwrite an existing DESIGN.md unless the user explicitly wants replacement or you pass --force.

3. Use the template during implementation

Read the installed DESIGN.md before changing UI.
Treat the template as directional guidance, not a reason to break product semantics, accessibility, or the existing information architecture.
Preserve an established design system unless the user asked for a stronger visual reset.

4. Refresh upstream when needed

Run python scripts/sync_upstream.py from this skill directory to refresh:
- the GitHub mirror of VoltAgent/awesome-design-md
- the official getdesign npm package snapshot
- the locally vendored template set in references/templates/

Fast selection guide

Developer infra and precise monochrome: vercel, hashicorp, replicate, warp, ibm
Minimal SaaS and productivity: linear.app, notion, mintlify, cal
Dark AI and builder products: claude, cursor, supabase, raycast, resend
Motion-heavy or marketing-forward: framer, stripe, clay, spotify, renault
Editorial or luxury: apple, tesla, ferrari, bugatti, airbnb

Local resources

Template manifest: references/templates/manifest.json
Actual templates: references/templates/*.md
Upstream GitHub snapshot: references/upstream/github-repo/
Upstream getdesign package snapshot: references/upstream/getdesign-package/
Source metadata from the last sync: references/upstream/sources.json

Commands

python scripts/apply_template.py list
python scripts/apply_template.py install vercel --project /path/to/app
python scripts/apply_template.py install linear --project /path/to/app
python scripts/apply_template.py install stripe --out /path/to/app/docs/DESIGN.md
python scripts/sync_upstream.py

Notes

The GitHub repository currently mirrors template entries but not the full template bodies, so the official getdesign npm package is the authoritative source for actual template content.
The install script supports aliases such as linear -> linear.app, mistral -> mistral.ai, and xai -> x.ai.