Preparing your workspace and the latest project state.
Frame joins the visual speed of a builder with the structure developers expect from a repository. Build responsive pages, shape routes and content, inspect the blueprint, then export code your team can actually keep.
A focused interface for teams that need the project around the page to make sense.
Canvas, configuration, blueprint and code are not four disconnected screenshots. They are four views of the same project state. Scroll through them and the workspace changes in place.
Design / ship / own
Design the page visually, then carry the real project structure all the way to editable React code.
Compose the interface directly.
Visual control stays connected to the structure underneath.
Build responsive sections, move through layers and tune layout without turning the page into a prompt-and-wait workflow.
Design / ship / own
Design the page visually, then carry the real project structure all the way to editable React code.
Routes, content, translations, dependencies and export rules live beside the design instead of becoming cleanup work after it.
Project configure
Code / project structure
Define the repository before export
Routes
4 pages
Text & i18n
2 locales
Content
3 collections
Dependencies
11 packages
File structure
Next.js / app
Export target
Next.js + Tailwind
Alias
@/*
Review the structure implied by the visual work: pages, data, route boundaries, modules and other generated relationships.
Project blueprint
5 sections
4 paths
3 models
42 keys
18 modules
Export React, Tailwind and Next.js structure into a codebase your team can edit, review and keep developing in its normal workflow.
components/sections/hero.tsx
Editable output, not generated residue.
export function Hero() {\n return (\n <section className=\"grid min-h-[72vh] ...\">\n <div>\n <p>{copy.eyebrow}</p>\n <h1>{copy.title}</h1>\n <Button href=\"/start\">Start</Button>\n </div>\n </section>\n );\n}The useful moment is before design is “finished” and before engineering wants a static handoff. Frame keeps those decisions connected while the product is still moving.
Compose responsive sections, reuse blocks and keep structure visible while the page is changing.
Routes, files, dependencies, content and translations are exposed before export instead of discovered afterwards.
Useful when the same small team moves between product, UI and frontend instead of handing work across departments.
Frame treats export as part of the design process. Files, routes, translations and dependencies stay visible beforehand, so the final repository is a continuation of the work — not cleanup after a generator.
export function Hero() {\n return (\n <section className="grid ...">\n <Headline />\n <ProductPreview />\n </section>\n );\n}Same project state, before and after export.
Design, routes, structure, assets, content, export and readiness checks live in the same surface. You do not have to jump across generic tools to understand the real project state.
Live project map
project.frame / synced
Edit pieces and pages with viewport overrides while keeping the hierarchy intact.
See navigation, site structure and i18n inside the same flow.
Generate an editable React, Tailwind and Next.js project.
Resources, imagery, text and bindings stay attached to the project.
History, comments and real-time editing unlock by plan.
Review export, accessibility and security before shipping.
One board, four plans, and the limits that actually change how you work. Compare collaboration, capacity and delivery controls in one place.
Plan board
04 plans / one comparison surface
01 / Limits & capabilities
Compare in one view
One board, four plans, and the limits that actually change how you work. Compare collaboration, capacity and delivery controls in one place.
Free
For testing the editor and shipping small personal work.
Open dashboardStarter
For solo builders and lean client work.
Open dashboardPro
For teams iterating, reviewing and exporting often.
Open dashboardTeam
For larger workspaces that need broader controls.
Open dashboard02 / Limits & capabilities
Frame is intentionally narrower than an all-in-one platform. Its value comes from being specific about the handoff between visual work and frontend work.
Neither in the traditional sense. Frame is a visual frontend builder: you compose the interface on a canvas, while routes, content, translations, dependencies and export structure remain part of the project instead of disappearing behind the canvas.
An editable frontend project built around React, Tailwind and Next.js conventions. Export is meant to become normal repository work, not a hosted-only result or a screenshot handoff.
No. The workflow is built around code ownership. Frame helps form the project and hand it off; your team can keep changing the exported frontend in its usual tools.
Product designers who understand frontend constraints, frontend developers who like visual composition for some work, and small SaaS teams where product, UI and implementation overlap heavily.
No. Frame is the layer between visual composition and implementation. Detailed design exploration can still happen in design tools, and engineering judgement still belongs in the IDE and repository.
Yes. Blueprint and Configure expose what the canvas implies before a ZIP exists: pages, route boundaries, content models, i18n, files and other project decisions can be reviewed while the interface is still evolving.
No code generator replaces deployment review. Frame validates known project and export constraints, but your team should still run the generated project's tests, type checks, dependency/security review, accessibility checks and environment-specific configuration before production.