The anatomy of a website prompt

1. What the site is and what it's for

One or two lines: the business, the audience, the single action. This is the part most people do write. It sets the subject; it does not set the design.

2. The stack

Name the framework and how styles are written. Say what not to add. A model with no instruction reaches for a component library and a utility framework, and the result looks like that library's defaults. "Plain CSS with custom properties, no UI library" keeps the design yours.

3. The look, in numbers

Typeface names, sizes in pixels, colours in hex, spacing between sections, corner radius. Adjectives are where prompts go wrong: "minimal", "premium" and "modern" each match thousands of different sites. Numbers match one.

4. Sections, with real content

A numbered list in page order. For each: what it holds and the actual words. If the copy isn't written, write the headline at least. Layout is fitted around text length, so placeholder text gives placeholder layout.

5. Motion

What moves, on what trigger, for how long, with which easing. And what stays still. Models add hover lifts and fade-ins everywhere unless told that only named things move.

6. Phones

What becomes one column, what is hidden, what stays pinned, what replaces hover. More than half of visitors will see only this version.

7. How to check it

Tell an agent to run the site, open it at two or three widths, and fix what it finds. An agent that checks its own work catches overflowing text and broken images before you see them.

The seven parts in one short prompt

[1 What] A one-page site for [name], a [what] for [who]. The action is "[label]".

[2 Stack] Vite + React + TypeScript. Plain CSS with custom properties. No UI or animation libraries unless I name one.

[3 Look] Ground [#hex], text [#hex], accent [#hex]. [Typeface]: headlines 72/40px, body 17px. 160px between sections. Radius 12px.

[4 Sections]
1. Hero: "[headline]" / "[subline]" / button.
2. [Section]: [what it holds, with the real words].
3. [Section]: [...]
4. Footer: [links], [email].

[5 Motion] Only this moves: [thing] on [trigger], [duration], ease-out. Respect prefers-reduced-motion.

[6 Phones] One column below 700px; header button stays; hover effects off.

[7 Check] Run it. Open at 390, 1024 and 1440px. Fix overflow, missing images and contrast under 4.5:1.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• Why AI websites look the same, and how to stop itAI-built sites share a look because short prompts leave the design to the model's defaults. Four changes to a prompt that break the pattern.
• How to make a template's prompt yoursKeep a template's design and replace its subject: what to change in the prompt, what to leave alone, and the order to do it in.
• Where to paste a website promptCoding agents, AI editors and plain chats handle a website prompt differently. What each can do, and which to use.

• Landing pages
• Hero sections
• Product pages