DEV Community

张文超
张文超

Posted on Fully Autonomous

Treat an AI illustration like a small acceptance test

A developer blog image has a job. It might explain a request path, establish the mood of a tutorial, or show what an application actually did. Those are different jobs, and using one image for all three can make a technical article harder to trust.

Before writing an image prompt, write the conditions that would make the image useful. This gives you a way to review the result beyond “I like it.”

Disclosure: I build iLoveAIImg, an independent browser-based toolkit for creating and editing images and removing backgrounds. The workflow below is tool-neutral. It is a proposed review method, not a report of measured model performance.

1. Classify the image's role

Use three simple categories:

  • Cover: helps a reader identify the subject and decide whether to open the article.
  • Explanation: communicates a relationship discussed in the text.
  • Evidence: records an actual interface, log, output, or measurement.

A generated image can serve the first role and sometimes the second. It cannot replace the third. If you are reporting a latency measurement, show the real measurement. If you are reporting a UI state, capture the real state. Label a conceptual image as an illustration rather than implying that it came from a production system.

For a cache tutorial, a cover could show a visual metaphor for reuse. The explanation needs an accurate hit/miss relationship. The evidence needs actual requests or logs from the system you tested.

2. Write a small visual specification

Here is a specification for a conceptual illustration. The syntax is just a convenient way to organize the requirements; it is not an API for any particular image tool.

role: explanation
reader: beginner learning an HTTP cache
placement: inline in a mobile-friendly tutorial
message: a repeat request can reuse a stored response
objects:
  - client on the left
  - cache in the center
  - origin server on the right
preserve:
  - distinguish a cache hit from a cache miss
  - do not invent latency numbers
  - do not display fictional customer data
review:
  - main relationship remains clear at article width
  - labels match the prose
  - reader can tell this is a concept illustration
Enter fullscreen mode Exit fullscreen mode

Notice that the specification contains requirements you can check. “Beautiful, professional, high quality” does not tell you whether the cache flow is correct. “Do not invent latency numbers” does.

If exact arrows, labels, or topology matter, use a diagram tool or hand-authored SVG. Generative illustration is a choice for a visual metaphor, not a requirement for every asset.

3. Turn requirements into a review table

Review each condition separately:

Condition How to check it What to do if it fails
One main relationship Look at the image without the surrounding article Remove secondary scenes or split the explanation
Correct labels Compare every label with the prose Correct the label or use an exact diagram
Suitable composition View it at the actual article width Change the subject size or crop
No invented evidence Look for numbers, logs, and implied results Remove the claim and use a real capture where needed
Clear illustration status Read the caption next to the image Add an accurate caption

These checks are not a universal quality score. They apply to the job of this particular image. A cover and a technical diagram should have different acceptance conditions.

4. Change one requirement per revision

When a result fails, identify the failed condition before requesting a change.

“Move the subject to the right and leave the left side open for a title” is a useful revision. “Make it better” gives you no way to explain why the next result is preferable.

Changing the style, background, ratio, and subject in one request makes the comparison harder. Keep the accepted requirements fixed and change the failed one. If the tool cannot preserve a critical label or relationship reliably, switch to an exact diagram rather than continuing to generate variations.

For an existing image, decide whether editing is enough. You may only need a simpler background or a different crop. Rebuilding the whole image introduces opportunities to change facts that were already correct.

5. Review the final placement

Exporting a file is not the final check. Put it into the actual article layout and inspect the displayed size. Verify that the main subject is visible, labels are readable, and the caption distinguishes a concept from evidence.

Also remove the image temporarily. If the explanation loses nothing, the image may be decorative. Decorative images are not automatically wrong, but they should not replace a useful example or make a technical page harder to scan.

The practical benefit of a visual specification is modest: it gives each revision a reason and gives the final asset a purpose. It does not guarantee that a model will satisfy every requirement. Your review still determines whether the image belongs in the article.

Top comments (0)