Website Studio Guide

01. What is Website Studio?

Website Studio treats a website as pages → sections → elements. The screen has five areas.

Website Studio full screen. The numbers follow the order of the list below.Close

1. 1Site structure panel — the list of pages and sections, plus Design system and Assets.
2. 2Canvas — see how the site actually looks and click a section or text to select it.
3. 3Properties panel — change the properties of the selected page, section or element. With nothing selected it says "Select a page, section or element to edit."
4. 4PRIME input — describe what you want, for example "Ask PRIME (e.g. make the Hero more premium)".
5. 5Top action buttons — save status, Undo/Redo, Build · Deploy · Publish and Download ZIP.

02. Getting started

Website Studio starts from a PRIME conversation. Describe the site you want; PRIME prepares a website project and shows a button in the conversation that opens Website Studio.

1. 1In the PRIME conversation, explain what the site is, who the main visitors are and what they should do first. Attach brand materials or reference sites if you have them.
2. 2Click the Open Website Studio button that appears in the conversation.
3. 3When Website Studio opens, review the generated pages and sections and start editing.

To return to the conversation while editing, click PRIME chat at the top left. You can see it in the first screenshot of Screen layout.

03. Screen layout

Top left — work modes

Top-left area.Close

1. 1PRIME chat — go back to the PRIME conversation.
2. 2Project name — click to rename the project in place.
3. 3Design · Preview · Code — switch the work mode. Keys 1, 2 and 3 also work. See Preview and code.
4. 4Structure · Content · Responsive · Interaction — choose which kind of editing to focus on in design mode.

Bottom left — design system and assets

Lower part of the site structure panel.Close

1. 1Design system — opens the panel that manages site-wide colors and theme. See Design system.
2. 2All · Images · Videos — filter project assets by type.
3. 3Asset list — images linked to the project and the section each is used in. Items whose generation failed are marked as failed.
4. 4Recommended visuals — a notice such as "1 recommended visuals — create them from PRIME below" appears when recommended images have not been created yet.

04. Managing pages and sections

Add pages at the top of the Site structure panel and stack sections under each page.

Top of the site structure panel.Close

1. 1Page presets — choose a ready-made page made of several sections. See Presets.
2. 2Add page — add an empty page.
3. 3Search layers — find a section by name when there are many.
4. 4Page row — shows the page name and path (for example /ecommerce). Use + (Add section) to add a section to this page and ··· (More) to open the page menu.
5. 5Eye icon (Hide) — temporarily hide a section from the site without deleting it. Click again to show it.

Adding a section

Click + on a page row to open the Section type panel.

Add section panel.Close

1. 1Choose from the preset gallery — choose from finished section presets.
2. 2Section types — click one of Header · Hero · Features · Social proof · Pricing · FAQ · CTA · Footer · Custom to add a basic section right away.

05. Building quickly with presets

The Preset gallery contains section presets and page presets that combine several sections. The top of the gallery currently shows 169 sections · 26 pages.

Preset Gallery — Pages tab.Close

1. 1Tabs — choose Sections · Pages · Industry starters · Favorites · Recent.
2. 2Total count — the number of section and page presets available now.
3. 3Page preset card — the card title (for example SaaS landing) and the order of sections inside. The number of sections is shown at the top right.
4. 4Add as page — adds this combination as a new page.

Page preset examples on screen

Scroll down the list for more page presets. Preset names above are translated from the Korean screen.

Section presets and changing a section's style

• In the Sections tab, pick one section and add it to the current page. You can combine search (for example hero, fashion, gallery, pricing …) with category filters.
• To change only the look of an existing section, use Switch style from the section's ··· menu or the Properties panel.
• Industry starters apply recommended colors, fonts and page structure for an industry in one step.

06. Section menu and organizing layers

Click ··· (More) on the right of a section row to open the section menu.

Section more menu.Close

1. 1··· (More) — opens the section menu.
2. 2Rename · Duplicate · Switch style · Lock · Move up · Move down · Delete — rename, copy, restyle, lock against accidental changes, reorder and delete the section.
3. 3Move to page — move the section to another page.

• The gray text next to a section name (header, hero, features and so on) is the section type.
• Click > on the left of a row to expand the elements inside the section.
• Locked sections show Locked and hidden sections show Hidden.

07. Selecting a section and the Properties panel

Click a section row in the site structure panel or a section on the canvas to select it. The Properties panel and the PRIME input then work on that section.

A section is selected.Close

1. 1Selected section row — highlighted in the site structure panel.
2. 2Canvas selection label — the selected section name appears at the top left of the section on the canvas.
3. 3Property tabs — Layout · Content · Style · Assets · Responsive · Interaction · Data.
4. 4Switch style · Lock — restyle the selected section with another preset, or lock it.
5. 5PRIME selection — the selected section is shown above the input, for example "Fullscreen hero selected". Requests made now apply to this section.

08. Editing text

Under the canvas you will see the hint "Click to select, double-click text to edit it, click an image area to change it." Text editing follows this hint.

1. 1Double-click the text you want to change on the canvas (for example a menu label or a heading).
2. 2Type the new text in place.
3. 3Click outside the text to apply it; the save status at the top updates.

You can also ask PRIME. Select the section that contains the text and write the exact new wording in the PRIME input, for example “Change LOOKBOOK in the top menu to Collection”.

09. Layout and placement

When a section is selected, Placement appears near the top of the Properties panel and the layout tools appear further down.

Placement

Placement area.Close

1. 1Placement mode — choose Background · Full width · Split · Normal for the basic image/text arrangement.
2. 2Text position — click one of the nine cells to place the text.
3. 3Overlay · Darkness — adjust the overlay type and darkness so text over an image stays readable.
4. 4Height — choose the section height.
5. 5Mobile — Hide image on mobile, and Default · Image first · Text first for the mobile order.

Layout tools

Layout tools.Close

1. 1Gap — spacing between elements in the section.
2. 2Align — horizontal (left, center, right) and vertical (top, middle, bottom) alignment.
3. 3Distribute — distribute elements horizontally or vertically, or make them equal width.
4. 4Container · Max width (px) — how wide the content may be.
5. 5Position · Min height — positioning and the minimum section height.

10. Editing style

Section colors and surface feel are set in the section settings of the Properties panel. The current screen has these items:

11. Using the design system

Design system manages the theme and colors used across the site in one place. Open it from the bottom left or from the Design system button in the Properties panel.

Design system panel.Close

1. 1Theme — choose the site's base theme: Light or Dark.
2. 2Design direction — a summary of the site's design direction, such as site type, composition and things to avoid.
3. 3Colors — change background, surface, card surface, body text, secondary text, border, primary button and other colors with the swatch or a HEX value.

Section style vs. design system

12. Checking responsive layouts

Use Desktop · Tablet · Mobile at the top right to preview the canvas at each screen size. It is item 5 in the Save and undo screenshot.

• Check per-size settings in the Responsive mode at the top and the Responsive tab in the Properties panel.
• For sections with images, the Mobile item in Placement lets you set Hide image on mobile and the mobile order directly.

13. Reusing sections as components

To use the same section (for example a shared header or footer) on several pages, save it as a component. Select the section and scroll to the bottom of the Properties panel.

Bottom of the Properties panel.Close

1. 1Layer — set the stacking order with Z-INDEX and Bring to front · Bring forward · Send backward · Send to back.
2. 2Component · Global section — Save as component turns this section into a reusable component. As the panel explains, you can place it on other pages and update the master to apply changes everywhere.

14. Replacing images

Select a section with an image and the visual area appears at the top of the Properties panel. Clicking an image area on the canvas takes you to the same place.

Visual area.Close

1. 1Preview — the current image and its status. If generation failed, a message and a retry button appear.
2. 2Replace with AI — create a new image with AI for this slot. This uses credits.
3. 3Replace with my image — upload your own image file.
4. 4Choose an existing image — choose from images already in this project.
5. 5Placement — change how the image and text are arranged. See Layout and placement.

15. Asking PRIME for changes in plain language

Instead of changing properties yourself, you can ask PRIME using the input box at the bottom of the screen.

1. 1Select the section to change in the site structure panel or on the canvas. Without a selection, the request applies to the whole site.
2. 2Check that "(section name) selected" appears above the input (item 5 in the section selection screenshot).
3. 3Describe the change and click Send.
4. 4Check the result on the canvas. If you don't like it, undo or ask again.

Example requests

• Default example in the input: "Ask PRIME (e.g. make the Hero more premium)"
• Example with a section selected: "How should Fullscreen hero change? e.g. add an image of a female model"
• Name the target and the result together, for example “Turn this section into 3-column cards”, “Use one column on mobile” or “Make this button black”.

16. Save · Undo · Redo

Your edits are saved automatically. Check the save status and undo buttons at the top right.

Top-right area.Close

1. 1Save status — shows Saved, Saving, Save failed or Conflict.
2. 2Undo · Redo — revert or reapply the last change. Shortcuts: Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z. Hover a button to see the name of the action.
3. 3Build · Deploy · Publish — currently Coming soon. See Build · Deploy · Publish.
4. 4Download ZIP — download the site code as a ZIP file. See ZIP download.
5. 5Desktop · Tablet · Mobile · Edit markers — change the canvas screen size and toggle markers for editable areas.

17. Preview and code

The mode buttons are item 3 in the first screenshot of Screen layout.

18. Build · Deploy · Publish

The Build · Deploy · Publish buttons at the top are currently disabled and show Coming soon on hover. You cannot deploy a site with these buttons yet.

To host the finished site yourself, download the code with ZIP download.

19. ZIP download

Use the blue button at the top right to download the site as a ZIP file. The button also shows the selected output format.

ZIP download and output formats.Close

1. 1Download ZIP — download immediately in the shown format (for example HTML website).
2. 2⌄ (Download in another format) — open the list of output formats.
3. 3Output format — choose Next.js (Best for SEO and multiple pages · Next.js App Router (static export)), React (Interactive app-like UI · React + Vite) or HTML website (Open right away, no install · HTML/CSS/JavaScript).
4. 4Readiness notice — for example "4 images are not ready yet." tells you before downloading that some images have not been created yet.

• React shows these notes: "On static hosting, route all paths to index.html." and "Without server rendering, per-page search metadata is limited."
• HTML website opens directly without installation.

20. Troubleshooting