Design prompts are part of the frontend spec

I used to separate “the design bit” from implementation. The design bit was a reference image and a handful of comments in a ticket. Implementation was where the serious detail lived: component boundaries, responsive breakpoints, loading states, keyboard behavior, and image sizes.

AI site builders make that split fall apart. If the prompt is the main input to the build, then the prompt is part of the spec. A vague one does not produce a rough first draft. It produces ambiguous requirements at speed.

Hey Design AI takes a practical approach to that problem. It is a library of website-design prompts with visual previews, but the useful part is the brief behind the image. The library currently includes 350 previews and frames each direction as something a builder can inspect, explain, and adapt.

Treat the prompt like an interface contract

A good prompt says more than “use a clean SaaS aesthetic.” It gives the model an order of importance. For example:

• Lead with a concise product claim.
• Put one piece of real evidence beside it.
• Keep the primary action visible before the first scroll on a phone.
• Use images to explain the workflow, not to decorate empty space.
• Reserve motion for feedback and provide a reduced-motion alternative.

None of that is exotic. The point is that a model cannot infer it reliably from a mood word. It needs the decisions written down.

I have found that this cuts down on a familiar kind of cleanup. The generated page may still need work, but I am no longer spending the first hour deleting fake dashboard metrics, moving the same button back into view, and trying to work out what the page was trying to say.

The negative instructions pull their weight

The strongest design prompts often contain a few blunt refusals. Do not copy a brand’s signature layout. Do not use glass cards if they weaken contrast. Do not make hover the only route to content. Do not put the proof below three screens of scene-setting.

That is not prompt pessimism. It is basic product discipline. Models are very good at filling empty space with patterns they have seen before. A short “avoid” list gives the output a boundary.

Hey Design AI treats those exclusions as part of its prompt craft, alongside the more visible choices about typography, colour, hierarchy, and imagery. It also asks builders to account for mobile behavior, focus, labels, contrast, target sizes, and motion. The final site still needs normal testing. A well-written prompt does not turn generated code into an accessibility audit. It does make those concerns harder to forget at the start.

A simple way to use a visual reference

When I am working from a reference, I pull it apart before I reuse it:

1. What is the first thing a visitor should understand?
2. Where does the proof arrive?
3. What is doing the visual work: type, image, layout, or all three?
4. What disappears or reorders when the viewport gets narrow?
5. Which parts belong to the original brand and must be replaced?

That last question matters. A reference can offer a useful hierarchy without offering a personality to borrow. Good AI-assisted design keeps the first and throws away the second.

I still need to make the actual frontend decisions. I just prefer to make them before the generator turns a vague sentence into twenty components.