# 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.

## Next step

[Let agents use Design](let-agents-use-design.md)

Source: https://vatoide.com/docs/design/projects-pages-and-frames