Projects, pages and frames
Understand how Vato Design organizes screens into projects, pages and frames, and how to create and edit them.
Vato Design is the space where you build screens, alone or with an agent. You can draw in a visual editor or edit the HTML directly, with no agent involved.
Open Design
Click Design in the main navigation, or press Ctrl+3 (Cmd+3 on macOS).
The first time, the view is empty. Click Create project to start.
How your work is organized
| Level | What it is | Example |
|---|---|---|
| Project | One product or idea. | My banking app |
| Page | A group of related screens, usually one flow. | Onboarding |
| Frame | One screen, at a fixed width and height. | Welcome, Sign up, Dark theme |
A page shows all its frames side by side on the canvas, so you can compare them. Keep the screens of one flow on the same page rather than creating one page per screen.
Frames are also how you keep several versions of a screen: a light and a dark theme, another layout, a mobile size. Duplicate the frame and change the copy, and both stay visible.
Projects
The project menu at the top left lists your Projects.
- Click New project, give it a Name and an optional Description.
- Next to each project, click the pencil icon to rename it or the trash icon to delete it.
A new project starts with one page and one frame.
Pages
The sidebar lists the project's Pages.
- Click + next to Pages to add a New page.
- Open a page's menu to Rename page or Delete page. Deleting a page removes all its frames.
A project always keeps at least one page. If you delete the last one, an empty page replaces it.
Frames
Under the pages, the Frames section lists the frames of the current page.
- Click + next to Frames to add a New frame.
- Open a frame's menu to Edit frame, Duplicate or Delete frame. Edit frame changes its name, Width and Height.
- Select several frames with Shift or Ctrl (Cmd on macOS) to duplicate or delete them together.
- On the canvas, drag a frame to move it on the page.
A page always keeps at least one frame.
Edit a frame
Select a frame to edit it. The Actions menu (...) at the top right switches between two modes:
- Design: select elements on the canvas or in the layer list, then style them in the inspector. Toggle the inspector with the sidebar button at the top right.
- Code: edit the frame's Page HTML, with a live preview next to it.
The menu at the top of the sidebar switches between Structure (layers), Assets (images, icons and components), Variables, Design system, Comments and History.
To see every shortcut, open Actions and choose Keyboard shortcuts.
Export your work
The Actions menu also exports the current frame as HTML, SVG or PNG, or all frames as PNG.
It can also generate a React and Tailwind version, a workspace HTML version or a standalone viewer. You review the generated files first: nothing is written or downloaded until you approve.