DESIGN
drag me COLOR
SKILLS

A curated repo of DESIGN.md files — attach one to any AI agent and get brand-specific, atmospheric UI instead of generic slop.

Star on GitHub Browse Skills ↓
HOW IT WORKS
01

Browse the Collection

Explore 16+ brand design systems — from Apple to SpaceX. Each file captures the real visual DNA of the brand.

02

Attach to Your Agent

Drop the .md into Claude, Cursor, vO, or Gemini. It becomes the agent's complete visual blueprint.

03

Prompt & Build

Ask for any component or page. The AI generates cohesive, on-brand UI — no more grey boxes or stock fonts.

04

Ship It

Take the production-ready, beautifully styled code and drop it straight into your project. Done.

THE COLLECTION

Design Skills

FILE ANATOMY

Every file has
9 layers.

Each section answers a specific design decision — from why it looks this way to exact pixel values for every component state.

01
Visual Theme & AtmospherePhilosophy and brand attitude
02
Color Palette & RolesHex values with semantic meaning
03
Typography RulesFont families, scale, weight, tracking
04
Component StylesButtons, cards, inputs — all states
05
Layout PrinciplesSpacing scale, grid, whitespace
06
Depth & ElevationShadow system and surface hierarchy
07
Do's & Don'tsDesign boundaries and anti-patterns
08
Responsive BehaviorBreakpoints and touch targets
09
Agent Prompt GuideReady-to-use component prompts
MISSING A BRAND?

Request a
Design File.

Don't see your favorite brand? Submit a request — great suggestions get built first.

+ Linear + Framer + Stripe + Airbnb + Shopify + Discord

Submissions reviewed periodically. No spam, ever.

✓

Request received!

Thanks — will review your suggestion soon.