design system for AI agents

Your design system.
Readable by AI.

One design.md file. Every page your AI generates stays on-brand, automatically.

Browse Templates How it works

The problem

AI ignores your design system

Without design.md

$ claude "Build a settings page"

→ Using random fonts...

→ Picking arbitrary colors...

→ Inconsistent component patterns...

→ You: spend 30 min fixing it

With design.md

$ claude "Build a settings page"

✓ Reading design.md...

✓ Applying your color tokens...

✓ Using your component patterns...

→ Ship it.

3 steps

Dead simple setup

1

Pick a template

Browse our curated library of design.md templates. SaaS, e-commerce, dev tools, and more.

2

Drop it in

Place design.md in your project root. Customize if needed — it's just Markdown.

3

Build with AI

Every AI-generated page reads your design system first. Consistent, on-brand UI — automatically.

$ npx skills add stylebase

✓ Stylebase skill installed

Every UI request now reads design.md first

The format

What's in a design.md

A structured Markdown file covering everything an AI agent needs to generate consistent UI.

Identity

Brand name, personality, tone

Colors

Primary, semantic, neutrals with hex

Typography

Font families, scale, weights

Spacing

4px base, 8-step scale system

Components

Buttons, inputs, cards, navigation

Layout

Grid, max widths, breakpoints

Motion

Duration, easing curves

Rules for AI

Always/never directives

Like tailwind.config.js for CSS, or .eslintrc for JS — but for your AI agent.

Library

design.md Templates

Curated design systems for every category. Pick one, drop it in, start building.

Minimal SaaS

SaaS

Clean, white, soft borders

Dev Tool Dark

Developer

Dark, monospace accents, terminal precision

Warm Commerce

E-commerce

Earthy tones, rounded, product-first

Editorial

Blog

Serif display, generous whitespace

Bold Landing

Marketing

High contrast, large type, motion-ready

Japan EC

E-commerce

Dense, precise, eastern grid sensibility

Dashboard Pro

Dashboard

Data-dense, neutral, accessible

Indie App

App

Playful, colorful, approachable

Enterprise B2B

Enterprise

Structured, blue-toned, trustworthy

Dark Premium

Luxury

Deep surfaces, refined, luxury

Open Source