A design update shouldn't cost you a sprint.
Every token change means components updated, pages re-tested, code migrated — a sprint of coordination. Most teams can't spare it, so the system quietly drifts out of date.
Alpha · Free to start
Shape your design system once. Spread it everywhere.
Tostada is the orchestration layer between your design intent and what actually ships — in code, in your team, and in your AI's hands.
Start free
- Shape tokens, layouts, and component rules in one place
- See every change on real components as you make it (shadcn today, more libraries coming)
- Hand developers a committable
design/bundle — CSS, Tailwind theme, JSON, and anAGENTS.mdyour AI follows
Nothing to install. Your work is yours to keep — full export, and documentation that opens offline, forever.
How you leave, if you ever want to →Developers: audit a codebase first
- Runs on your machine and never executes your code. Your code stays put — only the finished report is sent, to a one-time link you claim.
npx @tostada-ui/scan
“We have a design system.” Where, exactly?
Your hand-off lasts about as long as the meeting did.
You spec the components; engineering ships their interpretation. Months later the Figma library and the live product disagree — and you can't fix it, because the file isn't where the code lives.
Your AI writes 80% of your UI — and none of it knows your brand.
Cursor, Claude Code, Codex, v0 — they hallucinate token names and invent variants. They can't read your design system, so every prompt yields a slightly different product.
See what you actually do.
Shape your tokens, components, layout principles, and Application Rules — live.
Every change applies instantly to your component library. What you see is what you'll ship.
Spread your system onto any page — or into your AI.
Paste any URL into Spread and it rebuilds the page in your system — your tokens, components, and Application Rules applied. Hand the same design-system.md to Cursor, Claude Code, or v0 and they build with it too.
Export three files. Drop them in your project.
tokens.css for your styles. design-system.md for your AI. design-system.json for tooling. One ZIP, ready to commit.
Prototype in Figma with your system. tokens today · components next
Import your tokens into Figma through the Tostada plugin (components and layouts next), so designers prototype with the same system engineering ships.
Three roles. One source of truth. No more drift.
From sprint to file replacement.
- Get your components system in tosatada
- Run the export — three reference files (CSS · MD · JSON)
- Replace those three files in your project — everything updates
Tostada manages tokens and components together. A brand change becomes a re-export and a three-file drop-in — every page, component, and AI agent moves with the system. No sprint.
Hand off the code, not the file.
- Shape tokens, layouts, components, and navigation — visually
- Set Application Rules per element (Do / Don't / Notes)
- Export — code for engineering, Figma library for design
Real components restyle as you work — no terminal required. Your Application Rules ride with the export, so the hand-off (a code ZIP + a Figma library) carries its own guidance.
Give your AI a design system it can actually read.
- Define or import your design system
- Export
design-system.md— tokens, components, rules - Feed it to Cursor, Claude Code, Codex, v0
The export bundles tokens, components, and Application Rules in imperative voice — so agents learn not just what the system is, but how to apply it. Paste any URL into Spread to see it in action.
Spread your system onto any page
Pick a page, apply the theme, get a report about the changes.
Airbnb
Airbnb
Plugs into the stack you already use.
The hub between your design tools, your codebase, and your AI.
Figma
shadcn
Cursor
Tailwind
Claude Code
Vite
React
v0
Codex
Built in the open.
The Tostada format is open source under Apache 2.0 — schemas, export generators, and the offline docs renderer, so you can always read and regenerate what Tostada produced. The app itself is ours to run. Come shape the roadmap in the Slack.
Join the community
Where Tostada is and where it's going.
Today
- Primitive and semantic tokens
- Component library
- Layout principles editor
- Application Rules definition
- Export — CSS · Markdown · JSON
- Spread — your system on any page
- Figma token import
Next
- Figma component and layout imports
- New component libraries integration
- Spread — whole site or app
- Tostada theme assistant
Soon
- Multi-library swap (your stack, your call)
- Full repo migration
- Team workspaces · RBAC · SSO
- History and audit log
- Hosting
Free to build. Pro when it’s a team.
Everything on your own machine is free for ever, and so are readers — however many you hand the system to.
Free covers the whole editor, one cloud library, share links and every export. See what Pro adds →
Design systems are infrastructure, not artifacts.
The system you shape should be the system that ships.
Read by humans. Read by code. Read by AI.
Built in the open, or it doesn't count.