Describe it. See it. Shape it.
Write a sentence and get a page back that you can actually edit. The reason that works is the part most tools do not talk about: Studio is not writing code for you.
How it actually works
Studio does not generate code.
It composes. Studio has a library of 33 React sections that were designed, built and tested before you ever opened the editor. When you describe a page, the model does two things: it chooses which sections the page needs and in what order, and it fills in each section’s props.
That is the entire output. A list of section names and a set of values. No new components, no new CSS, no file for you to inherit and maintain.
Code generation
The model writes a file. It compiles, or it does not. You find out by looking.
Section composition
The model picks tested sections and sets their values. The page renders because the sections already did.
—The page cannot fail to render
—Every section stays editable by hand
—An edit changes values, never syntax
Composition
A sentence goes in. Named sections come out.
Switch between the three prompts below. Different pages, different picks, the same library underneath — that is what makes the output predictable.
A landing page for a dark-themed analytics tool, with pricing.
hero-centered
heading: … sub: … cta: …
logo-cloud
logos: …
feature-grid-3
items: …
pricing-3col
tiers: … highlight: …
footer-simple
links: …
Picked from the libraryprops filled in
Illustrative section names. The library holds 33 of them and grows; the shape of the output does not change.
Why it holds
Three consequences of not writing code.
It renders because the section already rendered
Every section in the library is a typed React component that ships tested and responsive. The model is choosing from things that work, so there is no build step between the prompt and a page you can look at.
It stays editable because nothing was invented
A generated page is made of the same sections you would have placed by hand. Select one and the design panel knows exactly what it can change, because the props were defined before the model saw them.
It stays consistent because the tokens are the project
Sections read colour, type, radius and spacing from your design system rather than carrying their own. A page composed by AI inherits the same values as a page you built yourself.
Section library
Every page is assembled from 33 responsive sections that are tested before they reach your canvas.
Design system
Colour, type, corner radius, shadow and spacing are global tokens. Change one, every page follows.
Responsive output
Sections are built responsive, so what you publish works on phones without a separate mobile pass.
Editing
It edits the page, not a new one.
Most tools answer a follow-up prompt by generating the page again. You ask for a darker hero and you get back a different site, with the headline you had spent ten minutes on quietly replaced.
Ask for a change in plain language and Studio edits the page in place, without rebuilding it. Ask for a fourth pricing tier and the pricing section changes. Everything else on the page is the same object it was a second ago, because nothing else was touched.
Before
hero-centered
feature-grid-3
pricing-3col
footer-simple
“Add a fourth pricing tier called Scale.”
After
hero-centered
feature-grid-3
pricing-4colchanged
footer-simple
Make the hero video autoplay.
Nothing changed
The hero section on this page has no video field, so I made no change. Tell me what you want in its place.
A reply that admits an edit did not land is worth more than one that describes work it did not do.
Reporting
It tells you what actually changed.
After every edit, Studio reports the sections and values it touched — read from the change it made, not from what it set out to do.
So when a request cannot be satisfied, you get told. No summary of an edit that silently failed, no confident paragraph about a change that is not on the page. You should never have to audit the canvas to find out whether the last message was true.
The trade
What composition costs you.
A library is a boundary. If a page needs a section that does not exist yet, the model cannot conjure one — it will compose the closest thing from what is there and leave you to shape it in the editor. We would rather give you a page that renders and can be edited than a file that might compile.
The library is 33 sections today and grows with each release. Every one of them is responsive and tested before it reaches your canvas.
How sections and props are structuredWrite one sentence and see what comes back.
Then change your mind as many times as you like. Every save is kept.
Start building