awesome-design-md - SKILL.md Agent Skill

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.