design system for AI agents
Your design system.
Readable by AI.
One design.md file. Every page your AI generates stays on-brand, automatically.
The problem
AI ignores your design system
Every config has a file — .eslintrc,
tsconfig.json — except design intent.
$ claude "Build a settings page"
→ Using random fonts...
→ Picking arbitrary colors...
→ Inconsistent component patterns...
→ You: spend 30 min fixing it
$ claude "Build a settings page"
✓ Reading design.md...
✓ Applying your color tokens...
✓ Using your component patterns...
→ Ship it.
3 steps
Dead simple setup
Install the skill
One command adds Stylebase to your AI agent. Works with Claude Code, Cursor, Windsurf, and Gemini CLI.
Pick a template
Choose from 3 production-grade design.md templates. SaaS, developer tools, or e-commerce.
Build with AI
Every AI-generated page reads your design system first. Consistent, on-brand UI — automatically.
Library
design.md Templates
Production-grade design systems. Pick one, drop it in, start building.
The format
What's in a design.md
A structured Markdown file covering everything an AI agent needs to generate consistent UI.
Identity
Name, description, personality
Colors
18 tokens with hex values
Typography
Font families, 8-step scale
Spacing
4px base, 13-step scale
Components
Button, input, card specs
Radius
none → sm → md → lg → full
Extensions
x-stylebase versioning
AI Rules
Always/never directives
Stop fixing
AI-generated UI.
Install the Stylebase skill. Every UI request reads your design.md first.
$ npx skills add stylebase
✓ Stylebase skill installed
Every UI request now reads design.md first