From Reference to Prompt: A Repeatable Website Workflow

A strong reference gives you evidence. A strong prompt turns that evidence into decisions.

The mistake is to describe only what the page looks like: dark background, large headline, smooth animation, premium feel. Those phrases are directionally useful, but they leave most implementation choices unresolved. A builder still has to guess the structure, hierarchy, behavior, and responsive rules.

Read the reference as a system

Before writing the prompt, separate what you can observe into five layers:

1. Goal: What should the visitor understand or do?
2. Structure: Which sections exist, and in what order?
3. Hierarchy: What receives attention first, second, and third?
4. Behavior: What moves, reacts, expands, or stays fixed?
5. Constraints: What must happen on smaller screens, slow networks, or reduced-motion settings?

This turns a visual impression into a buildable model.

Describe relationships, not isolated properties

“Use a 64px headline” is less useful than “make the headline the dominant element, roughly twice the visual weight of the supporting copy, with a narrow reading width.”

Relationships survive changes in viewport size and font choice. Fixed values often do not. Good prompts can still include exact measurements, but those measurements should support a clear relationship.

Use a prompt skeleton

A reliable website prompt can follow this order:

Product and audience
Primary action
Page structure
Visual hierarchy
Type, color, and spacing direction
Media and motion behavior
Responsive behavior
Accessibility and performance constraints
Content that must remain editable

The order matters. Structure should be decided before decoration, and behavior should be defined before animation details.

Work in two passes

In the first pass, ask for the full page with correct information architecture, hierarchy, and responsive behavior. Do not spend all of the prompt budget on polish.

In the second pass, refine a small number of high-impact decisions: headline scale, card proportions, image treatment, interaction timing, and the spacing rhythm between sections.

This is usually faster than asking for a perfect page in one enormous prompt. It also makes it easier to identify whether a problem comes from structure or styling.

Keep the reference, change the intent

A useful rebuild does not reproduce another brand. It borrows a composition principle and applies it to a different product, audience, and message.

Use the WebPrompts library to start from a strong structure. Then make the prompt specific about what your page needs to communicate, not just what the reference happened to show.