What it does: Writes your page words first, then builds a clean one-page HTML site with your colors and font.
Use it when: Your site looks like a template and you need it to look real.
You get: A single HTML file with your words, layout, and a picky designer check.
You are a senior web designer. Build my one-page website as a single HTML file that looks like a real company made it. You work in Claude Code and build real files. Goal: write my page words, then build one clean HTML file in this folder, so I have a site that looks real, works on a phone and is ready to put live. Context: my business helps one kind of person. Visitors decide in seconds if a site is for them, and they leave a site that looks like a template, because it looks like no one is home. First, check that you can read and write files in this folder. Tell me how many files and pictures you found here. If you can't, stop and ask me to open Claude Code in my site folder. If my details are not in a file here, ask me to paste them instead. Ask me these, then run. Skip any I already answered, or any you can find in a file in this folder. 1. My business, who it's for, and the one thing I want visitors to do (button text and link)? (Default for the button: "Book a call" and [check: booking link].) 2. Sites I love the look of? (Default: simpleai.community, and the design rules below.) 3. My color, for buttons and links only? (Default: dark slate #292E34.) My font: Inter. My pictures: the ones in this folder, or a marked spot for each one. First write the words. The visitor is the hero, I'm the guide. Give me: a headline that says what they get, one line on their problem, a 3-step plan, and what life looks like after. A stranger should know what I offer, how it helps and how to buy in 5 seconds. Only use facts I gave you or that are in my files. Skip any line you would have to make up. Show me the words before you build. Build it like this (the way simpleai.community is built): 1. A slim top bar: my name on the left, one main button on the right. 2. A centered headline, one short line under it, and 2 buttons: the main one filled, the second one outlined. The second button is a smaller first step, like a free guide. Only add it if I have one. If not, write [check: second step]. 3. A clean list of what I offer, like a library index: one row each, a thin grey line between rows, a short title and a small note on the right. No cards. 4. The 3-step plan, in one row or a short numbered list. 5. One picture only if it shows the result, not decoration. 6. A dark closing band with one short line and the main button. 7. A simple footer with my links. Design rules (these make it look like a real company built it): - Background: warm off-white, like #FAF9F7. No gradients, no glow, no grain. - Thin grey lines (1px, about 10% black) to split things up. No boxes inside boxes, no shadows. - One brand color, used ONLY on things people can click: buttons and links. Never on backgrounds, borders or plain text. - One font: Inter. Headlines weight 700, letter spacing -0.015em, dark slate #292E34, not pure black. Body text 17px, grey #4B4A52. - Only a few text sizes: 13, 15, 17 and 20px, plus one big headline size. - Flat buttons: 40px tall, 6px corners, no glow, same size everywhere. - No emoji as icons. Use real logos or nothing. - Nothing moves: no slide-in animations, nothing that jumps on hover. - Lots of empty space. Text columns no wider than about 720px. - Short, simple words. No buzzword soup. Few words on the page. Every line is about the visitor. - It must look great on a phone. No sideways scrolling. - Fast. No extra libraries. A link to load the Inter font is fine. When it's built, act like a picky designer. List up to 10 real things in the file you built that look cheap, messy or AI-made (glows, gradients, emoji icons, cards in cards, too many colors or sizes), fix them all, and give me the final file. Give me the file name, then a short list (5 lines max) of what is on the page and any [check:] spots left. Before you show me, check: - Open the file and check that the brand color is only on buttons and links, and there are no gradients, shadows, emoji icons or animations. - Check that every fact on the page came from me or my files, and the page fits a phone screen with no side scroll. Rules: - Write only the new file. Ask me before you change or delete any file that is already here, and before you put anything live. - Never make up a name, number, date, price, link, review or promise. - If something you need is missing, write [check: what is missing] in that spot and keep going. Last, save these steps as a skill called 'Design My Site' so you do it this way each time I ask to design a site. To run it again, just say: "Run my Design My Site skill."
You needClaude CodeTested on sample data
Built on Building a StoryBrand's rule that the customer is the hero.
Copilot version
There is no separate Copilot version of this one yet. Paste the prompt above into Microsoft 365 Copilot Chat.
See a real example
Tested on sample data Oct 29 2026, after the rewrite: a Claude agent ran it on made-up sample input (tool results simulated). A separate Claude agent judged the run and the card.
Watch
How to Build Landing Pages With Claude Code (No Coding)
Video by Ryan Doser
3 Ways to Make GENUINELY Stunning Websites Using Claude Code
Video by AI LABS
AuthorCorey Leon