timelabs 0.1.0 → 0.1.1

package/dist/index.js

@@ -6,6 +6,7 @@ import { Command as Command3 } from "commander";
 // src/commands/install.ts
 import { Command } from "commander";
 import chalk from "chalk";
+import { checkbox as checkbox2 } from "@inquirer/prompts";
 
 // src/registry/registry.ts
 import { fileURLToPath } from "url";
@@ -14,11 +15,11 @@ import { dirname, resolve } from "path";
 // src/registry/skills.json
 var skills_default = [
   {
-    name: "test-skill",
-    displayName: "Test Skill",
-    description: "A sample skill for testing the installer",
+    name: "web-design",
+    displayName: "Web Design System",
+    description: "\uC6F9/\uC571/\uB370\uC2A4\uD06C\uD1B1/\uD558\uC774\uBE0C\uB9AC\uB4DC/\uBE44\uB514\uC624 \uB514\uC790\uC778 \uC2DC\uC2A4\uD15C - \uC218\uC9D1, \uBD84\uC11D, \uD1A0\uD070/\uAC00\uC774\uB4DC \uC0DD\uC131, \uAC80\uC99D",
     version: "1.0.0",
-    targets: ["claude-code", "cursor", "openclaw"]
+    targets: ["claude-code"]
   }
 ];
 
@@ -128,33 +129,42 @@ var allInstallers = [
   new CursorInstaller(),
   new OpenClawInstaller()
 ];
-var installCommand = new Command("install").description("Interactively select and install skills").option(
-  "-t, --target <target>",
-  "Target AI tool (claude-code, cursor, openclaw, all)",
-  "all"
-).action(async (opts) => {
-  const { target } = opts;
-  const skills = filterByTarget(loadSkills(), target);
+async function selectTargets() {
+  const selected = await checkbox2({
+    message: "Select AI tools to install to:",
+    choices: allInstallers.map((i) => ({
+      name: i.name,
+      value: i.targetKey,
+      checked: i.isAvailable()
+    }))
+  });
+  return allInstallers.filter((i) => selected.includes(i.targetKey));
+}
+var installCommand = new Command("install").description("Interactively select and install skills").action(async () => {
+  const skills = loadSkills();
   if (skills.length === 0) {
-    console.log(chalk.yellow("No skills found for the specified target."));
+    console.log(chalk.yellow("No skills available."));
     return;
   }
-  const selected = await selectSkills(skills);
-  if (selected.length === 0) {
+  const selectedSkills = await selectSkills(skills);
+  if (selectedSkills.length === 0) {
     console.log(chalk.yellow("No skills selected."));
     return;
   }
+  const selectedInstallers = await selectTargets();
+  if (selectedInstallers.length === 0) {
+    console.log(chalk.yellow("No AI tools selected."));
+    return;
+  }
   const skillsDir = getSkillsDir();
-  const installers = target === "all" ? allInstallers : allInstallers.filter((i) => i.targetKey === target);
   let installed = 0;
   let skipped = 0;
-  for (const skill of selected) {
-    for (const installer of installers) {
-      if (!skill.targets.includes(installer.targetKey)) continue;
-      if (!installer.isAvailable()) {
+  for (const skill of selectedSkills) {
+    for (const installer of selectedInstallers) {
+      if (!skill.targets.includes(installer.targetKey)) {
         console.log(
           chalk.dim(
-            `  \u23ED ${installer.name} not detected, skipping "${skill.displayName}"`
+            `  \u23ED "${skill.displayName}" has no files for ${installer.name}, skipping`
           )
         );
         skipped++;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "timelabs",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Install AI skill packages for Claude Code, Cursor, and OpenClaw",
   "type": "module",
   "bin": {

package/skills/web-design/claude-code/SKILL.md

@@ -0,0 +1,270 @@
+---
+name: web-design
+description: 웹/앱/데스크톱/하이브리드/비디오 디자인 시스템 - 스타일/레이아웃/모션 수집, 벤치마킹, 목업 분석, 디자인 토큰/가이드 생성, 디자인 적용 자동 검증. "/web-design", "웹 디자인", "디자인 토큰", "디자인 가이드" 명령에 반응합니다.
+---
+
+# /web-design — 웹 디자인 시스템
+
+## Trigger
+
+```
+/web-design          # 메뉴 표시
+```
+
+## 역할
+
+디자인 리서치 → 수집 → 토큰/가이드 생성 → 적용 검증까지 **연속 파이프라인**으로 연결된 디자인 시스템 스킬입니다.
+웹, 모바일 앱, 데스크톱, 하이브리드(크로스플랫폼), 비디오 프로젝트를 모두 지원합니다.
+
+---
+
+## UX: `/web-design` 입력 시 메뉴 표시
+
+```
+🎨 /web-design 에 오신 것을 환영합니다!
+
+무엇을 하시겠습니까?
+
+[1] 전체 파이프라인 (분석 → 수집 → 생성 → 검증)
+[2] 벤치마킹 (사이트 비교 분석)
+[3] 목업 분석 (단일 파일/URL 분석)
+[4] 디자인 수집 → 토큰/가이드 생성
+[5] 디자인 적용 검증
+[6] 레퍼런스 조회 (스타일/레이아웃/모션)
+[7] 파이프라인 상태 확인
+
+번호를 선택하세요:
+```
+
+## 인자별 실행
+
+`/web-design` 실행 후 메뉴에서 선택하거나, 사용자가 직접 인자를 지정하면 해당 모듈로 바로 진입합니다.
+
+| 인자 | 설명 | 실행 모듈 |
+|------|------|----------|
+| (없음) | 메뉴 표시 | — |
+| `all` | 전체 파이프라인 바로 시작 | Phase 1→2→3→4 |
+| `benchmark <URL...>` | 멀티사이트 벤치마킹 | analyze/analyze-benchmark.md |
+| `analyze <파일/URL>` | 단일 목업/사이트 분석 | analyze/analyze-mockup.md |
+| `generate` | 디자인 수집 → 생성 | collect/ → gen/ |
+| `tokens` | 토큰 생성만 (스타일+테마 지정 후 바로) | collect-style.md → gen-tokens.md |
+| `verify` | 디자인 적용 검증 | verify/ |
+| `browse <카테고리>` | 레퍼런스 조회 | defs/ |
+| `status` | 파이프라인 상태 확인 | verify/verify-pipeline.md |
+
+---
+
+## 연속 파이프라인
+
+전체 흐름이 끊김 없이 연결됩니다. 각 단계의 출력이 다음 단계의 입력으로 자동 전달됩니다.
+
+```
+Phase 1: 리서치 (선택)
+  ├─ benchmark <URL...>       → docs/benchmarking/recommended-tokens.json
+  └─ analyze <파일/URL>       → .design/{site}/analysis.json + design-tokens.css
+       │
+       ▼ (분석 결과를 design-context에 저장)
+
+Phase 2: 수집 (대화형)
+  ├─ collect/collect-type.md      → config.project_type
+  ├─ collect/collect-web.md       → 웹 프로젝트 레이아웃/모션
+  ├─ collect/collect-app.md       → 모바일 앱 레이아웃/모션
+  ├─ collect/collect-desktop.md   → 데스크톱 앱 레이아웃/모션
+  ├─ collect/collect-hybrid.md    → 하이브리드(크로스플랫폼) 레이아웃/모션
+  ├─ collect/collect-video.md     → 비디오 구성/모션
+  └─ collect/collect-style.md     → config.style, config.theme, config.token_scope
+       │
+       │  ★ 연결 포인트: 분석 결과가 있으면 자동 반영
+       │    - recommended-tokens.json → 스타일 추천 기본값
+       │    - analysis.json의 colors → 토큰 생성 시 참조 색상
+       │    - analysis.json의 detected layout → 레이아웃 추천
+       ▼
+
+Phase 3: 생성 (자동)
+  ├─ gen/gen-tokens.md           → design/tokens/ (variables.css, visual.css 등)
+  ├─ gen/gen-tokens/03-connect-frontend → globals.css, tailwind.config 수정
+  ├─ gen/gen-design-guide.md     → docs/design/web-design-guide.md (Section 1-6)
+  ├─ gen/gen-design-guide-interaction.md → Section 7-8 (모션/인터랙션)
+  └─ gen/gen-video.md            → 비디오 디자인 생성 (구성/모션/오디오 싱크)
+       │
+       ▼
+
+Phase 4: 검증 (자동, generate 완료 직후 실행)
+  ├─ verify/verify-tokens.md     → 토큰 사용 현황
+  ├─ verify/verify-motions.md    → 모션/애니메이션 적용 현황
+  ├─ verify/verify-components.md → 컴포넌트 구현 현황
+  ├─ verify/verify-responsive.md → 반응형/이미지 현황
+  └─ verify/verify-report.md     → 종합 리포트 + project-context.json 업데이트
+```
+
+## 데이터 연결 메커니즘
+
+| 출발 | 저장 위치 | 도착 | 사용 방식 |
+|------|---------|------|---------|
+| benchmark 결과 | `docs/benchmarking/recommended-tokens.json` | collect-style | 스타일 추천 기본값 |
+| benchmark 결과 | `docs/benchmarking/report.md` | collect-style | 감지된 스타일 코드 매핑 |
+| mockup 분석 | `.design/{site}/analysis.json` | collect-style | 색상/레이아웃/타이포 기본값 |
+| mockup 분석 | `.design/{site}/design-tokens.css` | gen-tokens | 참조 토큰 (있으면 머지) |
+| collect 결과 | `config` 객체 (메모리) | gen-tokens, gen-design-guide | 전체 디자인 설정 |
+| gen-tokens 결과 | `design/tokens/` | verify-tokens | 검증 대상 |
+| gen-design-guide 결과 | `docs/design/` | verify-motions, verify-components | 검증 대상 |
+| gen-video 결과 | `docs/design/video/` | verify-motions | 비디오 모션 검증 대상 |
+
+## 독립 실행
+
+각 모듈은 독립적으로도 실행 가능합니다:
+
+- `/web-design benchmark` → 벤치마킹만 실행 후 종료 (나중에 generate에서 자동 픽업)
+- `/web-design analyze` → 분석만 실행 후 종료
+- `/web-design verify` → 이미 생성된 토큰/가이드에 대해 검증만 실행
+- `/web-design generate` → 분석 결과가 있으면 자동 참조, 없으면 수동 입력
+
+---
+
+## 메뉴별 실행 로직
+
+### [1] 전체 파이프라인 (`all`)
+
+```
+AskUserQuestion:
+  "벤치마킹할 참고 사이트 URL이 있나요? (없으면 Enter)"
+  → URL 있으면 Phase 1 (benchmark) 먼저 실행
+  → 없으면 Phase 2 (collect)부터 시작
+
+Phase 2:
+  1. Read collect/collect-type.md → 프로젝트 유형 질문
+  2. Read collect/collect-{type}.md → 유형별 상세 질문
+     (web/app/desktop/hybrid/video 중 선택된 유형)
+  3. Read collect/collect-style.md → 스타일/테마/토큰 범위
+
+Phase 3:
+  4. Read gen/gen-tokens.md → 토큰 생성
+  5. Read gen/gen-design-guide.md → 디자인 가이드 생성
+  6. Read gen/gen-design-guide-interaction.md → 인터랙션 섹션
+  6-1. (video 유형) Read gen/gen-video.md → 비디오 디자인 생성
+
+Phase 4:
+  7. Read verify/verify-tokens.md → 토큰 검증
+  8. Read verify/verify-motions.md → 모션 검증
+  9. Read verify/verify-components.md → 컴포넌트 검증
+  10. Read verify/verify-responsive.md → 반응형 검증
+  11. Read verify/verify-report.md → 종합 리포트
+```
+
+### [2] 벤치마킹 (`benchmark`)
+
+```
+Read analyze/analyze-benchmark.md
+→ 워크플로우 실행
+```
+
+### [3] 목업 분석 (`analyze`)
+
+```
+Read analyze/analyze-mockup.md
+→ 워크플로우 실행
+```
+
+### [4] 디자인 수집 → 생성 (`generate`)
+
+```
+Phase 2 + Phase 3 실행
+(Phase 1 결과가 있으면 자동 참조)
+```
+
+### [5] 디자인 적용 검증 (`verify`)
+
+```
+Phase 4 실행 (verify/ 전체)
+```
+
+### [6] 레퍼런스 조회 (`browse`)
+
+```
+AskUserQuestion:
+  "어떤 레퍼런스를 조회하시겠습니까?
+
+   ── 스타일/토큰 ──
+   [1] 스타일 (26종)           → Read defs/styles.md
+   [2] 토큰 포맷               → Read defs/tokens.md
+   [3] AI 스타일 추천           → Read defs/ai-recommend.md
+
+   ── 레이아웃 ──
+   [4] 웹 레이아웃 (6종)        → Read defs/web-layouts.md
+   [5] 앱 레이아웃 (8종)        → Read defs/app-layouts.md
+   [6] 데스크톱 레이아웃 (6종)   → Read defs/desktop-layouts.md
+   [7] 하이브리드 레이아웃 (4종) → Read defs/hybrid-layouts.md
+
+   ── 모션 ──
+   [8] 웹 모션 (7종)            → Read defs/web-motions.md
+   [9] 앱 모션 (8종)            → Read defs/app-motions.md
+   [10] 데스크톱 모션 (6종)      → Read defs/desktop-motions.md
+   [11] 하이브리드 모션 (4종)    → Read defs/hybrid-motions.md
+
+   ── 비디오 ──
+   [12] 비디오 구성              → Read defs/video-compositions.md
+   [13] 비디오 모션              → Read defs/video-motions.md
+
+   ── 컴포넌트/패턴 ──
+   [14] 컴포넌트 스펙           → Read defs/component-specs.md
+   [15] IA 패턴                 → Read defs/ia-patterns.md
+   [16] 이미지 전략             → Read defs/image-strategies.md
+   [17] 아이콘 매핑             → Read defs/icon-mappings.md
+   [18] 아이콘 사용 가이드       → Read defs/icon-usage.md
+
+   ── 가이드 ──
+   [19] 디자인 가이드 섹션       → Read defs/design-guide-sections.md
+   [20] 일러스트레이션 가이드    → Read defs/illustration-guide.md
+   [21] SEO 가이드              → Read defs/seo-guide.md"
+```
+
+### [7] 파이프라인 상태 (`status`)
+
+```
+Read verify/verify-pipeline.md
+→ 상태 확인 실행
+```
+
+---
+
+## 공유 컨텍스트
+
+### 시작 시 읽기
+
+```
+1. Read .claude/project-context.json
+2. 파일이 있으면:
+   - design.style → 이전 스타일 설정
+   - design.theme → 이전 테마
+   - design.token_format → 토큰 형식
+   - benchmarking → 벤치마킹 결과 유무
+3. 파일이 없으면 → context = {}, 정상 진행
+```
+
+### 완료 시 쓰기
+
+```json
+{
+  "last_updated": "{현재 시간}",
+  "updated_by": "/web-design",
+  "design": {
+    "style": "{선택된 스타일}",
+    "theme": "{선택된 테마}",
+    "token_format": "{토큰 형식}",
+    "token_scope": ["{선택된 범위}"],
+    "layout_pattern": "{레이아웃}",
+    "motion_pattern": "{모션}",
+    "verify": { "...검증 결과..." }
+  }
+}
+```
+
+---
+
+## Related Skills
+
+| 스킬 | 관계 |
+|------|------|
+| `design-linker` | 디자인 목업 ↔ 태스크 연결 (별도 스킬) |
+| `benchmarking` | 원본 벤치마킹 스킬 (독립 유지, web-design에 통합본 포함) |
+| `shared` | 공유 컨텍스트 규칙 참조 |

package/skills/web-design/claude-code/analyze/analyze-benchmark-rules.md

@@ -0,0 +1,229 @@
+# 벤치마킹 분석 규칙
+
+> Dependencies: 없음 (독립 참조 데이터)
+> 참조원: `analyze/analyze-benchmark.md`
+
+---
+
+## 1. 분석 관점 (7가지)
+
+| # | 관점 | 분석 내용 | 데이터 소스 |
+|---|------|----------|-----------|
+| 1 | 레이아웃 | 그리드 컬럼 수, 콘텐츠 최대 너비, 여백 비율, 섹션 구분 방식 | DOM 구조 + CSS |
+| 2 | 컬러 | 주요 색상, 각 색상의 역할(배경/텍스트/액센트/CTA), 색상 수, 명암 대비 | CSS 추출 |
+| 3 | 타이포그래피 | 서체 종류, 크기 단계(타입 스케일), 굵기 변화, 줄 높이 | CSS 추출 |
+| 4 | 간격 체계 | 사용된 간격 값, 기본 단위 추정(4px/8px 기반 여부), 섹션 간 간격 | CSS 추출 |
+| 5 | 컴포넌트 | 버튼 스타일, 카드 구조, 입력 필드, 내비게이션, 푸터 패턴 | DOM + CSS + 스크린샷 |
+| 6 | 시각 스타일 | 디자인 스타일 판별 (미니멀/글래스모피즘 등) | 스크린샷 + CSS |
+| 7 | 반응형 | 브레이크포인트, 모바일 메뉴 방식, 레이아웃 변화 패턴 | 데스크톱/모바일 비교 |
+
+---
+
+## 2. 스타일 판별 기준
+
+CSS 추출 값으로 디자인 스타일을 판별할 때 사용하는 기준입니다.
+
+| 스타일 | 판별 단서 |
+|-------|---------|
+| 미니멀리즘 | 색상 수 5개 이하, 여백 비율 높음, 장식 요소 없음 |
+| 플랫 디자인 | box-shadow 없음, 그라데이션 없음, 단색 배경 |
+| 머티리얼 디자인 | 단계적 box-shadow, elevation 체계, 8dp 그리드 |
+| 뉴모피즘 | 배경과 동일 색상 계열의 밝은/어두운 box-shadow 쌍 |
+| 글래스모피즘 | backdrop-filter: blur, 반투명 배경(rgba alpha < 1), 미세한 보더 |
+| 브루탈리즘 | 강한 보더, 시스템 폰트, 비대칭 레이아웃, 높은 색상 대비 |
+| 다크 모드 | 배경색 명도 < 30%, 텍스트색 명도 > 80% |
+| 카드 기반 | 동일 구조의 반복 컴포넌트 3개 이상, border-radius + shadow 조합 |
+| 벤토 박스 | CSS Grid 사용, 다양한 크기의 격자 블록, gap 일정 |
+
+---
+
+## 3. CSS 추출 항목
+
+| 카테고리 | 추출 항목 |
+|---------|---------|
+| 컬러 | 배경색, 텍스트색, 링크색, 버튼색, 보더색 (모든 고유 색상) |
+| 타이포그래피 | font-family, font-size, font-weight, line-height, letter-spacing |
+| 간격 | padding, margin (모든 고유 값) |
+| 라운딩 | border-radius (모든 고유 값) |
+| 그림자 | box-shadow (모든 고유 값) |
+| 레이아웃 | max-width, display, grid-template-columns, gap |
+| 보더 | border-width, border-style, border-color |
+| 트랜지션 | transition, animation 속성 |
+
+---
+
+## 4. 데이터 정제 규칙
+
+### 4-1. 색상 정제
+
+- `rgba(0, 0, 0, 0)` 등 투명색 제거
+- `rgb()` / `rgba()` → hex 변환 후 중복 병합
+- 사용 빈도(count)를 함께 기록하여 주요 값과 예외 값 구분
+- 역할 추정: 빈도 최상위 = 배경, 2순위 = 텍스트, 3순위 = 액센트/CTA
+
+### 4-2. 타이포그래피 정제
+
+- font-size를 px 숫자로 정렬하여 타입 스케일 비율 추정
+- 일반적 비율: 1.2 (Minor Third), 1.25 (Major Third), 1.333 (Perfect Fourth)
+- font-weight 빈도 기반 주요 웨이트 선별
+
+### 4-3. 간격 정제
+
+- padding/margin 값을 px 숫자로 정렬
+- 기본 단위 추정: 4px 기반인지, 8px 기반인지 판별 (최소 공약수 분석)
+- 0px, auto 값 제외
+
+### 4-4. CSS 변수 추출
+
+`:root` 또는 `html` 셀렉터에서 `--` 접두사 변수를 추출하면 해당 사이트의 디자인 토큰 체계를 직접 파악할 수 있습니다.
+
+---
+
+## 5. 비교 매트릭스 템플릿
+
+여러 사이트를 비교할 때 사용하는 표 구조입니다.
+
+```
+비교 항목          | 사이트 A    | 사이트 B    | 사이트 C    | 추천 값
+-----------------|-----------|-----------|-----------|----------
+Primary Color    | #3B82F6   | #6366F1   | #2563EB   | (분석 후 결정)
+Font Family      | Inter     | Pretendard| Noto Sans | ...
+Base Font Size   | 16px      | 15px      | 16px      | ...
+Type Scale Ratio | 1.25      | 1.333     | 1.25      | ...
+Spacing Unit     | 8px       | 4px       | 8px       | ...
+Max Width        | 1200px    | 1280px    | 1440px    | ...
+Border Radius    | 8px       | 12px      | 6px       | ...
+Shadow Style     | subtle    | none      | medium    | ...
+Grid Columns     | 12        | 12        | 12        | ...
+Design Style     | 미니멀     | 글래스모피즘 | 플랫       | ...
+```
+
+---
+
+## 6. 스타일 조합 가이드
+
+### 6-1. 궁합이 좋은 조합
+
+| 조합 | 적합한 서비스 유형 |
+|------|----------------|
+| 미니멀리즘 + 타이포그래피 중심 | 패션, 포트폴리오, 에이전시 |
+| 플랫 디자인 + 일러스트레이션 | SaaS, 스타트업, 랜딩 페이지 |
+| 다크 모드 + 글래스모피즘 | 대시보드, 음악/미디어 앱 |
+| 카드 기반 + 머티리얼 디자인 | 뉴스, 커머스, 관리자 화면 |
+| 벤토 박스 + 미니멀리즘 | 제품 소개, 기능 안내 |
+| 미니멀리즘 + 3D/인터랙티브 | 테크 회사, 제품 쇼케이스 |
+| 오가닉 + 일러스트레이션 | 교육, 건강, 키즈 서비스 |
+
+### 6-2. 피해야 할 조합
+
+| 조합 | 이유 |
+|------|------|
+| 미니멀리즘 + 브루탈리즘 | "비우기"와 "거칠게 채우기" 철학 충돌 |
+| 뉴모피즘 + 글래스모피즘 | 두 표면 효과가 동시에 경쟁하여 산만함 |
+| 레트로 + 머티리얼 디자인 | 시대적 톤 불일치 |
+
+### 6-3. 조합 원칙
+
+- 주 스타일 70% + 보조 스타일 30% 비율 유지
+- 하나는 구조(레이아웃), 다른 하나는 표면(비주얼)으로 역할 분리
+- 조합하려는 스타일 간 공통 속성(색감, 여백, 단순함 등)이 있어야 함
+- 모바일에서는 주 스타일 위주로 단순하게, 데스크톱에서 보조 스타일 추가
+
+---
+
+## 7. 토큰 도출 방법
+
+벤치마킹 결과를 디자인 토큰으로 변환할 때의 규칙입니다.
+
+| 토큰 카테고리 | 도출 방법 |
+|-------------|---------|
+| 컬러 | 벤치마킹 사이트들의 공통 색상 역할(Primary, Neutral, Semantic)을 파악하고, 사용자의 브랜드 색상을 대입하여 동일한 역할 체계로 확장 |
+| 타이포그래피 | 가장 많이 사용된 타입 스케일 비율(보통 1.2~1.333)을 채택하고, 사용자가 원하는 서체에 적용 |
+| 간격 | 벤치마킹 사이트들의 기본 단위(4px or 8px)를 확인하고, 다수결로 채택 |
+| 라운딩 | 서비스 성격에 맞게 선택 (딱딱한 느낌 = 작은 값, 부드러운 느낌 = 큰 값) |
+| 그림자 | 벤치마킹 사이트 중 가장 적절한 엘리베이션 체계를 참고하여 3~4단계 정의 |
+
+---
+
+## 8. 보고서 구조
+
+### 8-1. 사이트별 분석 JSON
+
+```json
+{
+  "url": "https://example.com",
+  "capturedAt": "ISO 8601 타임스탬프",
+  "screenshots": {
+    "desktop": "screenshots/{site}-desktop.png",
+    "mobile": "screenshots/{site}-mobile.png",
+    "sections": ["screenshots/{site}-header.png"]
+  },
+  "designTokens": {
+    "colors": { "primary": [], "neutral": [], "background": [] },
+    "typography": { "families": [], "scale": [], "weights": [], "lineHeights": [] },
+    "spacing": { "baseUnit": "8px", "values": [] },
+    "borderRadius": [],
+    "shadows": [],
+    "maxWidth": "1200px"
+  },
+  "structure": {
+    "semanticTree": "...",
+    "componentPatterns": "...",
+    "gridSystem": "...",
+    "accessibilityScore": "..."
+  },
+  "styleAnalysis": {
+    "detectedStyles": ["미니멀리즘", "카드 기반"],
+    "rationale": "판별 근거 텍스트"
+  }
+}
+```
+
+### 8-2. 비교 보고서 구조
+
+```markdown
+# 벤치마킹 비교 보고서
+
+## 분석 대상
+- 사이트 A: [URL] - [한줄 설명]
+
+## 비교 매트릭스
+(§5 비교 매트릭스 템플릿 적용)
+
+## 공통 패턴
+(모든 사이트가 공유하는 디자인 패턴)
+
+## 차별화 요소
+(각 사이트만의 독특한 접근)
+
+## 추천 디자인 토큰
+(§7 토큰 도출 방법 적용, CSS Custom Properties 형태)
+
+## 추천 디자인 스타일 조합
+(§6 스타일 조합 가이드 참조)
+
+## 참고 스크린샷
+(캡처 이미지 참조)
+```
+
+---
+
+## 9. 에러 처리
+
+| 상황 | 대응 방법 |
+|------|---------|
+| 사이트 접속 불가 (404, 500) | 에러 기록 후 해당 URL 건너뛰기, 사용자에게 알림 |
+| 로그인 필요 페이지 | 공개 접근 가능한 페이지만 분석 가능함을 안내 |
+| SPA | `waitUntil: 'networkidle'` + 추가 대기 시간 적용 |
+| CORS로 외부 CSS 접근 불가 | computed style 기반 분석으로 대체 |
+| 무한 스크롤 | 최대 스크롤 횟수 제한 (10회) |
+| 캡차/봇 차단 | 사용자에게 자동 분석 불가 안내 |
+
+---
+
+## 10. 주의사항
+
+- **저작권**: 벤치마킹은 참고를 위한 것이며, 디자인을 그대로 복제하는 것은 저작권 문제가 될 수 있음을 사용자에게 안내
+- **성능**: 사이트당 30초~1분 소요 예상 (전체 5개 시 약 5분)
+- **동적 콘텐츠**: A/B 테스트, 지역별 콘텐츠 차이 등은 캡처 시점에 따라 달라질 수 있음
+- **네트워크 필수**: 외부 사이트 접속이 필요하므로 네트워크 활성화 필수