← ClaudeAtlas

awesome-design-mdlisted

73 brand DESIGN.md files from real websites. Drop one into your project to generate consistent, brand-quality UI. Use when building UI that should match a specific design language, when a user references a brand's visual style, or when you need design tokens (colors, typography, spacing, rounded) for production-quality UI generation.
dxkjuanjuan/ui-forge · ★ 3 · Web & Frontend · score 64
Install: claude install-skill dxkjuanjuan/ui-forge
# Awesome DESIGN.md DESIGN.md is a plain-text design system document that AI agents read to generate consistent UI. This skill provides 12 pre-analyzed brand design systems you can reference or drop into a project root. ## How to Use ### Quick Reference When a user wants UI matching a brand's style, read the corresponding `.md` file from `design-md/` and apply its tokens: ``` design-md/claude.md — Warm canvas, serif display, coral CTAs design-md/vercel.md — Black/white precision, Geist font design-md/linear.app.md — Ultra-minimal, purple accent design-md/stripe.md — Purple gradients, weight-300 elegance design-md/figma.md — Vibrant multi-color, playful professional design-md/framer.md — Bold black/blue, motion-first design-md/notion.md — Warm minimalism, serif headings design-md/cursor.md — Sleek dark interface, gradient accents design-md/spotify.md — Dark UI, vibrant green accent design-md/nike.md — Bold typography, sport energy design-md/apple.md — Clean minimalism, SF Pro, spacious design-md/tesla.md — Stark futuristic, red accent ``` ### Drop into Project For persistent design guidance, copy a DESIGN.md to the project root: ```bash cp ~/.claude/skills/awesome-design-md/design-md/<brand>.md ./DESIGN.md ``` ### Apply Tokens Each DESIGN.md contains structured tokens: - **colors**: primary, ink, body, muted, canvas, surface, accent - **typography**: display, title, body, caption, code scales - **spacing**: section, component, inner s