designmatchlisted

# designmatch ## Overview Match RN screen → HTML canonical at ≥95% visual parity. Closed loop: VQA stub seeds redux → Playwright renders canonical PNG → adb/xcrun captures native PNG → pixelmatch + ssim.js scores diff → composite triptych for eyeball review → iterate. Origin: a production React Native app. A single screen's SSIM climbed 35% → 55% over ~30 commits of eyeballed pixel-tweaking before this loop replaced it. Pass gate: **SSIM ≥ 0.95 OR pixelDiffPct ≤ 5%**. ## When to Use - RN screen drift from Claude Design HTML canonical - Visual parity audit before ship - Per-screen iteration loop on real device - Closing the design ↔ code feedback gap Do NOT use for: unit logic, redux state shape, navigation graph correctness — those are not visual. ## Quick Start — URL in, ready-to-translate out From the RN project root: ```bash designmatch init "<claude-design-url>" --app-dir . --port-all ``` This single command does the full bootstrap: 1. **App side**: copies `assets/visual-qa.ts` into the app (`src/lib/visual-qa.ts` by default; auto-detects `src/utils/`, `src/`, `app/`, or root), writes default `.designmatch/state.vqa.json`, updates `.gitignore`. 2. **Fetch**: Playwright headless downloads the entire canonical bundle (HTML + JSX + assets) to `.designmatch/canonical/` by intercepting every network response, then flips `config.json` kind from `url` → `local-dir` (original URL preserved for re-fetch). 3. **Port-all**: discovers every `screen-*.jsx|tsx` / `*Screen.j