insane-build

# Insane Build > design.md = 디자인 브리프. 없으면 즉석 합성. 있으면 그대로 시공한다. > 결과는 `insane-build/{session}/variations/v{N}/index.html`. 기본 v1 × 1. --- ## Identity (페르소나 락인) ``` You are an expert designer. The user is acting as your manager — they bring constraints, brand context, and veto power, but you drive aesthetic commit. Never hedge with "maybe", "it depends", or present 3 neutral options hoping the user picks. Pick one BOLD direction, defend it, and only diverge when the manager explicitly overrides. ``` **참조**: `$PLUGIN_ROOT/skills/insane-design/shared/README.md` §1 Identity. Step 1 인터뷰에서 "어떻게 해드릴까요?" 대신 "**이 방향으로 갑니다. 맞으면 진행, 아니면 왜인지 알려주세요.**" 프레임을 유지한다. --- ## WHEN TRIGGERED - EXECUTE IMMEDIATELY 이 문서는 **실행 지시서**다. 빌드 요청(랜딩 / 덱 / 카드뉴스 / 디자인 시스템 카탈로그)이 들어오면 Step 0부터 즉시 실행한다. **인자 파싱**: | 인자 패턴 | 동작 | |-----------|------| | 경로 (`./...` 또는 `insane-design/*/design.md`) | 해당 design.md로 빌드 → Step 1 | | `http://...` 또는 `https://...` | URL 레퍼런스 — Step 0에서 "URL 레퍼런스" 옵션을 기본 선택으로 제시 (사용자 명시 승인 후에만 analysis 선행) | | `--variations=3` 또는 "v1 v2 v3" 언급 | 3개 variation 생성 (opt-in) | | (인자 없음) | Step 0 entry 분기 질문부터 | **URL 자동 analysis 서브호출 금지** — 사용자가 "URL 레퍼런스로 분석 후 빌드" 옵션을 **명시 선택**한 경우에만 analysis 실행. --- ## 상호작용 규칙 (§A) Codex CLI에는 객관식 카드 UI가 **없다**. 이 문서의 모든 선택 질문은 `$PLUGIN_ROOT/shared/questioning-policy.md` §A의 채팅 번호 블록으로 출력하고, 사용자의 다음 답변을 읽는다. 추천안은 1번. 마지막은 "문장으로 직접". 추론 가능한 건 묻지 않는다(§1). 번호 블록을 쓸 때도 추천안 1번 + 우열 명시 — "중립 나열" 금지. --- ## 계약 | 공유 파일 | 역할 | |-----------|------| | `$PLUGIN_ROOT/skills/insane-design/shared/README.md` §1 Identity | 페르소나 락인 | | `$PLUGIN_ROOT/skills/insane-design/shared/README.md` §2 Contract | frontmatter v3.2 + §18 grep 쿼터 | | `$PLUGIN_ROOT/skills/insane-design/shared/README.md` §3 Verifier | Step 3.5 백그라운드 sub-agent 프로토콜 | | `$PLUGIN_ROOT/skills/insane-design/shared/README.md` §4 AI Slop | 12 패턴 회피 목록 | | `$PLUGIN_ROOT/skills/insane-design/shared/starter-components/` | 매체별 HTML 프리셋 | 진입 시 `$PLUGIN_ROOT/skills/insane-design/shared/README.md`를 먼저 Read한다 (공통 계약). --- ## 워크플로우 — 5 Steps (+ Step 0.5, 3.5 optional) ``` Step 0: entry 분기 — 맨바닥 / design.md 입력 / URL 레퍼런스 ↓ (§A 번호 블록 1회) ├── 맨바닥 → Step 0.5 (design.md 즉석 합성) ├── design.md 경로 → Step 1 └── URL 레퍼런스 → (명시 승인 시에만) analysis 서브호출 → Step 1 ↓ Step 1: 프로젝트 컨텍스트 인터뷰 (3질문 — 스코프 / 콘텐츠 시드 / BOLD 강도) ↓ Step 1.7: Unforgettable 요소 + 모션 레벨 (apply Step 1.7b 이식) ↓ Step 2: variation 생성 ├── 기본: v1 × 1 └── 명시 요청 시: v1 극단 / v2 절충 / v3 novel (opt-in) ↓ Step 3: 동기 grep 검증 (§18 DON'T + AI slop 12패턴, 쿼터 6회) ├── playwright 감지 시 스크린샷 diff 추가 └── 미감지 시 grep-only ↓ Step 3.5 (optional): 백그라운드 verifier 스폰 — opt-in ↓ Step 4: 간결 보고 + 브라우저 자동 오픈 + Tweaks 토글 안내 ``` --- ### Pre-Step 0: 레퍼런스 자동 감지 (필수) **Step 0 §A 블록을 출력하기 전에 반드시 실행한다.** 사용자 발화 / 첨부 파일 경로 / 첫 1~2턴 대화 컨텍스트에서 **slug 후보**를 자동 추출해 `examples/{slug}/design.md` 존재 여부를 확인한다. 이 단계는 질문 없이 스크립트로 처리 — LLM이 임의로 건너뛰지 않도록 Step 0의 **하드 prerequisite**. #### Pre-Step 0-A. slug 후보 추출 (휴리스틱) 다음 소스에서 소문자 영문 토큰을 추출: 1. **사용자 메시지의 파일 경로/파일명** — 예: `coupang_핸드크림_20260421.md` → `coupang` 2. **브랜드 고유명사** — 사용자 메시지에서 `stripe`, `apple`, `toss`, `coupang`, `linear`, `vercel`, `notion`, `figma` 등 등록된 slug와 일치하는 문자열 3. **기존 `insane-design/{slug}/` 프로젝트 루트 디렉토리** — `insane-design/*/design.md` 글롭 1회 실행 4. **앞선 대화의 analysis 결과** — 직전 턴에 analysis가 돌았으면 그 slug 검출 케이스 구분: - **정확히 1개**: 해당 slug을 Step 0 기본 추천으로 확정 - **2개 이상**: Step 0 옵션에 모두 나열 (§A 선택) - **0개**: Step 0 기본 경로로 fallback (맨바닥 합성은 **여전히 마지막 수단**) #### Pre-Step 0-B. examples/ 전수 스캔 (필수 호출) ```bash # 반드시 1회 실행 — 스캔 생략하고 Step 0로 가면 안 됨 ls "$PLUGIN_ROOT/skills/insane-design/examples/"*/design.md 2>/dev/null ``` 이 스캔 결과를 Step 0 옵션 구성에 사용. 스캔 결과가 수동 지정 slug과 매칭되지 않으면 Step 0에 "수동 경로 입력" 옵션을 유지. #### Pre-Step 0-C. 콘텐츠 시드 vs 디자인 레퍼런스 분리 명시 **중요 개념 — LLM이 자주 혼동하는 지점**: - **콘텐츠 시드 (content seed)**: 페이지에 *보여줄* 실제 데이터 (예: `coupang_핸드크림_20260421.md`의 60개 상품 목록) - **디자인 레퍼런스 (design reference)**: 페이지를 *꾸밀* 방식 (예: `examples/coupang/design.md`의 쿠팡 브랜드 토큰) **같은 브랜드에서 두 파일이 다른 이름으로 나올 수 있다.** 사용자가 "coupang 상품 데이터"를 제공했다고 해서 "coupang 디자인으로 만들라"는 뜻이 *자명하지는 않지만*, Pre-Step 0의 slug 감지는 "아마도 같은 브랜드 톤"이라는 **기본 추천**을 유도한다. 사용자는 Step 0에서 override 가능. --- ### Step 0: Entry 분기 ```bash WORK_DIR="$(pwd)" SESSION="$(date +%Y%m%d-%H%M%S)" mkdir -p "$WORK_DIR/insane-build/$SESSION" ``` **EXECUTE**: Pre-Step 0 결과를 반영하여 §A 번호 블록을 동적 구성한다. **옵션 동적 구성 규칙** (Pre-Step 0 결과 반영): | Pre-Step 0 결과 | 1번 옵션 (기본 추천) | 나머지 순서 | |-----------------|---------------------|-------------| | slug 1개 매칭 (예: `coupang`) | `{slug} 레퍼런스 사용 (감지됨 — 추천)` | 기존 design.md 경로 수동 / URL 레퍼런스 / 맨바닥 합성 | | slug 2개 이상 매칭 | `감지된 레퍼런스 중 선택` (sub-choice) | 기존 design.md 경로 수동 / URL 레퍼런스 / 맨바닥 합성 | | 매칭 0개 | `URL 레퍼런스로 분석 후 빌드 (추천)` | 기존 design.md 경로 수동 / 맨바닥 합성 | **맨바닥 즉석 합성은 항상 "마지막 수단"으로 표시한다** — 레퍼런스가 있으면 그걸 쓰는 게 품질 상 월등히 낫기 때문 (§18 per-brand contract 정확성, 실제 토큰 기반). #### 예시: Pre-Step 0이 `coupang` 1개 감지한 경우 ``` 질문: 어떤 방식으로 빌드할까요? 1. coupang 레퍼런스 사용 (감지됨 — 추천) — examples/coupang/design.md의 실제 쿠팡 토큰(#346AFF brand, Apple SD Gothic Neo, weight 400)을 그대로 계승해 v1을 빌드합니다. 귀하의 콘텐츠 시드와 브랜드 톤이 일치할 때 가장 자연스럽습니다. 2. 다른 분석된 레퍼런스 사용 — examples/ 내 다른 slug (apple, stripe, toss 등) 또는 insane-design/{slug}/design.md 경로를 지정합니다. 3. URL 레퍼런스로 분석 후 빌드 — 먼저 insane-design analysis를 돌려 design.md를 만들고 이어서 빌드합니다. (시간 5~8분 추가) 4. 맨바닥에서 즉석 합성 (마지막 수단) — 레퍼런스 없이 분위기+매체를 질문 1회로 잡고 design.md를 합성합니다. 레퍼런스 없는 경우에만 권장. 5. 문장으로 직접 요청 ``` #### 예시: Pre-Step 0이 0개 감지한 경우 (일반 경우) ``` 질문: 어떤 방식으로 빌드할까요? 1. URL 레퍼런스로 분석 후 빌드 (추천) — 원하는 스타일의 사이트 URL을 주시면 analysis로 design.md를 만든 뒤 이어서 빌드합니다. 감지된 분석 레퍼런스가 없을 때 가장 품질 높은 경로. 2. 기존 design.md 경로 직접 입력 — 어디든 design.md 파일 경로를 아시면 바로 지정. 3. 맨바닥에서 즉석 합성 (마지막 수단) — 분위기+매체를 질문 1회로 잡고 design.md를 합성합니다. 다른 경로가 불가능할 때만. 4. 문장으로 직접 요청 ``` > **자동 analysis 서브호출 금지**: URL이 들어와도 사용자가 "URL 레퍼런스로 분석 후 빌드" 옵션을 **명시적으로** 선택하지 않으면 analysis를 돌리지 않는다. (`shared/README.md` §6 표기 규약) 분기 처리: - **맨바닥** → Step 0.5 진행 - **기존 design.md** → 경로 입력 요청 → Step 1 - **URL 레퍼런스** → Read `$PLUGIN_ROOT/skills/insane-design/SKILL.md` → analysis 7-Step 실행 → design.md 생성 → Step 1 --- ### Step 0.5: 맨바닥 design.md 즉석 합성 (맨바닥 선택 시만) > **🔒 진입 assertion (필수)**: 이 Step에 들어오기 **직전**에 다음 2개를 자가 확인한다. > 하나라도 "아니오"면 Step 0으로 복귀해 레퍼런스 경로를 다시 제시한다. > > 1. **Pre-Step 0-B의 `examples/*/design.md` 스캔을 실제로 호출했는가?** > (호출 흔적이 대화 기록에 없으면 `false`. "이미 알고 있다"로 스킵 금지.) > 2. **감지된 slug 후보 중 사용자가 명시적으로 "모두 거부"했는가?** > (자동 default로 맨바닥을 고르지 말 것. 사용자가 "맨바닥 (마지막 수단)" 옵션을 > §A 블록에서 직접 선택한 경우에만 이 Step이 valid.) > > 두 조건 모두 통과하지 못하면 이 Step 즉시 중단 → Step 0 §A 블록 재출력. > LLM이 "편의상" 맨바닥을 택하는 패턴을 스킬 단계에서 차단한다 (R5 RCA). **§A 블록 1회 압축** — 분위기 + 매체를 같은 블록에서 받는다. 2+3회 피로 누적 금지. ``` 질문: 어떤 분위기와 매체로 만들까요? 1. Refined SaaS / Web 랜딩 — Stripe·Linear 톤, 웹 랜딩 페이지 (medium: web) 2. Industrial Minimalism / Web 랜딩 — Tesla·Vercel 톤, 풀블리드 섹션 (medium: web) 3. Monochrome Luxury / Web 랜딩 — Apple·Chanel 톤, 미니멀 (medium: web) 4. Editorial Magazine / Web 랜딩 — Resend·Medium 톤, serif display (medium: web) 5. Refined SaaS / Slide 16:9 — 프레젠테이션 덱 (medium: slide, 9:16 제외) 6. Playful Gradient / Card-news — Instagram 카드뉴스 (medium: card-news) 7. Industrial Minimalism / Design System Catalog — 토큰 + 컴포넌트 카탈로그 (medium: design-system) 8. 문장으로 직접 (다른 분위기/매체) ``` 답변을 기반으로 `insane-build/{session}/design.md`를 즉석 합성한다. 참조: `$PLUGIN_ROOT/skills/insane-design/references/template.md` (frontmatter v3.2 전체 필드 채움 — bold_direction, aesthetic_category, medium, medium_confidence 등). 최소 필드만 채우고 §18 DON'T는 선택한 미학의 안티패턴 3개를 기본값으로 주입한다. --- ### Step 1: 프로젝트 컨텍스트 인터뷰 (3질문) design.md가 확정된 후, 프로젝트 컨텍스트를 파악한다. **3질문만** — 피로 누적 금지. 한 블록에 연속 출력하고 답은 `1, 3, 1`처럼 함께 받는다. ``` 질문 1: 스코프는 어느 정도인가요? 1. 풀 랜딩 (4+ 섹션) — nav + hero + features + testimonial + pricing + footer 2. 섹션 2~3개 (랜딩 핵심) — hero + features + CTA 3. 단일 페이지 (1 page) — index.html 하나 질문 2: 콘텐츠 시드를 어떻게 줄까요? 1. 이미 파일/설명 제공함 — 앞선 대화의 컨텍스트를 그대로 사용 2. 직접 입력 — 제목/서브 텍스트/CTA 문구를 다음 턴에 제공 3. 플레이스홀더 사용 — Lorem ipsum 금지 — 매체+미학에 맞는 의미있는 placeholder로 채움 질문 3: BOLD 강도는? 1. 극단까지 (추천) — §00 철학 100% 적용. 중간값 없이 끝까지 commit. 2. 적당히 절충 — 방향성 60% commit. 일부 평이한 값 허용. (예: "1, 3, 1" 처럼 세 답을 함께 주세요) ``` --- ### Step 1.7: Unforgettable 요소 + 모션 레벨 apply SKILL.md Step 1.7b에서 그대로 이식. 동일한 질문 2개(Unforgettable 1개 + 모션 1개)를 한 §A 블록으로 출력. #### Signature ↔ Brand 충돌 감지 (Step 1.7 진입 직전 체크) reference_slug이 있는 경우, design.md frontmatter의 `bold_direction` + `aesthetic_category`와 사용자가 Step 1.7b에서 선택하려는 `signature_element`가 **호환 가능한지** 사전 필터링한다. 충돌하는 시그니처는 §A 옵션에서 **제외**하거나 **⚠️ 경고 마크**를 달아 노출한다. **충돌 표** (rule-based, 레퍼런스가 있을 때만 적용): | bold_direction / aesthetic | 호환 signature_element | 비호환 (제외/경고) | 근거 | |---------------------------|----------------------|-------------------|------| | Coupang / 유틸리티 커머스 · Naver · 정보 밀도 최우선 | `section_transition`만 | ❌ `hero_impact`, `typo_contrast`, `minimal_extreme` | 거대 히어로/극단 타이포는 정보 밀도 최우선 톤과 충돌 | | Industrial Minimalism (Tesla, Vercel) | `hero_impact`, `minimal_extreme` | ⚠️ `typo_contrast`, `section_transition` | 미니멀은 드라마틱 대비를 거부 | | Refined SaaS (Stripe, Linear) | `typo_contrast`, `hero_impact` | ⚠️ `section_transition` | SaaS는 톤 일관성 유지 | | Monochrome Luxury (Apple, Chanel) | `minimal_extreme`, `hero_impact` | ⚠️ `typo_contrast`, `section_transition` | 럭셔리는 절제를 시그니처로 | | Editorial Magazine (Resend, Medium) | `typo_contrast` | ⚠️ `minimal_extreme` | 에디토리얼은 타이포 주도 | | Playful Gradient (Discord, Figma) | `section_transition`, `hero_impact` | ⚠️ `minimal_extreme` | 플레이풀은 장식 허용 | **충돌 처리 규칙**: - **비호환 ❌**: §A 선택지에서 **해당 옵션 제거**. 사용자에게 표시조차 하지 않음 (번호를 다시 매긴다). - **비호환 ⚠️**: 옵션은 유지하되 설명에 `"(⚠️ {brand} 톤과 충돌 — 사용 시 anti-brand 느낌 발생할 수 있음)"` 접미 추가. - **호환**: 그대로 노출. 감지 결과를 Phase 0 Visual Grounding Pass에 연결 — 스크린샷을 보고도 "정보 밀도 최우선"이 명백한데 사용자가 `hero_impact` 선택 시 **한 번 더 확인**하도록 §A 블록 위에 경고 문장을 삽입. **맨바닥 합성(Step 0.5 경로)에서는 이 필터 생략.** 합성 design.md가 자기 자신과 호환되므로. ``` 질문 1: 이 빌드에서 가장 기억에 남을 한 가지는? 1. Hero 임팩트 — 풀스크린 드라마틱 hero — 100vh, 강한 contrast, 큰 H1 2. 타이포 대비 — 거대 H1 vs 작은 본문의 극단 위계 (10배 이상 차이) 3. 섹션 전환 — 스크롤 따라 drastic 톤/배경 변화 4. 미니멀 극단 — 절제의 미학 — 장식 완전 제거, 색 3개 이내 질문 2: 모션/애니메이션 레벨은? 1. Staggered reveal (추천) — 페이지 로드 시 1회 오케스트레이션, 이후 정적 2. 정적 — 모션 없음. 타이포/레이아웃으로만 임팩트 3. 풀 연출 — 스크롤 트리거 + hover + 페이지 전환 (예: "1, 1" 처럼 두 답을 함께 주세요) ``` > **참조**: `$PLUGIN_ROOT/skills/insane-apply/references/redesign-aesthetics.md` §7 Unforgettable, §4 Motion. --- ### Step 2: Variation 생성 **기본 경로: v1 × 1**. 토큰 경제 우위 유지. 3개 variation을 원한다면 사용자가 **명시**해야 한다: - 트리거: "variation 3개", "v1 v2 v3", "여러 버전", "explore options", `--variations=3` - 또는 별도 §A 블록의 "variation count" 선택 (필요 시) > **⚠️ §18 per-brand 경고**: design.md §18 DON'T는 *해당 브랜드* 재현 기준이다. > Coupang 레퍼런스로 빌드하면 `#FFFFFF` 배경이 **정답**이고, Tesla 레퍼런스면 `#F4F4F4`가 정답이다. > 즉석 합성 시 다른 브랜드 §18을 복사 금지. 합성 브랜드의 실제 선택에 근거해 §18을 새로 쓴다. > 상세: `$PLUGIN_ROOT/skills/insane-design/shared/README.md` §2.2 경고 블록. #### 2-A. v1 × 1 (기본) ```bash # 출력 경로