The gap between needing a website and having one just collapsed.
You don’t need a developer. You don’t need a five to twenty-five thousand dollar budget. You don’t need to learn code or wait six weeks for a freelancer to finish a build you’ll have to renegotiate. You need a clear brief and an afternoon.
I built theaudreyaesthetic.com myself. The chatbot embedded in the footer is also Claude. No development team, no agency, no CMS, no monthly platform fee. One conversation, a free hosting account, and a domain name.
Below is the entire build. The exact prompts I used. The hosting options worth comparing. The code snippet for the embedded agent. And the parts of a practice website you should not try to build yourself.
The result
A nine-section single-page site: navigation, hero with headshot, about, four content topics, an eight-part AI series grid, a writing feed pulled live from Substack, an Instagram feed, a subscribe form, a three-tab contact section, and a footer with an embedded AI chatbot.
Working forms. Working RSS feed. A live, brand-trained Claude assistant. All from one HTML file you can open in a browser, edit in plain English, and re-deploy in under a minute.
Why you should do this yourself
Four reasons.
Ownership. Your site is your asset. When you hand it off, you rent your own infrastructure from someone else’s calendar.
Iteration speed. A copy change that takes two weeks via a freelancer takes two minutes when you own the file.
Cost. Free hosting plus a twelve-dollar domain replaces a five-figure build.
Voice. No one writes your practice’s copy better than you. Claude makes that copy executable.
What you need before you start
- A Claude account at claude.ai
- A free hosting account (options below)
- A domain name from any registrar (about twelve dollars a year)
- Brand assets: logo, headshot, palette, fonts
- A rough sense of the sections you want
That’s the full list. No coding knowledge, no design software, no CMS.
A quick note on the prompt
The prompt is the build. Everything else is execution.
A vague prompt gives you a generic site. A precise prompt gives you yours. The difference between a five-minute rebuild and a two-hour rebuild is forty seconds of clarity at the start.
Two things worth knowing before you paste mine.
One. You can use one AI to write your prompt for another AI. Open ChatGPT, Gemini, or Claude in a separate chat, share the template below, and ask it to interview you. Tell it: “Ask me one question at a time about my brand, audience, sections, palette, and reference sites. When you have enough, assemble a prompt I can paste into Claude to build my website.” Twenty minutes of conversation and you have a brief that’s better than 90 percent of what gets handed to freelancers.
Two. The single most important line in the prompt is the one that tells Claude to ask you questions before building. Skip that line and Claude will guess. Include it and Claude will catch the ten things you forgot to specify before they become rework. This is the line:
“Before you write a single line of code, ask me clarifying questions about anything ambiguous in this brief.”
That line alone will save you hours. Use it in every prompt, not just this one.
Step 1. The master prompt
Below is the exact prompt I use to build a personal site from scratch. Copy it. Replace anything in brackets with your details. Paste it into a new Claude conversation. Answer the clarifying questions Claude asks back. Then let it build.
This prompt is the asset. Save it. Reuse it. Adapt it for client sites, microsites, landing pages, internal tools. The structure works for anything you’d build as a single-file web project.
You are a senior front-end engineer and brand designer. We are building a single-page personal website together that I will host myself.
CONTEXT
I am [your name], [one-sentence positioning, for example: “founder of [brand], a thought leadership platform for [audience]”]. The site needs to feel like [reference, for example: “Harvard Business Review meets a modern tech startup”]. Calm, declarative, professional. No hype, no emojis, no influencer language.
AUDIENCE
[Describe who the site is for in 2 to 3 sentences. Be specific. Example: “Med spa owners, aesthetic clinic directors, multi-site operators. People with purchasing authority. Skeptical of marketing language. Time-constrained.”]
BRAND
Palette (warm tones only, no grays or cool blues):
- Background: [hex]
- Primary text: [hex]
- Accent (gold or warm metallic): [hex]
- Secondary accent (taupe or cream): [hex]
Typography:
- Headlines: [serif, for example Lora or Cormorant Garamond]
- Body: [sans-serif, for example Poppins or Inter]
Voice: [3 adjectives + 1 sentence describing how you want the copy to sound]
OUTPUT REQUIREMENTS
- One complete, production-ready index.html file
- Inline CSS in a <style> block, inline JS in a <script> block
- No external frameworks (no React, no Tailwind CDN, no Bootstrap, no jQuery)
- Mobile-first responsive design, breakpoints at 768px and 1024px
- Semantic HTML5 (header, nav, main, section, article, footer)
- Accessible: ARIA labels, alt text on every image, sufficient color contrast
- Lighthouse performance target: 95+
- Self-contained: I should be able to drag this single file into a free host and have a live site
SECTIONS IN ORDER
1. Sticky top nav: logo left, links right (About, Topics, Writing, Subscribe, Contact). Transparent on hero, solid on scroll.
2. Hero: name, tagline, short positioning sentence, headshot right on desktop and stacked on mobile. Subtle entrance animation.
3. About: 3 short paragraphs. Optional accent image or pull quote.
4. Topics: 4 cards. Each card has an icon or accent shape, a headline, and a 2-line description.
5. Writing: live feed pulled from my Substack RSS at [your-substack-url] using rss2json so it works in the browser without a backend. Show the 3 most recent posts.
6. Subscribe: email capture form. Use [Netlify Forms / Mailchimp / Substack embed]. Include a 1-line value prop above the field.
7. Contact: 3-tab form (general inquiry, partnerships, press). Each tab routes to a different email address.
8. Footer: social links, copyright line “© [your name] [year]”, chatbot button placeholder bottom-right.
REFERENCES I LIKE
[Paste 1 to 3 URLs of sites whose visual feel you want to draw from. After each URL, write 1 sentence on what specifically you like — typography, spacing, color use, etc.]
BEFORE YOU WRITE A SINGLE LINE OF CODE
Ask me clarifying questions about anything in this brief that is ambiguous, missing, or could be interpreted multiple ways. Examples of questions you might ask:
- Is the palette finalized or do you want me to suggest hex values from a feel description?
- Should the hero animation be a fade-in, a stagger, or none?
- What happens when someone submits the contact form?
- Do you have a logo file or should the wordmark be set in type?
- Is the Substack feed the only content source, or should I leave a hook for podcast or YouTube embeds later?
Ask one question at a time, wait for my answer, then move to the next. I would rather spend 10 minutes on questions than 60 minutes on rework.
WHEN YOU DO BUILD
- Output the complete file in a single code block.
- Use placeholder image URLs (https://placehold.co/...) for any image I haven’t provided.
- Add HTML comments at every section I am likely to edit later, like <!-- EDIT: tagline -->.
- After delivering v1, list 3 specific refinements you would make in v2 if I gave you another pass. Don’t just ask “what would you like to change” — propose.
Confirm you understand the brief, then begin asking your clarifying questions.
That prompt has done the work of three discovery calls. Save it. The next time you build a site, you’ll change five lines and ship.
Step 2. Refine
This is where most builds get stuck and where Claude solves it.
You don’t have to learn CSS. You don’t have to know what a flexbox is. You speak in plain English. Claude executes.
A few revisions I made in chat to give you a sense of the register:
- Make the hero section taller and add my headshot to the right.
- The subscribe button should be gold with espresso text. Add hover state.
- Add a fourth content topic between Marketing and Hiring. Call it Compliance.
- The mobile navigation feels heavy. Make it lighter and add a hamburger.
- Pull the Substack feed using rss2json so it works in the browser without a backend.
Claude returns the full updated HTML file each time. You replace the local copy and re-preview in your browser. Cycle until it’s yours.
Three practical notes. First, work in small passes. Five focused edits will land cleaner than one long list. Second, save each version before you start the next. If a change breaks something, you have a known-good file to roll back to. Third, when a change is meaningful (a new section, a layout shift, anything that touches multiple parts of the page), tell Claude to ask clarifying questions before it edits. Same line as the master prompt: “Ask me clarifying questions before you change anything.” This catches mismatches before they hit the file.
Step 3. Get it live
You need a host. All of these are free for what you’re building.
Netlify. Drag and drop your HTML file into the deploy zone. Live URL in under a minute. What I used. Best for non-technical owners.
GitHub Pages. Connect a GitHub repository, push your file, enable Pages in settings. Free, reliable, requires a GitHub account.
Vercel. Similar to Netlify. Deploy from a folder or repo. Excellent if you ever add Next.js.
Cloudflare Pages. Fastest performance globally. Slightly more setup but worth it for high-traffic sites.
For a single HTML file, Netlify is the lowest-friction option. Sign up, drag your index.html into the deploy zone on the dashboard, and you have a live netlify.app URL immediately.
Important: drag the actual file, not a zipped folder. Netlify will treat the file itself as your deployment.
Step 4. Connect your domain
Buy a domain from any registrar. GoDaddy, Namecheap, Cloudflare, Google Domains. About twelve dollars a year for a .com.
In your registrar’s DNS settings, you’ll point two records at your host:
A record: @ pointing to your host’s IP address
CNAME: www pointing to your host’s subdomain
Each host gives you the exact values when you add a custom domain in their dashboard. For Netlify, you go to Domain Management, add your custom domain, and Netlify hands you the records to paste into your registrar.
This is the one step where you might pause. It’s not hard, but it’s unfamiliar. Read your host’s docs once, follow them once, you’re done forever. DNS propagation takes anywhere from minutes to a few hours.
Step 5. Embed the agent
This is the part most owners don’t realize is possible.
You can embed a Claude-powered chatbot directly in your site. It answers patient FAQs around the clock, qualifies leads before they reach your front desk, captures contact info while you’re closed, and speaks in your voice using your service menu and your hours.
The build is two pieces. A system prompt that defines the agent’s role, scope, and tone. And a chat interface in HTML and JavaScript that calls the Claude API.
The system prompt
Customize this for your practice. The clearer the scope, the better the agent behaves.
You are the AI assistant for [PRACTICE NAME], embedded on [yourwebsite.com].
You speak with prospective patients and visitors. You are warm, direct, and professional. No emojis. No hype. No medical advice.
You can answer questions about:
- Services offered: [list services]
- Hours and location
- What to expect at a consultation
- General education on [your specialty]
- How to book or get in touch
You cannot:
- Diagnose conditions
- Recommend specific treatments without consultation
- Quote prices for non-standard services
- Schedule appointments directly (direct to the contact form or phone)
If a question falls outside your scope, say so plainly and offer the contact form. End every conversation with a clear next step.
The embed snippet
Add this script to the bottom of your HTML file, just before the closing body tag. It opens a small chat widget in the corner of your site.
<script>
const SYSTEM_PROMPT = `[paste your system prompt here]`;
async function askClaude(message) {
const r = await fetch(”/api/chat”, {
method: “POST”,
headers: { “Content-Type”: “application/json” },
body: JSON.stringify({
model: “claude-haiku-4-5-20251001”,
max_tokens: 1024,
system: SYSTEM_PROMPT,
messages: [{ role: “user”, content: message }]
})
});
const data = await r.json();
return data.content[0].text;
}
</script>
Important: do not put your API key in the browser
Your Claude API key is the equivalent of a password to your account. If you put it in your HTML file, anyone can view your source and steal it. Costs run up fast.
The fix is a serverless proxy. Free options that work in five minutes:
Netlify Functions: free tier covers most practice traffic
Vercel Functions: same idea, also free tier
Cloudflare Workers: highest free request limits
Each platform has a one-page tutorial for setting up a function that takes the chat request, attaches your API key on the server side, and forwards it to Claude. Ask Claude to write that function for you in the same conversation. Paste the platform name and let it generate the code.
Set up your API key at console.anthropic.com. Costs scale with usage and stay low for typical practice traffic. Most practice sites will sit comfortably under a coffee a month.
What to skip
DIY has limits. Don’t try to build any of these yourself:
HIPAA-compliant intake forms
EMR or PMS integrations
Payment processing
Anything that touches PHI (protected health information)
Online booking that connects to your practice management system
For those, you need a vetted vendor or a developer who understands healthcare compliance. The DIY play is your marketing site, your content layer, your lead capture front door. The clinical layer is a separate conversation and not a place to experiment.
Close
This isn’t a shortcut. It’s leverage.
The point isn’t speed. It’s ownership. When your site lives in one HTML file you control, every copy change, every new section, every campaign-specific landing page becomes a ten-minute conversation instead of a four-hundred-dollar invoice and a three-day wait.
For solo and small practice owners, this is the difference between having a website that works for you and renting one that doesn’t.
Build it once. Own it forever. Iterate as often as you want.
AUDREY CAMPBELL, MPH
The Audrey Aesthetic
theaudreyaesthetic.com · @theaudrey_aesthetic