How to design a website in Paper
A step-by-step guide to designing a website in Paper with Claude: tokens, page designs, states, accessibility and a clean handover to code, using our own site.
- Written by
Matthew Bishop- Published
- Reading time
- 5 minutes
To design a website in Paper, set up the design system first (colour, type, spacing and breakpoints as tokens), design the key pages from those tokens, then add the states and phone layouts the build will need. Because Paper’s canvas is real HTML and CSS, and Claude can read and write your files through Paper’s MCP server, you can refine designs in conversation and hand them to code without redrawing anything (Paper). Here’s how, step by step, using how we designed superbrick.studio as the example.
This is the first of two guides. The second, how to build a website with Claude Code, picks up where this one ends.
What you’ll need
- Paper Desktop, with a file for the site.
- Claude, connected to Paper. Paper’s docs cover installing its plugin for Claude Code, or using Add to Claude in Paper Desktop’s MCP panel. Desktop needs to be open with your file for Claude to read or change it (Paper).
- Real content, or at least a content plan. Designing to placeholder text hides the problems you’re trying to find (planning content first).
1. Choose a direction
Start with a few references and one or two visual directions before you commit to anything. We explored several directions in Paper before settling on ours: a deep ink colour, one bright blue, and a soft gradient that fades from blue into white, set in PP Neue Montreal.
Keep the direction small at this stage: a palette, a typeface and one or two signature elements. Everything else follows from the system.
2. Set up the design system as tokens
Tokens are the named values every design and every line of code will use: colours, type sizes, spacing and breakpoints. Set them up before designing pages, because every page you design afterwards inherits them.
Ours ended up as:
| Token group | What we set |
|---|---|
| Colour | Ink, a bright blue, a muted grey for secondary text, the gradient blues and a cream |
| Type | PP Neue Montreal at two weights, a scale from 12 to 96 pixels, tight tracking on display sizes |
| Layout | Breakpoints at 640, 1024 and 1440 pixels |
The point of doing this in Paper is that the tokens become the single source of truth. Later, they’re exported into the code as they are, rather than retyped, so the design and the site never disagree about a colour.
3. Design the key pages
Design the pages that define the site first, at desktop width, from your tokens. We designed four: Home, Services, Work and Contact, each at 1,440 pixels wide. Between them they cover most of the patterns the rest of the site reuses: a hero, project cards, a list of services, a quote, FAQs and a form.
Design with sections in mind. Each band of a page, such as a hero, a grid of work or an FAQ, should work on its own, because that’s how it will be built: as a reusable section that any page can use.
4. Refine with Claude, in conversation
With Claude connected, refining a design becomes a conversation. It can make changes directly on the canvas and check them with a screenshot. A few of our prompts from the first day:
“could you make any edits to the gradient to make it smoother?”
“main goal is to blend into the white of the other sections, do you think it does that?”
Small, specific prompts work best: one change, one reason. Ask questions as well as giving instructions. Asking whether the gradient actually blended into the next section led to a better gradient than any instruction would have.
Expect to iterate a lot. Across our site, Claude wrote designs into Paper and checked them with screenshots more than 500 times each.
5. Design the states and the phone layouts
A page design isn’t finished until its states are. Before handing over, we added:
- The mobile menu, including how it opens.
- Form states, such as what the contact form looks like once an enquiry is sent.
- Phone versions of the key pages, so the build doesn’t have to guess.
- Brand assets, such as profile and cover images, on a page of their own.
Later, when we added a journal to the site, it was designed in Paper the same way first, in a few variations with phone versions of each, before any of it was built.
6. Check accessibility in the design
Fix contrast and legibility in the design, not after launch. Our muted grey for secondary text was too light to pass WCAG AA contrast, so we darkened it in Paper itself. Because the code reads its colours from the design, the fix carried through to every page automatically.
Check at least:
- text contrast against every background it sits on, including gradients
- type sizes on phones
- focus and hover states for links and buttons
7. Prepare the handover to code
A clean handover is what makes the build fast:
- Name artboards clearly, so a prompt like “build the Work page” has one obvious target.
- Keep tokens as the source of truth. If a value changes, change it in Paper and re-export, rather than editing the code by hand.
- Build from components, so repeated elements are the same element, not near-copies.
- Leave nothing to guess. Any state or breakpoint you haven’t designed is one the build will have to invent.
From there, the build reads exact values from your designs instead of eyeballing screenshots. Our first four pages came out within a few pixels of the designs. How to build a website with Claude Code covers that part.
Questions we get asked
What is Paper?
Paper is a design tool whose canvas is built on HTML and CSS, so a design is already close to code. AI agents such as Claude can read and write Paper files through its MCP server, which lets you design in conversation and hand designs to code without redrawing them.
Can Claude design a website in Paper?
Yes, with you directing it. Claude can create and change designs on the canvas and check them with screenshots, but the direction, the decisions and the judgement are yours. It works best once your tokens are set and your prompts are small and specific.
Should we set up design tokens before designing pages?
Yes. Tokens for colour, type, spacing and breakpoints keep every page consistent, and they’re what carries the design into code. Setting them first means every page you design afterwards inherits them.
How many pages should we design before building?
Enough to cover the site’s patterns. We designed four pages at desktop width, plus states and phone layouts, which covered most of the sections the rest of the site reuses. New pages were then assembled from those sections.
If you’d like a site designed this way, see our website design service, or tell us about your project.
