Briefing AI: Design Prompts That Work

Make me a website for my yoga studio.

A page generator is only as good as the brief you give it. Make a modern website for my bakery produces the average bakery site on the internet. A strong design prompt is specific about the purpose, the audience, the structure, the content and the limits. And it is silent about the things it should not decide for you. This lesson gives you a prompt framework, and a way to turn a client brief into results you can use.

The anatomy of a design prompt

• Purpose and audience: what the page is for, who is reading, and what worries them.
• The single main action, and where it appears.
• Brand personality: three adjectives, plus what to avoid, such as warm, craft, unfussy, but not corporate and not cold and minimal.
• Structure: the sections in order, each with its job and its real content.
• The visual system: tokens for palette, type, spacing, corners and motion.
• Technical limits: the stack, responsiveness, accessibility and speed.
• References described by their qualities: generous white space and large editorial photography. Do not say copy that site.

Structure before style

Do not ask for the finished, beautiful page at once. Work in layers. First make the page outline and the purpose of each section. Check it against the brief and fix the logic. Then add the visual system. Then build section by section. Changing a layout late is costly. Changing an outline early is free.

Act as a senior web strategist. Using this brief, propose the page structure for the home page.

BRIEF:
{{paste_project_brief}}

For each section give: name, its job (what doubt it removes or what action it drives), the content
it needs (and whether the client has it), and one layout idea. Order the sections the way a
skeptical first-time visitor would need answers. Keep to {{section_count}} sections or fewer.
Flag any section where we lack real content. Do not write final copy yet.

Build the page below as {{stack}}. Use ONLY the design tokens provided - do not invent colors, sizes or spacing.

DESIGN TOKENS:
{{paste_tokens_css}}

PAGE: {{page_name}} for {{business}}, whose visitors are {{audience}}.
PRIMARY ACTION: {{primary_action}} - visible without scrolling and repeated after every second section.
PERSONALITY: {{three_adjectives}}. AVOID: purple/blue gradients, floating blobs, generic stock-style icons,
three identical feature cards, centered-everything layouts.

SECTIONS (in order, with real content):
{{sections_with_copy}}

REQUIREMENTS: mobile-first (works at 375px), semantic HTML (header/main/section/footer, one h1),
visible keyboard focus, labelled form fields, images with meaningful alt text and width/height set,
no layout shift. Output complete code in one file per component.

Use real content, not lorem ipsum

Generators fill gaps with invented, generic content. A design built around generic content falls apart when the real, longer or shorter content arrives. Give the model the client's real headings, prices, testimonials and facts. Or at least give realistic placeholders of the right length. And tell it never to invent claims, awards, numbers or testimonials.

Using other designs fairly

• Describe qualities, such as the grid, the rhythm, the style of imagery and the feel of the type. Do not ask for a copy of a particular site.
• Never copy another company's logo, distinctive artwork, own words or overall look.
• Use inspiration to understand why something works. Then make something specific to your client.

Saying what to avoid works

Generators have strong habits. Telling them what to avoid is often more effective than describing what you want, because it removes the clichés you have learned to spot. Keep your own avoid list and paste it into every build prompt. Add to it every time a result annoys you.

A worked example: a bakery home page

Take the fictional Hearth Bakery from the brief. A weak prompt, like modern bakery website, warm colors, gives you a generic cafe template. A strong one names the audience: busy locals who order online before work. It names the single action: place a pre-order for tomorrow morning. It names the personality: warm, craft and unfussy, not corporate and not rustic cliché. And it lists the sections in order. The sections are these. A hero with the pre-order button. The three bestsellers with real prices. How pre-ordering works in three steps. The bakers' story with a real photo. Opening hours with an open-now sign. And reviews from real customers. Every section has a job and real content. So the first result is already close, and your remaining edits are about polish, not rescue.

Five mistakes that waste results

• Asking for the whole site at once. You get shallow pages. Build the home page first, then reuse its tokens and parts.
• Describing a mood and not a job. Clean and modern tells the model nothing about what the page must achieve.
• Leaving content to the model. It invents believable, generic text that you then have to find and remove.
• Never stating limits. Responsive behavior, accessibility and speed are only as good as you demand them to be.
• Starting again from scratch after a near miss. Fix the one wrong thing with a precise edit, and keep the rest.