# Design and Machine Code

Open a Design chat in Machine Code, see your artboards on Code's Canvas, how agents in both apps see the design, and letting Claude Code or Cursor see it too.

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

Design runs its agents through [Machine Code](/docs/code), so the two share
your sign-in, your Machine project, your models and your connected apps.
Each design gets its own project in Code, named after its folder, such as
**Design - Tidepool**.

## Open a chat in Machine Code

Click **Open in Machine Code** at the top of a Design chat. Machine Code
opens the same conversation, in the design's project, so you can carry on
there: build the screens as a real app, wire them to data, or review the
code.

If the artboard has no chat yet, Code starts one named after it (or
**Design · Tidepool** if no artboard is selected), with what
you've said about the design so far. If you have said nothing yet, the chat
starts with a request to build the design from its Canvas.

## Your design on Code's Canvas

Machine Code has its own **Canvas** for designs. While a design is open in
Design, every artboard is on it, and the two stay in step:

- Change an artboard in Design and it updates on Code's Canvas.
- Change one on Code's Canvas (for example with **Revise** or **More like
  this**) and it comes back to Design. New ones land on the design's first
  page.

The Canvas copy lives in `.machine/canvas/design/` in the design's folder.
Leave it to Machine. Your design itself is always the `design` folder.

## How agents see the canvas

Agents don't just read the design's files: they can **look** at an artboard
the way you see it. Design gives every agent two tools:

| Tool | What the agent gets |
|---|---|
| **canvas_list** | Every artboard, its size, and any problems Design found on it. |
| **canvas_view** | One artboard as it renders now: a picture of it, and a measured list of every layer (position, size, text, font and colour). |

Design checks each render for common problems and tells the agent: text
that's cut off, layers that stick out past the board's sides, layers with
no size, pictures that didn't load, and content taller than the board. Agents use this to check their own
work before they tell you they're done.

Agents in Machine Code can see the same artboards through Code's own Canvas
tools, so a Code chat about the design knows what it looks like too.

These tools only look, so they never ask for your approval. In the chat
they show as steps like *Looked over the boards* and *Looked at iOS · Saved*.

A chat keeps its canvas tools when you restart Machine Desktop, so you can
carry on with an older chat.

## Agents outside Machine

Claude Code, Cursor and other agents on your computer can use the same two
tools on your design. Open Design settings › **Connect another agent**, copy
the setup for your agent, and paste it in:

- **Claude Code**: run the `claude mcp add` command in a terminal, in the
  design's folder.
- **Cursor**: add the lines to `.cursor/mcp.json` in the design's folder.

Then ask the agent to look at an artboard, for example *"use canvas_view on
the Home artboard and fix what's cut off"*. It edits the design's files with
its own tools, and Design shows each change as it's saved.

Machine Desktop needs to be open while they use it. **Reset key** in the
same place cuts off every agent you set up before. See
[Settings](/docs/desktop/design/settings#connect-another-agent).