DesktopDesign
Design
Design screens and pages on a canvas of artboards, by hand or by asking an agent. What Design mode is, what you need, and where to start.
Design is a canvas in Machine Desktop where you lay out screens, apps and web pages on artboards, the way you would in a design tool. The difference is that every artboard is made of real, editable HTML and CSS, and an AI agent works on it with you.
- Ask for it. Type "Add a sign-in screen in the same style" and an agent builds it on the canvas, layer by layer, while you watch.
- Change it by hand. Click any text, button or box to move it, resize it, or change its colour, font and spacing.
- Take it further. Copy any artboard as React, Tailwind, Vue, SwiftUI or Jetpack Compose code, export it as an image or PDF, or carry on in Machine Code.
Design at a glance
| Where | Machine Desktop on Windows and Mac. Switch to it from the Machine menu at the top left. It isn't on the phone apps or the web. |
| Where your work lives | In a folder on your computer that you choose. A design is plain files, so you can back it up, share it, or put it in Git. |
| Agents | Every model you can use in Machine Code: Machine's own models, and your Claude, ChatGPT or Cursor plan if you've connected one. |
| Cost | Editing by hand is free. What agents do uses your Machine credits, the same as any chat, unless you run them on your own plan. |
| Your apps | Agents can use the apps connected to your Machine project, such as Pixio for images. See Settings and your project. |
How it fits together
Machine Desktop has three modes, and you switch between them from the menu at the top left:
| Mode | What it's for |
|---|---|
| Machine | Your bots, threads and group chats. |
| Code | Coding agents working in folders on this computer. See Machine Code. |
| Design | Artboards your agents can edit. |
Design and Code share the same sign-in, the same Machine project and the same agents. A Design chat can be opened in Code with one click, and Code can read the design's artboards. See Design and Machine Code.
Start here
1. Start a design
Open Design, choose a folder, and ask for your first screen.
2. Work with an agent
Pick a model, prompt, watch it build, and keep or undo what it changed.
3. The canvas
Move around, select, draw, move and resize, and tidy up.
4. Layers and properties
Edit layout, colour, type and effects; theme tokens and components.
Inspiration
Search real app screens and have an agent rebuild one in your design.
Export and code
PNG, SVG or PDF, and copy any artboard as code.
Design and Machine Code
Open a chat in Code, and how Code's Canvas shows your design.
Version history
Look at earlier versions, restore one, or copy a board back.
Settings and your project
Light or dark, the model new chats start with, and your project's apps.
Keyboard shortcuts
Every shortcut on the canvas.
Troubleshooting
When something doesn't look or work right.
Good things to ask for
- "Design an onboarding flow for a meditation app: three iPhone screens."
- "Make an Android version of the Today screen, in Material 3."
- "Turn this screenshot into an editable screen." (with a picture attached)
- "Make a dark version of every board."
- "The pricing table looks crowded. Give it more room and make the middle plan stand out."
- "Make a theme: brand colour, two greys, a heading font and a body font."