@su-record/vibe 2.8.17 → 2.8.18

package/skills/vibe-figma-consolidate/SKILL.md

@@ -1,17 +1,13 @@
 ---
 name: vibe-figma-consolidate
-description: Step D — 모바일/PC 스타일 공통화, 컴포넌트 통합, 최종 검증
+description: Step D — 모바일/PC 스타일 공통화, 컴포넌트 통합, 최종 검증, 후처리 파이프라인
 triggers: []
 tier: standard
 ---
 
-# Skill: vibe-figma-consolidate — Step C: 최종 공통화 리팩토링
+# Skill: vibe-figma-consolidate — Step D: 공통화 + 최종 검증
 
-> **⛔ 실행 지시: Edit 도구로 기존 파일을 실제 수정한다.**
-> - 토큰 통합: Edit으로 _tokens.scss 수정
-> - 중복 제거: Edit으로 중복 스타일/코드 통합
-> - variant 통합: Edit으로 유사 컴포넌트 합침
-> 분석만 보여주고 끝내면 안 됨.
+> **실행 지시: Edit 도구로 기존 파일을 실제 수정한다.**
 
 ## D-1. 스타일 공통화
 
@@ -21,101 +17,37 @@ tier: standard
 3. 컴포넌트 내 중복 로직 제거
 ```
 
-### 공통화 우선순위
-
 | 유형 | 처리 방법 |
 |------|----------|
-| 색상 (모바일/PC 동일) | 공통 CSS custom property로 추출 |
-| 타이포그래피 (동일 scale) | 공통 토큰 유지 |
-| 간격 (다름) | clamp() fluid 토큰으로 변환 |
+| 색상 (동일) | 공통 CSS custom property |
+| 타이포 (동일 scale) | 공통 토큰 유지 |
+| 간격 (다름) | clamp() fluid 토큰 (계산: vibe-figma-rules R-3) |
 | 레이아웃 방향 (다름) | @media 분기 유지 |
-| 컴포넌트 구조 (동일) | 하나의 컴포넌트로 통합 |
+| 컴포넌트 구조 (동일) | 하나로 통합 |
 
 ## D-2. 컴포넌트 통합
 
-```
-1. 유사 컴포넌트 (80% rule) → variant prop으로 통합
-2. 중복 sub-component → 공유 컴포넌트로 추출
-3. Fragment/template 활용하여 불필요한 래퍼 제거
-```
-
-### 80% Rule 적용 기준
+80% Rule 및 variant 통합 기준은 **vibe-figma-rules R-5** 참조.
 
 ```
-유사도 판단 기준:
-  - 레이아웃 구조 동일
-  - 색상/크기/텍스트만 다름
-  → 하나의 컴포넌트 + props로 변형
-
-  - 구조 자체가 다름 (요소 추가/제거, 레이아웃 방향 변경)
-  → 별도 컴포넌트 유지
+1. 유사 컴포넌트 (80%+) → variant prop 통합
+2. 중복 sub-component → 공유 컴포넌트 추출
+3. 불필요한 래퍼 → Fragment/template 제거
 ```
 
-| Stack | 변형 방법 |
-|-------|----------|
-| React | `variant` prop + 조건부 className / style |
-| Vue | `variant` prop + `<slot>` for 커스텀 영역 |
-| Svelte | `variant` prop + `<slot>` |
-| React Native | `variant` prop + StyleSheet 조건 선택 |
-
-### 통합 예시 (React)
-
-```tsx
-// 통합 전: 별도 컴포넌트 (구조 동일, 색상만 다름)
-<DefaultCard />
-<HighlightCard />
-<CompactCard />
-
-// 통합 후: 단일 컴포넌트 + variant
-interface CardProps {
-  variant: 'default' | 'highlight' | 'compact';
-  title: string;
-  children: React.ReactNode;
-}
-
-export function Card({ variant, title, children }: CardProps): JSX.Element {
-  return (
-    <article className={styles[variant]}>
-      <h3 className={styles.title}>{title}</h3>
-      {children}
-    </article>
-  );
-}
-```
+## D-3. 최종 검증
 
-### 불필요한 래퍼 제거
+검증 공통 프로세스는 **vibe-figma-rules R-6** 참조.
 
-```tsx
-// WRONG: 스타일 없는 불필요한 div 래핑
-<div>
-  <ComponentA />
-  <ComponentB />
-</div>
+### Step D 추가 검증
 
-// CORRECT: Fragment
-<>
-  <ComponentA />
-  <ComponentB />
-</>
 ```
-
-## D-3. 최종 검증 루프
-
-```
-🔄 양쪽 뷰포트 동시 검증:
+양쪽 뷰포트 동시 검증:
   - 모바일 Figma vs 코드 (mobile viewport)
   - PC Figma vs 코드 (desktop viewport)
   - 양쪽 모두 P1=0, Match Score 95%+
   - 이미지 에셋 전부 정상 표시
-```
-
-### 검증 완료 조건
-
-```
-✅ Match Score 95% 이상 (모바일 + 데스크탑 각각)
-✅ P1 불일치 0건
-✅ 모든 이미지 에셋 표시 확인
-✅ 공통 토큰으로 중복 제거 완료
+  - 공통 토큰으로 중복 제거 완료
 ```
 
 ### Model Routing (Step D)
@@ -123,15 +55,46 @@ export function Card({ variant, title, children }: CardProps): JSX.Element {
 | 작업 | 모델 |
 |------|------|
 | 공통화 리팩토링 + 최종 검증 | **Sonnet** |
-| Post — 코드 리뷰 | **gpt-5.3-codex** |
+| Post — 코드 리뷰 | **gpt-5.3-codex** (Codex 미설치 시 스킵) |
 
-### Post — 코드 리뷰 (Codex 설치 시)
+## D-4. Design Quality Pipeline (후처리)
 
+Step D 완료 후 사용자에게 다음 단계를 제시.
+
+### Pre-requisite check
+
+`.claude/vibe/design-context.json`이 없으면:
 ```
-/codex:review (gpt-5.3-codex)
-생성된 코드의 design fidelity + 코드 품질 크로스 검증
+디자인 컨텍스트가 없습니다. /design-teach 를 먼저 실행하면
+브랜드, 접근성, 타겟 디바이스에 맞춘 더 정확한 코드를 생성할 수 있습니다.
+```
+
+### Quick (기본 추천)
 
-Codex 미설치 시 자동 스킵.
 ```
+/design-normalize → /design-audit
+```
+- Normalize: 하드코딩 값 → MASTER.md 토큰으로 치환
+- Audit: A11Y + 성능 + 반응형 + AI Slop 검출
+
+### Thorough (프로덕션 추천)
 
-Step D 완료 후 → vibe-figma-pipeline 실행.
+```
+/design-normalize → /design-audit → /design-critique → /design-polish
+```
+- + Critique: Nielsen 10 휴리스틱 + 페르소나 분석
+- + Polish: 인터랙션 상태 보완 (hover/focus/loading/error)
+
+### 출력 포맷
+
+```markdown
+## Design Quality Pipeline
+
+생성된 파일: {file list}
+
+추천 다음 단계:
+  1. /design-normalize  — 토큰 정렬
+  2. /design-audit      — 기술 품질 검사
+  3. /design-critique    — UX 휴리스틱 리뷰
+  4. /design-polish      — 최종 인터랙션 보완
+```

package/skills/vibe-figma-frame/SKILL.md

@@ -10,12 +10,11 @@ triggers: []
 디자인 URL 하나를 받아서 **프레임별로 쪼개서 추출**하고, Step A에서 만든 컴포넌트에 스타일/이미지를 채움.
 어떤 뷰포트든 동일한 프로세스. 두 번째 호출 시 반응형 레이어만 추가.
 
-> **⛔ 실행 지시: 분석만 하지 말 것.**
-> - 이미지: WebFetch로 다운로드 → Write 도구로 파일 저장
-> - 스타일: Write 도구로 SCSS/CSS 파일 생성 (layout/ + components/)
+> **실행 지시: 분석만 하지 말 것.**
+> - 이미지: WebFetch로 다운로드 → 파일 저장
+> - 스타일: Write 도구로 SCSS/CSS 파일 생성
 > - 코드: Edit 도구로 Step A 컴포넌트의 template/style 채움
-> - 토큰: Edit 도구로 _tokens.scss에 추출한 값 추가
-> 모든 Phase가 끝나면 디스크에 실제 파일이 변경되어 있어야 함.
+> - 토큰: Edit 도구로 _tokens 파일에 추출한 값 추가
 
 ## 입력
 
@@ -23,44 +22,30 @@ triggers: []
 - Step A에서 생성된 컴포넌트 파일들
 - 호출 횟수 (첫 번째 = base, 두 번째 이후 = responsive 추가)
 
-## Phase 1: 디자인 URL 입력
+## B-1. 디자인 URL 입력
 
 AskUserQuestion (options 사용 금지, 자유 텍스트만):
 
 ```
 첫 번째 호출:
-  question: "🎨 디자인 Figma URL을 입력해주세요."
-  → ⏸️ 응답 대기 (응답 전 다음 진행 금지)
-  → URL 저장 → Phase 2~5 실행
+  question: "디자인 Figma URL을 입력해주세요."
+  → 응답 대기 → URL 저장 → B-2~B-5 실행
 
 검증 완료 후:
-  question: "🎨 추가 디자인 URL이 있나요? (없으면 '없음')"
-  → ⏸️ 응답 대기
-  → URL 입력 → responsive 모드로 Phase 2~5 재실행
-  → "없음" → Step C(공통화)로 진행
+  question: "추가 디자인 URL이 있나요? (없으면 '없음')"
+  → URL 입력 → responsive 모드로 B-2~B-5 재실행
+  → "없음" → Step D(공통화)로 진행
 
 모바일/PC 순서를 강제하지 않음. 어떤 뷰포트든 먼저 입력 가능.
 첫 번째 URL = base 스타일, 추가 URL = 반응형 레이어 추가.
 ```
 
-## Phase 2: 전체 → 섹션 프레임 매핑
+## B-2. 전체 → 섹션 프레임 매핑
 
 ```
 1. get_metadata(fileKey, nodeId) → 전체 페이지 하위 프레임 목록
 
 2. 프레임 이름으로 Step A 컴포넌트와 매핑:
-   | 디자인 프레임 이름 | Step A 컴포넌트 |
-   |------------------|----------------|
-   | "키 비주얼" / "Hero" / "KV" | HeroSection.vue |
-   | "출석" / "Check" / "Mission 01" | DailyCheckInSection.vue |
-   | "플레이타임" / "Mission 02" | PlayTimeMissionSection.vue |
-   | "교환" / "Exchange" / "Shop" | TokenExchangeSection.vue |
-   | "응모" / "Raffle" / "Prize" | TokenRaffleSection.vue |
-   | "유의사항" / "Caution" / "Notice" | CautionSection.vue |
-   | "GNB" / "Header" / "Nav" | GnbHeader.vue |
-   | "Footer" | EventFooter.vue |
-
-   매핑 방법:
    - 프레임 이름 키워드 매칭
    - 매칭 안 되면 순서(위→아래)로 Step A 섹션과 1:1 대응
    - 그래도 안 되면 get_screenshot으로 비주얼 비교
@@ -70,125 +55,117 @@ AskUserQuestion (options 사용 금지, 자유 텍스트만):
    매핑 안 된 프레임이 있으면 사용자에게 확인
 ```
 
-## Phase 3: 섹션별 개별 추출
+## B-3. 섹션별 개별 추출
 
 **각 매핑된 섹션에 대해 순서대로:**
 
+### 3-1. 스크린샷 시각 분석 (1순위)
+
+```
+get_screenshot(fileKey, designFrame.nodeId)
+→ 원본 디자인 이미지 확보 — 이것이 코드 생성의 1차 소스
+
+스크린샷에서 읽는 항목 (vibe-figma-rules R-7 참조):
+  → 레이아웃 구조 (섹션 경계, flex/grid 방향, 요소 배치)
+  → 배경 (이미지/단색/그라데이션, 오버레이 유무)
+  → 색상 (배경, 텍스트, 버튼, 보더)
+  → 타이포 (크기 비율, 굵기, 줄간격) — 스케일 팩터 적용 (R-3)
+  → 간격 (패딩, gap, 마진) — 스케일 팩터 적용 (R-3)
+  → 이미지 분류 (Background/Content/Overlay, R-4 참조)
+  → z-index 관계 (겹침 구조, 투명도)
+```
+
+### 3-2. 참조 코드 + 에셋 추출 (2순위)
+
 ```
-for each (designFrame, component) in mappings:
-
-  1. get_design_context(fileKey, designFrame.nodeId)
-     → 해당 섹션 전용 **참조 코드** + 스크린샷 + 에셋 URL
-
-     ⚠️ 참조 코드가 핵심:
-       get_design_context는 React+Tailwind 기반 참조 코드를 반환함.
-       이 코드에 이미지 URL, 레이아웃 구조, 색상값, 폰트 정보가 모두 포함됨.
-       → 이 참조 코드를 **기반으로** 프로젝트 스택에 맞게 변환해야 함.
-       → 참조 코드를 무시하고 스크린샷만 보고 자체 해석하면 안 됨.
-       → 참조 코드의 이미지 URL, 색상 hex, 폰트 크기를 그대로 가져온 후 스케일 적용.
-
-     ⚠️ 스크린샷은 보조:
-       참조 코드와 스크린샷이 다르면 → 스크린샷(디자인 의도) 우선
-       참조 코드에 없는 시각적 요소가 스크린샷에 보이면 → 추가 구현
-
-  2. ⛔ 이미지 에셋 다운로드 (BLOCKING — 코드 반영 전 필수 완료):
-
-     Step 2-a: get_design_context 응답에서 에셋 URL 추출
-       응답 코드에 아래 패턴이 포함됨:
-         const heroImage = 'https://www.figma.com/api/mcp/asset/xxxx'
-         const bgImage = 'https://www.figma.com/api/mcp/asset/yyyy'
-       → 모든 https://www.figma.com/api/mcp/asset/ URL을 수집
-
-     Step 2-b: 각 URL을 WebFetch로 다운로드 → Bash로 파일 저장
-       다운로드 명령 예시:
-         Bash: curl -L "https://www.figma.com/api/mcp/asset/xxxx" -o static/images/{feature}/hero-bg.webp
-       또는 WebFetch 후 Write로 저장
-       파일명: 변수명/레이어명 기반 kebab-case (heroImage → hero-bg.webp)
-
-     Step 2-c: URL→로컬경로 매핑 테이블 생성
-       | 변수명 | Figma URL | 로컬 경로 |
-       |--------|-----------|----------|
-       | heroImage | https://figma.com/api/mcp/asset/xxxx | /images/{feature}/hero-bg.webp |
-       | bgImage | https://figma.com/api/mcp/asset/yyyy | /images/{feature}/section-bg.webp |
-
-     Step 2-d: 다운로드 검증
-       → 파일이 실제로 존재하는지 Bash: ls -la static/images/{feature}/
-       → 누락된 파일이 있으면 재다운로드
-       → 0byte 파일 체크 (다운로드 실패)
-
-  3. 스크린샷 분석 + ⚠️ 스케일 팩터 적용:
-     → 레이아웃 (flex/grid 방향, 정렬)
-     → 색상 (배경, 텍스트, 보더) — 스케일 불필요
-     → 타이포 (크기, 굵기, 줄간격) — ⚠️ 스케일 팩터 적용
-     → 간격 (padding, gap, margin) — ⚠️ 스케일 팩터 적용
-     → ⚠️ 배경 이미지 분류 (아래 참조)
-
-     스케일 팩터:
-       코드 값 = Figma 추출 값 × scaleFactor
-       scaleFactor는 Step A의 storyboardSpec.scaleFactor에서 참조
-       디폴트: PC 0.75 (1920/2560), Mobile 0.667 (480/720)
-
-  4. ⛔ 배경 이미지 분류 + Multi-Layer 패턴 적용:
-
-     섹션에 배경 이미지가 있으면 반드시 Multi-Layer 구조로 작성:
-
-     <template>:
-       <section class="{section}Section">
-         <div class="{section}Bg" />               ← 배경 이미지 (z-index: 0)
-         <div class="{section}BgOverlay" />         ← 오버레이 (z-index: 1, 선택)
-         <div class="{section}Content">             ← 콘텐츠 (z-index: 최상위)
-           ...실제 UI...
-         </div>
-       </section>
-
-     <style> (layout/{section}.scss):
-       .{section}Section { position: relative; overflow: hidden; }
-       .{section}Bg {
-         position: absolute; inset: 0; z-index: 0;
-         background-image: url('/images/{feature}/{image-name}.webp');
-         background-size: cover;
-         background-position: center;
-       }
-       .{section}BgOverlay {
-         position: absolute; inset: 0; z-index: 1;
-         background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
-       }
-       .{section}Content { position: relative; z-index: 2; }
-
-     배경이 없는 섹션은 Multi-Layer 불필요 — 일반 구조 사용.
-
-  5. component 파일에 반영 (Edit 도구):
-
-     ⚠️ 변환 순서 (참조 코드 → 프로젝트 코드):
-       a. get_design_context 참조 코드에서 추출:
-          - HTML 구조 (div 계층, 이미지 배치, 텍스트 위치)
-          - 이미지 URL (const xxxImage = '...')
-          - 인라인 스타일/Tailwind 클래스 → 색상, 폰트, 간격 값
-          - 배경 이미지 패턴 (background-image가 있으면 Multi-Layer 적용)
-
-       b. 프로젝트 스택으로 변환:
-          - React+Tailwind → Vue/Nuxt SFC + SCSS (또는 프로젝트 스택)
-          - className → :class
-          - style={{ }} → SCSS 변수/클래스
-          - Tailwind 값 → SCSS 토큰 변수
-
-       c. 스케일 팩터 적용:
-          - 참조 코드의 px 값 × scaleFactor = 코드 값
-          - 색상 hex는 그대로 (스케일 불필요)
-
-       d. 이미지 경로 교체:
-          - figma.com/api/mcp/asset/xxx → /images/{feature}/xxx.webp (매핑 테이블)
-
-       e. Step A 코드와 병합:
-          - Step A의 기능 주석/핸들러/인터페이스 보존
-          - template의 placeholder → 참조 코드 기반 실제 마크업으로 교체
-          - style 블록 → 참조 코드에서 추출한 스타일 작성
-
-     ⛔ 참조 코드에 이미지가 있는데 생성 코드에 없으면 → 누락, 반드시 포함
-     ⛔ Figma 임시 URL이 코드에 남으면 안 됨
+get_design_context(fileKey, designFrame.nodeId)
+→ 참조 코드 + 에셋 URL
+
+참조 코드에서 가져오는 것:
+  ✅ 이미지 에셋 URL (https://figma.com/api/mcp/asset/...) — 핵심 가치
+  ✅ 정확한 hex 색상값 (스크린샷 추정보다 정확할 때)
+  ✅ 폰트 패밀리명, border-radius, shadow 값
+  ⚠️ 레이아웃/구조 — 스크린샷과 대조 후 채택
+  ❌ px 값 그대로 사용 금지 — 반드시 스케일 팩터 적용
+
+⚠️ 레이어가 "Frame 633372" 같은 비정형일 때:
+  참조 코드가 부정확할 수 있음 → 스크린샷 분석 결과를 기준으로 코드 생성
 ```
 
-## Phase 4: 뷰포트 모드에 따른 스타일 적용
+### 3-3. 이미지 에셋 다운로드 (BLOCKING — 코드 반영 전 필수)
+
+```
+Step a: 참조 코드에서 에셋 URL 추출
+  → 모든 https://www.figma.com/api/mcp/asset/ URL 수집
+
+Step b: 각 URL을 다운로드 → 파일 저장
+  Bash: curl -L "{url}" -o static/images/{feature}/{name}.webp
+  파일명: 변수명/레이어명 기반 kebab-case
+
+Step c: URL→로컬경로 매핑 테이블 생성
+
+Step d: 다운로드 검증
+  → 파일 존재 + 0byte 아닌지 확인
+  → 누락/실패 시 재다운로드
+```
+
+### 3-4. 이미지 코드 패턴 적용
+
+이미지 분류 결과에 따라 코드 생성:
+
+**Background Image → Multi-Layer 패턴 (vibe-figma-rules R-4 참조)**
+
+**Content Image:**
+```tsx
+// React / Next.js — Image 컴포넌트 우선
+<Image src="/images/{feature}/product.webp" alt="설명" width={600} height={400} />
+
+// Vue / Nuxt — NuxtImg 우선
+<NuxtImg src="/images/{feature}/product.webp" alt="설명" width="600" height="400" loading="lazy" />
+```
+
+**반응형 Content Image:**
+```html
+<picture>
+  <source media="(min-width: {breakpoint}px)" srcset="/images/{feature}/hero-pc.webp" />
+  <img src="/images/{feature}/hero-mobile.webp" alt="설명" loading="eager" />
+</picture>
+```
+
+**반응형 Background Image:**
+```css
+.heroBg { background-image: url('/images/{feature}/hero-mobile.webp'); }
+@media (min-width: {breakpoint}px) {
+  .heroBg { background-image: url('/images/{feature}/hero-pc.webp'); }
+}
+```
+
+### 3-5. 컴포넌트 파일에 반영 (Edit 도구)
+
+```
+변환 순서 (스크린샷 분석 → 코드):
+
+a. 스크린샷 분석 결과로 코드 작성:
+   - 레이아웃 구조 (스크린샷에서 읽은 flex/grid, 배치)
+   - 스타일 값 (스크린샷에서 읽은 색상, 간격, 폰트 × 스케일 팩터)
+   - 배경 이미지 Multi-Layer 구조 (스크린샷에서 판단한 z-index)
+
+b. 참조 코드에서 보강:
+   - 에셋 URL → 다운로드된 로컬 경로로 교체
+   - 정확한 hex 색상값, border-radius, shadow (스크린샷 추정보다 정확할 때)
+
+c. 프로젝트 스택으로 변환 (React→Vue 등)
+
+d. Step A 코드와 병합:
+   - 기능 주석/핸들러/인터페이스 보존
+   - template의 placeholder → 실제 마크업으로 교체
+
+주의:
+  - 스크린샷에 보이는 이미지가 코드에 없으면 → 누락
+  - Figma 임시 URL이 코드에 남으면 안 됨
+```
+
+## B-4. 뷰포트 모드에 따른 스타일 적용
 
 ### 첫 번째 URL (base)
 
@@ -203,59 +180,43 @@ for each (designFrame, component) in mappings:
 ```
 기존 코드를 수정하지 않고 반응형 레이어만 추가:
 
-1. 프레임 width 비교 → 어떤 뷰포트인지 자동 판별
-   (base보다 크면 desktop 방향, 작으면 mobile 방향)
+1. 프레임 width로 뷰포트 자동 판별
+2. 값이 다른 속성 → clamp() fluid 토큰 (계산: vibe-figma-rules R-3)
+3. 레이아웃 구조가 다른 부분 → @media (min-width: {breakpoint}px)
+4. 뷰포트별 배경 이미지 → @media 분기
+5. 추가 이미지 에셋 다운로드 (base와 동일하면 스킵)
+6. 기존 base 코드/주석/핸들러는 절대 삭제하지 않음
+```
 
-2. 값이 다른 속성 → clamp() fluid 토큰으로 변환
-   - SCSS: figma-fluid($min, $max) 함수 사용
-   - CSS: clamp(min, preferred, max)
+## B-5. 검증 루프
 
-3. 레이아웃 구조가 다른 부분 → @media (min-width: {breakpoint}px)
-   - flex-direction 변경
-   - grid-template-columns 변경
-   - display toggle (baseOnly/responsiveOnly)
+공통 프로세스: **vibe-figma-rules R-6** (6-1 ~ 6-7) 전체 적용.
 
-4. 뷰포트별 배경 이미지 → @media 분기
-   .heroBg { background-image: url(base.webp); }
-   @media (min-width: {breakpoint}px) { .heroBg { background-image: url(alt.webp); } }
+### Step B 검증 흐름
 
-5. 추가 이미지 에셋 다운로드 (base와 동일하면 스킵)
+```
+for each section in mappings:
 
-6. 기존 base 코드/주석/핸들러는 절대 삭제하지 않음
+  1. 원본 확보: B-3.1에서 이미 get_screenshot한 섹션 이미지
+  2. 생성 결과 확보: /vibe.utils --preview 또는 dev 서버 스크린샷 (R-6.2)
+  3. 섹션별 비교: 레이아웃, 배경, 색상, 타이포, 간격, 이미지 (R-6.3~4)
+  4. Diff Report 출력 (R-6.5)
+  5. P1 → 해당 섹션 수정 → 재비교 (R-6.6)
 ```
 
-## Phase 5: 검증 루프
+### Step B 추가 검증 항목
 
 ```
-🔄 Figma 원본 스크린샷 vs 생성된 코드 비교:
-
-  1. get_screenshot으로 Figma 원본 획득 (이미 Phase 3에서 있음)
-  2. 생성된 코드의 렌더링 결과와 비교
-  3. 비교 항목:
-     - 레이아웃 (배치, 정렬, 간격)
-     - 타이포 (크기, 굵기, 색상)
-     - 색상 (배경, 텍스트, 보더)
-     - 이미지 (배경/에셋 표시 여부)
-     - 누락 요소
-
-  4. Diff Report:
-     | 섹션 | 항목 | Figma | 코드 | 심각도 |
-     |------|------|-------|------|--------|
-     | Hero | 배경 이미지 | 있음 | 누락 | P1 |
-     | 출석 | font-size | 24px | 20px | P2 |
-
-  5. P1 불일치 → 수정 → 재비교 (횟수 제한 없음)
-     동일 항목 3회 연속 미해결 → 해당 항목만 사용자 확인 후 계속
-
-  6. 완료 조건:
-     ✅ P1 = 0
-     ✅ 모든 이미지 에셋 표시
-     ✅ (두 번째 호출 시) 이전 뷰포트도 깨지지 않았는지 재확인
+1. 이미지 에셋: 전부 다운로드 + 로컬 파일 존재 + 0byte 아님
+2. Figma 임시 URL: Grep으로 figma.com/api/mcp/asset 잔존 0건 확인
+3. 배경 이미지: 스크린샷에 보이는 배경이 코드에도 있는지
+4. 오버레이: 배경 위 텍스트 가독성 확보 (스크린샷 대조)
+5. (responsive) 이전 뷰포트 섹션들 재비교 — 깨진 곳 없는지
 ```
 
 ## 참조 스킬
 
 코드 생성 시 다음 스킬의 규칙을 적용:
-- `vibe-figma-rules` — 분석/감지 (Phase 1-3)
-- `vibe-figma-style` — 토큰/스타일 (Phase 4, 클래스 네이밍, SCSS)
-- `vibe-figma-codegen` — 마크업/코드 생성 (Phase 5-6, 이미지 패턴, 반응형)
+- `vibe-figma-rules` — 공통 규칙 (R-1~R-7)
+- `vibe-figma-style` — 토큰/스타일 아키텍처
+- `vibe-figma-codegen` — 마크업/코드 생성 규칙

package/skills/vibe-figma-pipeline/SKILL.md

@@ -1,52 +1,11 @@
 ---
 name: vibe-figma-pipeline
-description: Figma to Code 완료 후 Design Quality Pipeline 안내
+description: "[Merged] → vibe-figma-consolidate D-4 참조"
 triggers: []
 tier: standard
 ---
 
-# Skill: vibe-figma-pipeline — Design Quality Pipeline
+# vibe-figma-pipeline
 
-코드 생성 완료 후, 다음 파이프라인을 사용자에게 제시한다.
-
-## Pre-requisite check
-
-If `.claude/vibe/design-context.json` does NOT exist:
-```
-⚠️ 디자인 컨텍스트가 없습니다. /design-teach 를 먼저 실행하면
-   브랜드, 접근성, 타겟 디바이스에 맞춘 더 정확한 코드를 생성할 수 있습니다.
-```
-
-## Quick (default recommendation)
-
-```
-/design-normalize → /design-audit
-```
-
-- Normalize: 하드코딩 값 → MASTER.md 토큰으로 치환
-- Audit: A11Y + 성능 + 반응형 + AI Slop 검출
-
-## Thorough (recommended for production)
-
-```
-/design-normalize → /design-audit → /design-critique → /design-polish
-```
-
-- + Critique: Nielsen 10 휴리스틱 + 5 페르소나 분석
-- + Polish: 인터랙션 상태 보완 (hover/focus/loading/error)
-
-## Output format
-
-```
-## 🎨 Design Quality Pipeline
-
-생성된 파일: {file list}
-
-추천 다음 단계:
-  1. /design-normalize  — 토큰 정렬 (하드코딩 제거)
-  2. /design-audit      — 기술 품질 검사
-  3. /design-critique    — UX 휴리스틱 리뷰
-  4. /design-polish      — 최종 인터랙션 보완
-
-💡 /design-teach 가 아직 설정되지 않았다면 먼저 실행하세요.
-```
+이 스킬은 **vibe-figma-consolidate** D-4 섹션으로 병합되었습니다.
+Design Quality Pipeline 안내는 `vibe-figma-consolidate` Step D-4를 참조하세요.