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.
Design runs its agents through Machine 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 addcommand in a terminal, in the design's folder. - Cursor: add the lines to
.cursor/mcp.jsonin 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.