How to Design a Website With AI That Doesn't Look AI-Made

Ask an AI for a website in one sentence and you tend to get the page everyone else gets: a purple gradient, a glowing blob behind the headline, and three identical cards with an icon on top of each. Visitors have seen that page so often that it reads as "made in five minutes."

The same AI does much better if you change the order of work. Make it interview you and study real websites before it draws anything, then have it build inside a design app where every headline and shape stays editable.

This guide gives you both prompts and every step, from installing Paper to a live page.

Why websites made with AI all look alike

A request like "Make me a website for my marketing agency" gives the model nothing to decide with. It does not know who buys from you, what your competitors look like or which sites you admire. So it builds the safest average of every landing page it has seen, and that average is the purple-gradient page.

A designer settles those questions before opening any tool: who the customer is, what a visitor should do, and which real websites set the bar. The interview prompt in this guide makes the AI ask you all of it, then study real sites and write down their fonts, colors, spacing and section order before it designs a single frame.

What Paper is, in plain words

Paper is a design app made by a team led by founder and CEO Stephen Haney. Its own site calls it "the connected canvas for teams shipping with agents." The canvas is built from HTML and CSS, the same material as a real web page, so a design made in Paper can be exported as code.

This method depends on Paper's MCP connection. MCP is a standard that lets an AI assistant use another app's tools. With it switched on, Claude Code or Codex can read and change whatever file you have open in Paper. Paper's setup page lists Claude Code, Codex, Cursor and several other agents. The connection needs Paper Desktop, which runs on macOS, Windows and Linux.

In Paper the result stays a design. You can click on it, move things and fix one word without asking the AI again.

Before you start

• Paper Desktop. Download it from Paper's downloads page. The free plan is enough for one page a week.
• Claude Code or Codex. Claude Code is the Code tab in the Claude desktop app and needs a Pro plan or higher. Codex is in the ChatGPT desktop app and is included, with limits, even on the free ChatGPT plan. The prompts work with either.
• A folder for your business. Old website text, a price list, notes, a logo, a proposal you sent a client. An empty folder works too, and the AI asks you instead.
• Time. We put the whole flow at under 30 minutes for one page, though we did not time it to the minute. The interview moves as fast as you answer, and the build runs on its own.

Stage 1: Install Paper and open an empty file

1. Go to paper.design, click download and pick your operating system.
2. Install it and open it. Sign in when it asks.
3. Create a new, empty file. The AI reads and writes only the file that is open, so this matters.
4. Leave Paper open for the rest of the process. If Paper Desktop is closed, the AI may still see its tools but cannot change anything.

Stage 2: Connect Paper to Claude Code or Codex

You have two ways to do this. Pick one.

Option A: one click inside Paper

1. Click on an empty part of the canvas so nothing is selected. Paper only shows its MCP panel when no element is selected.
2. Open the MCP panel on the right, or click the callout in the top right corner of the editor to open the Connect your agent dialog.
3. Click Add to Claude (for the Claude app and Claude Code) or Add to Codex (for ChatGPT and the Codex CLI).
4. Restart Claude Code or Codex so it picks up the new connection.

Option B: let the AI connect itself (Prompt 1)

Open Claude Code or Codex and paste this once:

CopyConnect 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.

The "do not add it twice" line stops it from creating a second, clashing Paper connection. If Codex cannot find the Paper tool, copy the Paper CLI path from Paper's MCP panel and give it to Codex.

Check that it worked

1. Restart the AI app if it told you to.
2. In Claude Code, type /mcp. Paper should be in the list.
3. The first time the AI uses Paper, it asks your permission. Paper's docs say read-only tools can usually be set to "always allow." The write tools change your file, so approve those with care.

Stage 3: Prepare your business folder

1. Make a folder named after the business and put in whatever describes it: your about text, services and prices, testimonials you have permission to use, your logo and brand colors if you have them.
2. Leave out anything you would not want an AI to read, such as client contracts or personal data. The prompt reads the whole folder.
3. Open that folder in Claude Code (in the desktop app, choose Open folder… under the prompt box) or in Codex.

For our own test, we built a folder for a made-up agency called Brightside Media, with an about file, notes, emails and a proposal. The interview read it and opened with a five-line summary of the business for us to confirm, which saved a round of typing.

Stage 4: Run the interview (Prompt 2)

Start a new session in your business folder and paste this. It does not design anything. It asks you questions, looks at real websites and then writes the design prompt for you.

CopyYou 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.

Prefer a one-click copy? The same prompts are on our free prompt page.

How to answer its questions well

1. Confirm or fix the summary. If the five lines are wrong, correct them now. Everything after this builds on them.
2. Pick the type of site. A one-page landing page is the best first run. For a redesign, put your current homepage text in the folder and give your own URL as one of the competitors.
3. Describe the feel in your own words. "Calm and expensive" or "loud and friendly" helps more than "modern." Say light or dark.
4. Name what you hate. Whatever you list becomes a rule in the final prompt.
5. Give competitors, or let it find them. Paste 2 or 3 links, or pick the option that asks it to find them for you.
6. Choose 3 or 4 reference sites from its list of 8. Mix your industry with sites from outside it, so the page does not end up looking like every competitor.

Why the AI studies your picks in Step 4: "I like this site" is a feeling a model cannot copy. Fonts and sizes, hex colors, spacing and section order are facts it can follow. The prompt also tells it to take the best idea from each site instead of cloning one.

Stage 5: Check the design prompt before you use it

When the interview ends, you get one long prompt in a code block: every section in order, the real words for each, two fonts with sizes, colors as hex codes, the rules it took from your reference sites and the working steps for Paper.

1. Read the headlines and button labels. If a line does not sound like you, change it here, before it reaches the canvas.
2. Search for [NEED: ...]. These are the things the AI refused to invent. In our test it asked for a WhatsApp number, an email address and a privacy policy link. Fill in what you can now.
3. Check that no number, review or client logo was made up. The prompt forbids it, but you are the only one who knows what is true.
4. Copy the whole code block.

Why a new session: we run the build fresh so the AI starts clean, with only the design prompt in front of it and none of the interview's back-and-forth. That is why Prompt 2 insists the design prompt must stand alone.

Stage 6: Build the page in Paper

1. Make sure Paper is open with a new empty file.
2. Start a new session in Claude Code or Codex and paste the design prompt.
3. Approve Paper's tools when it asks. It loads the Paper guide, creates the file and starts on the first section.
4. After each section it takes a screenshot and fixes what looks off before it moves on.
5. Leave it running until it lists what it built and what you still need to give it. Our test page, with a desktop artboard and a phone version, used about 55 Paper tool calls.

The prompt asks for a 1440-pixel-wide desktop artboard and a 390-pixel-wide phone artboard, so you see both versions side by side in one file and can fix the phone layout before anything is built.

Stage 7: Make it yours

1. Double-click any text to change it.
2. Click a shape to change its color, size or corners.
3. Drag things where you want them, the same way you would in Figma.
4. Want a different direction? Ask the AI in the same session. In our test, "remove the price and make it crazier" produced a second, bolder version next to the first one, in the same file, so we could compare them.

From design to live website

At the end you have a design file. Nobody can visit it 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. Because Paper's canvas is HTML and CSS underneath, that build starts from something close to code instead of a picture. A starting prompt for that build:

CopyPaper is open with my website design. Build the desktop artboard and the phone artboard as one responsive web page in this folder, using plain HTML and CSS. Match the fonts, colours, sizes and spacing exactly. If any [NEED: ...] item is still open, list it for me instead of making something up. When you are done, open the page in my browser so I can check it.

Keep the Paper file as the master copy: change the design there first, then ask for the code to be updated. If you would rather hand the whole thing off, we set up AI workflows like this for businesses.

What it costs

Prices below are from each company's pricing page on 27 October 2026.

The weekly cap on Paper's free plan is the number to plan around. One page with a phone version took us about 55 calls, so the free plan suits one serious attempt a week. If you upgrade to Pro and the limit does not lift, Paper's docs say to update the desktop app (About, then Check for updates) and restart it. Current numbers: Paper pricing, Claude pricing, Codex pricing.

Troubleshooting

• The AI says it has no access to Paper. Check that Paper Desktop is open with a file. Then restart Claude Code or Codex; Paper says long sessions are the most common cause of trouble, so a fresh session fixes a lot.
• Paper does not show in /mcp. Restart Claude Code after the install. If it still is not there, click Add to Claude again in Paper's MCP panel.
• Tool calls keep failing. Switch Paper's MCP server off and on again in the panel.
• The page looks generic anyway. Look at your answers. "You decide" on every question brings back the average page. Give it real reference sites and a feel in your own words, then run the interview again.

Paper, Figma or a website builder?

Figma connects to Claude Code too. Figma's setup guide says Claude Code can write to the canvas to create or update Figma content, and the remote MCP server is available from the Starter plan up. If your team already works in Figma, that is the natural choice. You would need to swap the Paper lines in the prompts for Figma ones, and we have only run them with Paper.

An independent eval by Braintrust had coding agents rebuild web pages through each tool's MCP server. Quality came out statistically tied. On the 27 complex designs, Paper runs were faster (about 400 seconds against 568) and cheaper ($2.02 against $2.53 per run). Figma's output used semantic HTML tags more often, which helps accessibility.

If you want a live site today and do not need an editable design file, a hosted builder such as Lovable skips the design stage. Its free plan gives 5 build credits a day, up to 30 a month. You could still run Prompt 2 first and give its design prompt to the builder without the Paper lines, though we have not tested that route.

Who this is not for

• Anyone who needs a live site with booking or checkout this afternoon. This method gives you a design first and a build second.

Frequently asked questions

Can AI design a website for free?

Yes, with limits. Paper's free plan includes 100 AI tool calls a week, and the free ChatGPT plan includes Codex for light tasks. Our test landing page with a phone version used about 55 Paper tool calls. Claude Code is not on the free Claude plan; it starts with Claude Pro at $17 a month on yearly billing.

Do I need to know how to code to design a website with Claude Code?

No. You paste two prompts and answer questions in plain English. Connecting Paper is one button in Paper's MCP panel, or Prompt 1 asks the AI to do it for you.

Is the website live when Claude finishes the design?

No. You get an editable design in Paper with a desktop page and a phone version. To put it online, start a new session with Paper open and ask Claude Code or Codex to build the Paper design as a real web page, then host it.

Can I use Codex instead of Claude Code?

Yes. Paper has an Add to Codex button, and both prompts are written to work with either one. Codex is included with limits on the free ChatGPT plan, while Claude Code needs a paid Claude plan.

Is Paper or Figma better for designing with AI?

Both now let Claude Code write to the canvas. An independent Braintrust eval found output quality statistically tied, with Paper faster and cheaper per run on complex designs and Figma producing more semantic HTML. If your team already uses Figma, stay there.

How long does it take to design a website this way?

We put it at under 30 minutes for one landing page, though we did not time it to the minute. The interview moves as fast as you answer, and the build runs by itself while Paper stays open.

Sources

• Paper homepage
• Paper MCP setup and troubleshooting
• Paper pricing
• Paper Desktop downloads
• Runtime Wire: Paper raises $34 million (founder Stephen Haney)
• Claude pricing
• Codex pricing
• Figma: Claude Code and Figma, set up the MCP server
• Braintrust: Paper MCP vs Figma MCP eval
• Lovable pricing