Visual Prompting
Which visual medium is the least complex adequate way to help this reader?
Choose the medium before you write the prompt. A diagram, a photograph, and a video solve different comprehension problems. Treating them as interchangeable usually produces decorative work that is hard to read, inaccessible, or costly to maintain.
Changes my mind: Generated raster media proves as dependable as semantic HTML/SVG for critical text, controls, diagrams, proof, responsive reflow, and accessible equivalents.
Choose the visual medium
| The reader needs to… | Use | Why |
|---|---|---|
| Read exact text, operate controls, compare values, or follow a responsive explanation | Semantic HTML and CSS | Text reflows, remains selectable, and keeps its accessible meaning |
| See a relationship, sequence, system, or spatial model | Code-native SVG with an equivalent text explanation | Geometry stays precise while labels and reading order remain controlled |
| Feel a place, person, material, or editorial mood | Raster imagery | Photographic or illustrative detail can carry atmosphere without carrying instructions |
| Understand change over time that a static sequence cannot explain | Video, with captions and a written equivalent | Motion earns its cost when timing itself is the lesson |
Do not generate raster images for critical copy, controls, diagrams, proof, or responsive explanations. A model may imitate those things, but the result is not dependable interface or information design.
Start with the reader contract
Before production, write five lines:
Reader:
Decision or action:
Relationship or feeling the visual must clarify:
Medium and why it is the least complex adequate choice:
Evidence that would justify keeping it:
If the last line is vague, begin without the visual. Add one only when a named comprehension need remains.
Prompt a code-native diagram
Copy, fill, and give this prompt to a coding agent:
Create a semantic HTML/CSS or inline SVG explanation for [relationship].
Reader decision: [decision].
Reading order: [ordered steps or comparisons].
Exact labels: [labels]. Keep all critical text as real DOM text.
Equivalent explanation: add [list/table/prose] that communicates the same meaning.
Responsive behaviour: specify the layout at 320, 375, 768, and 1440px.
Accessibility: one descriptive title; logical DOM order; keyboard-safe controls;
no meaning carried by colour, position, or motion alone.
Legibility: body text >=16px, captions >=14px, metadata >=12px.
Reject the result if any label overlaps, clips, becomes too small, leaves its
container, or needs hover to be understood. Remove the diagram if the equivalent
text works just as well.
Code-native does not mean “always SVG.” Prefer semantic HTML for cards, tables, steps, controls, and text-heavy comparisons. Use SVG when geometry carries the meaning.
Prompt an editorial image
Use image generation only when raster detail serves a named editorial job:
Create one editorial [photograph/illustration] for [reader and page].
Job: help the reader feel or recognise [place, person, material, or mood].
Subject and composition: [what is present, camera position, spatial balance].
Medium and visual language: [photographic/illustrative method, lighting, texture].
Palette: [background, primary, accent and where each appears].
Crop-safe formats: [required aspect ratios and focal safe area].
No words, lettering, logos, interface controls, diagrams, charts, badges,
watermarks, signatures, or proof claims. Do not imitate a living artist.
The image must still work with an empty alt attribute if it is decorative;
otherwise provide a concise factual alt description outside the image.
Add text, controls, and evidence in semantic page content—not inside the pixels.
Iterate from evidence
Do not ask for “more premium” or “more polished.” Name the observed variance:
Revise [artifact] after review at [viewport or context].
Expected: [reader should understand or do].
Observed: [specific overlap, ambiguity, hierarchy, contrast, crop, or load issue].
Keep: [parts already doing their job].
Change only: [bounded correction].
Re-check: 320, 375, 768, and 1440px; keyboard focus; reduced motion;
accessible name and equivalent explanation.
Stop when: [measurable pass condition].
Reject or remove
Use this rejection prompt when production has become attached to the artifact:
Compare the page with and without this visual.
Keep it only if removal causes a named loss in comprehension, judgment, trust,
or action. If the loss is not observable, remove it. If the visual remains,
list its reader job, evidence, accessible equivalent, viewport results, and cost.
Do not defend it with taste words.
The default correction for an unhelpful visual is removal, not a more elaborate render.
Production gates
Ship only when all are true:
- The medium matches the reader job.
- Critical text, controls, diagrams, and proof are code-native.
- There is no overlap, clipping, horizontal overflow, or undersized label at 320, 375, 768, or 1440px.
- Body text is at least 16px, captions 14px, and eyebrows or metadata 12px.
- Keyboard order, accessible names, contrast, and reduced-motion behaviour pass.
- Complex images have an equivalent explanation; decorative images are hidden from assistive technology.
- Raster imagery has an explicit size budget, responsive sources, dimensions, and crop behaviour.
- Removing the visual would cause a named comprehension loss.
For the full page review, continue with the Product Design audit loop. For a conversion surface, apply the first-impression contract.
Failure Modes
- Raster interface — pixels carry copy, controls, proof, or diagram labels.
- Decorative debt — a visual survives because it looks polished, not because it helps.
- Desktop-only diagram — geometry passes once but overlaps or clips after reflow.
- Missing equivalent — a complex image or motion sequence has no usable text path.
Context
- Prompting — encode an intention as a usable input
- Web Design Prompts — specify the buyer, action, proof, and rendering loop
- Product Design — apply measurable viewport and accessibility gates
- Performance — compare the artifact against its declared job
Questions
What comprehension loss appears when the visual is removed?
Next question: Can a simpler semantic explanation do the same job with less cost?