Inspect the specimen before translating it
Extract an explicit visual contract before coding from a reference artifact.
These examples and illustrative results are independently authored teaching materials, not measured model results.
Use case
Implement a supplied landing-page reference. The teaching sample visibly says Clear task handoffs and View examples, with text left/comparison right, larger headline and generous space. It shows no hover/submission/mobile behavior. Inspect before reaching for a familiar card template.
Mechanism
Record readable text, hierarchy, proportions, alignment, spacing, colors and component relationships, separating observations/inferences/unknowns. Implement confirmed relationships; derive hidden behavior from other maintained evidence or needed decisions. Render and compare at matching size. New generated proposals do not replace original-reference evidence.
Bad example
Glance and build three familiar cards, guess submission/hover and a precise font identity, ignoring the visible wording.
Good example
Extract the teaching observations: exact headline/CTA, two-column text/comparison relationship, larger title and empty space. Font identity, hover and mobile remain unknown pending evidence/decisions. Implement confirmed relationships and compare rendered text/hierarchy/alignment. Use clearer original references for uncertain details, not regenerated images masquerading as original evidence.
Why the change matters
Named observations make deviations assessable instead of vaguely similar. Explicit unknowns prevent unseen interactions from becoming supposed design requirements.
Observable expectation
Compare title, CTA, columns, relative type and space. Missing words, three cards or reversed emphasis should fail.
Unseen hover cannot be reported matched; exact fonts/dimensions need evidence or documented choices. No real landing page is implemented.
Limits
Raster establishes observed pixels, not semantic HTML, hidden states or exact fonts. Business/accessibility still constrain implementation. Source regeneration supports exploration, not guaranteed preservation of an existing reference.