claude-design-parity

Port design prototypes into a real codebase using a two-pass discipline: a literal port for visual fidelity, then a re-wire pass for functional fidelity. The tool reads CLAUDE.md and repository layout to infer state idioms and bridges, preserving invariants during the port.

Verify visual parity using Playwright and pixel-diff reports. The tool runs automated visual parity verification across multiple routes and viewports, generating design vs implementation reports to guide incremental validation.

Yes, Playwright and pixelmatch are used as core dependencies to automate visual diff testing. The tool captures screenshots across routes and viewports, then generates parity reports comparing design outputs against the implementation.

Maintain design fidelity by following a two-pass port discipline: first perform a literal port to match visuals exactly, then re-wire the code to integrate functional fidelity with existing state stores and bridges, validated by automated pixel-diff reports.

Yes, the tool is stack-agnostic. It reads CLAUDE.md and the repository layout to discover invariants, state idioms, and project conventions, allowing it to operate across both generic and specialized stacks during the porting process.

Wiring and state connections are lost when ports skip functional re-wiring. The tool solves this by reading CLAUDE.md and repository structure to discover existing state stores and bridges, then performing a second pass to re-wire the ported code for functional fidelity.