claude-design-parity
CommunityPort Claude Design prototypes to your codebase.
Authorjeffmichaeljohnson-tech
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Port Claude Design prototypes into real codebases without losing wiring, state stores, or project conventions, enabling reliable parity checks against design outputs.
Core Features & Use Cases
- Two-pass port discipline: literal port for visual fidelity, then re-wire for functional fidelity.
- Automated visual parity verification via Playwright and pixel-diff reports for multiple routes and viewports.
- Stack-agnostic design discovery: reads CLAUDE.md and repository layout to infer state idioms, bridges, and conventions.
- Generates parity reports (design vs impl) to guide incremental porting and validation.
Quick Start
Invoke /claude-design-parity in a Claude Code session to begin a parity run against your project.
Dependency Matrix
Required Modules
playwrightpixelmatchpngjs
Components
scripts
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: claude-design-parity Download link: https://github.com/jeffmichaeljohnson-tech/claude-design-parity/archive/main.zip#claude-design-parity Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.