Introducing Wireframes in Reflex Build

Plaintext isn't a native format for building apps, despite being the most popular. For this reason, we're introducing Wireframes in Reflex Build.

Today, builders can already visualize the layout of their apps. Putting that layout into prose, seeing the generated page, then applying corrections becomes a lengthy loop for something that should be a simple task.

Developers with design or UX experience tend to start somewhere else, in Figma or on paper. You then turn that drawing into prose and check whether the generated page matches. Wireframes brings the drawing into Reflex Build, and the agent builds from it. This makes Reflex Build a very strong AI builder for devs with design or UX experience, who want to flexibly and specifically design the apps they make.

Wireframes shows the app as labeled blocks, next to the plan, before the agent writes code.

Blocks move and resize by dragging, and dragging across empty space creates a new one. Every block holds a type and a single line describing its contents, both of which you can change. Writing that description is what sets the type: "table of creator payouts by tier" resolves to Table, and a dropdown covering all 23 types is there when the guess is off. Render then commits the block to the canvas.

Each page in the app gets a tab above the canvas, and typing a name adds another.

An app with no wireframe offers one action in the Wireframe tab, which is to create a wireframe from the current implementation. Build reads the app and lays out each page.

A campaign dashboard comes back with a navigation bar across the top, a hero holding the campaign title and date range, four KPI cards in a row, then a spend chart sitting beside a timeline further down. The descriptions come back with it, so the hero reads "Campaign title, brand, date range, status badge, and campaign selector pills."

Suppose the spend chart matters more each morning than the hero does. Shrink the hero by dragging its bottom edge, then drag the chart up into the space above it. Three KPI cards cover what you check, so open the fourth and delete it. If a payouts table doesn't exist yet, drag a box into the gap and describe it. None of this has run the agent.

Two buttons sit above the canvas. Wireframe → App sends the layout to the coding agent, which rewrites the pages to match it. App → Wireframe replaces the wireframe with a new snapshot of the app, discarding whatever you changed. Until you press one, the header lists how many edits you have made without applying them.

Wireframes is in beta, in the Plan tab of every Reflex Build project.

Website design isn't thought in plaintext. Wireframes keeps design in the format it's thought in.