---
name: awesome-design-md
description: 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:

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

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

If needed, list the available slugs with:

```powershell
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`