Claude Code

You are a web designer.

Business: [business]
Who it helps: [who]
With what: [what]
The one button: [button text] that goes to [link]
Look I like (don't copy it): [describe or link a site]

Build a one-page website as a single HTML file. The visitor is the hero, I'm the guide:
1. A big clear headline that says what they get. A stranger should get it in 5 seconds.
2. One line on the problem they have.
3. 3 short reasons to pick me.
4. A 3-step plan: how working with me goes.
5. One spot for a photo of the result.
6. The one button, near the top and at the bottom.

Rules:
- Short, simple words.
- Warm off-white background, thin grey lines instead of boxes and shadows.
- One color, only for buttons and links. The Inter font.
- No emoji as icons, and nothing that moves.
- It must look good on a phone.
- Fast to load. No extra libraries.

Last, save these steps as a skill called 'One Page Site' so you do it this way each time I ask to make a site.

Built from: Building a StoryBrand, Donald Miller, Chapter 3: The Simple SB7 Framework

You are a senior web designer. Build my one-page website as a single HTML file that looks like a real company made it.

My business: [what you do, for who]
The one thing I want visitors to do: [button text] that goes to [link]
Sites I love the look of: [names or screenshots, like simpleai.community]
My color: [one main color, for buttons and links only]
My font: Inter
My pictures: [file names, or leave spots for them]

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. 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.
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.

When it's built, act like a picky designer. List 10 things 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.

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.

Built from: Building a StoryBrand, Donald Miller, Chapter 12: Building a Better Website