5. 검증과 보고

일치를 주장하기 전에 실제 화면에서 렌더 값을 재고 판정 어휘로 보고합니다. 보고에는 읽은 노드, 부른 도구, 대응시킨 컴포넌트, 남은 질문과 차이를 남겨 다음 사람이 같은 호출을 되풀이하지 않게 합니다.

5.1 일치를 주장하기 전에 렌더 값을 실측합니다

눈으로 대조해서는 놓치는 간격, 색, 빠진 상태를 수치로 확인하고 보고합니다.

스크린샷을 눈으로 대조하면 1px 간격, 비슷한 회색, 빠진 상태를 놓칩니다. 실제 라우트에서 렌더 값을 읽어 스펙 행과 대조하고, 수치로 확인한 행만 일치로 보고합니다.

스펙 행을 만듭니다. 요소, 속성, 스펙 토큰과 값을 한 행에 둡니다. 에셋은 로컬 파일이 비어 있지 않은지, 렌더 폭과 높이가 Figma 비율과 맞는지도 행으로 둡니다.
실제 라우트를 열고 getComputedStyle, getBoundingClientRect로 값을 읽습니다.
행마다 판정을 붙입니다.
고칠 수 있는 차이를 고치고 다시 잽니다. 세 번 돌면 멈추고 남은 행은 그대로 보고합니다.

판정	뜻
`PASS`	렌더 값이 스펙 토큰의 값과 같습니다
`DRIFT`	토큰은 맞게 썼지만 토큰 값이 Figma 값과 다릅니다
`HARDCODED`	토큰 대신 값을 직접 썼습니다
`VARIANT`	상태나 변형이 달라 비교 대상이 아닙니다. `DRIFT`보다 먼저 판정합니다
`MISSING`	요소나 상태가 화면에 없습니다
`UNMEASURED`	잴 수단이 없어 재지 못했습니다. 이 행은 일치로 보고하지 않습니다

값은 브라우저 자동화 도구의 페이지 평가로 읽습니다. 도구가 없으면 행을 UNMEASURED로 두고, 사람이 잴 수 있게 요소와 속성을 보고에 남깁니다. 브라우저 스크린샷을 Figma 스크린샷 옆에 두고 배치와 누락을 보되, 이 대조가 수치 판정을 대신하지는 않습니다. 판정 어휘는 jeltehomminga/figma-design-skills의 design-fidelity-verify(MIT)에서 가져왔습니다.

눈으로 대조한 결과를 일치로 보고합니다.

검증 — 상품 목록
Figma 스크린샷과 대조했고 동일합니다.

렌더 값을 행마다 재고 판정을 붙입니다.

검증 — 상품 목록, /products, 1회차
요소                     속성           스펙                               실측       판정
.pg_products__row        padding-left   --app-space-inline 12px            12px       PASS
.pg_products__stock      border-left    --app-color-border, Figma #dee2e6  #d9d9d9    DRIFT
.pg_products__name       font-size      --app-font-size-body 16px          15px 직접  HARDCODED
.pg_products__row:hover  background     --app-color-fill-muted             -          VARIANT
빈 목록 문구             -              등록된 상품이 없습니다             없음       MISSING
.pg_products__pinIcon    width, height  16x16, @/asset/icon/pin.svg        16x16      PASS

5.2 보고에 읽은 노드, 대응표, 남은 질문과 차이를 남깁니다

다음 사람이 같은 MCP 호출을 되풀이하지 않고 확인할 곳을 바로 찾습니다.

Figma 기준 작업의 보고는 아래 항목을 이 순서로 담습니다. 한 줄 보고로는 무엇을 읽고 무엇을 가정했는지 다음 사람이 알 수 없습니다.

항목	내용
읽은 노드	도구마다 부른 노드 id와 어림 LLM 토큰 수
대응표	Figma 요소와 저장소 컴포넌트. 새로 만든 마크업과 그 이유
`get_design_context`	부른 노드와 이유
출처	서버 데이터로 둔 값, 고정 문구로 둔 글자
채운 상태	디자인에 없어 프로젝트 기본 컴포넌트로 채운 상태
질문	어긋난 메모와 화면, 조건을 모르는 숨긴 레이어
차이	규칙 5.1 판정 중 `PASS`가 아닌 행. `UNMEASURED`도 여기에 둡니다

비어 있는 항목도 지우지 않고 “없음”으로 둡니다. 없다는 것도 확인한 결과입니다.

무엇을 읽고 가정했는지 남기지 않습니다.

Figma대로 상품 목록 화면을 구현했습니다.

읽은 것, 정한 것, 남은 것을 항목별로 남깁니다.

읽은 노드           get_screenshot 12:341 약 3k, get_metadata 12:340 약 10k, get_variable_defs 12:341 약 1k
대응표              표 UiTable, 탭 UiTabs, 상태 UiBadge, 재고 경고 칩은 새 마크업(대응물 없음)
get_design_context  12:377 재고 경고 칩, 대응물 없음
출처                행과 개수는 응답, 컬럼 이름과 단위는 고정 문구
채운 상태           로딩 UiSpinner, 빈 목록 문구 가정
질문                정렬 기준. 메모 12:395 등록일 최신순, 화면 12:341 상품명순
차이                2회차 기준 DRIFT 1, HARDCODED 0, MISSING 0, UNMEASURED 0