Now in Alpha

The brainstorming canvas for vibe-coders.

lofi is the context layer between a prompt and a shipped flow. Brainstorm a few frames, iterate with the team, then hand the canvas to Claude.

Exports to ClaudeFigma-ready hand-offFree to start
2 min demoSketch a 3-step onboarding, then ship it
2:14
Sketch a flow in secondsIterate frame by frameDraw on the canvasExport to ClaudePolish in FigmaShare the canvas with your teamSketch a flow in secondsIterate frame by frameDraw on the canvasExport to ClaudePolish in FigmaShare the canvas with your team
How it works

Sketch a flow. Iterate. Ship it.

A scrappy place to think before you commit to pixels or production code. Sketch the flow, push it around, then hand it off when it’s ready.

/ 01

Sketch a whole flow

Describe the product or the task. lofi drafts a few wireframe frames you can tap through. Low-fi on purpose, so you keep thinking instead of polishing.

/ 02
Tighten the empty state, and use our warmer tone.
Cut the copy by ~40%. Swapped “no results” for “nothing here yet, let’s fix that.”
Perfect. Add a subtle illustration slot.

Iterate frame by frame

Tweak any frame in chat, or grab a pen and sketch notes and edge cases on the canvas. It’s a thinking tool, not a template.

/ 03
const Onboarding = () => {
  // from lofi.canvas
  return <Flow>
    …
  </Form>
}

Hand it off

Send the flow to Claude as rich context, or copy the frames as Figma-ready blocks and paste them straight into Figma. The canvas becomes the spec everyone agrees on.

Pricing

Simple, honest pricing.

Free to start. Upgrade when you outgrow it.

Free
$0/ month
Perfect for sketching a side project or trying things out.
  • 30 messages / month
  • Up to 5 projects
  • Sketch & draw on canvas
  • Export to PNG, Figma & Claude
Building Lofi for your team? Let’s talk →
Questions

The honest questions.

Don’t see what you’re looking for? Ask us anything. A human replies within a day.

Figma is for hi-fi polish. Coding agents jump straight to code. lofi sits in between. It’s where you think in low-fi wireframes before committing to pixels or production JSX.
Because the quality of the code Claude writes is bounded by the clarity of the flow you describe. lofi gives you a place to figure out the flow first, frames, notes, edge cases, then hands Claude something it can actually build from.
Yes. The canvas has a pen, sticky notes, arrows, and freeform text. Sketch an idea in 30 seconds, then ask the AI to turn your scribble into a proper frame.
One click copies a structured context package: frames, components, layout intent, copy, annotations. Paste it into Claude, or share the live canvas URL so it reads your updates as you edit.
Yes. Export any canvas as a .fig file. Frames, layers, and annotations come across as editable objects, ready for a designer to style.
No. We don’t train on your canvases or messages.

Sketch your next idea. Ship it this week.

Free to start. Sketch a flow, hand it to Claude, ship something real.