The anatomy of a good website prompt
The five parts every effective website build prompt needs: structure, exact values, motion, responsive behavior and constraints. With a short example of each.
A website prompt is a specification. The models that build sites from text are extremely literal, which is a feature once you start writing like a spec author instead of a customer.
1. Structure first
Name the sections and their order before anything else. A hero split into two columns with the headline on the left and a product card on the right. Then the structure of each piece: how many columns, what sits inside each one. The model cannot infer intent you did not state.
2. Exact values beat vague adjectives
Do not ask for large text. Ask for a 56px headline with tight leading and negative tracking. Do not ask for breathing room. Ask for a section with 96px top padding. Models resolve vague words randomly and exact values deterministically, so every exact value you write removes randomness from the output.
3. Motion as explicit steps
Say what animates, what triggers it, how long it takes, and what easing it uses. A hero headline that rises 10px and fades in over 400ms, staggered 60ms per element. Also say what must not animate: endless floating and pulsing is the fastest way to make a page feel cheap.
4. Responsive behavior, written down
State the breakpoints and what changes at each one. Stack the columns under 768px and reduce the headline to 36px. Without this the model picks its own layout at mobile sizes, and it will not pick yours.
5. Constraints and finish
End with the avoid list: no gradients, no emoji, no lorem ipsum, no invented copy. Then one line on what done means: the page should work as a single HTML file with no missing assets. Every prompt in our website library follows this five-part structure, which is why they survive pasting into different builders and still come out looking designed.