Design-to-code fidelity

Use this skill to assess how closely an implemented UI matches a design reference and to report the highest evidence tier reached. It must stay general-purpose: do not bake in one product, one repository, one Figma file, one renderer, or one design-tool vendor. Every finding must state which evidence tier it reached.

Core contract

A valid fidelity run has four adapters:

design reference adapter -> implementation capture adapter -> comparison adapter -> evidence report

• Design reference adapter: exports the intended pixels or supplies an approved static reference image.
• Implementation capture adapter: captures the real UI pixels from web, Storybook, mobile/native, desktop, canvas, or another renderer.
• Comparison adapter: compares same-intent reference/render images and reports structural drift.
• Evidence report: separates verified diffs from static audit findings and blocked checks.