메뉴
생성된 코드가 Figma 디자인과 같은지 LLM 없이 정적 visual verification engine으로 검증한다. Playwright 캡처, 기준 screenshot 픽셀 diff, bridge bbox 영역별 mismatch로 판정하고, DOM computed style check는 advisory evidence로 리포트한다. 딸깍 파이프라인 4단계, 또는 사용자가 구현이 디자인과 맞는지 확인할 때 사용.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
디자인 브릿지(JSON)를 읽어 코드 생성 계획서 plan.md를 만든다. 컴포넌트 분해, 파일 구조, 디자인 토큰 매핑, 구현 순서를 정리한다. 딸깍 파이프라인 2단계, 또는 사용자가 bridge JSON으로 계획을 세울 때 사용.
Figma MCP 또는 기록된 MCP 캐시를 사용해 Figma 디자인을 무손실 플랫폼 중립 Bridge IR(JSON)로 산출한다. 스타일·토큰·레이아웃·적응형 화면 조건·constraints·자산·텍스트 동작을 캡처하고 스크린샷과 교차검증한다. 웹, React, React Native, iOS, Android로 이어지는 딸깍 파이프라인 1단계에서 사용.
Figma URL을 받아 코드까지 한 번에(딸깍) 뽑는 전체 파이프라인을 실행한다. design.md → 디자인 브릿지(JSON) → plan.md → code → 검증을 순서대로 돌린다. 기본은 각 단계 사이에서 [skip / 계속]을 사용자에게 확인하는 gated 모드이고, `--auto`(자동 모드)를 주면 게이트 없이 끝까지 이어서 돌린다. 사용자가 "figma에서 코드 뽑아줘", "딸깍 돌려줘", "자동으로 돌려줘" 같이 전체 흐름을 원할 때 사용.
plan.md를 읽어 실제 코드를 생성한다. 파일 계획·구현 순서를 따르고, 컴포넌트 재사용을 우선하며 디자인 토큰을 코드 스타일로 매핑한다. 있으면 design.md 팀 컨벤션을 따르고 없어도 동작한다. verify 리포트가 있으면 짚어진 불일치만 규칙대로 고치는 fix 모드로도 동작한다. 딸깍 파이프라인 3단계, 또는 사용자가 plan.md로 구현을 요청하거나 verify 결과를 반영해달라 할 때 사용.
검증 리포트를 바탕으로 파이프라인을 마무리한다. 남은 불일치 수정 여부를 확인하고, 산출물을 정리하며 최종 요약을 낸다. 딸깍 파이프라인 5단계에서 사용.
자동사냥 — 내게 배정된 GitHub 이슈를 골라 브랜치 생성 → 구현 → 검증 → "Closes
| name | verify |
| description | 생성된 코드가 Figma 디자인과 같은지 LLM 없이 정적 visual verification engine으로 검증한다. Playwright 캡처, 기준 screenshot 픽셀 diff, bridge bbox 영역별 mismatch로 판정하고, DOM computed style check는 advisory evidence로 리포트한다. 딸깍 파이프라인 4단계, 또는 사용자가 구현이 디자인과 맞는지 확인할 때 사용. |
구현 결과가 원본 디자인과 일치하는지 LLM 판단 없이 확인한다.
verify는 검증 센서다. 후속 LLM/fix-agent가 visual.json과 diff.png를 읽고 수정 후보를 추론할 수는 있지만,
pass/fail 산출에는 관여하지 않는다. v2 style check도 gate가 아니라 advisory evidence다.
${CLAUDE_PLUGIN_ROOT}/scripts/visual-verify/cli.mjs${CLAUDE_PLUGIN_ROOT}/shared/visual-verify.md${CLAUDE_PLUGIN_ROOT}/shared/bridge.schema.json${CLAUDE_PLUGIN_ROOT}/shared/pipeline.md.ddalkak/ddalkak.config.json의 name, 또는 명시 인자 --name..ddalkak/bridge/<name>.bridge.json.screen.screenshot이 가리키는 baseline screenshot 파일.http://localhost:5173.desktop breakpoint 우선, 없으면 첫 screen.deviceScaleFactor: 1로 캡처한다.pixelmatch로 전체 mismatch/confidence와 diff PNG를 만든다.bbox를 화면 좌표로 변환해 영역별 mismatch를 집계한다.visual.json과 사람용 verify.md를 .ddalkak/reports/에 기록한다.npm run visual:verify -- \
--project . \
--name <name> \
--url http://localhost:5173
bridge.verify.targets[]가 있으면 --target <id>로 검증 runtime을 선택한다. web과 flutter target은 Playwright provider로 캡처한다 — Flutter Web은 자체 런타임(예: fvm flutter run -d web-server)을 verify 밖에서 띄운 뒤 그 URL을 넘긴다. Flutter는 canvas로 렌더돼 의미 있는 DOM이 없으므로 DOM/style check는 생략하고 픽셀 diff로만 판정하며 style 판정은 n/a로 기록한다. Android/iOS/React Native target은 provider가 아직 없어 blocked execution error로 중단된다. 앱 target은 code 단계에서 deep link나 preview route 같은 검수용 진입점을 함께 만들어야 한다.
sandbox에서는:
npm run visual:verify -- --project sandbox --name login-page --url http://localhost:5173
엔진 판정 계약 자체를 확인하려면:
npm run test:visual:engine
pass: 전체 confidence ≥ 0.995, 영역 mismatch ≥ 0.03 없음.conditional: 전체 confidence ≥ 0.98 또는 영역 mismatch 0.03 이상.fail: 전체 confidence < 0.98 또는 영역 mismatch 0.10 이상.0: pass, 1: conditional/fail, 2: 실행·설정 오류..ddalkak/reports/<name>.<breakpoint>.baseline.png.ddalkak/reports/<name>.<breakpoint>.render.png.ddalkak/reports/<name>.<breakpoint>.diff.png.ddalkak/reports/<name>.<breakpoint>.visual.json.ddalkak/reports/<name>.verify.mdvisual.json에는 v2부터 version: "2.0", statuses, matches, checks가 포함된다. DOM이 없는 타깃에서는 statuses.style이 "n/a"이고 matches·checks.items는 비어 있다.
status, passed, exit code는 pixel/region gate만 따르며, checks.gating은 false다.