Freeze one page observation, not a whole design system
This workflow is for designers and frontend maintainers documenting an authorized existing website. The result is a reviewed inventory and a handoff of token proposals, not a cloned site or a recovered source design system. Choose a public page that can be captured without credentials or sensitive information. Record URL, time, desktop or mobile viewport, requested light/dark preference and extra wait. Requesting dark mode does not prove the site actually switched themes.
Save the ZIP containing design.md, screenshot.png, tokens.json and tokens.css, then hash the originals. Review the screenshot before trusting summaries: a consent overlay, missing fonts or blocked resources may describe the wrong state. The screenshot is a fixed viewport, whereas bounded style sampling can include rendered elements below it. No automatic scrolling, clicking or login is performed. Record sampling truncation and resource warnings rather than treating a short report as complete coverage.
Separate measured values from interpretations
Choose representative headings, body copy, buttons and cards. Link each reviewed value to a component and capture context in a separate ledger. Use the image colour picker on recorded screenshot coordinates to cross-check a visible surface, not to recover CSS blindly. Edge antialiasing, transparency, gradients, images and colour management can make a pixel differ from a computed declaration. Sample a suitable solid area when available and preserve both values when the distinction matters.
The report's counts measure sampled declarations, not painted area or brand importance. Its font-family stack is a declaration, not proof of the face used for every glyph. Record spacing and typography as observations; do not infer an entire responsive scale from one width. Exported names such as observed-1 are mechanical. Mapping a value to a role such as a primary action colour is a proposal requiring an owner and rationale. Unsupported expressions may remain in the report without becoming exported primitive tokens; that is a coverage limit, not permission to invent a replacement.
Review colour pairs and token changes in context
Normalize colour notation with the colour-space converter only where supported, retaining originals and any gamut warnings. Converting to a narrower gamut may change appearance; do not silently equate a convenient HEX value with a wide-gamut source. For contrast, identify actual foreground and background conditions for each selected text or control. Transparent layers need verified compositing and image or gradient backgrounds need appropriate additional checks. If the tool cannot represent the actual situation, record it as unresolved rather than substituting guessed opaque colours.
Use a copy of tokens.css for readable formatting, not an automatic stylesheet replacement. Validate tokens.json against your supplied compatible schema; neither a schema-shaped result nor a format label proves design correctness or standards conformance. Compare only captures with matched viewport, requested theme and relevant settings. Generated numbering can shift when observation order changes, so a changed observed-1 is not necessarily a changed component. Reconcile values and context manually and separate genuine changes from missing-resource or sampling noise.
Deliver decisions and explicit verification gaps
Maintain a ledger with capture reference, component, observed declaration, screenshot coordinate where relevant, proposed semantic name, approval status, reason and owner. This ledger is a separate review artifact, not a claim that the extractor automatically supplies stable component identities. Keep raw evidence, accepted proposals and unresolved cases in separate files so a later maintainer can distinguish facts from choices. A new proposed name should retain its mapping to the observed source.
Reopen final JSON and CSS, repeat structural and change checks after edits and hash the actual delivered files. Retain local copies and report assets rather than relying on temporary download links. List untested widths, hover/focus/error states, authenticated screens, frames and pages. The receiver must test approved changes in the target browser before deployment; a screenshot and a few contrast ratios do not certify a whole accessible interface. Use the related colour-system workflow for new palette decisions, typography workflow for font validation and CSS workflow for implementation and cascade review.