Agent skill · design visual · aradotso
awesome-claude-design
awesome-claude-design — an agent skill for coding agents.
Why this skill is useful
Provides a library of 68 structured DESIGN.md files that encode brand visual languages, enabling the AI to generate complete design systems directly.
What it needs
About 8k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
markdown Brand Name Design System Overview Brief brand description and personality. Color Palette Primary: #10B981 — Emerald; used for CTAs, active states, highlights Background: #0A0A0A — Void black; base canvas Surface: #111111 — Slightly lifted surface for cards Text Primary: #F5F5F5 — Near-white body copy Text Muted: #6B7280 — Secondary labels and captions Accent: #34D399 — Hover states, borders, focus rings Typography Display: Inter, 700–900 weight, tight tracking (-0.02em) Body: Inter, 400–500 weight, 1.6 line-height Mono: JetBrains Mono, used for code, terminals, data labels Scale: 12 / 14 / 16 / 20 / 24 / 32 / 48 / 64px Spacing Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128px Border Radius Small: 4px (inputs, badges) Medium: 8px (cards, buttons) Large: 16px (modals, panels) Full: 9999px (pills, avatars) Shadows Subtle: 0 1px 3px rgba(0,0,0,0.4) Card: 0 4px 16px rgba(0,0,0,0.6) Glow: 0 0 24px rgba(16,185,129,0.3) Voice & Tone Direct, technical, never corporate. Short sentences. Active verbs. Component Patterns Buttons: Filled primary (emerald bg), ghost (border only), destructive (red) Cards: Dark surface, 1px border, subtle hover lift with glow shadow Navigation: Top bar, logo left, links center, CTA right Code blocks: Monospace font, syntax-highlighted, copy button top-right Do / Don't ✅ Dark backgrounds with high contrast text ✅ Emerald for interactive elements only ❌ Light mode variants ❌ Rounded corners above 16px on cards https://getdesign.md/{brand-slug}/design-md https://getdesign.md/vercel/design-md # Black/white precision, Geist font https://getdesign.md/stripe/design-md # Purple gradients, weight-300 elegance https://getdesign.md/linear.app/design-md # Ultra-minimal, purple accent https://getdesign.md/supabase/design-md # Dark emerald, code-first https://getdesign.md/voltagent/design-md # Void-black, emerald, terminal-native https://getdesign.md/figma/design-md # Vibrant multi-color, playful https://getdesign.md/notion/design-md # War …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/awesome-claude-design