61 lines
2.5 KiB
Markdown
61 lines
2.5 KiB
Markdown
---
|
|
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`
|