Auditing Pixel-Perfect Frontend
Audit method
- Capture the implementation at the same viewport dimensions as the reference.
- Compare macro layout before details: section height, container width, column proportions, alignment, whitespace.
- Compare typography: family, size, weight, line-height, letter-spacing, wrapping, clipping.
- Compare media: crop, object position, aspect ratio, scale, masks, corner radius.
- Compare components and states: borders, icon size, control density, hover/focus, arrows, labels, disabled/loading.
- Repeat on mobile independently.
Severity
- P0: broken interaction, unreadable/hidden content, severe responsive failure.
- P1: major composition mismatch visible immediately.
- P2: noticeable typography, crop, alignment, or state mismatch.
- P3: polish-level spacing, radius, shadow, or micro-detail.
Output
Lead with findings, not praise. For each issue, state location, expected behavior, observed behavior, severity, and the most likely implementation owner.
Rule
Do not accept “close enough” when the user explicitly asked for fidelity. Conversely, do not chase subpixel differences before resolving structural mismatches.
1---2name: auditing-pixel-perfect-frontend3description: Use when reviewing an implemented frontend against Figma, screenshots, a live reference, or explicit visual acceptance criteria and concrete visual regressions must be identified and prioritized.4---56# Auditing Pixel-Perfect Frontend78## Audit method91. Capture the implementation at the same viewport dimensions as the reference.102. Compare macro layout before details: section height, container width, column proportions, alignment, whitespace.113. Compare typography: family, size, weight, line-height, letter-spacing, wrapping, clipping.124. Compare media: crop, object position, aspect ratio, scale, masks, corner radius.135. Compare components and states: borders, icon size, control density, hover/focus, arrows, labels, disabled/loading.146. Repeat on mobile independently.1516## Severity17- P0: broken interaction, unreadable/hidden content, severe responsive failure.18- P1: major composition mismatch visible immediately.19- P2: noticeable typography, crop, alignment, or state mismatch.20- P3: polish-level spacing, radius, shadow, or micro-detail.2122## Output23Lead with findings, not praise. For each issue, state location, expected behavior, observed behavior, severity, and the most likely implementation owner.2425## Rule26Do not accept “close enough” when the user explicitly asked for fidelity. Conversely, do not chase subpixel differences before resolving structural mismatches.
jhonatan-oliveiradev