| name | awesome-design-md |
| description | Use when designing or implementing UI and the user wants design-system inspiration, DESIGN.md guidance, a style reference from a known product/site, or help choosing/copying/adapting a DESIGN.md from VoltAgent/awesome-design-md. Supports browsing the bundled index and fetching specific DESIGN.md references when needed. |
Awesome DESIGN.md
This skill helps use the VoltAgent awesome-design-md collection as design-system inspiration for UI work.
The repository is not a native Codex skill; it is a curated index of DESIGN.md references inspired by well-known websites and products. Use it as a reference layer when selecting a visual direction, creating a project DESIGN.md, or guiding UI implementation.
Workflow
- Identify the product context and desired UI feel.
- Read
references/awesome-design-md-README.md to find candidate design references by category.
- If a specific reference is needed, inspect
references/design-md-index/<slug>/README.md for its canonical getdesign.md URL.
- If the local reference only points to a URL and the task requires the full DESIGN.md content, fetch the linked
https://getdesign.md/<slug>/design-md page.
- Adapt the reference to the current product; do not copy another product's brand identity directly unless the user explicitly asks for that style study.
- When creating frontend/UI code, translate the reference into concrete tokens: colors, typography, spacing, component shape, elevation, motion, density, and responsive behavior.
Choosing References
Prefer references by product need:
- AI / developer tool:
claude, cursor, vercel, mintlify, replicate, voltagent
- Dense dashboard / technical product:
clickhouse, sentry, posthog, mongodb, ibm
- Polished productivity app:
linear.app, notion, raycast, superhuman, cal
- Friendly consumer product:
airbnb, pinterest, spotify, intercom
- Premium monochrome / cinematic:
apple, spacex, bugatti, tesla
For Android or Material You apps, use these references only for mood and density. Respect the platform's Material 3 interaction patterns unless the user asks otherwise.
Guardrails
- Do not blindly clone a brand's visual identity.
- Do not introduce a one-note palette just because a reference uses one; adapt for the app's domain.
- Prefer a small number of strong design tokens over copying every surface detail.
- If the user already has a design system, treat these references as secondary inspiration.
- If exact DESIGN.md content is not bundled locally, fetch it only when needed and cite the source URL in any design rationale.
Bundled References
references/awesome-design-md-README.md: upstream collection index and usage notes.references/design-md-index/: local mirror of the repo's per-site README links.
