Start from what you already built.
Upload an HTML page, or a .zip of a React, Vue or AI Studio project, and Studio rebuilds it as editable sections. Figma and GitHub import are still planned and are marked as such below.
What comes across is your content and its running order. What does not is the original layout and custom CSS — Studio rebuilds the page from its own sections, which is exactly what makes the result editable rather than a frozen copy.
Status of every import route
- HTML import
- Figma importPlanned
- Google AI Studio importBeta
- Vue importBeta
- GitHub importPlanned
These badges are read from the same registry the rest of the site uses. When one flips, this page changes with it.
Why it is taking a while
Pasting markup is easy. Import is not.
Reading an HTML file and putting it on a canvas takes an afternoon. It is also useless. What you would get is a frozen block of someone else’s markup sitting inside Studio: the design panel would have nothing to offer, the AI would have nothing to edit, and your design system would not touch a pixel of it.
An import is only worth shipping if the result is a normal Studio project. That means mapping arbitrary markup onto the section library — recognising that this block of divs is a hero, that grid is a three-column feature list, this list of prices is a pricing table — and then extracting the text, images and layout choices into props.
That mapping is the whole problem. It is inference over structure someone else wrote for reasons we cannot see, and getting it wrong is worse than not doing it, because a half-recognised page is harder to fix than a blank one.
Import that pastes
Your page appears. Nothing about it is editable.
- —Design panel has no fields to show
- —AI cannot change what it cannot name
- —Your tokens do not reach it
Import that maps
Your page arrives as sections, like any other project.
- —Select a section, edit its props
- —AI edits it the same way it edits anything
- —One design system covers it
Planned routes
What each import will do.
Written in future tense because all of it is future work. Each card names the specific problem that route has to solve before it can ship.
HTML import
Upload or paste an HTML page and Studio rebuilds it from editable sections.
The hard part
Hand-written markup has no reliable structure to lean on. The importer will have to read the rendered layout rather than the class names, decide where one section ends and the next begins, and accept that some pages will map cleanly and some will not.
Figma import
Turn a Figma frame into editable Studio sections.
The hard part
A Figma frame is absolute positions, not a layout. Turning it into something responsive means inferring intent — that these three cards are a row that should wrap, that this spacing is a scale rather than three unrelated numbers.
Google AI Studio import
Export the project as a .zip and import it. Content comes across; the original layout does not.
The hard part
Output from another generator is code written to run once, not to be maintained. The value of bringing it into Studio is turning it into sections that survive editing, which is the same mapping problem with more inconsistent input.
Vue import
Import a Vue project as a .zip. Its content is rebuilt from Studio sections rather than kept as Vue components.
The hard part
A Vue project is components, routes and state, and only some of that is a page. The importer will have to find the rendered screens, map each to a Studio page, and be honest about the behaviour it cannot carry across.
GitHub import
Connect a repository and import its front end.
The hard part
A repository is a build, not a document. This route depends on the others: once markup and framework components can be mapped, connecting a repository is mostly about finding the front end and keeping it in sync.
The bar
What we will ship, and what we will not.
If an import cannot meet these three, it is not finished, and we would rather it stay off this list than land as something you have to work around.
It arrives as sections
An import will produce named sections from the library, not a container of foreign markup. If a page cannot be mapped, we will say which parts failed rather than pasting them in.
It is editable immediately
Selecting an imported section will open the same design panel as any other section, with real fields. Anything less is not an import worth having.
It joins your design system
Imported pages will read the project tokens like everything else, so changing your primary colour will move them too.
Until then, the way into Studio is a prompt or a blank canvas. Both are live today. How the AI builder works.
Import is coming. The rest of Studio is here now.
Describe the page you would have imported and see how close the first draft gets.