Design a good-looking website with Paper and Claude Code
This is the setup from my reel. Claude Code or Codex interviews you about your business, studies websites you like, and then designs the whole page inside Paper, a design app. When it finishes, you can change any text, colour or shape yourself. The two prompts I used are below. Copy them as they are.
What you need
The Paper app
Download it from paper.design. There is a free plan with 100 AI tool calls a week. My page used about 55, so the free plan covers one page, not a week of experiments. Pro is $20 a month.
Claude Code or Codex
In the Claude desktop app, switch to Code. In the ChatGPT desktop app, switch to Codex.
A folder for your business
Put in anything you have: old website text, a price list, notes, a logo. An empty folder works too. It asks you the questions instead.
Prompt 1: connect Paper
Paste this into Claude Code or Codex once. Skip it if you used the Add to Claude or Add to Codex button inside Paper.
Connect the Paper design app to you. Paper is installed and open on this computer. If you are Claude Code, run this: claude plugin marketplace add paper-design/agent-plugins && claude plugin install paper-desktop@paper If you are Codex, find the Paper command line tool inside the installed Paper app, then run: codex mcp add paper -- "<path to the paper tool>" mcp If Paper is already connected, do not add it twice. Just say so. When you are done, tell me in two lines: is Paper connected, and do I need to restart anything.
Prompt 2: the website interview
Paste this into a new session, opened in your business folder. It does not design anything. It asks, looks at real websites and then writes the design prompt for you.
You are my website design director. Do not design anything in this chat. Your job here is to interview me, study good websites, and then write one complete design prompt that I will paste into a new chat. Ask one question at a time. Give me options to pick from when you can. Use plain words. STEP 1. Learn the business. Read this folder first. Look for anything about the business: what it sells, who buys it, prices, tone of voice, logo, colours, photos, old website copy. - If you find enough, show me a 5-line summary and ask me to confirm it. - If you find nothing, ask me for: the business name, what it sells, who the customer is, and the one thing a visitor should do on the site. STEP 2. Learn what I want. - What kind of website: a one-page landing page, a homepage, or a full site. Which pages. - The feel, in plain words. Light or dark. - What it must have (pricing, reviews, FAQ, a form) and anything I hate on websites. STEP 3. References. - Ask me for 2 or 3 competitor websites. Open each one. Note what works and what is weak. - Then search the web and show me 8 real, live websites with excellent design that would suit this business. Some from my industry, some from outside it. For each one: the link, and one line on what is worth learning from it. - Ask me to pick the 3 or 4 I like most. STEP 4. Study my picks. Open the 3 or 4 I chose. For each one write down the real details: fonts and sizes, colours, spacing, grid, section order, how images are used, how buttons look, how the top of the page is built. Do not copy any single site. Take the best idea from each and make one direction that fits my business. STEP 5. Write the design prompt. Write ONE prompt for a new chat that has the Paper app connected. The new chat knows nothing about this one, so the prompt must stand alone. Put it in one code block so I can copy it. It must have: 1. The business in 5 lines and the one goal of the site. 2. Every page, and the order of the sections on each page. 3. The real words for every section: headlines, sub-lines, body text, button labels. No placeholder text. No made-up numbers, reviews or client logos. Mark anything I must supply as [NEED: ...]. 4. The design system: two fonts with an exact size for each text level, the colours as hex codes, a spacing scale, corner radius, button style, card style. 5. The lessons from Step 4, written as rules. 6. How to work in Paper: - Load the Paper guide first. - Make a new file named after the business. - One artboard per page, 1440 wide. Add a 390 wide phone version of the homepage. - Build one section at a time. Take a screenshot after each section. Fix what looks off before the next one. - At the end, look at the whole page from top to bottom and fix it. 7. Quality rules: - Normal, readable sizes. The main headline is about 56 px on the 1440 artboard, not giant. - Wide margins and room to breathe. - One accent colour at most. - No purple gradients, no emoji used as icons, no glowing blobs, no three identical cards in a row with an icon on top. - Every section looks different from the one above it. - Real photos or clean shapes. No fake dashboards. 8. The last line: "When you finish, list what you built and what I still need to give you." Stop after you give me the prompt.
The steps, in order
- 1
Install Paper and open a new file
Go to paper.design, click download Paper, install it and open it. Make a new empty file and leave the app open.
- 2
Connect Paper to your AI
In Paper, open the MCP panel and click Add to Claude or Add to Codex. Or paste Prompt 1 into Claude Code or Codex and it does the same job. Restart the AI app if it tells you to.
- 3
Start a new session in your business folder and paste Prompt 2
It reads the folder first. If it finds your business details, it shows you a 5-line summary to confirm. If the folder is empty, it asks you.
- 4
Answer its questions
It asks what kind of site you want, light or dark, the feel, what the page must have and what you hate on websites. For competitor sites, paste links or tell it to find them for you. Then pick the 3 or 4 example sites you like.
- 5
Copy the design prompt it writes
You get one long prompt with your real words, fonts, colours and the order of every section. Anything it could not know is marked [NEED: ...]. Mine asked for a WhatsApp number, an email address and a privacy policy link.
- 6
Paste it into a new session, with Paper open
It builds the page one section at a time and takes a screenshot after each one to check its own work. Leave it running until it says it is done.
- 7
Edit it yourself in Paper
Double-click any text to change it. Click a shape to change its colour, size or corners. Drag things where you want them.
What you get, and what you do not
You get a desktop page at 1440 wide and a phone version at 390, in one Paper file you can edit. It is a design. It is not online yet. To put it online, start one more session with Paper open and ask Claude Code or Codex to build the Paper design as a real web page.
If the first result is too plain, say so. I told mine to remove the price and make it crazier, and it built a second, bolder version next to the first one.
Want AI set up like this for your business?We build AI setups and run ads for businesses.
Talk to usAlso free: the CLAUDE.md + AGENTS.md prompt that teaches Claude Code and Codex your business, and the edit my video by voice prompt.