Edit design tokens visually. Your running app updates live through HMR. Claude Code modifies components through MCP.
Try it now — change a token value on the right and watch the component update instantly
Everything you need to author, edit, and ship a production component library.
All styles controlled through design tokens. Saddle enforces consistency and auto-suggests tokenization for raw values.
design.md frontmatter gives AI explicit metadata: when to use components, constraints, and best practices.
Bidirectional MCP server. Claude reads schemas, updates tokens, creates variants. One-click setup.
Embed your running localhost inside Saddle. Edit tokens, file writes to disk, your real app updates via HMR.
Chrome DevTools-style element tree with computed styles per element. Click to see and edit any property.
One-click build with conditional exports, CSS Modules, global tokens.css, DTCG format.
Works with any React component library.
Auto-detects components and parses design.md frontmatter.
Auto-detects localhost. Your running app appears inside Saddle.
Figma-style inspector. Changes save to disk and HMR updates your app.
One-click MCP. Claude reads schemas, updates tokens, creates variants.