Start with permission and a bounded target

Before capturing anything, confirm that you own the page or have explicit permission from its rights holder. Then choose one representative public URL. A focused page gives you a useful baseline without mixing unrelated templates, account-only states, or private data into the job.

Write down the page states that matter before reconstruction: desktop and mobile widths, open navigation, expanded accordions, validation messages, and any motion that communicates state. This turns a vague visual-copy task into a finite acceptance checklist.

Inventory the real inputs

  • Typography: font families, weights, line heights, letter spacing, and fallbacks.
  • Layout: content widths, grids, breakpoints, fixed elements, and overflow behavior.
  • Assets: logos, icons, responsive images, background media, and their licenses.
  • Interaction: focus, hover, expanded, loading, success, and error states.
  • Content: headings, labels, metadata, links, and structured-data requirements.

Reconstruct systems, not screenshots

A screenshot can guide visual comparison, but it does not explain document structure or responsive behavior. Build semantic regions first, identify repeated patterns, and express spacing and color through a small token layer. Keep one-off abstractions out until repetition is real.

Treat forms and navigation as behavior, not decoration. Preserve labels, keyboard order, visible focus, reduced-motion preferences, and meaningful link destinations. Replace third-party analytics, forms, and authentication deliberately rather than copying opaque scripts.

Verify before publishing

  • Compare at several viewport widths, including widths between the original breakpoints.
  • Test keyboard navigation, zoom, reduced motion, empty states, and long content.
  • Check asset rights, copy accuracy, metadata, canonical URLs, and analytics consent.
  • Run type checks, production builds, accessibility checks, and a link crawl.
  • Have a person review the output; automated visual checks are evidence, not approval.