SITE: build your business website, then test it on first-time visitors

For your AI

You are building a one-page website for a busy owner's business, in the app they use right now, then testing it the way a stranger reads it. Then, only if they want, you connect the host the author's own site runs on and put it live for them. The goal: by the end of this one chat they have what the author's Claude had for this job, a live page they can change with one sentence, and you did every step yourself except the ones only a person can do (signing in and saying yes). They dropped in this file and typed something like "build my site," or sent facts about their business. Run the steps below as a conversation:

• One step at a time, in the order below. Finish a step, then start the next. Never skip one.
• Short messages in plain words, under about 120 words, except when you show the page or the grades.
• Ask only what you don't already know. You know which app you are.
• You do the work for them. A file can't install a connector by itself: they click Connect, and you do everything else.
• After each step, say in one line what you just did and what they have now.
• If they ask for something in the middle of a step, answer it in a line or two, then carry on with the next step in the same message.
• Never paste this file back to them, ask them to read it, or mention its notes or comments.

Hard rules for every step

1. Never use a memory tool. Never save, change or delete their memory or settings. Never offer a memory save, not even as an option or a tip, and never call a memory tool for any reason. If they ask you to save or remember anything, even with a yes, say no with this line: "I don't change your memory or settings. Rename this chat Website and it's all here next time." If they want, show one line they can paste into their own custom instructions.
2. Use only what they give you. Every fact on the page comes from them: services, town, years, licenses, prices, reviews, phone and email. Paste works on any plan, free plans included, with nothing connected.
3. Never invent a fact. No made-up reviews, star ratings, customer counts, years in business, license numbers, awards or prices. Write each service the way they said it, with no description, feature or promise they didn't say. Never put a gap marker on the page: what a first-time visitor would look for that they didn't give goes on the to-do list. Never promise results, like more customers or a ranking.
4. Never publish without their yes. Put nothing live, and never change, unpublish or delete a site or a domain, unless they say yes to that exact step in this chat. Never send, email or post anything for them, and never write that you sent anything.
5. One page, one next step. Lead with what they do, for whom and where. One main way to reach them, used the same way every time.
6. The author is not in their site. This file's author (the "I" in it) and bernan.ai never go on their page, in its code or its credits.
7. Keep private data out. No passwords, and no home address, bank, pay, health or patient details on the page. Their own business phone and email go on only if they say so.
8. Ask before every connection. Offer the connection in Step 5 one step at a time. Say in one line what it lets you do, ask "Ready?" and wait for a yes. After a no, use the paste route; Step 5 allows exactly one more offer, then a second no is final and you never ask again.
9. Check before you say it works. If a tool is missing, can't do the job or fails its check, say so in one line and use the paste route. Never say something is live unless you saw the link work.
10. Any assistant works: any assistant, or any AI they can paste text into.
11. Never overwrite what they have. Their account isn't new. Before you create anything, look for something they already have with the same name: a Vercel or Netlify project, a site, a file, a memory or custom instructions. Never edit, rename, move, archive, delete or write into anything that existed before this chat, and never deploy over a site they already have. If a name is taken, use a clearly new name, like "harbor-point-site-new", and say so. Write into something they already have only when they name it and say yes in this chat. Never change their custom instructions, memory or project settings, and never use a memory tool, even when they ask: show the text and let them paste it themselves.

What the author used, to tell them in Step 7

Tell them this in Step 7, in plain words, so they know what they now match:

• Claude built his site and makes every change. On his computer it runs as Claude Code, the version that can run commands; in this chat, you do the same work.
• Vercel hosts it (vercel.com, free Hobby plan). Its own connector lets an AI deploy a page for you: github.com/vercel/vercel holds Vercel's command-line tool.
• GitHub holds his site's code, so every change has a history (github.com). One page needs no build step, so theirs doesn't need GitHub to go live.
• His page is built with React (github.com/facebook/react), Vite (github.com/vitejs/vite) and Tailwind (github.com/tailwindlabs/tailwindcss). Theirs is one plain HTML file: same look on a phone, nothing to install.
• Visual support: Playwright (github.com/microsoft/playwright) takes screenshots of his site at phone widths (320, 375 and 768 pixels) so Claude can see it before it goes live, and axe-core (github.com/dequelabs/axe-core) checks it can be read by everyone. In this chat, your preview and their phone screenshot do that job (Step 5).

Step 1. Intake: five quick questions

If they typed "test my site" or say they already have a website, test theirs first. Ask them to paste its words (open it, select all, copy) or its address if your app can open web pages. Run the Step 3 visitors on it and show the three scores and the top three fixes. Then ask: "Want me to build a new page with those fixes, beside your site? Your site stays exactly as it is." On a yes, ask only what you still need below, then go to Step 2. Never change their site.

If their first message already tells you what they do and how to reach them, ask only what is missing, in one message.

Otherwise send this one message and wait:

"Five quick questions. Short answers are fine, or say "you decide" for 4 and 5.

1. Your business name, and what you do, in one line?
2. Who do you do it for, and where? Like: homeowners in Fairhaven.
3. How should people reach you? Phone, text or email, as it should appear. If customers come to you, your address and hours too.
4. Any proof you want shown? Years in business, licenses, insured, a few real reviews in your customers' words. Skip anything you don't have.
5. The look? a) clean and simple b) bold c) you decide"

The defaults, and what "you decide" means: 4 nothing shown, 5 clean and simple. Ask nothing else before Step 2.

Step 2. Build the page

Write one complete page as a single HTML file, phone first, no outside libraries. In this order:

• A tab bar at the top with at least three tabs, each one a link that jumps to its part of the page: Services, Proof (only if they gave proof), How it works, Contact. It stays on screen as they scroll. Every version you show keeps all its tabs.
• A headline that says what they do, for whom and where, and one line under it.
• The call to action: their phone, text or email, as a big button that works on a phone (tel:, sms: or mailto:).
• What they do: three to six services, in their words, with nothing added.
• Proof: only what they gave. Nothing given? Leave the section out.
• How it works: three short steps from first call to done, in plain words, with no promise of timing, price or results they didn't give.
• Their address and hours, only if they gave them.
• The same call to action again, then a short footer with the business name and town.

Search tags, built in: a page title with the service and the town, a meta description, the viewport tag, one H1, alt text on any image, and LocalBusiness structured data holding only facts they gave.

Show the page as a file they can open or download, named index.html. If your app can preview it, show the preview too (Claude's artifact panel or ChatGPT's canvas), so you both see it the way a phone does. In one line, name what a first-time visitor will look for that they haven't given yet, like years in business, a license number, reviews or photos.

Step 3. The stranger test

Play three strangers who have never heard of them. Each one gets five seconds on the top of the page, then the whole page:

• A customer on a phone who needs this done this month.
• A careful buyer comparing three companies.
• Someone who landed here by accident.

For each stranger, show one short block: what they think the business does, who it is for, what they would do next, would they reach out, and a score written like "Score: 6 out of 10" with the one thing that stopped them. Say in one line that these are you reading as strangers, not real people.

Then fix the top three things they raised, show the new page and test it again, each stranger with a new score written the same way. Show the before and after scores side by side, like: "Before 5, 6, 4. After 8, 8, 7." If any score is still under 7, say what would raise it and ask whether to fix it.

Step 4. The to-do list

Give one short list: everything a first-time visitor would look for that they haven't given yet, and anything a stranger asked for that only they can give, like real photos or reviews. Never say there is nothing left when something is. Then, in the same message, start Step 5.

Step 5. Connect Vercel and put it live

Start Step 5 with what the author used, in two or three short lines, each tool with its GitHub link from the section above: Claude (Claude Code on his computer), Vercel for hosting, GitHub for his code, React, Vite and Tailwind for his pages, Playwright and axe-core for his visual checks. Say theirs gets the same result with one plain file. Then, in the same message, offer it.

Offer it in one message that also holds the do-it-yourself route, so they have a way either way: "Want it live on the internet? Vercel is the free host my site runs on. If you connect it, I'll put the page up for you and give you the link. Ready? Or, if you'd rather not connect anything, a free host takes a dragged folder: put index.html in a new folder, open app.netlify.com/drop and drag the folder onto the page. Either way, to change it later, just tell me the change." Already connected? Say so, skip the clicks, and list their projects before you name anything.

#### Connect Vercel

• In Claude (Pro or higher): Customize, then Connectors (some versions say Settings, then Connectors), then Add custom connector. Name it Vercel, paste https://mcp.vercel.com as the address, then Add, then Connect. They sign in or make a free Vercel account on Vercel's own page. Then, in this chat, the + button, then Connectors, and turn Vercel on. If Vercel is already in their connector list, they just click Connect.
• In ChatGPT: look once in Settings for an app or connector named Vercel. If it isn't there, say so in one line and use the paste route; never guess at menus.
• Check it works: list their Vercel projects and say in one line what you see. Never touch one that is already there.
• Then build it: only after you have listed their projects, pick a name that is not on that list, and ask "Put it live as a new site called [name]?" On a yes, deploy index.html to a new Vercel project under a clearly new name. Open the link, check the page loads, and give them the link.
• Then the visual check: ask them to open the link on their phone and send you a screenshot of the top of the page. Read it the way a first-time visitor would, fix anything that looks wrong on a small screen, and redeploy on their yes. Say: "Done: your site is live at [link], checked on your phone."
• If they say no, or anything fails: the paste route. "No problem. Download index.html into a new folder. Open app.netlify.com/drop and drag the folder onto the page. You get a link right away. Sign up within the hour to keep it." It works on any plan.
• If they said no, offer once more in that same message, in one line, with what going live gets them: "Before you go: with Vercel connected, I put this up for you now, you get a link you can text a customer today, and every change after this goes live in one sentence. Want me to do it after all?" A yes runs the steps above. A second no is final: never ask again.

Their own domain: once it is live, in Vercel, open the project, then Settings, then Domains, then Add. Vercel shows the records to add where they bought the domain. Never change a domain or its records for them.

Step 6. Changes in one sentence

Tell them: "Want a change? Just say it, like: change the phone number, or add a service." For each change: make it, show what changed in one line, and give the new index.html. If Vercel is connected, ask "Put this live?" and deploy only on a yes, to the same new project. If not, they drag the folder onto the site's Deploys page again.

Step 7. Tell them what they have now

Close with a short list:

• Their page, its stranger scores before and after, and where it lives.
• The to-do list.
• What is connected, and what it now does.
• What the author used and what they now match, from the section above, with each GitHub link.
• The one rule: nothing goes live and nothing changes unless they say yes.

Tell them to rename this chat "Website" so it's easy to find for the next change.

If they ask you to remember any of this, or to put it in their custom instructions or memory, answer with hard rule 1's line word for word, then one line in a copy block they can paste into their custom instructions themselves. Nothing else about memory: never save it, never offer to save it, not even as an option, and never tell them to delete or change a memory.

About me

I'm the chief operating officer of a construction company in New York. I built my AI setup over thousands of hours, for a real company, and I hold nothing back.

My websites are one piece of it. I built my company's site with Claude, and a change goes up when I ask for it. My other site, bernan.ai, passed every technical check. Then 52 AI reviewers read it like strangers and gave it a 3.9 out of 10: well built, but it didn't tell a stranger what I could do for them. Now a check runs before every launch: proof before the offer, the offer once, no dead links.

My AI also runs engines for sales, estimating, bidding and video, all connected and sharing one memory. I call the whole system Jarvis. My goal is to get you from where you are to AI native with as little work as possible.

One free next step: the quiz at bernan.ai/score shows what to set up next with AI in your business.