awesome-claude-design
Installation
SKILL.md
Awesome Claude Design
Skill by ara.so — Design Skills collection.
This skill helps you use the awesome-claude-design collection: 68 ready-to-use DESIGN.md files that Claude Design expands into full UI scaffolds with design tokens, components, and working UI kits in a single shot.
What This Project Does
awesome-claude-design is a curated collection of DESIGN.md files extracted from real brands (Claude, Vercel, Stripe, Linear, etc.). Each file describes a complete visual design system in a markdown format that AI design agents can parse and execute.
When you upload a DESIGN.md to Claude Design, it automatically generates:
- Design tokens (colors, typography, spacing) as CSS variables
- Component library (buttons, cards, nav, forms)
- Preview cards showcasing the design system
- Working UI kit (
index.html+ CSS) applying the system SKILL.mdfor reusable design patterns
This skips the blank-page design brief and gives Claude Design a concrete starting point that matches your desired aesthetic.