A Lemonstone guide

HTML web page
instead of PDF.

This guide shows you how to build an interactive web page that can present anything you would normally send as a document. A product presentation, a CV, an invitation, a report.

It covers the whole thing, from the first prompt you send Claude to the finished page being live on the internet, on your own domain if you want one.

←→ Use the left and right arrow keys on your keyboard to move through the guide.
You are reading one of these pages right now. It was built this way.
What's the difference

What the HTML page can do that a PDF cannot.

It opens

A 6 MB attachment on a phone means a download, a wait and a pinch to read the table. A link opens in one tap.

You can update it

The page can be changed after it has been sent. A wrong figure, a date that passed, a price that moved. The link they already have shows the new version.

It's interactive

Sliders, calculators, photo galleries, buttons, maps. Anything a real website does, with interactive features like the example below.

The design

Full width photos, video, motion, and type that sizes itself to the screen. A level of design nothing built to fit a printed sheet can reach.

The link preview

Sent on WhatsApp it arrives as a card with a picture, a title and one line, all chosen by you for that page. Not a gray file icon.

Purchase price $2,000,000
Resale price $2,450,000
$1.9Mdrag the resale price$3.0M
ROI +22.5%
Profit +$450,000
The process

What the process looks like.

It starts with one prompt. You paste it into Claude and it lays out the whole workflow, so Claude knows what to ask you for and in what order. It then asks for your content, your design and the shape of the page, one thing at a time, and builds only when you reply GO.

That gets you the page. After it you change what you do not like, make the preview picture, get the file out, put it online at its own address and send it. Ten steps, and this guide walks through every one.

Creating the page Steps 1 to 5

01

The master prompt

One prompt, pasted into Claude. It sets out the workflow and what to ask you for.

02

Your content

The document, the numbers, the photos. Whatever the page is about.

03

Your design

A screenshot of a site you like, or your brand guidelines.

04

The shape

Claude proposes the sections and the order. You edit until it reads right.

05

Go

You reply GO and it builds the page.

Finishing it and sending it Steps 6 to 10

06

Changes

You go through it and say what to fix, until it is the one you want to send.

07

The link preview

What the card looks like when the link is sent, and the picture you make for it.

08

The file

You ask Claude for the page as one file with the photos inside, and put it in a folder.

09

Put it online

The folder gets a real address, and the preview card is switched on.

10

Send the link

Paste it anywhere, and know what to keep off a page anyone can forward.

Before you get started There are a few things to settle about Claude first. Which version to work in, which plan you need, and the limits worth knowing before you upload anything. The next page covers all of it.
Before you get started

Which Claude, and which plan.

Where you work

Claude chat

Start here
claude.ai, or the desktop app

The ordinary chat window most people already use, and it handles all of this perfectly well. You type, the page builds in a panel beside you and changes as you ask. Everything in this guide is built here.

Claude Cowork

Later
in the desktop app, on the web and on the phone

On the desktop app it works in a real folder on your computer, and it remembers how you like things done. For when you keep coming back to the same project.

Claude Code

Skip it
the desktop app, or a terminal window

The developer version. You do not need it for any of this.

Which plan

Free

Enough to build one page. You will hit the limit in the middle of a conversation.

Pro, about $20 a month

Start here

Enough to build these comfortably. Two limits: one resets every few hours, one every week. Running out mid-page is nearly always the short one, so wait rather than upgrade. This is the one to sign up for.

Max, $100 or $200

Only when you keep running out on Pro. There is no reason to upgrade before you know you need it. Prices move, so check claude.com.

A few things to remember

20 files per chat

An exact limit, and photos count toward it. The fuller a conversation gets the more likely Claude is to lose track of what is in it.

PDFs up to 100 pages

Past that Claude reads the words but not the pictures, and 1,000 pages is the hard stop. Split a fat brochure first.

One project per chat

Build one page per conversation. Two in the same chat and the numbers start mixing.

Stay in the same chat

A new conversation knows nothing about the last one. Finish the project where you started it.

STEP 01Start here

The master prompt.

This is the first thing you actually do. Copy the prompt in the box, open a brand new Claude conversation and paste it in. You do not need anything else to start.

After that you are only answering questions. The rest of this guide walks through each of those answers, so you know what is coming and what to have ready before it asks.

Save it somewhere You will use this again for every page you build. Keep it in your notes.
Do not attach anything yet Send this on its own. Claude will ask you for your files in a moment, and sending them early is what makes it start building too soon.
The only prompt you need
You are going to help me build one web page that I can put
online and send to someone as a link, instead of sending a
document or an attachment. I am not a developer.

Work through these stages with me, one at a time. Never ask
for two stages in the same message. Start every reply with
the stage you are on, like STAGE 2 of 4, your design.

STAGE 1  MY CONTENT
Ask me for the document or the information the page is built
from, for any photos, and for my logo, a photo of me and my
contact details if I want them on the page. When it arrives,
read every file and check every number. Add up any payment
plan or schedule and tell me whether the parts match the
total. Recalculate any return or profit figure from the
prices given. Show me a list of anything that does not add
up, anything missing, and any date that has already passed.
Do not correct anything quietly. Wait for my answer before
you move on.

STAGE 2  MY DESIGN
Ask me for a screenshot of something whose design you should
copy. Tell me a link gives you the words but not the look,
so a screenshot is what you need. When it arrives, tell me
the colors and the fonts you can see, and confirm what you
will use.

STAGE 3  THE SHAPE
Do not ask me what sections I want. Propose them. Give me a
numbered list of the sections you think this page should
have, in the order you think they should be read, with one
line each saying why. Then ask me to change, remove, reorder
or add anything, and ask me separately whether there is
anything I want on the page that was not in the files I sent
you. If I name something you do not have the facts for, ask
me for them before you build it. Keep proposing until I am
happy.

STAGE 4  BUILD
When I reply with the single word GO, and not before, build
the page.

RULES FOR ALL OF IT
- Write no code and build nothing until I reply GO. Not a
  draft, not an example, not a preview.
- Ask me one thing at a time and wait for my answer.
- After each stage, tell me in two or three lines what you
  now have and what is still missing.
- Never invent anything, especially a number. Ask me, or
  leave a clear placeholder and tell me about it.
- When you build: one single HTML file with all the CSS and
  JavaScript inside it, phone first, my photos referenced by
  their file names for now, the Open Graph tags so a shared
  link shows a picture, a title and one line of description,
  and meta name robots content noindex.
- When you are done, list anything you left as a placeholder.
- When I ask for the finished file, shrink my photos for the
  web, put them inside the HTML file itself, and give me that
  one file to download.
- When I give you the address the page lives at, put it into
  the Open Graph tags, the picture's address included, and
  give me the file again.

Start with STAGE 1 now.

Scroll inside the box to read it all. The copy button takes the whole thing.

STEP 01What happens next

Claude takes it from here.

You should get something close to this back within seconds. From now on you are answering questions, not writing prompts.

  • It tells you the stage every time. You always know where you are and how much is left.
  • It asks for one thing at a time. If it asks for everything at once, say "one stage at a time please" and it will go back to asking properly.
  • It will not build early. If it starts writing code before you say GO, say "stop, we are still on stage 1" and it stops.
  • Nothing is lost if you take a break. Come back to the same conversation and say "where were we".
Example of what Claude sends back
ClaudeStage 1 of 4

Understood. I will work through four stages with you and I will not write any code until you reply GO.

STAGE 1 of 4, your content. Send me the document or the information this page is built from, plus any photos you want on it. A PDF, a Word file, a spreadsheet or a screenshot all work.

Once it arrives I will read every file, check the numbers and show you anything that does not add up before we go any further.

The wording will differ. The shape will not.

STEP 02Your content

Now it is time to provide the content.

Before anything about how the page looks, Claude needs to know what is going on it. That is this step. You hand over the source material and it reads all of it.

Send the document the page is built from, the numbers, the photos and anything else you want on there. A PDF, a Word file, a spreadsheet, a screenshot, a link to a page that already holds the information, or just type it out yourself. Claude will not invent a price or a payment plan, so whatever you leave out will not be on the page.

Send it all in one message Attach every file at once rather than dripping them in. Claude reads them together and can spot where two of them disagree.

The pile

  • The source material. The brochure, your analysis, the schedule, the spreadsheet. A PDF, a Word file, a screenshot or a link all work.
  • The photos. Name them 1.jpg, 2.jpg and so on in the order you want them seen, so Claude knows which one is the cover.
  • Your logo, if it is a company presentation. Ideally a PNG with a transparent background.
  • A photo of yourself, if you want to be on the page.
  • Your contact details. WhatsApp number in full international form, email, website, and your social accounts if you want them on there.
STEP 02The number check

Let's check the numbers.

This one happens on its own, because the master prompt asks for it. Claude goes through every number in what you sent, adds up anything that should total, recalculates anything worked out from a price, and checks any date that has passed.

It shows you what does not match and waits for your answer before anything gets built.

Why it is in there Brochures and analyses are not always right. A calculation that does not add up, a figure typed wrong, a name spelled wrong. This step is what stops any of that being carried into a new presentation with your name on it.
Example of what Claude sends back
Claude3 things to check

I read all four files. Three things do not reconcile.

  • The first instalment is listed as 10% but the figure shown is 345,530. Ten percent of 3,545,300 is 354,530.
  • Payment two was due 15 February. That date has passed.
  • Page 7 has a heading and no content under it.

Tell me which of these to correct and which to leave, and I will move on to stage 2.

Answer it, then it moves on by itself.

STEP 03Your design

Choose your design.

This step is about the design. You do not have to name a color, pick a font or work out where anything sits. Claude handles all of that. The one thing it cannot do is guess whose taste to follow.

So you point it at something that already looks the way you want. Same idea as the last step: you provide the source and it does the rest. Four options below. Pick whichever suits you, send it in the chat, and you are good to go.

Don't miss this Do not paste a link. Unless you are in Claude Code, Claude cannot see a web page. It reads it as text, so a link gives it the words and none of the colors, fonts or layout. A screenshot is what carries the look. One image, and it sees the whole thing at once.

How to take a screenshot

MacHold Cmd + Shift + 4, drag a box around the part you want. It saves to your desktop. Drag that file into the chat.
PCHold Windows + Shift + S, drag a box. It copies. Click in the chat and press Ctrl + V.
Option one

Your own company website

Safest if you work under an agency brand. Everything you send stays consistent. Send a screenshot of your homepage.

Option two

A page you saw and liked

A developer's launch page, a hotel site, an app. Send a screenshot of the part you liked and say you want the feeling, not the content.

Option three

Your brand guidelines

A PDF with the hex codes and the fonts in it beats any screenshot, because the values are exact. Send the PDF.

Option four

Nothing at all

Say so. Ask it to describe three directions in words and pick one. Dark and expensive, light and editorial, warm and photographic.

STEP 04The shape

Time to decide the order.

You do not have to know what sections a good page has. Claude proposes an order and tells you why, and you change what you do not like. Move things, cut things, add things. Keep going until it reads the way you want.

Write your changes in the chat Say things like swap 3 and 4, cut the map, or move the gallery to the end. Plain English is enough. Point at a section by its number or its name and say what you want done to it.
Example of what Claude sends back
ClaudeStage 3 of 4

Here is the order I would use. Tell me what to change.

  1. Cover with the price. One photo, the name, the number. Nothing competing.
  2. Why this one. Two lines on why it suits them, from what you told me.
  3. Payment plan. Marked against today's date, so it stays right.
  4. The return. A slider on the resale price, on your own model.
  5. Gallery. Your six photos, full screen when tapped.
  6. You, and what happens next. Your photo and a WhatsApp button.

The return goes above the gallery on purpose. It is the thing they came for.

Is there anything you want on the page that was not in the files you sent me?

STEP 04Before you say GO

Ask for anything that is not in your document.

Claude presents the order, then asks whether there is anything else you would like to add. Claude only knows what you sent it. Hand over a PDF and you get that same PDF back as a page, so anything that is not already in there has to be named here. Below are a few things you can ask for. Naming one is enough, and Claude asks you for anything it still needs before it builds.

Payment plan against today

Paid, due now, still to come, worked out from today's date every time the page is opened.

A calculator with a slider

The reader moves the number and the return follows. Say which number moves and what it changes.

A gallery

One big image, thumbnails under it, full screen when tapped, swipe on a phone.

A WhatsApp button

One tap and their WhatsApp opens with a message already typed in.

A comparison table

Three or four options side by side, scrolling sideways on a phone rather than shrinking.

Drive times

Ten minutes to the airport, twenty to the beach. Give the real times, or Claude guesses them.

Your card

Photo, name, company, and one line on why they should trust you with this.

What happens next

Three short steps setting out what happens after they say yes.

If you think of something after the page is built, you can still ask for it. It is just another round.

STEP 05Go

Reply GO.

That is the whole message. One word. Claude has your content, your design and your agreed shape, and it has been holding all of it without writing a line.

Your photos will look broken In the preview panel inside Claude, every photo will be an empty box. That is normal and nothing is wrong. The preview cannot reach files on your computer. They appear in the file you ask for in step 08.

If it asks a couple of questions before it starts, answer them. It is asking about things it genuinely cannot guess.

What you should get back

  • One page, in a panel beside the chat. Scroll it there before you judge anything.
  • A short list of placeholders. Anything it could not find in what you gave it.
  • Your design, not a template. If it looks nothing like your reference, say so now rather than fixing it piece by piece later.
  • The sections you agreed, in the order you agreed them.
If Claude started building before GO It is supposed to wait, and mostly it does. If it did build something during stages 1, 2 or 3, say "start again using everything from stages 1, 2 and 3". Nothing you sent is lost.
STEP 06Changes

Change what you do not like.

The first version is rarely the one you send. Both ways of fixing it work. Change one thing, look at it, then move to the next. Or write out several changes in one message. That is a preference, not a rule. What decides how many rounds it takes is how clearly you write each change, not how many you list at once.

Too vague to act on

Make it better I do not like the design Fix the top and change the colors and add the floor plan and make the text smaller It looks bad on my phone

Clear enough to act on

The price is smaller than the project name. Swap that, the price should be the biggest thing on the cover. The gallery feels cramped. Give the photos more room and show three at a time instead of four. One change. Move the payment timeline above the gallery. Keep everything else exactly as it is. On my iPhone the table runs off the right edge and I cannot read the last column.
Go section by section either way Name the section, page or slide, say what you want changed on it, then move to the next one. That holds whether you send one change or ten. Say the outcome, not the code, and add "keep everything else exactly as it is" to any single fix.
STEP 06Before you call it done

Audit your work.

Four passes worth running once the page is close to done. Each one looks for a different kind of problem. None of them is required, they are a recommendation. Paste them all in one message, or one at a time.

One at a time, or all at once One at a time is easier when Claude finds something, because you only have one thing to talk about. All at once is quicker, and usually there is not much to find. Both work. It is a preference.
  • The phone pass. "Go through this page as if you are on an iPhone. Find anything that overflows, any text under 14 pixels and anything I have to pinch to read."
  • The numbers pass. "Read every number on the finished page against my source documents and confirm each one, or flag it."
  • The English pass. "Read this as someone who has never met me. Cut anything that sounds like marketing filler and flag anything unclear."
  • The thumb pass. "Anything a reader has to tap, make sure it is big enough to hit with a thumb without zooming."
STEP 07What they see

The WhatsApp preview.

You can give the page a preview picture and a line of description for WhatsApp. Below is what it looks like. The next page makes the picture.

An attachment has to be downloaded before it can be read.

One tap, no download, opens inside WhatsApp.

STEP 07The picture

Make the preview picture.

The picture is the biggest part of the card, and it is yours to choose. A photo of the property, a render from the brochure, or a screenshot of the top of your page, taken the same way as in step 03. Anything works.

  1. Pick the picture. One image, with the important part in the middle.
  2. Name it preview.jpg.
  3. Keep it with your photos. You will need it in the next step.
What it looks likeExample
The size 1200 by 630 pixels, JPG, under 600 KB. The last one is Meta's own limit. Over it, WhatsApp shows no picture at all.
If your picture is the wrong size Give it to Claude in a separate chat and ask for it cropped to 1200 by 630 and under 600 KB.
STEP 08The file

Get the web page out of Claude.

Your page is finished in the panel. Ask Claude for it as one file, and put that file in a folder.

  1. Ask for the file. Type Shrink the photos for the web, put them inside the file and give me the finished HTML to download. Claude hands you one file with the photos in it.
  2. Make a folder named after the page, all lowercase, no spaces. Rename the file to index.html and put it in.
  3. Put the preview picture from step 07 in the same folder.
  4. Double click index.html. Your photos are there.
What the folder looks likeCopy this shape
eden-house/
  ├── index.html ← the downloaded file, renamed
  └── preview.jpg ← the picture from step 07
STEP 09Hosting

Put it online.

The folder on your desktop is not something you can send. It needs an address. Three levels. The third sits on top of the second.

What the address looks like yourname.com/eden-house against fluffy-pastry-1a2b3c.netlify.app. The same page either way, and the address is the first thing they see.
LevelWhat you getCostSend it to someone?
1. Share from Claude The page has a share button. You get a claude.ai link anyone can open. Thirty seconds of work. Free No. The link says claude.ai and the preview wears Claude's branding, not yours.
2. Netlify Drop Log in, drag your folder onto a web page, and it is live in seconds on a real address with a padlock. Free Yes. The address ends in netlify.app, which looks perfectly normal.
3. Your own domain The same thing on yourname.com/eden-house. Your name under every link you ever send. About $10 to $15 a year Yes, and this is the one worth doing.
STEP 09Doing it

Netlify, and your own domain.

Level two

Netlify Drop

  1. Go to netlify.com/drop and log in. A free account, no card.
  2. Drag your whole folder onto the box. The folder, not the file inside it.
  3. Seconds later you have a live address.
  4. Rename it under Project configuration → General → Project details, and you get yourname.netlify.app.
  5. To update later, open your site, click Deploys, and drag the folder onto the box at the bottom of that page. The link never changes. Dragging onto netlify.com/drop again makes a second site with a second address.

Keep the folder under 50 MB and no single file over 10 MB, or the upload sticks.

Level three

Your own domain

  1. Buy one at Namecheap, Porkbun, GoDaddy or one.com. Around $10 to $15 for the first year. Check the renewal price before you buy, some registrars double it.
  2. In Netlify, open your site, go to Domain management and add the domain.
  3. Copy the nameservers or records it shows you into the settings where you bought the domain.
  4. Wait. Usually minutes, sometimes up to a day. The padlock appears on its own and costs nothing.
One domain, every page Put each page's folder inside one site folder. Always drag the whole site folder, because what you drag replaces everything that was there. You get yourname.com/eden-house and yourname.com/the-valley forever, off one purchase.
STEP 09The preview card

Turn the WhatsApp preview on.

Once the page is online, you give Claude one more prompt so it can add the preview. Claude needs the four things below from you. On the right is the exact prompt, with those four things marked in amber. Swap them for your own.

1
The address Where your page lives now. It shows in the preview, and only your own domain changes it.
2
The picture The preview.jpg from step 07. Its address is the page address with /preview.jpg on the end.
3
The title One line, around 60 characters. Not "Untitled document".
4
The description One sentence saying what is inside, so they know it is worth a tap.
Swap the amber parts for your own
The page lives at https://eden-house.netlify.app. Put that
address into the Open Graph tags, with the picture at
https://eden-house.netlify.app/preview.jpg, written in full
and starting with https. Title "Eden House · The Park".
Description "A 3 bed canal view residence. Payment plan,
comparables and projected return." Add og:url and
og:site_name with my company name too. Then give me the
finished file again.

The tags cannot be right before the address exists, so this round happens once for every page. Rename the file, put it back in the folder, and drag the folder onto your site's Deploys page.

STEP 09If it does not show

Why a WhatsApp preview does not show up.

Keep the picture under 600 KB

That is Meta's own limit. Over it, no picture.

The address must be the full one

If the card shows with no picture, check the picture's address first. It must be the whole https:// address, not preview.jpg. Your browser understands the short version. WhatsApp does not.

WhatsApp remembers the first one

Send the link, then fix the preview, and the old card can keep showing for a long time. Change the address by adding ?v=2 to the end of the link, and send that.

No address, no preview The tags are written before the page has an address, so the first upload never shows a card. Give Claude the address, download again, drag again. Once for every page.
Check it before you send it Send the link to yourself, or to a colleague, in a real message. Look at the card the way they will. Then send it.
STEP 10The last step

Send the link.

The link is ready. Copy it and paste it wherever you want. Paste it into a WhatsApp conversation and it shows up with the preview card you made. Paste it into an email and it works the same way. Whoever taps it lands on the page you created.

Two things to know

A link can be forwarded

Anyone who has the link can open the page and pass it on. Keep off the page anything you would not want a competitor reading. No passports, no personal financials, no commission split.

You can change the page later

Go back to the same chat and tell Claude what you want changed. Then ask for the finished file again and update the page the way step 09 shows. The link stays the same.

More is possible if you want it. A page can have a password, and a page can count how many times it was opened. Ask Claude in the same chat.

Every page after the first

Reusing the page as a template.

The first page is the slow one. Once it exists it becomes a template, and the work is swapping the content.

The prompt on the right replaces all four stages, because Claude reads the plan off the old page.

  1. Open the old conversation and download the page from the panel. That copy has no photos inside it. The finished file from step 08 does, and that makes it too big for a chat.
  2. Start a new conversation.
  3. Attach these to your message.
    • The old page you just downloaded.
    • The new source material. The brochure, the numbers, the schedule.
    • The new photos, named 1.jpg, 2.jpg and so on, in the order you want them seen.
    • Your logo and your own photo again, if they are on the page. The old page holds only their file names, not the pictures.
  4. Paste the prompt and send it.
  5. When Claude has built the new page, carry on from step 06, the same way as the first time.
Paste this in the new conversation
A page I built before is attached, along with the new
material and the new photos. Use that page as the template.

Keep the design, the layout and the section order exactly
as they are. Swap the content for the new material.

Change these as well.
- The title and description in the Open Graph tags
- The client's name and the line about who the page
  is for

Check every number in the new material first and show me
anything that does not add up. Then build it.

When I ask for the finished file, shrink my photos for the
web, put them inside the HTML file itself, and give me that
one file to download. When I give you the address the page
lives at, put it into the Open Graph tags and give me the
file again.
Not everything should be a page

When a document is still the right answer.

A page is better for anything you are using to sell. It is worse for anything that has to be filed, signed or kept.

When they need both Send the page and attach the document as well. The page is for reading. The document is for the record.
  • Anything that gets signed. Reservation forms, agreements, contracts.
  • Anything a bank or a lawyer asks for as a file. They want a document with a date on it, not a link that might change.
  • Anything that has to work with no internet. On a plane, in a basement, in a room with bad signal.
  • Anything that has to stay exactly as it was on the day. The strength of a page is that it changes. Sometimes that is the problem.
When it does not work

The nine things that go wrong.

Click the one that matches what you see. The fix is inside.

My photos show as empty boxes

Inside Claude's preview panel that is normal and always happens, because it cannot reach files on your computer.

If they are still empty in the file you downloaded, Claude gave you the page without the photos inside it. Ask again, in the words from step 08, and download the new file.

Claude started building before I said GO

Say "stop, we are still on stage 1" and it stops. Nothing you sent is lost.

If it has already built something, say "start again using everything from stages 1, 2 and 3" once you have finished the stages properly.

Claude asked for everything at once

Say "one stage at a time please, and tell me which stage you are on". It goes straight back to asking properly.

The page looks right on my laptop and broken on my phone

Take a screenshot on the phone, upload it, and say "this is what it looks like on my iPhone, fix this specific problem". A screenshot of the fault beats any description of it.

The link preview shows nothing, or the wrong picture

Three possible causes. The picture's address is the short one instead of the full https:// one. The image is over 600 KB. Or WhatsApp is showing you the card it remembered from the first time it saw the link.

For the third, add ?v=2 to the end and send that.

The link opens a page full of code

The file is not named index.html, or you dragged the file instead of the folder containing it. Rename it, put it in the folder with preview.jpg beside it, and drag the folder.

The link asks for a password

You dragged the folder without logging in. Log in to Netlify, claim the site, and it opens.

The upload fails or gets stuck

Check preview.jpg first. Keep the folder under 50 MB and no single file over 10 MB. A 12 MB render compressed to 400 KB looks the same on a phone.

The fonts changed once it went online

The page is asking for a font that only exists on your computer. Tell Claude that in the same chat, then update the page the way step 09 shows.

Now do one

Pick the next thing you were about to send as a document.

Not a practice one. The real one, for whoever you are talking to this week. Open Claude, paste the master prompt, and answer Claude's questions.

Back to the master prompt See what a full system looks like
Lemonstone AI

Lemonstone AI builds the systems behind this. The CRM that fills itself from WhatsApp, the follow up that happens without you, and pages like this one generated per client automatically.

lemonstone.ai