01
Say what you have in mind.
Talk to your agent in its interactive session. Describe a screen, a user journey, or a change. It creates and updates the design through Flowkit.
“Create the onboarding flow for a new team.”
YOUR AGENT. YOUR IDEAS. ONE SHARED CANVAS.
Talk it through.
See the whole flow.
Give your coding agent a visual workspace. Talk through an idea, watch connected screens appear, then point at anything you want to refine.
Give your agent a canvas ↗Explore the workflow ↓
YOUR AGENT. YOUR WAY.
✳ Claude Code＋ ↶ ⋯
cadence.jsonMCP · flowkit
Let’s design a task manager. Connect sign-up, dashboard, board, and task details.
I’ll create the screens in Flowkit, reuse a shared design system, and connect the user journey.
⌁
flowkit · create_itemScreen created · task-detail
✓The screens are connected. Take a look at the canvas.
What happens when I open a task from the board?
Auto · Claude↑
⑂ main*✓ Flowkit connectedClaude Code
Design task manager⋯
Let’s design a task manager. Connect sign-up, dashboard, board, and task details.
I’ll create the screens in Flowkit, reuse a shared design system, and connect the user journey.
⌁
flowkit · create_itemScreen created · task-detail
✓The screens are connected. Take a look at the canvas.
What happens when I open a task from the board?
Local · Default↑
Claude Code~/projects/cadenceMCP: flowkit connected
❯
Let’s design a task manager. Connect sign-up, dashboard, board, and task details.
●
I’ll create the screens in Flowkit, reuse a shared design system, and connect the user journey.
● flowkit - create_item (MCP)└ Created screen “task-detail”.
●
Done. The flow is ready on your canvas.
❯
? for shortcuts◉ /mcpWhat happens when I open a task from the board?
Agent＋ ↶ ⋯
Design the task managercadence
Let’s design a task manager. Connect sign-up, dashboard, board, and task details.
I’ll create the screens in Flowkit, reuse a shared design system, and connect the user journey.
⌁
flowkit · create_itemScreen created · task-detail
✓The screens are connected. Take a look at the canvas.
▧
Implementation PlanScreens, components & user flow
↗What happens when I open a task from the board?
Planning ▾ · Gemini↑
ChatCoworkCode
Design task manager⋯
Let’s design a task manager. Connect sign-up, dashboard, board, and task details.
I’ll create the screens in Flowkit, reuse a shared design system, and connect the user journey.
⌁
flowkit · create_itemScreen created · task-detail
✓The screens are connected. Take a look at the canvas.
What happens when I open a task from the board?
Local ▾ · Auto↑
Agent＋ ↶ ⋯
▱ cadence.json⌁ flowkit
Let’s design a task manager. Connect sign-up, dashboard, board, and task details.
I’ll create the screens in Flowkit, reuse a shared design system, and connect the user journey.
⌁
flowkit · create_itemScreen created · task-detail
✓The screens are connected. Take a look at the canvas.
✓Connected screens and shared components
What happens when I open a task from the board?
∞ Agent ▾ Auto ▾↑
Design a task manageropencode
Let’s design a task manager. Connect sign-up, dashboard, board, and task details.
YouI’ll create the screens in Flowkit, reuse a shared design system, and connect the user journey.
⚙ flowkit_create_itemtask-detail
Done. The screens are connected in Flowkit.
Build · AgentWhat happens when I open a task from the board?
BuildSelect model↵
tab agentsctrl+p commands
Same Flowkit canvas. Different agent.01 / 07
Your conversation↗The big picture
Real Flowkit screenshot · recreated agent interfacesTalk in your agent. See and steer the design here.
01 / A SHORTER PATH FROM IDEA TO DESIGN
Stay in the conversation.
Keep the picture in view.
02
Look. Point. Refine.
See real HTML screens on the canvas. Select a region and ask your agent to improve it. Keep shaping the details while the whole journey stays visible.
“This feels crowded. Give the form more room.”
03
Take the design with you.
Keep the design file beside your code. Export screens, a specification, or a single HTML viewer so someone else can explore the complete flow.
“Export the flow so my team can review it.”
02 / A CANVAS YOU CAN HAVE A CONVERSATION ABOUT
The whole picture.
And every little detail.
Follow the journey, zoom into a screen, or point at one awkward detail. Your agent gets the context to keep going.
SELECT & ASK
Point at it.
Talk about it.
Select a region on the canvas, then ask your agent a question or request a change. It receives the selected view and the elements inside it.
- 01Hold Alt and drag around a detail.
- 02Ask about it in your agent’s session.
- 03Review the change on the canvas.
ALT + DRAGYour next prompt has a place to point to.
THIS PART
YOU → YOUR AGENT
“This dashboard feels crowded. Give the task cards more breathing room.”
Real canvas screenshot · selection and prompt illustrated
SHARED DESIGN SYSTEM
Change the system. Keep the screens in sync.
Colors, type, spacing, and reusable components live with the screens that use them. Ask your agent to change a shared piece and review it across the design.
The actual kit view in FlowkitTokens + components ↗
THEMES, SIZES & LANGUAGES
See how the same idea holds up.
Switch between light and dark, mobile and desktop, or translated copy. Review your screens in context and catch the details that need another pass.
Same project. Another perspective.Light · Mobile · English
Shape the journey yourself.
Drag screens into place and connect them handle to handle. You and your agent work on the same canvas.
Keep room to change your mind.
Ask your agent to undo the last change. Your design stays in a local JSON file you can commit beside your code.
↗the-whole-idea.htmlScreens + flow + design system
ONE FILE. THE FULL CONTEXT.Ready to open anywhere ↗
03 / MADE TO LEAVE YOUR DESK
Send the experience.
Let them explore.
Export a self-contained HTML viewer. Your teammate opens it in a browser and explores the screens and their connections — with no Flowkit install or account.
HTML viewerPNG screensDesign spec
YOUR NEXT IDEA STARTS HERE
What are we
making today?
Install Flowkit, connect your agent, and start a conversation. The canvas opens alongside it.
Set up another agent ↗Requires Bun · Example below uses Claude CodeA LITTLE SETUP. A LOT OF POSSIBILITY.
bun install -g @combycode/flowkitflowkit initclaude
THEN SAY
Open new Flowkit project. Let's design something.