TL;DR
Use a strong reasoning model (Claude Opus 4.7 or GPT-5.5, as of June 2026) to turn vague mood language into a one-page visual direction doc before you generate AI images or brief a designer. Feed it directional pairs (calm-over-loud), 2 anti-references with the exact trigger element, and the surfaces it must survive on. Make it return color and type direction, imagery do/don’t lists, and 3 yes/no on-brand tests. Then pull real hex from a contrast checker and validate against 10 industry references on Mobbin. The AI sets direction; you and a designer set execution.
The task
You’re launching a product and need one visual language across the landing page, App Store screenshots, social cards, ads, and the onboarding PDF the founder will inevitably write. You want a one-page visual direction document before you generate a single AI image or hire a designer, because the alternative is realizing 80 images later that the App Store screenshots look like a different company than the landing page.
The point of the doc is not pretty words. It is a set of rules a designer can apply when you are not in the room, and a referee when two people disagree about whether a layout is on-brand.
Where AI helps, and where it does not
AI is good at three things here:
- Synthesizing mood language into directional rules (
calm and precisebecomes palette ranges, type pairings, layout constraints). - Suggesting anti-references that sharpen the brief by saying what you are not.
- Producing the 3 “is this on-brand?” tests a designer can answer in 30 seconds.
What AI cannot do: replace a designer’s execution, pick the right hex from “muted blue,” or see the category clichés you’ve gone blind to (every productivity SaaS still ships the same 3D isometric illustration). Sanity-check against 10 real references from your industry. The free tier of Mobbin only shows the most recent few apps (as of June 2026), so for serious browsing the Pro plan (around $10/month billed annually) or a 10-minute scroll through Brand New is worth it.
A specific failure mode: feed the AI vague input and it defaults to “premium and modern.” Those words describe nothing. Push back: “Use directional pairs only — cool-over-warm, angular-over-organic, space-over-density.”
What to feed the AI
- Product type plus 3 directional adjective pairs, each scored against its opposite (
calm-over-loud,precise-over-organic,dense-over-airy). - 2 brands you do NOT want to look like, and the one specific element of each that triggers the “no.”
- 1 brand you genuinely admire, with the specific element you want to borrow (not “the whole vibe”).
- The 3 surfaces this direction has to survive on. Different rules per surface.
- Your buyer’s visual literacy. A developer audience tolerates more density; a consumer audience needs more space.
- The category cliché you must NOT fall into. Every category has one.
- Existing brand assets if any (logo, font, primary color); the direction must be compatible.
- The hard platform specs (below). Direction that ignores the canvas falls apart on contact.
Exact surface specs (as of June 2026)
These are the canvases the direction must survive on. Get them wrong and the whole brief reads as amateur.
| Surface | Spec | What it forces |
|---|---|---|
| App Store screenshot (primary) | 1320 x 2868 px (6.9” iPhone 17 Pro Max); 1290 x 2796 px (6.7”) accepted as fallback | Tall canvas with room for a text overlay; off-by-one pixels get rejected |
| Open Graph / link preview | 1200 x 630 px, keep headline inside the center ~1080 x 600 safe zone | Works across X, LinkedIn, Slack, Discord |
| X (Twitter) summary large image | Uses the same 1200 x 630; X falls back to your og:image if no twitter:image is set | Bottom edge can crop; don’t anchor key elements there |
Sources: Apple screenshot specifications.
Copy-ready prompt
Write a one-page product visual direction document.
Product: [one-line description]
Directional adjective pairs: [3, each as "X-over-Y"]
Avoid looking like: [2 anti-references + the trigger element of each]
Admire: [1 brand + the specific element to borrow]
Surfaces: [landing / App Store / social]
Existing brand assets: [logo, primary color, font if any]
Category cliche to avoid: [specific cliche]
Return:
1) Visual principles - 3 bullets, each paired with an anti-example specific to this product.
2) Color direction - 2 palette options with hex codes, plus one sentence on the mood each evokes.
3) Typography direction - 2 font-family pairings (display + body) with a note on usage.
4) Imagery rules - photography style, illustration style, and an explicit do/don't list (5+ items each).
5) Layout principles - density, spacing, one rule per surface.
6) The 3 on-brand tests - yes/no questions a designer answers in 30 seconds: "Does this... ? If no, it's off-brand."
7) Three reference URLs (real sites in this industry) that anchor the direction.Shorter variant: anti-brief sharpener
Below is my current visual brief. It reads generic. For each principle, write the
matching anti-example specific to my product/category - what off-brand actually
looks like for us. Then mark which principles still read as "premium and modern"
wallpaper and rewrite them as directional X-over-Y pairs.
[paste brief]A note on models (June 2026): any frontier reasoning model handles this well. Claude Opus 4.7 and GPT-5.5 both give the tightest directional language; Gemini 3.1 Pro is fine and cheapest on API. Whichever you use, the quality comes from the specificity of your input, not the model.
Sample output
A useful do/don’t line: “Do — clean product screenshots on solid pastel backgrounds, single accent color per surface, generous negative space. Don’t — lifestyle photos of people using laptops; that’s the SaaS-blog look we’re explicitly avoiding, and the cliché our category is drowning in.”
A useful on-brand test set:
- Test 1: would this feel out of place next to a Linear marketing page? If yes, we’ve drifted toward enterprise.
- Test 2: cover the logo. Can you still tell it’s us from the typography alone? If no, we’re using stock type.
- Test 3: is there at least 40% negative space on this surface? If no, we’re cluttering.
How to refine the output
- Replace mood adjectives with directional pairs. “Every adjective must be
X-over-Y.Modernfails;angular-over-organicpasses.” - Force an anti-example per principle. “Pair every principle with a concrete anti-example specific to our category — not
don't be busybutdon't use the isometric-character illustrations every productivity SaaS adopted in 2024.” - Make tests answerable in 30 seconds. “Each on-brand test must be a yes/no question with a clear visual referent.
Does this feel calm?fails;Is there at least 40% negative space?passes.” - De-jargon it. “Rewrite so a non-designer (founder, marketing intern) can enforce it. No
kinetic typographyoreditorial whitespace.” - Pin platform deltas. “Add per-surface deltas: App Store needs a 1320 x 2868 canvas with a text overlay, OG cards are 1200 x 630, X crops the bottom edge. The direction must hold on each.”
Common mistakes
- Choosing only positive references. Anti-references do more for clarity; a brief is defined by what it excludes.
- Using “premium and modern” as the mood. Those words describe nothing and produce nothing. Directional pairs are the only useful mood format.
- Skipping typography because you haven’t picked fonts yet. Set the direction (serif vs. sans, weight contrast, all-caps usage) first; pick the actual font later.
- Setting the direction once and never updating it after the first 3 months. It’s a living doc, not a launch artifact.
- Letting the brief run past one page. Over a page, no one reads it. The discipline of one page is the value.
- Skipping the on-brand tests. Without them every design becomes a debate, and the loudest opinion wins.
- Letting AI pick exact hex values. Use AI for direction (warm-amber palette), then pull real hex from a contrast tool. Aim for at least a 4.5:1 contrast ratio on body text per WCAG AA; check it on the WebAIM Contrast Checker.
- Treating App Store screenshots as a stretch goal. They often get more impressions than the landing page; they need first-class direction.
FAQ
- Can I hand this straight to a designer or Fiverr seller? Yes, but pair it with 5 reference images and one example deliverable (a draft screenshot or moodboard). Words alone are ambiguous; show plus tell beats tell.
- How often should I revisit it? After about 6 months of execution. If you’re overriding the rules more than monthly, the rules are wrong, not the executions. Re-brief instead of exception-handling.
- What if the founder has strong taste and overrides the brief weekly? Make the brief reflect their taste explicitly: paste 5 examples of work they approved and 5 they rejected, and have the AI extract the pattern. The brief becomes their taste, externalized.
- How is this different from a brand guide? A brand guide is identity (logo, color, type). A visual direction doc is execution rules: how that identity plays out on real surfaces. You need both.
- Can AI generate the actual moodboard? It can generate sample images that match the direction so you can sanity-check the brief, but use real industry references for the moodboard a designer actually works from.
- Which model should I use? As of June 2026, Claude Opus 4.7 or GPT-5.5 give the most precise directional language. Gemini 3.1 Pro works and is cheapest on API. Input specificity matters more than the model.