Design systems
for AI agents
Each system ships with llms.txt, design tokens, and a shadcn registry. Your AI agent reads the docs, runs one command, and your app has a complete design system.
$ npx shadcn@latest add
https://vibedesign.systems/api/registry/clarity/button
✓ Added clarity-button.tsx
✓ Installed class-variance-authorityHow it works
Three steps from zero to a fully themed app. Works with Claude Code, Cursor, or any AI coding agent.
Agent reads llms.txt
Point your AI agent to /systems/clarity/llms.txt. It gets design tokens, component list, and install commands in plain text.
One-command install
The agent runs npx shadcn@latest add with our registry URL. Components drop into your project with all dependencies.
Build with real design
Every component uses production-quality tokens — colors in oklch, proper typography scales, consistent spacing. No more random Tailwind.
7 design systems, 112 components
Each inspired by world-class websites. Real design tokens, real typography, real spacing systems.
Canvas
16 componentsBold E-commerce
Clarity
16 componentsClean SaaS
Ember
16 componentsWarm Creative
Ledger
16 componentsFinancial Professional
Monograph
16 componentsMinimal Editorial
Obsidian
16 componentsDark Developer
Obsidian Pro
46 componentsDark Developer
Prism
16 componentsVibrant Brand
Built for the AI-first era
Traditional component libraries are designed for humans browsing docs. Our systems are designed for AI agents that read structured text and execute CLI commands.
- ✓llms.txt — structured docs that any LLM can parse
- ✓shadcn registry — one URL, one CLI command, component installed
- ✓Design tokens — oklch colors, type scales, spacing systems
- ✓Production quality — derived from Stripe, Linear, Supabase, and more
# Clarity Design System
> Clean SaaS design system
> inspired by Stripe.
## Design Tokens
- --primary: oklch(0.55 0.17 250)
- --radius: 0.375rem
## Components
### button
Install: npx shadcn@latest add
.../api/registry/clarity/button
### card
Install: npx shadcn@latest add
.../api/registry/clarity/cardStart building with real design
Stop shipping apps with random Tailwind colors. Pick a design system, point your agent at it, and build something beautiful.