Start a design
Open Design mode, choose a folder for your design, and ask an agent for your first screen. Plus what Design saves on your computer.
1. Open Design
Click the Machine icon at the top left of the window and choose Design. Machine Desktop remembers the mode you were in, and the next time you come back to Design it opens your last design straight away.
The first time, you see the welcome screen:
2. Choose a folder
Click Choose a folder and pick (or make) a folder for the design, such
as Documents\Tidepool. If the folder has no design yet, Design starts one
for you with a single 1440 × 900 artboard called Desktop.
Your last eight designs are listed under Recent designs. Click one to open it again.
3. Ask for something
Type what you want into the box at the bottom, "Ask the agent to design or change something…", and press Enter:
The agent builds on the canvas while you watch, then tells you what it changed. You can keep it, undo it, or ask for more. See Work with an agent.
Or skip the agent and draw it yourself: press F and drag on the empty canvas for a new artboard, then add text (T), boxes (R) and images. See The canvas.
What Design saves
A design is plain files inside a design folder in the folder you chose:
| File | What it holds |
|---|---|
design/design.json | The pages, and where each artboard sits on the canvas and how big it is. |
design/artboards/ | One file per artboard: its layers, their text and their CSS styles. |
design/tokens.css | Your theme: colours, sizes and fonts every artboard can use. Made when you add your first token. |
design/assets/ | Pictures you add. |
design/README.md | A short guide to the format, for any agent or person who opens the folder. |
design/.history/ | Earlier versions of the design, packed small. See Version history. Leave this folder alone. |
Everything saves as you go. The top bar says Saved, Saving… or, if something went wrong, Not saved (point at it to see why).
Because a design is just files, anything can work on it. If another agent or an editor changes a file, the canvas updates by itself. Undo works on those changes too.
Design also keeps earlier versions as you work: after each agent turn, every few minutes while you edit, and whenever you save one with a name. Open them with the clock in the top bar. See Version history.
Machine Code gets a copy
While a design is open, Design keeps a copy of it in
.machine/canvas/design/ so Machine Code's Canvas and its agents can see
it. You don't need to touch that folder. See Design and Machine Code.
Switch designs
At the bottom of the left panel, click the design's name for:
- Show in folder: open the folder in File Explorer or Finder.
- Copy folder path
- Open another design…: back to the welcome screen with your recent designs.
The × at the top right of the window (Close design) also takes you back to the welcome screen.
Limits
| Up to | |
|---|---|
| Pages | 200 |
| Artboards | 500 |
| Layers in one artboard | 5,000 |
| Artboard size | 20,000 px a side |
| One artboard's file | 2 MB |
| A picture | 15 MB |