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

Canonical page: https://themachine.myapps.ai/docs/desktop/design

**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](/docs/code).

![Design mode with the Tidepool app open: iOS, Android and web artboards on the canvas, the layers on the left, and the properties of the selected card on the right](/images/docs/desktop/design-overview.webp)

## 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](/docs/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](/docs/desktop/design/settings). |

## How it fits together

Machine Desktop has three modes, and you switch between them from the menu at
the top left:

![The mode menu: Machine, Code and Design](/images/docs/desktop/design-mode-switcher.webp)

| Mode | What it's for |
|---|---|
| **Machine** | Your bots, threads and group chats. |
| **Code** | Coding agents working in folders on this computer. See [Machine Code](/docs/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](/docs/desktop/design/machine-code).

## Start here

- [1. Start a design](/docs/desktop/design/get-started): Open Design, choose a folder, and ask for your first screen.
- [2. Work with an agent](/docs/desktop/design/design-with-an-agent): Pick a model, prompt, watch it build, and keep or undo what it changed.
- [3. The canvas](/docs/desktop/design/canvas): Move around, select, draw, move and resize, and tidy up.
- [4. Layers and properties](/docs/desktop/design/layers-and-properties): Edit layout, colour, type and effects; theme tokens and components.
- [Inspiration](/docs/desktop/design/inspiration): Search real app screens and have an agent rebuild one in your design.
- [Export and code](/docs/desktop/design/export-and-code): PNG, SVG or PDF, and copy any artboard as code.
- [Design and Machine Code](/docs/desktop/design/machine-code): Open a chat in Code, and how Code's Canvas shows your design.
- [Version history](/docs/desktop/design/version-history): Look at earlier versions, restore one, or copy a board back.
- [Settings and your project](/docs/desktop/design/settings): Light or dark, the model new chats start with, and your project's apps.
- [Keyboard shortcuts](/docs/desktop/design/shortcuts): Every shortcut on the canvas.
- [Troubleshooting](/docs/desktop/design/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."*