Agent skill · design visual · aradotso
awesome-design-md
awesome-design-md — an agent skill for coding agents.
Why this skill is useful
Provides a curated set of design tokens and guidelines that enable AI agents to generate UI consistent with popular design systems.
What it needs
Requires curl, git installed locally. About 8k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
bash git clone https://github.com/VoltAgent/awesome-design-md.git bash Example: Vercel design system curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/vercel/DESIGN.md Example: Stripe design system curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/stripe/DESIGN.md Example: Linear design system curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/linear.app/DESIGN.md awesome-design-md/ └── design-md/ └── <site-name>/ ├── DESIGN.md # The design system (what agents read) ├── preview.html # Visual catalog — light surfaces └── preview-dark.html # Visual catalog — dark surfaces bash Pick a style that matches your target aesthetic cp awesome-design-md/design-md/vercel/DESIGN.md ./DESIGN.md Build me a landing page hero section. Follow the DESIGN.md in the project root for all styling decisions. Create a dashboard layout. Use DESIGN.md for colors, typography, and component patterns. Implement a pricing table component. Refer to DESIGN.md for the design system. html <!-- The agent will infer these styles from DESIGN.md --> <button class="btn-primary">Deploy</button> <style> / Agent generates this from Vercel DESIGN.md tokens / .btn-primary { background-color: #000000; / --color-foreground / color: #ffffff; / --color-background / font-family: 'Geist', sans-serif; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; transition: opacity 0.2s ease; } .btn-primary:hover { opacity: 0.85; } </style> html <!-- After: cp design-md/stripe/DESIGN.md ./DESIGN.md --> <!-- Prompt: "Create a pricing card. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/awesome-design-md