From the docs/ directory, read the specified company's DESIGN.md and present the design system in a structured way to the user or provide it for an AI agent to use.
File structure of each brand directory
docs/<slug>/
├── DESIGN.md ← 主设计系统文档（必读）
├── README.md ← 简短说明
├── preview.html ← 亮色预览页
└── preview-dark.html ← 暗色预览页
Full list of available brands (60)
AI & Machine Learning：claude, cohere, elevenlabs, minimax, mistral.ai, ollama, opencode.ai, replicate, runwayml, together.ai, x.ai
Developer Tools：cursor, expo, linear.app, lovable, mintlify, posthog, raycast, resend, sentry, supabase, superhuman, vercel, warp, zapier
Infrastructure & Cloud：clickhouse, composio, hashicorp, mongodb, sanity, stripe
Design & Productivity：airtable, cal, clay, figma, framer, intercom, miro, notion, pinterest, webflow
Fintech & Crypto：coinbase, kraken, revolut, wise
Enterprise & Consumer Goods：airbnb, apple, ibm, nvidia, spacex, spotify, uber
Automotive Brands：bmw, ferrari, lamborghini, renault, tesla
Consulting Services：scrum-alliance, uperform
Workflow
Step 1: Normalize keywords → directory slug
| User may input | Corresponding directory slug |
|---|---|
| mistral / mistral ai | mistral.ai |
| together / together ai | together.ai |
| opencode | opencode.ai |
| linear | linear.app |
| xai / grok | x.ai |
| cal / cal.com | cal |
| lambo / lamborghini | lamborghini |
| anthropic | claude |
| runway | runwayml |
| Other brands | Directly lowercase, remove spaces |
Step 2: Read DESIGN.md
cat docs/<slug>/DESIGN.md
If the slug does not exist, first perform a fuzzy search:
ls docs/ | grep -i "<keyword>"
If there are still no results, list the complete brand list and recommend the most similar option.
Step 3: Structured presentation
After reading, organize the output in the following order:
- One-sentence brand summary — design philosophy and overall atmosphere
- Color system — primary/secondary/background colors, with hex values
- Typography specifications — font family + type scale hierarchy
- Core component styles — button, card, input field states
- Layout and spacing — grid, spacing scale, whitespace philosophy
- Design Do's & Don'ts — core specifications and anti-patterns
- Agent Prompt fragment — a quick reference that can be pasted directly for AI use
Step 4: Ask about follow-up needs
After presenting, proactively ask:
- Do you need to generate UI components or pages based on this design system?
- Do you need to output the contents of DESIGN.md in a reusable format?
Error handling
| Situation | Handling method |
|---|---|
| Slug does not exist | Fuzzy match + list the complete brand table |
| DESIGN.md missing | List existing files in the directory |
Usage examples
User: Look up Spotify's design
→ cat docs/spotify/DESIGN.md → Show specifications such as vivid green #1DB954, dark background, Circular font, etc., and the preview file
User: Help me make a login page in Vercel style
→ First read docs/vercel/DESIGN.md → extract the design → generate a login page that fits the black-and-white precise aesthetic
User: Show me Mistral's colors
→ slug maps to mistral.ai → cat docs/mistral.ai/DESIGN.md → show the purple palette