UI 품질 워크벤치은(는) 무엇을 하나요?

이 스킬을 사용하여 로컬 UI 走查(UI 감사) 모듈을 실행하세요. 디자인 이미지와 구현 스크린샷을 브라우저 워커에서 비교하고, 가시적인 차이를 검토 후보로 그룹화하며, 사람의 확인 및 내보내기를 지원합니다.

분석기는 휴리스틱 기반입니다. 그 출력을 후보 또는 가능한 불일치라고 부르며, 의도된 디자인, 경로, 상태, 콘텐츠, 뷰포트를 사람이 검증할 때까지 확정된 결함으로 제시하지 마십시오.

워크벤치 시작하기

선택한 SKILL.md에서 이 스킬의 디렉터리를 확인합니다. 저장소 루트를 가정하거나 설치 위치를 하드코딩하지 마십시오.
세션에서 처음 실행하기 전에 번들과 로컬 소스 브리지를 확인합니다.
```
python3 <skill-directory>/scripts/serve_workbench.py --check
```
장기 실행 프로세스로 서버를 시작합니다.
```
python3 <skill-directory>/scripts/serve_workbench.py
```
실행기는 event: "ready", protocol: 2, 동적 루프백 URL, 프로세스 메타데이터가 포함된 하나의 JSON 라인을 출력합니다. 반환된 URL을 정확히 사용하세요. 해당 URL의 프래그먼트는 브라우저 앱에서 사용하는 실행별 토큰을 전달합니다.
브라우저 제어가 가능하고 사용자가 인터페이스 열기를 원하는 경우 해당 URL로 이동합니다. 그렇지 않으면 사용자에게 URL을 제공합니다.
워크벤치를 사용하는 동안 프로세스를 계속 실행합니다. 사용자가 종료를 요청하거나 세션에서 더 이상 필요하지 않으면 Ctrl+C로 중지합니다.

EPERM 또는 명시적인 루프백 소켓 제한으로 실행이 실패하면 로컬 실행 권한을 요청하고 동일한 명령을 재시도하십시오. 바인드 주소를 변경하거나, 호스팅된 복사본으로 대체하거나, 로컬 이미지를 다른 곳에 업로드하지 마십시오.

소스 선택

워크벤치에는 하나의 디자인 이미지와 하나의 구현 이미지가 필요합니다. 각 소스 변경은 이전 결과를 무효화하므로 소스를 교체한 후 감사를 다시 실행하십시오.

로컬 이미지: 클릭하여 선택하거나 하나의 PNG, JPEG 또는 WebP를 해당 디자인/구현 영역으로 드래그 앤 드롭합니다. 디코딩, 래스터 비교 및 그룹화는 로컬 브라우저 세션에서 유지됩니다.
Figma 프레임: 하나의 node-id가 포함된 Figma design 또는 file URL과 개인 액세스 토큰(PAT)을 제공하거나 FIGMA_ACCESS_TOKEN과 함께 실행기를 시작합니다. Figma의 API를 통해 해당 프레임의 PNG 렌더링을 가져옵니다. Figma 파일을 탐색하거나 Figma 로그인을 상속하지 않습니다.
웹 캡처: HTTP(S) URL, 뷰포트 크기 및 선택적 렌더 대기 시간을 제공합니다. 브리지가 임시 헤드리스 Chrome/Chromium/Edge 프로필을 시작하고 해당 뷰포트를 캡처합니다. 사용자의 브라우저 프로필, 쿠키, 확장 프로그램 또는 인증된 세션을 상속하지 않습니다.

Figma 가져오기 또는 웹 캡처를 작동하거나 문제를 해결하기 전에 references/source-imports.md를 읽으십시오.

감사 실행 및 검토

두 소스가 가능한 한 동일한 경로, UI 상태, 로케일, 콘텐츠, 뷰포트 및 스크롤 위치를 나타내는지 확인합니다.
표시된 정규화 미리보기를 확인합니다. 엔진은 더 넓은 소스를 대상 너비로 사용하고 1×로 유지하며, 더 좁은 소스만 해당 너비에 비례하여 확대한 후 두 이미지를 왼쪽 상단 정렬합니다. 어느 소스도 늘리거나 자르지 않으며, 남은 하단 높이 차이는 비교 시 유지됩니다.
감사를 시작합니다. 로컬 분류 전에 워커는 정규화된 래스터가 직접 비교에 적합한지 확인합니다. 낮은 비교 가능성 쌍은 후보를 생성하지 않고 중단됩니다. 중간 비교 가능성 쌍은 명시적 경고와 함께 계속됩니다. 이는 보수적인 휴리스틱 게이트이며, 어떤 이미지가 올바른지에 대한 확률이나 의미론적 판단이 아닙니다.
시각적 비교, 목록 및 세부 정보 패널에서 후보를 검사합니다. 한쪽의 투명한 콘텐츠는 영역 존재/레이아웃 차이로만 보고됩니다. 모호한 미디어 또는 콘텐츠 변경은 색상, 텍스트, 아이콘 또는 형상 결함으로 강제되지 않고 중립적인 표현을 사용합니다. 앤티앨리어싱, 글꼴 로딩, 애니메이션, 동적 데이터, 반응형 동작 또는 오래된 디자인이 차이를 설명하는지 확인합니다.
확인된 후보만 확정합니다. 실제 차이를 의도적으로 무시하거나 거짓 양성을 기각할 때는 이유를 요구합니다.
심각도와 우선순위를 독립적으로 할당한 후 검토된 목록을 내보냅니다. 픽셀 영역이나 색상 거리만으로 우선순위를 추론하지 마십시오.

분류, 우선순위 지정, 검토 상태 변경 또는 내보낼 항목 결정 시 references/audit-model.md를 읽으십시오. 개인정보 보호, 지원되는 통합, 캡처 동작 또는 분석적 한계를 설명하기 전에 references/v0-boundaries.md를 읽으십시오.

주장의 정확성 유지

비교 엔진은 사용자가 보고한 저자의 허가 하에 고정 커밋 beac836ba3c81b9a1d40bac8fe75af08444ab742의 SemineChen/yangao에서 가져왔습니다. THIRD_PARTY_NOTICES.md를 참조하십시오.
Figma 가져오기에는 PAT와 Figma에 대한 아웃바운드 액세스가 필요합니다. 이는 OAuth, 계정 연결, 디자인 토큰 추출 또는 일반 Figma 파일 구문 분석이 아닙니다.
웹 캡처는 격리된 현재 뷰포트 스크린샷입니다. 전체 페이지 스티칭, 대화형 브라우징, 로그인 상태 상속, DOM 검사 또는 계산된 스타일 추출이 아닙니다.
로컬 브라우저 처리는 보안 인증이 아닙니다. Figma 가져오기는 필연적으로 PAT를 Figma에 보내고 선택한 프레임을 다운로드합니다. 웹페이지 캡처는 필연적으로 제공된 URL을 요청합니다.
비교 가능성 게이트에는 OCR, DOM 또는 제품 의미론이 없습니다. 광범위하게 일치하지 않는 입력을 중단하고 국소적 변경에 대해 경고할 수 있지만, 두 화면이 동일한 경로/상태를 나타내는지 증명하거나 권위 있는 측을 식별할 수는 없습니다.
UI 走查(UI 감사) 는 구현된 모듈입니다. 계획된 상호작용 경험, 접근성 또는 협업 모듈이 이미 실행 중이라고 주장하지 마십시오.

UI 품질 워크벤치