QR-master/.codex-temp/awesome-design-md-SKILL.md

name, description

name

description

awesome-design-md

Use VoltAgent's awesome-design-md collection when the user wants UI inspired by a specific brand or asks for a DESIGN.md reference, visual system, or brand-style implementation such as Stripe, Linear, Vercel, Claude, or Supabase. Resolve the brand slug from the installed `design-md/` folder, fetch the matching `getdesign.md` design document for that slug, and apply it as the design-system reference for implementation.

Awesome DESIGN.md

Use this skill to turn the installed awesome-design-md collection into a practical design reference workflow.

The local design-md/ directory is the index of supported brand slugs. Its per-brand README.md files are only pointers. The actual design-system document lives at:

https://getdesign.md/<slug>/design-md

Workflow

1. Identify the target brand or closest visual reference.
2. Resolve the brand slug from the local design-md/ folder.
3. Prefer exact folder names for dotted brands such as linear.app, mistral.ai, opencode.ai, together.ai, and x.ai.
4. Fetch https://getdesign.md/<slug>/design-md.
5. Use the fetched document in one of two ways:
   • write or update the project's root DESIGN.md
   • keep it as an external design reference while implementing UI
6. Preserve the user's product semantics and content model. Borrow visual language, spacing, typography, motion, and component patterns, not product-specific copy.

Local Source Of Truth

Use the installed folder below to confirm which slugs exist before fetching:

C:\Users\a931627\.claude\skills\awesome-design-md\design-md

If needed, list the available slugs with:

Get-ChildItem -Name C:\Users\a931627\.claude\skills\awesome-design-md\design-md

Practical Rules

• Treat DESIGN.md as a visual system reference, not as code to mirror verbatim.
• If the user asks for "something like X, but lighter, warmer, or more minimal", adapt the reference instead of cloning it literally.
• If multiple brands fit, choose the closest one and state the choice.
• If a slug is missing locally or the remote fetch fails, pick the nearest available brand or ask the user for a replacement target.
• When working inside an existing design system, merge the borrowed visual cues with the established component structure instead of replacing everything.

Common Slug Examples

• stripe
• vercel
• claude
• cursor
• supabase
• linear.app
• mistral.ai
• opencode.ai
• together.ai
• x.ai