In brief

Paper is a design tool with an MCP server, so Claude Code can read the canvas, draw new artboards and export assets. I keep one design-system reference artboard in the brand file. Agents read it before they design anything, and every page, card and layout they produce comes out on brand. Every design in this post, including the page you are reading, was made this way.

01A design tool agents can drive

I keep one rule for tools, written up in 6 habits of an AI-native operator: before adopting any tool, ask whether an agent can operate it without you. Design was where that rule was hardest to satisfy. Design tools are built for a hand on a mouse, and for years the only way to get a design out of one was to look at it.

Paper passes the test. The app is a 2D canvas, and it ships an MCP server, so Claude Code can work the file the way I would. It lists the artboards, reads the design tokens, draws new frames onto the canvas, screenshots its own work to check it, and exports any frame as a PNG, SVG or PDF. All of it happens in the same session that edits the codebase.

The Augmented Engineering brand file in Paper, zoomed out: the design reference board, the page designs and the social card set.
The brand file in Paper: the design reference on the left, page designs in the middle, the social card set below.

02The reference artboard is the design system

The first artboard in the file is the design reference. It holds the monogram and wordmark rules, both colour themes, the full type scale, surface treatments, component states, the motion rules and a voice guide. Alongside it the file stores 69 design tokens: colours, sizes, weights, tracking, spacing steps and corner radii.

Agents read this board before designing anything. That is the whole trick: the board is the prompt.

It covers more than visuals. The voice section sets sentence rules, banned words and example lines, so copy drafted on the canvas sounds right before I touch it.

The colour section of the design reference: dark and light token sets, each swatch named with its hex value and role.
The colour section: 2 themes, one token set, every swatch named with its role.
The voice section of the design reference: sentence rules on the left, example lines in the brand register on the right.
The voice section: tone rules live on the canvas next to the colour tokens.

03From reference to full designs

A new design starts as a sentence in the terminal: design an article layout for Notes posts, or draw a LinkedIn cover. The agent reads the tokens and the reference, posts a short brief back, then draws the artboard in small pieces. I watch it appear on the canvas. After each section it screenshots its own work and critiques the spacing, alignment and contrast before moving on.

I still art-direct. First passes miss, the same way a junior designer’s do. I give notes in plain English: tighten the byline, the quote is shouting, let the card breathe. Each round of notes lands in minutes rather than days.

04From artboard to shipped code

When a design is approved, the artboard becomes the specification. The agent pulls the structure, styles and token values straight from the file rather than eyeballing a screenshot. Paper even ships this step as a skill for Claude Code, called design-to-code. A skill is a written procedure the agent follows, and this one turns an artboard into production code in the conventions the project already uses. Here that is React with one hand-written stylesheet.

The page you are reading went through exactly that. The article layout artboard specified the crumb, the two-weight headline, the outline rail and the reading measure, and the component implements it.

The article layout artboard in Paper: crumb, two-weight headline, standfirst, byline and outline rail.
The artboard, in Paper.
The shipped article template in the browser, showing the first Notes post with the same layout as the artboard.
The template shipped, in the browser.

Look closely and the two disagree. The placeholder headline on the artboard says 7 habits; the post that shipped says 6. Once the code exists, the code is the source of truth. The artboard is allowed to fall behind, because keeping mocks of shipped screens in sync is work nobody is paying for.

05The repeating design task becomes a skill

Every post needs a share card at 1200×627, the preview image that shows when the link is shared. That is a repeating design task, and my rule for repeated work comes from the operator post: the second time you do something, turn it into an asset. Here the asset is another skill, our own publishing one.

The card for this post was made this way while the post was being written.

The share card for this post: the headline Designing with agents, Paper and Claude Code, over the particle field.
This post’s share card, exported from the duplicated artboard.

The brand now lives on a canvas agents can read, and every design leaves the file more useful than it found it. That changes what we can sell: design, specification and code as one chain, at a fixed fee. If you want your brand working this way, get in touch. The conversation takes 30 minutes.