Design direction for
AI-generated UI
21 style guardrail files that give LLMs the context to build tasteful, consistent interfaces.
What's New
Every style is now a complete design system — not just colors and fonts.
Dark Mode, Responsive & More
Every style now includes dark mode guidance, responsive behavior, content voice, icon direction, and accessibility rules.
Freeform
No prescribed aesthetic — meta-guardrails that teach how to develop your own visual voice and signature element.
One-Command Install
Run npx designbrief to auto-detect your tool and install. Supports Claude Code, Cursor, Windsurf, Copilot, and Codex.
Learn Why, Not Just What
Every style explains the psychology behind its choices — why certain fonts feel trustworthy, why specific spacing creates calm.
Everything you need
Guardrails, not specs. Style direction that lets AI make great design choices.
21 Curated Styles
From Bauhaus to Freeform — each style is a rich design direction file covering typography, color, spacing, and components.
LLM-Native Guardrails
Not pixel specs, but design direction. Define what kind of font, color, and spacing — the AI makes specific choices within the style’s constraints.
Drop-in Skill
Works with Claude Code, Cursor, Codex, Copilot, and more. One command to install, then just ask for UI.
MIT Licensed
MIT licensed — free for any use. Add your own styles, improve existing ones, or use them as-is.
Complete Design Systems
Every style covers dark mode, responsive behavior, content voice, icon direction, and accessibility — not just colors and fonts.
How It Works
Three simple steps to tasteful, consistent UI.
Install
Run npx designbrief — it auto-detects your tool and installs in seconds.
Choose
Pick a style, or describe your project and let the AI recommend one.
Build
The AI applies the style’s guardrails to every UI decision — typography, color, spacing, components.
All 21 Styles
Each style is a complete design direction file. Click any card to preview it live.
Anti-Design
Art Deco
Aurora
Bauhaus
Bento Grid
Claymorphism
Corporate Modern
Dark Mode Premium
Flat Design
Freeform
Glassmorphism
Japandi
Material Design
Minimalism
Neubrutalism
Neumorphism
Organic
Retro-Futurism
Skeuomorphism
Swiss Design
Y2K Revival
Roadmap
Where we've been and where we're going.
Style Enhancement
5 new sections across all 21 styles — dark mode, responsive, content voice, icons, accessibility.
Distribution
npm package with CLI installer, skills.sh and skild.sh support, GitHub Action for publishing.
Showcase
Redesigned showcase with interactive previews, roadmap, and dark mode toggle.
MCP Server
5 tools — palette extraction, contrast checking, design token export, Tailwind config generation, and user feedback. Umami telemetry.
Artifact Generation
W3C DTCG design tokens, Tailwind configs, and CSS custom properties per style.
Custom Styles
AI-generated styles from brand input. Style mixing and blending.
Ecosystem
Visual validation, Figma integration, and community style marketplace.
Get Started
One command. Auto-detects your tool.
npx designbriefOr specify your tool directly:
npx designbrief --tool claudeThen tell your AI assistant which style to use, or let it help you choose one.