feat: figma-analyze workflow (Figma design ↔ FE code visual coverage)#2
Draft
GorlemZ wants to merge 3 commits into
Draft
feat: figma-analyze workflow (Figma design ↔ FE code visual coverage)#2GorlemZ wants to merge 3 commits into
GorlemZ wants to merge 3 commits into
Conversation
Twin of spec-analyze for the frontend. Renders Figma frames to PNG (fetch_figma.py, stdlib, token from env/.env), optionally screenshots the running app via Playwright (shoot_app.mjs, recipe-driven), and runs a multimodal fan-out (figma-analyze.js) comparing design vs the LOCAL FE code pinned at HEAD: cartographer + crawler in Context, per-unit gating on missing design shots, analyzer/verifier/rework (multimodal), reverse-diff, IT report. Reuses the spec-analyze orchestration spine. Preflight/usage in figma-analyze.md. Validated end-to-end on WI10 (PIN-10144): 3 screen-units, full artifact tree (repo-map, comments, findings, reviews, reverse-diff, report). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Hardens the Figma↔FE visual-coverage workflow after a WI10 run where all three rendered app-shots captured the wrong screen yet were reported as "ok". - analyzer: add an explicit same-screen GATE. If the app-shot depicts a different screen than the design (e.g. a creation wizard step vs a read-only detail tab that merely shares a title), set appShotMismatch=true, discard the app-shot and compare design↔code only. New schema fields appShotMismatch/appShotMismatchReason; report no longer juxtaposes mismatched PNGs and the orchestrator warns when no usable app-shot was produced. - shoot_app.mjs: `ok` now means "target state asserted". waitFor (a unique selector) is checked AFTER the steps (clicks already auto-wait); absent → UNVERIFIED, failed → WRONG-SCREEN? — no more false "ok". - fetch_figma.py: discovery modes so the agent finds the screens itself, no hand node-ids — `--list-pages` (pages are named per epic/PIN) and `--discover-page` (renders every frame on a page, writes discovered.json). - figma-analyze.md: preflight rewritten to discovery + screenshot, then the user's only interactive input is the relative app URL (+ optional nav steps) per discovered screen. - .gitignore: ignore .DS_Store / __pycache__. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…unavailable When FIGMA_TOKEN is missing or the API is rate-limited (the "low" tier can lock for ~40h), the design screenshots can be PROVIDED BY THE USER instead of rendered. - figma-analyze.js: new manualDesign arg. The figma-shooter then skips the Figma API and just indexes the pre-placed design/<idx>.png; figmaFileKey and per-unit figmaNode become optional; analyzer handles a missing figma node. The API-mode shooter also falls back to pre-placed PNGs on a 429/creds error. - figma-analyze.md: preflight documents the fallback (user supplies the images, agent places them as design/<idx>.png, pairing proceeds unchanged). - Fix: the manual figma-shooter prompt now passes the explicit idx=titolo mapping so design-index.md uses the real screen names instead of guessing. - .gitignore: ignore screens/ (local manual-design input). Validated end-to-end on a manual run (4 wizard-step-2 screenshots): no API call, figmaNode absent, no app-shot, analyzers found real copy/component divergences. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Cosa
Aggiunge
figma-analyze, il workflow gemello dispec-analyzeper il frontend: confronta un design Figma con il codice FE per misurare la copertura visiva (design → codice e reverse code → design), leggendo il repo FE locale alHEADpinnato.Due commit:
f38d840— il workflow (figma-analyze.js) + render Figma (fetch_figma.py) + cattura app Playwright (shoot_app.mjs) + doc/preflight.1e005e2— hardening dopo una run di validazione su WI10.Componenti
workflows/figma-analyze.js— orchestratore: Context ∥ (figma-shooter, app-shooter, cartografo, crawler) → fan-out analyzer multimodale → verifier+rework → reverse-diff → report (IT). Token-cap, model-mix, gating per-unit.workflows/fetch_figma.py— render deterministico dei frame (stdlib; token da env/.env, mai stampato). Modalità:--units/--nodes+ discovery--list-pages/--discover-page.workflows/shoot_app.mjs— cattura Playwright dell'app renderizzata (best-effort).Hardening (1e005e2)
Dopo una run su WI10 in cui tutti e 3 gli app-shot avevano catturato la schermata sbagliata ma erano riportati come
ok:appShotMismatch): se l'app-shot è una schermata diversa dal design (es. wizard di creazione vs scheda dettaglio read-only, anche con titolo uguale) viene scartato e il confronto resta design↔codice; il report non affianca più PNG di schermate diverse.shoot_app.mjs:ok⟺ stato target asserito;waitForverificato dopo glisteps; assente →UNVERIFIED, fallito →WRONG-SCREEN?.Note
.env/.spec-analyze*/gitignored — mai negli artefatti del repo.py_compile/node --check.🤖 Generated with Claude Code