Let agents use Design
Turn on agent access to Vato Design, then ask an agent to design screens from the Design assistant or from any conversation.
The Design space is in the main navigation, and you can use it by hand at any time. Agents, however, can't create or edit designs until you allow it.
Turn on agent access
- Open Settings → Vato Design.
- Turn on Enable Vato Design.
The status changes to Vato Design is ready for provider sessions. The design tools ship with Vato: there is nothing else to install and no extra account.
You can also get there from the Design view. The button at the bottom of the sidebar shows Manual design mode while agents are off, and Agent access enabled once they are on. Click it to open the settings.
Ask the Design assistant
The Design assistant works inside the project you have open.
- In the Design view, open a project.
- Click Assistant (the chat bubble at the top right).
- Describe what you want and press Enter. For example: "Add a pricing section below the hero, with three plans."
The assistant knows which page, frame and element you have selected. It only works on this project: it doesn't touch your code, your files or your terminal.
While it works:
- A blue dot marks the page and frame it is editing, and the canvas shows Agent designing.
- Click Stop to stop it.
- Use the model picker under the message field to change the model.
To give it a reference, click Attach image, or click the chat icon next to an image in Assets.
Each project can have several Design conversations. Use New Design conversation to start a fresh one. Deleting a conversation keeps your project and frames as they are.
You can go back to one of your earlier messages. Vato then restores the design to how it was before that message, when it's safe to do so.
Ask from an agent conversation
You can also ask for a design in a regular agent conversation.
- Ask for an interface, for example "Design the settings screen of my app."
- The agent asks whether to build it directly in your code or in Vato Design. Answer that you want Vato Design.
- The agent creates the project, page and frames, and fills them one section at a time.
If you already said where you want it, the agent doesn't ask again.
To watch it draw, click Vato Design live in the conversation's side panel. This row appears once the agent has used Design. If the side panel is hidden, click Activity in the conversation header. In the live view, Open in Design takes you to the project.
Get better results
- Ask for variants, not replacements. "Make a dark version of this screen" creates a new frame next to the original, so you can compare them. Ask to change the screen itself only when you want to rework it.
- Keep one flow on one page. The agent groups the screens of a flow as frames on the same page.
- Point at what you mean. Select an element or a frame before you ask the assistant.