How to give AI a design brief it can use
Turn visual preferences into a useful brief with real content, a clear audience, and references that explain what should shape the design.
Key takeaways
- Describe the visitor's decision before choosing a visual mood.
- Supply the actual headings, examples, and images the layout must hold.
- Give each reference one clear job, such as type hierarchy or image proportions.
- Separate images used for inspiration from assets that should appear on the site.
- Review the result with real content, then request a focused change.
Tell the design what it needs to explain
“Make it clean, modern, and premium” leaves most of the important choices open. A restrained portfolio, a dense booking interface, and a luxury product page could all answer that request. The words describe a preference, but they do not tell the design what to help someone do.
Start with the visitor and their decision. An independent landscape designer might want homeowners to compare a few completed gardens, understand the scope of a design service, and request a conversation. That suggests prominent project photography, useful captions, a plain explanation of the process, and a contact action near the relevant information.
Use this imaginary practice as a working example. For your own business, replace the audience, material, and intended action.
Add the context that changes the design: visitors are comparing providers on their phones, project photographs matter more than decorative graphics, and the designer offers planning rather than construction. Those details influence the result more clearly than another string of style adjectives.
Bring the content before the layout
A layout made around short placeholder copy can fall apart when the real information arrives. A two-word project name becomes a long address. A neat service card needs a paragraph to explain its exclusions. A landscape photo gets replaced by a portrait shot with an important subject near the edge.
Prepare a small content pack before asking for the design:
- The main heading and one sentence explaining the service.
- The sections visitors need, in their intended reading order.
- Two or three real project descriptions with the designer's role.
- Approved photographs, with a note identifying each project.
- A clear service description and any important exclusions.
- The contact details and destinations that should actually work.
You do not need final copy for an entire website. You do need representative content: the longest likely heading, an ordinary project description, and the type of photograph you will use repeatedly.
For the landscape example, the useful caption might explain the site constraint, the work undertaken, and whether the picture shows a completed garden or a proposal. If that information is missing, supply it or label the gap. Invented awards or results cannot make up for an incomplete content pack.
Give each reference a job
A reference is easier to use when you explain which property matters. Instead of “make it look like this,” say that you like its large project images, compact navigation, or distinction between a heading and a caption.
| Reference detail | Useful direction |
|---|---|
| A photography portfolio | Let the project image lead each section, followed by a short caption. |
| An editorial article | Use a comfortable text measure and a clear change in scale between headings and body copy. |
| A service page | Keep the process easy to scan and put the contact action after the explanation. |
Choose a primary reference for the overall composition. Use another only to clarify a detail the first does not cover. Combining five unrelated homepages without priorities can produce competing ideas about spacing, navigation, and emphasis.
State what stays yours: the name, wording, logo, colors you already use, and approved photographs. Describe the reference's useful properties rather than asking to reproduce another business's identity. A reference can also be a simple annotated screenshot of your current page, with two or three notes about what should improve.
Say which images belong on the site
For each attached image, tell Mythos whether it is a design reference or an asset to display. The chat attachments documentation explains the + → Attach flow. A screenshot can guide the work without belonging on the published page.
Use descriptive filenames and a short mapping: “garden-courtyard.jpg is the first project; wide-layout-reference.png shows the image proportions I like.” If a photograph has a subject that should remain visible, name it. If the image is a proposal rather than completed work, supply that label with the caption.
This also helps distinguish an image problem from a layout problem. A low-resolution photograph will not gain detail when enlarged. A crop that works across a desktop section may hide the subject in a narrow card. Provide an alternative crop when available, or ask the design to preserve the full image.
Use material you have permission to publish, and keep reference screenshots out of the public page unless they are intended and appropriate content.
A brief you can adapt
The following prompt combines purpose, content, and visual direction. Replace every bracketed field with your own material before sending it. The example assumes a simple site with a contact link; it does not promise a booking system.
Build a website for [practice name], an independent landscape designer.
Audience: homeowners comparing designers for a small residential garden.
They need to understand our work and service before contacting us.
Our role is garden design and planning, not construction.
Use this content in order:
1. Introduction: [approved heading and one-sentence description].
2. Selected work: [three projects, roles, captions, and matching images].
3. Our process: [actual stages and what the client receives].
4. Services and coverage: [approved scope and service area].
5. Contact: [real address and what to include in the first message].
Visual direction: quiet and image-led, with a warm neutral background,
dark readable text, and generous space around the project photographs.
Keep navigation compact. Use one consistent treatment for project titles
and captions. Give the primary contact action a clear visual priority.
Use [reference filename] for its large-image composition and restrained
navigation. Keep our own copy, identity, and photographs.
[Project image filenames] should appear on the site; the reference should not.
On mobile, preserve the image subjects and keep captions next to their
projects. Avoid putting essential text over detailed photographs.
Do not add testimonials, awards, prices, or claims I have not supplied.
If you are unsure about the page structure, use Plan to discuss it first. When the material and direction are settled, use Build and inspect the delivered page in Preview. See Building and editing for that workflow.
Review it as a visitor with a decision to make
On the first pass, read the page without looking at your prompt. Can you explain what the practice does, which work it has done, and how to begin a conversation? If that is unclear, start with the information hierarchy before changing the decoration.
Then inspect the visual choices with the real material in place. Does the longest project title wrap comfortably? Is each caption close enough to its photograph to read as a pair? Do the image crops preserve the details the project description discusses? Can someone distinguish a proposed design from a completed garden?
Repeat the review at a narrow width. A desktop composition should adapt to the reading order of a phone, where images and text often become a single sequence. Check that the primary action remains easy to identify, text stays readable, and navigation does not obscure the page.
Write down the strongest mismatch with your brief. One concrete observation will usually guide the next request better than a general feeling that the design needs more polish.
Use the follow-up to settle one design decision
Suppose the overall direction works, but the project captions feel disconnected from the images on a phone. Describe that relationship and the result you want:
In Selected work, the mobile captions look detached from their photos.
Reduce the gap within each image-and-caption pair and leave more space
between projects. Keep the existing image crops, copy, type sizes,
desktop arrangement, and contact section.
Check the longest caption at a narrow phone width.
This request identifies the section, the visible problem, and the surrounding choices that already work. After the edit, revisit the same long caption and compare the desktop view too.
If the entire structure is wrong, say so and return to the brief. Small spacing edits cannot resolve a page organized around the wrong visitor action. The focused iteration guide covers how to keep useful work while changing a specific part.
Over a few iterations, the brief becomes a set of decisions you can explain: why an image is large, why the copy is short, and why the action appears where it does. That is a stronger basis for a coherent website than repeatedly asking for a different style.
