Claude · your key
Real HTML frames
Select any element and change it in the inspector, or in the HTML.
References → your design
Design from what already works.
Find how the best apps solve the screen you're about to design. Then the Floo Agent, or your own Claude Code or Cursor, designs your version on a live canvas your team can edit.
Bring your own model key.
Works with
- Claude Code
- Cursor
- Codex
- Claude
- ChatGPT
- Any MCP client
How it works
From a great screen to your screen.
No blank canvas and no screenshot folder. Start from something that already works, and let your agent do the drawing.
01Find
See how the best apps solve it.
Search any screen pattern, UI element or flow with ⌘K. Every screen is tagged, every flow is recorded tap by tap, and every release is kept, so you can see what changed.
02Brief
Turn a screen into a brief.
Copy prompt writes a brief your AI can act on: the screenshot, its pattern, the UI elements and the real copy on the screen. Paste it anywhere, or add the screens to a canvas.
03Design
Your agent designs it, live.
The Floo Agent runs on your own Claude, OpenAI, OpenRouter or Gemini key. Prefer Claude Code or Cursor? Connect them over MCP and watch them design on the same canvas.
04Ship
Review together, then hand it off.
Comment on any element, @mention the agent to fix it, restore any version, click through a prototype, and export PNG, PDF or the HTML itself.
Stop collecting screenshots. Start from them.
- Research
- Before: A folder of screenshots you can't search.
- With Floo: Every screen tagged by pattern, UI element and copy, with flows and recordings.
- Briefing AI
- Before: Pasting images into a chat and describing them by hand.
- With Floo: Copy prompt hands your AI the screen, its pattern, its elements and its real text.
- Designing
- Before: Redrawing it in a design tool, then rebuilding it in code.
- With Floo: Your agent designs real HTML on a canvas your team edits, comments on and exports.
The library
Every screen, element, flow and recording.
Open any app and see all of it: the screens by pattern, the UI elements they use, the flows that join them, the motion as video, and how it changed release by release.
WebsitesSoon
WebsitesSoon
- ⌘K search across apps, patterns, elements and flows
- Download every screen of an app as a zip
- Save anything for later
The canvas
A real canvas, not a picture of one.
Every frame is live HTML. Edit it by hand, ask the agent, or both at once, with your team on the same page.
Multiplayer
Live cursors and selections for people and agents.
@agent in comments
Mention the agent on a comment and it does the fix.
Versions
Every save is a version. Restore any of them.
Prototype
Wire frames together and click through.
Export
PNG, PDF or HTML, or hand the HTML to a coding agent.
On your own model key
The Floo Agent runs on your Claude, OpenAI, OpenRouter or Gemini key. You pay your provider directly.
Agents & MCP
Your coding agent, designing on the canvas.
Connect Claude Code, Cursor, Codex or any MCP client. It signs in once, works as you with your permissions, and you watch every frame appear.
- 01
Add Floo to your client
Paste the config into Cursor or Claude Code, or add the server with one command.
- 02
Sign in once
The first time it connects, your agent opens a browser tab: approve it and it works as you. Disconnect it any time in Settings.
- 03
Hand it an app
“Build the Calm onboarding from Floo on my canvas.” It reads the screens and designs every frame while you watch.
{
"mcpServers": {
"floo": {
"type": "http",
"url": "https://worker.floo.design/mcp"
}
}
}
Also inside: a built-in Floo Agent on your own key, for teammates who don't use a coding agent.
Pricing
One plan for you. Per seat for teams.
Personal is one price for everything, agents included. A shared team space is billed per seat as people join.
Personal
Everything in Floo, for one person.
$15per month
Billed monthly. Cancel any time.
Get PersonalJust you? Personal has everything. Pay yearly and save 26%.
- Unlimited canvases and frames
- The Floo Agent designs on a live canvas
- The Apps library: real screens and flows to learn from
- Imports, prototypes and design memory
Team
Most teamsA shared space for your whole team.
$20per seat / month
Billed monthly, from 2 seats. Seats follow membership.
Start a teamEach seat includes that member’s personal space: nobody on the team needs Personal too.
- Everything in Personal, for every member
- Every member opens every canvas
- Roles: owner, admin and member
- Invite by email; seats follow membership
- Move canvases between personal and team
Enterprise
SSO, self-hosting, dedicated support or custom invoicing? Tell us what your company needs.
AI runs on your own model key, so there is no credit meter.
Questions
Still stuck? Email usYour next screen is already solved somewhere.
Find it, brief it, and let your agent design your version.