FlowCraft

FlowCraft is a small personal project that came out of a year of designing for AI-powered products. It's a visual flow builder where you map a user journey on a canvas — screens, actions, decisions, and the transitions between them — and then hand that journey to an AI coding agent as structured context.

It started as a frustration I kept hitting in design-to-code workflows, and grew into an experiment in AI-native UX practice: designing the tool by co-creating it with an AI agent, the same kind of agent it's meant to feed.

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 exactly 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 realized I could keep writing more and more detailed prompts or a long CLAUDE.md, but a wall of text isn't a flow. I still wanted something I could visualize and edit — to see the branches, move things around, and reason about the journey as a designer, not just describe it in prose. So I built FlowCraft to make that layer explicit.

The core of the tool is building the flow by hand. You create nodes with flexible types, give each one a description and a type of interaction, then draw connections between them and annotate each with the interaction that drives the transition. Multi-selecting nodes lets you edit several at once for faster iteration.

FlowCraft is model-agnostic. You connect any AI provider with your own API keys, so the tool fits into whatever stack you already use rather than locking you to one model.

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 flow, and then you expand and refine it into a full product experience — adding branches, naming transitions, splitting a screen into a decision and an error state.

As a designer this reframed the work: instead of drawing every box by hand, I was directing and editing — judging whether the generated journey made sense, then refining it. The AI handles the scaffolding; the design judgment stays human.

The whole 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 that an AI coding agent can read directly. It captures the part a codebase can't describe: which screen leads where, what triggers a transition, and how decisions branch the journey, so the agent can reason about the flow rather than just read a list of screens. It drops inline into a CLAUDE.md, a prompt, or an MCP response with no extra tooling.

{
  "nodes": [ … ],
  "connections": [ … ]
}

Flows are saved 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.

FlowCraft is also a case 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. It's the AI-native practice I've been developing across AI products — and building the tool this way was the most honest test of the idea behind it.

• FlowCraft is an early experiment, shipped live and open-sourced under MIT — a small way to reflect on a formative year designing for AI-native tools.
• It made the missing layer between design and implementation explicit, and gave me something I could actually see and edit instead of describing in prose.
• It's an open invitation: take the code, modify it, experiment, and share how you're thinking about design, AI, and developer tools.