Skip to content
decodecodeveloper docs
Storefront → Templates → Migration validation

Pixel-perfect (fix & section)

Diff one section between prod and cand — screenshots, pixelmatch heatmap, computed styles — into an LLM-ready bundle.

When a single section renders differently, parity fix and parity section capture everything an agent needs to make it pixel-perfect.

parity fix — the shortcut

fix runs section with all signals on and produces an LLM-ready Markdown bundle:

parity fix --prod https://old.com --cand https://new.dev --selector "[data-section='Hero']"

Writes to parity-output/:

  • section-<hash>-prod.png / -cand.png — cropped screenshots of the section on each side
  • section-<hash>-heatmap.png — pixelmatch overlay of the differing pixels
  • section-<hash>-bundle.json — HTML diff + computed-style diff + asset lists
  • section-<hash>-prompt.md — a ready-to-paste prompt
  • an LLM paragraph diagnosing the difference (with an API key; --no-llm skips it)

parity section — pick your facets

section is the lower-level command — capture exactly the facets you want:

parity section --prod ... --cand ... --selector "footer" \
  --screenshot --computed-styles --heatmap --css-source --prompt
FlagWhat it adds
--screenshotPer-side cropped screenshot
--computed-stylesComputed-style diff (curated ~35 properties)
--heatmappixelmatch bounding-box + hotspots of the pixel diff
--css-sourceResolves which CSS rules produce the styles (via CDP)
--output-htmlHTML diff of the section
--prompt / --llm-summaryEmits bundle.json + prompt.md / an LLM paragraph

Inspecting CSS rules — parity css-trace

To see which CSS rules affect an element (single URL) or how computed styles differ between the two sides:

# Every matched rule for a selector on one URL
parity css-trace --url https://loja.com --selector ".price"
 
# Computed-style diff prod vs cand
parity css-trace --prod ... --cand ... --selector ".price" --json

See also