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.

This is the first Notes post with screenshots in it. Each one is an export from the canvas the post describes, captured by the agent that wrote the page.

01A design tool agents can drive

The rule from the AI-native operator post: before adopting any tool, ask whether an agent can operate it without you. MCP first, then an API, then a CLI. Design was the category 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 satisfies it. 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, writes HTML that becomes new design nodes, screenshots its own work to check it, and exports any node as a PNG, SVG or PDF, all from 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 called System, 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 reference is not documentation. It is the prompt.

The board goes further than pixels. The voice section sets sentence rules, banned words and example lines in our register, so copy drafted on the canvas comes out sounding 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 way a junior designer’s first passes miss. 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.

The file now holds 14 artboards: the reference itself, the home page at desktop and mobile widths, the Unstuck case study layout, the article layout, the AE mark and 8 social card templates. All of them came out of this loop.

04From artboard to shipped code

When a design is approved, the artboard becomes the specification. The agent pulls the JSX structure, computed styles and token values straight from the file rather than eyeballing a screenshot, then translates them into the conventions of the codebase, which here is React with one hand-ordered 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 artboard’s specimen headline 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 for the link unfurl. That is a repeating design task, and repeating tasks get packaged. The canvas holds an article card template, and the publishing skill the agents follow says: duplicate the artboard, set the eyebrow and the 2 title lines, export a PNG under 150KB into the repo.

The card for this post was made that way while the post was being written: one duplicated artboard, 2 changed lines, a 60KB export. I saw it for the first time when I reviewed the draft.

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 rule from the operator post applies to design the same as everything else: the second time you do something, turn it into an asset. A brand that lives on an agent-readable canvas compounds the same way a context folder does. It also changes what we can sell: design, specification and code as one chain, at a fixed fee. If you want your brand working this way, the conversation takes 30 minutes.