원문: https://github.com/facebook/astryx/wiki/Night-Watch-Designer · 번역 기준: 2026-09-03
Designer 역할은 AI가 생성한 UI 스크린샷의 visual fidelity(시각적 충실도)를, 사람이 제공한 이상적인(ideal) 레퍼런스 이미지와 비교해 vision LLM으로 평가합니다. 코드 품질이 아니라 UI가 실제로 어떻게 보이는지를 측정하는 유일한 Night Watch 차원입니다.
기존 5개 평가 차원(Correctness, Accessibility, Code Quality, Efficiency, Maintainability)은 모두 코드 품질을 측정합니다. Designer는 그와 직교하는 것, 즉 생성된 UI가 실제로 제대로 보이는가? 를 측정합니다.
AI는 모든 코드 차원에서 100/100을 받고도 잘못된 컴포넌트 variant를 쓰거나, 시각적 위계가 나쁘거나, 그냥 다듬어진 디자인처럼 보이지 않는 UI를 만들 수 있습니다. Designer가 이것을 잡아냅니다.
┌──────────────────────────────────────────────────────────────┐
│ 1. SCREENSHOT CAPTURE (GHA) │
│ │
│ vibe-screenshots.yml → Playwright on ubuntu-latest │
│ Captures: {prompt}-{target}-{viewport}-{theme}.png │
│ Targets: astryx, baseline, html │
│ Viewports: desktop (1280×800), mobile (375×812) │
│ Themes: light, dark │
│ Output: GHA artifact "vibe-test-screenshots" (Azure blob) │
└──────────────────────────────┬─────────────────────────────────┘
│
▼
┌──────────────────────────────────────────────────────────────┐
│ 2. SCREENSHOT RETRIEVAL │
│ │
│ GHA artifacts are on Azure blob storage, which is blocked │
│ from Navi sandbox nodes. │
│ │
│ Workaround (via Mac CLI node): │
│ a) Sandbox calls GitHub API → gets 302 redirect URL │
│ b) Mac CLI downloads artifact ZIP via redirect │
│ c) Mac unzips and pushes PNGs to gh-pages branch │
│ d) Sandbox does: git fetch origin gh-pages │
│ git show origin/gh-pages:reports/{id}/screenshots/{f} │
│ │
│ OR: Run the judge script directly on a dev server (simpler) │
└──────────────────────────────┬─────────────────────────────────┘
│
▼
┌──────────────────────────────────────────────────────────────┐
│ 3. GEMINI VISION JUDGE │
│ │
│ Script: internal/vibe-tests/src/design-judge-gemini.py │
│ API: Gemini Vision (see P2289833392 for internal config) │
│ Model: gemini-2.5-pro-preview │
│ Rate limit: ~2s delay between calls │
│ │
│ For each prompt with an ideal: │
│ For each target (astryx, baseline, html): │
│ 1. Base64-encode ideal PNG + screenshot PNG │
│ 2. Send both images + scoring prompt to Gemini │
│ 3. Parse JSON response with 5 sub-signal scores │
│ 4. Save incrementally after each score │
│ │
│ Output: design-scores-gemini.json │
└──────────────────────────────┬─────────────────────────────────┘
│
▼
┌──────────────────────────────────────────────────────────────┐
│ 4. REPORTING │
│ │
│ a) Upload screenshots + ideals to draft GitHub release │
│ (for stable image URLs in issue comments) │
│ b) Commit design-scores.json to gh-pages alongside report │
│ c) Post issue comment with: │
│ - Per-prompt score tables │
│ - Inline screenshot images (Ideal | Astryx | Baseline | HTML) │
│ - Judge rationale notes │
│ - Rendering failure flags │
│ │
│ Script: internal/vibe-tests/src/post-design-results.py │
└──────────────────────────────────────────────────────────────┘
각 스크린샷은 5개 sub-signal에 대해 0–100점으로 채점됩니다:
| Sub-signal | 가중치 | 측정 내용 |
|---|---|---|
| Layout Fidelity | 25% | 구조적 영역, 그리드, 쌓임(stacking) 순서 |
| Visual Hierarchy | 25% | 상대적 크기, 굵기(weight), 시선 흐름 |
| Spacing & Alignment | 20% | 일관성, 그리드 정렬, 비례 |
| Component Fidelity | 15% | 인터랙티브 어포던스, 보더, radius |
| Color & Theming | 15% | 팔레트 일치, surface/accent 사용 |
프롬프트에 들어 있는 스코어링 가이드:
내부 구성: 엔드포인트, 인증, 배포 세부 사항은 P2289833392를 참고하십시오.
사용 가능한 모델: