See your product as it really is.
Then make it better.
Statecraft maps your product's real journeys from the live code then lets you change them directly and see the result instantly. Edit in the browser, your IDE, or with any AI.
The same design, two ways.
Statecraft simplifies your process into one live artifact - no redrawing, manually stepping through journeys or workshops.
- —Map the flow in FigJam, Miro, etc.
- —Copy and redraw the screens and components in Figma
- —Build a throwaway prototype
- —Hand off to engineering
- —They discover error and failure states, lots of back and forth
- —Only discover misunderstandings after build
- —Lose sync with your frontend
- ✓Import your real journeys
- ✓Build with your real components and tokens
- ✓Edit it directly; drag, code, or agent
- ✓Share the real thing, not a screenshot
- ✓Surface misunderstandings before build, not after
- ✓CI keeps sync automatically
Start by seeing what you actually have.
Point Statecraft at your repo, or ask the agent to map a single journey. Every flow is recreated from the live code. Every state, every branch, every error path. Connected so the whole team can understand it.
Then change it however you like.
Edit a state and the canvas updates instantly. Drag like a design tool, tweak the real code, or just tell the agent what you want. What you explore is what you'd ship, with your real frontend components and tokens.
It feels like a design tool.
It runs on your actual frontend.
Everything you explore is your real components, your real states, not a lookalike. That's what makes “see how it works today” true.
Bring in your real components
Point Statecraft at your frontend repo and it imports your components automatically, wrapped in whatever styling and providers they need, shown exactly as your users see them.
Edit in your IDE
Every project mirrors to disk, one plain file per screen. Edit in VS Code, Cursor, or Zed and your saves land on the canvas in seconds.
Any coding agent
Point Claude Code, Cursor, or Codex at the synced folder. They edit real files; the canvas updates. No model lock-in.
Components that stay accurate
Definitions are tracked in your CI, so when your real frontend changes, every project updates with it.
Preview the change from any PR
A branch or PR gets a live preview of the journeys it touches, posted straight back. No clicking through pages manually or spinning up new infrastructure.
How it works
Import
Connect a repo, or start fresh. Your real components and journeys come in automatically.
Explore & edit
Map any flow across its states. Change it by drag, by code, or by agent; solo or with your team, live.
Share & decide
Send a click-through link, gather comments on the real thing, snapshot versions, ship with confidence.
No redrawing screens that already exist. No rebuilding component libraries that drift from what shipped. Start from how your product actually behaves. Then change it.
Made for the way your team works.
Design against what's real
Understand a flow, explore changes against real components, and validate before handoff.
See impact before you commit
See how a feature behaves today, and what a change really touches, before it's on a roadmap.
Current-state maps that stay true
Map current-state journeys that stay accurate, without redrawing them by hand every time.