Describe it.
We build it.
Every screenshot below is the actual product — the same journey you'll take, from picking a design system to exporting real React code.
Choose your design system
Pick from ten built-in themes — Graphite to Soft Pop to Terminal — or flip to the Tweakcn tab and paste CSS straight from tweakcn.com. Your colors apply to every screen you generate.
Bring your brand
Upload a logo and the Brand Kit extracts your colors — then fine-tune every hex with a full picker, choose body and heading fonts, and set the corner radius and shadow style. A live component preview shows your brand the whole time, and Apply pushes it into every generated screen.
Describe what you want to build
Plain English, however it comes out. Name the sections you want or just describe the product — the AI reads intent, not keywords.
Review the plan
Before anything generates, FlowGen shows you what it understood — the app, the audience, and the screen type it mapped your ask to. Rename it, change the type, or generate as-is.
Generate the screen
A real, live React screen — your theme, your brand, real images — rendered on an infinite canvas and ready to edit. That habit app on the right was built from the exact prompt in step 03.
Then make it yours.
Everything after generation happens right on the canvas — no round-trips, no rebuilds.
Screen backgrounds
Add a background color or image to the whole screen — size, opacity, and position sliders, fixed-or-scroll-with-page behavior, and one-click background removal.
Every image, individually
Each image the AI pulled in gets its own controls: an opacity slider, one-click background removal, and replace-with-your-own upload.
Inline text editing
Click any text on the generated screen and edit it in place. Select part of a word, a sentence, or a phrase and style just that — size, color, font, weight, bold, italic, underline.
Change it with a prompt
Design lockedUses a generationType what you want different and the screen regenerates around your design system — the look stays locked while the content changes.
Restyle after generation
Switch the theme any time — it applies instantly to every screen, no regeneration. The Design Lock keeps every future screen matched to the system extracted from your first.
Generate a connected flow
Design lockedUses a generationSelect any button or tab on a generated screen and FlowGen builds the screen it should lead to — same design system, wired onto the canvas as a real user path.
Your projects, saved
3 freeUnlimited on ProEvery build lives in your workspace — open one and pick up where you left off. 3 saved projects on Free, unlimited on Pro.
Publish to the community gallery
ProShare a finished screen to the public gallery for anyone to browse.
Export the React project
ProDownload clean React code or push straight to GitHub — swap-ready components, real source.