A free, local-first visual editor for designers to craft code in real React codebases
MCP server connecting AI agents to your design system with live tokens and code linting
Stage
Startup
Not given
Founded
Not given
Not given
Based in
US
Not given
Pricing model
Freemium
Freemium
Pricing
Free self-hosted version available on GitHub. For Teams: Custom pricing tailored to your team's needs. Contact us or book a demo.
Free: one design system with limited component pulls. Pro: $15/month per seat ($12 billed yearly). Team: $25/month per seat ($20 billed yearly). Studio: $39/month per Genome ($31 billed yearly).
Key features
Real-time visual editing of React components
Infinite canvas design interface
Real-time collaboration on code
Works with existing React projects and Storybook
MCP server connection for Claude Code, Cursor, VS Code and other AI agents
Design system bootstrap from text prompt, website URL, Figma file or screenshot
Token and component editor with live publishing
Code linting against design system specifications
Export to CSS, SCSS, Tailwind, Tokens Studio JSON and Figma variables
Figma integration with OAuth and plugin support
GitHub integration for pushing design system updates
Website CSS scanning and analysis
Change proposals and human review workflow
Rate-limited stateless HTTP API with 120 calls per minute
What makes it different
Code is the source of truth—no design drift from implementation
Works directly in real codebases with existing design systems
AI-assisted design generation that understands React architecture
Open-source and transparent to the development community
Live tokens on every AI generation instead of stale rules files
Supports all major AI coding agents: Claude Code, Cursor, VS Code, Claude, Codex, Windsurf and Figma's agent
Human review required for all changes; nothing auto-applied
Design systems remain yours to use in client work and commercial products
Bootstrap from text, website, Figma or screenshot; no manual token creation needed
Onlook
Flash DSM