FlowCraft

AI tools understand screens, but not the journey between them

Working with AI coding agents, I kept running into the same gap. Even with tools like Figma MCP or a structured design system, something is missing when you move from design to implementation.

AI tools can read individual screens, components and system rules. But they struggle with the connections between screens: how a user moves through the product, what triggers a transition, and how states, errors and decisions shape the journey. That layer is where the experience lives, and it’s the part the agent can’t see.

Prompts and Markdown describe the flow, but you can’t see it

I could keep writing ever more detailed prompts or a long CLAUDE.md, but a wall of text isn’t a flow. I wanted something I could see and edit: the branches, moved around, reasoned about as a designer. So I built FlowCraft to make that layer explicit.

Visual flow building

The core is building the flow by hand. You create nodes with flexible types, give each a description and an interaction type, then draw connections and annotate each with the interaction that drives the transition. Multi-select lets you edit several nodes at once.

Bring your own AI

FlowCraft is model-agnostic. You connect any AI provider with your own API keys, so it fits the stack you already use instead of locking you to one model.

AI flow generation

The most interesting part to design was the moment a flow goes from a sentence to a canvas. You describe an experience in plain language, FlowCraft generates a first pass, and you expand and refine it: adding branches, naming transitions, splitting a screen into a decision and an error state.

It reframed the work. Instead of drawing every box, I was directing and editing: judging whether the generated journey made sense, then refining it. The AI handles the scaffolding; the design judgement stays human.

Export for Claude Code

The point of the flow is what happens after you draw it. FlowCraft exports the journey as structured JSON, a typed graph of nodes and connections an agent can read directly: which screen leads where, what triggers each transition, how decisions branch. It drops into a CLAUDE.md, a prompt or an MCP response with no extra tooling.

Cloud sync

Flows save automatically and stay in sync across sessions, built on Supabase, so picking the work back up never means losing a journey or re-exporting by hand.

Try it

FlowCraft is also a study in how it was made. I designed and built it by co-creating with Claude Code, iterating on the interaction and the interface in conversation with an AI agent, the same kind of agent the tool is meant to serve.

That loop changed my role from making to directing: framing the problem, judging each iteration against how the experience should feel, and steering the next pass. Building the tool this way was the most honest test of the idea behind it.

Back to the Sandbox to try FlowCraft and the other tools I’ve built.