Build a website
without writing
a single line of code.
I built this site myself. No coding background, no developer, no template. Here are the prompts I used, in the order I used them, so you can do the same thing.
The loop
You work in a loop. This is the part that makes it possible without a technical background.
Ask in chat.
Paste what you get into Claude Code.
Paste what Claude Code answers back into chat.
Ask what it means and what to do next.
Repeat.
Chat is your translator for the whole build. You never have to understand what Claude Code is doing. You have to be able to copy, paste and ask.
Anything you do not understand, you can ask about. A screenshot you cannot read, paste it in. Then say one of these.
- Explain that to me like I have never done this before.
- What does that word mean?
- I do not understand what just happened. Say it simply.
- Should I click yes on this? Explain what it does first.
That is not cheating. That is the method.
Start here
This is the only prompt you need to begin. Paste it into Claude chat.
I want to build a simple website and I have no technical background. I will be using Claude Code on my computer to do the building. You are my guide. I will paste your instructions into Claude Code, and paste what Claude Code says back to you. How I need you to work with me: - Take me one step at a time. Do not give me the whole plan at once. - For each step, tell me exactly what to type and exactly where to paste it. - Explain anything technical in plain language before I have to do it. - If I have to approve something, tell me what it does before I click. - Check with me that the step worked before you move on. Start by asking me what the website is for.
Paste this one straight after it, in the same chat. Claude will hold on to it and bring it up when the moment comes.
When we get to setting up Claude Code, walk me through installing skills, one at a time. These are the ones to consider: Taste github.com/Leonxlnx/taste-skill UI/UX Pro Max github.com/nextlevelbuilder/ui-ux-pro-max-skill Open Design github.com/nexu-io/open-design Superpowers github.com/obra/superpowers Anthropic Skills github.com/anthropics/skills Marketing Skills github.com/coreyhaines31/marketingskills Playwright CLI github.com/microsoft/playwright-cli Links change, so check which of these are still available and tell me which ones are worth installing for what I am building. Skip the rest. Then tell me exactly what to type in Claude Code to install each one, and check with me that it worked before you move on.
Everything below is what that conversation will walk you through. Read it so you know what is coming. You do not have to memorise any of it.
What you need first
Four things. Three of them are free to start.
Claude Code. The builder. It sits on your computer and does the work you ask for.
GitHub. Saves your work. A copy of your folder that lives online, with the whole history.
A host. Puts your site online. The shelf your page stands on. I use Netlify.
A domain. Optional. Your own address. I bought mine at GoDaddy.
You do not have to set these up alone. Ask Claude to walk you through each one, in the loop above. "Walk me through GitHub, step by step" is a complete instruction.
About the domain. You need one neither to build nor to publish. The host gives you a free address that works and is secure. A domain is for when you want an address that looks professional and belongs to you. You can add it later without rebuilding anything.
Make a fresh empty folder. Claude Code only sees the folder it is standing in, and everything in that folder eventually gets published. Put it somewhere you will find again. I use a folder called Sites in my home folder, one folder per project inside it.
Load it up
The skills. Without them the result looks like every other AI-made page. The prompt above handles the installing. You do not have to decide which ones yourself.
The CLAUDE.md. It holds your voice rules and your build rules so you never have to repeat yourself. Fill in the brackets in chat, then paste the result into Claude Code as your first message.
# Project [What this is. One sentence. Where it lives.] Purpose: [what it should make happen] # Brand voice rules (non-negotiable) - [e.g. no em dashes, ever] - [sentence length] - [words you never use] - [what you never claim] - Audience: [who, and what they are afraid of] # Type (locked) - Headlines: [font, weights] - Body: [font, weights] - Always declare a real fallback stack. # Palette (locked) Sampled from [your own file]. Do not substitute by eye. - #XXXXXX [what it is for] # Contrast rules (non-negotiable) - [which colour carries which text, and the measured ratio] - [what is forbidden] # Naming (use these exact words) - [your exact terms] # Build rules - Plan before building. Ask me questions first. - Build locally, do not deploy until I say so. - [where it deploys]
Direct
Decide what the page is for. One sentence. Mine was: a credible front door that sends people to my free guides.
Do not invent. Model. Find something that already works and build your own version of it. Here is the sequence.
- Find a site or a single page you like.One is enough. Save the link.
- Give it to Claude Code, one of two ways.Hand it the link and ask it to open the page, take screenshots and study the layout. Or pull the code from the page and hand that over. The second gives it more to work from.
- Say what you like and what you do not want.Be specific. "The way the headline sits next to the photo" beats "it looks clean".
- Give it your own material.Your words, your photos, your story. Claude cannot invent them.
- Ask it to build your own version.Original, not a copy.
If you already know a site you like
- view-page-source.com pulls the code from any public page. Hand that to Claude Code as the starting point.
If you do not know what you want yet, browse until something feels right
- 21st.dev and recent.design for sections and full page designs.
- getdesign.md for design references.
- codepen.io for single pieces. A button, a menu, an animation.
You can hand Claude Code more than one reference. One page for the layout, another for a section you liked somewhere else.
The shape of it, three lines you can adapt.
Scan this site I like, take screenshots, study the layout.
Here is my copy, my photos, my story.
Build our own version. Better. Original, not a copy.
Model the layout, do not copy the site. The words, images and logos belong to someone else. Your own text and pictures go in.
Then one long brief, ending with: plan first, ask me questions, do not build yet.
The free guides are the start. AI Creator Lab is where the training and the workflows behind them live.
Join the free communityBuild, and react
Ask for the design system first. Colours and fonts in one place. Then a colour change is one change instead of ten.
Build one section at a time. Ask for one part. Open it in the browser. Look at it yourself. Say what you think. Move on. Ask for the whole page at once and you get something you cannot judge.
Look at mobile width first. Most people read this in their hand.
Say what you do not like, not how to fix it. I said "the coffee cup bothers me". I said "there is one word alone on the fourth line". Both got better answers than a specific instruction would have. You can see the problem better than anyone. Describing it is your job. Finding the fix is not.
Before you go live
Hand this to Claude Code and read what comes back.
Before I publish, check these six things and tell me what you find in plain language. Do not change anything yet. 1. Is this folder on GitHub, with my work saved and pushed? 2. Which folder are you working in right now? Show me the full path. 3. Are there files whose capitalisation does not match what the code looks for? Those work on my computer and break on the server. 4. List every link on the site and tell me whether each one goes where it should. 5. Is there anything in this folder I would not want a stranger to read? Notes, drafts, old files. 6. Tell me the current state. What is published, what is not, and what is different between my computer and what is online.
Every item on that list is there because it went wrong for me first.
Going live
Hosting and domain. The host is the shelf your page stands on. The domain is the sign pointing at it. You can publish without a domain and add one later.
Pointing a domain at a host means changing settings that your email also uses. Do not guess at that. Hand this over instead.
I am pointing my domain at my host. Tell me exactly which records to change and which ones to leave alone so my email keeps working. Show me what each change does before I make it, and warn me if anything I am about to change could stop my email arriving.
Commit and push. A commit is a bookmark: this is how I wanted it. A push sends the bookmark and the files up to the copy online.
Analytics. A counter by the door, not a camera. You see how many came in and through which door, not who they were.
In practice I published many times during the build, not once at the end. Going live is not a single event.
The outline follows a walkthrough by my mentor Zach Crawford, adapted to how I actually work.
AI Creator Lab. Come when you are ready.
Join the free community →