Match reference granularity to inspection needs

These examples and illustrative results are independently authored teaching materials, not measured model results.

Use case

Hand eight webpage sections from a long reference image to a coding agent: navigation, hero, features, examples, pricing, FAQ, action area and footer. A tiny collage obscures text/buttons. Provide inspectable references rather than generating a similar design to replace original evidence.

Mechanism

Inventory required sections/details, provide a readable view for each and retain overall-layout correspondence. Add attributed detail views for unclear controls, or record unknown dimensions. Identify original crop locations. Generated redesigns are new proposals rather than evidence of original pixels.

Bad example

Compress all eight sections into a tiny collage. Let the coder guess unclear dimensions or substitute a newly generated similar image for the reference.

Good example

Provide a reference inventory for the eight sections with readable views and original locations, preserving overall order. Add attributed detail views where text/buttons remain unclear; mark unobservable dimensions unknown. Do not guess from tiny pixels or pass generated redesigns off as reference evidence. Verify that the recipient can inspect text, spacing and controls in every required unit.

Why the change matters

Reference granularity determines what can actually be observed. Clear sections and attributed details retain global/local evidence instead of turning compression into guesswork, without imposing one image count on every task.

Observable expectation

An illustrative inventory includes all eight sections and their view locations; an unclear FAQ control has a detail reference or an open item. The recipient can inspect text/spacing, not just color blocks.

Check coverage, original-source correspondence and preserved unknown dimensions. Newly generated images belong to proposal comparisons, not original evidence.

Limits

Readable screenshots do not establish interactions, semantic HTML or dimension contracts. Source fixed counts/no-crop preferences are workflow choices; choose granularity for actual inspection rather than treating them as universal host guarantees.