insane-design

# Insane Design > URL 하나 → 실제 CSS 기반 design.md + 인터랙티브 HTML 리포트. > design.md frontmatter → W3C DTCG tokens.json export도 이 스킬이 담당한다. --- ## WHEN TRIGGERED - EXECUTE IMMEDIATELY 이 문서는 참고 문서가 아니라 **실행 지시서**다. URL이 제공되면 즉시 Step 1부터 실행한다. --- ## Persona ``` 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; pick one BOLD direction and defend it. ``` 전체 계약: `$PLUGIN_ROOT/skills/insane-design/shared/README.md` §1 Identity. ## 상호작용 규칙 (§A) Codex CLI에는 객관식 카드 UI가 **없다**. 질문이 필요하면 `$PLUGIN_ROOT/shared/questioning-policy.md` §A의 채팅 번호 블록으로 대체한다. - analysis는 인터뷰형이 아니라 **추출형**이다. URL과 출력 루트가 명확하면 질문 없이 진행하고, 추론 가능한 건 묻지 않는다(§1 "추론 가능한 건 안 묻기"). - URL/출력 루트가 모호할 때만 §A 번호 블록으로 **1회** 확인한다(추천안을 1번에). - 토큰/색/폰트는 **추출**한다 — 환각으로 만들지 않는다. --- ## Smart Router — 입력에 따라 analysis / apply / build / export 판별 이 스킬은 `insane-design` 패밀리의 진입점이기도 하다. 사용자 입력을 보고 모드를 판별한다. | 입력 패턴 | 동작 | 모드 | |-----------|------|------| | `http://...` 또는 `https://...` | URL 분석 시작 (아래 7-Step) | → analysis (이 스킬) | | `build` 또는 `build ...` | 새 빌드 (맨바닥 / design.md / URL) | → `$PLUGIN_ROOT/skills/insane-build/SKILL.md` | | `export <slug>` / "tokens.json 내보내줘" | design.md → DTCG tokens.json | → Export 모드 (이 스킬, 아래) | | `[slug]` (URL이 아닌 문자열) | 해당 design.md를 프로젝트에 적용 | → `$PLUGIN_ROOT/skills/insane-apply/SKILL.md` | | (인자 없음) | 모드 선택 요청 | → 아래 §A 블록 | **자연어인 경우 → 의도 판별**: - "분석해줘", "CSS 뜯어봐", "디자인 시스템 뽑아줘" → analysis (URL 요청) - "적용해줘", "이 스타일로", "처럼 만들어줘" → apply (slug 요청) - "만들어줘", "빌드", "처음부터", "랜딩 만들어줘", "덱 만들어줘", "카드뉴스 만들어줘" → build - "내보내줘", "tokens.json", "DTCG", "Figma Tokens" → export **apply / build로 넘길 때**: 해당 SKILL.md를 Read하고 그 워크플로우를 따른다. 남은 인자를 그대로 전달한다 (`build` 이후 텍스트, 또는 slug). build 진입 전에는 `$PLUGIN_ROOT/skills/insane-design/shared/README.md`(공통 계약)를 먼저 Read한다. **인자가 없을 때** — §A 번호 블록을 출력한다: ``` 질문: 무엇을 할까요? 1. 사이트 분석 (analysis) — URL을 주시면 해당 사이트의 디자인 시스템을 분석해 design.md + report를 생성합니다. (추천 — 다른 모드의 입력이 됩니다) 2. 디자인 적용 (apply) — 이미 분석된 디자인(Stripe, Apple 등 100개)을 내 프로젝트에 적용합니다. 3. 새 빌드 (build) — 맨바닥에서 랜딩/덱/카드뉴스/디자인 시스템 카탈로그를 즉석 합성 또는 design.md 기반으로 빌드합니다. 4. DTCG export — 분석된 design.md를 tokens.json(Figma Tokens Studio / Style Dictionary 호환)으로 내보냅니다. 5. 문장으로 직접 요청 ``` - 1 → analysis 진입. URL이 없으면 한 줄로 URL을 요청한다 (예시: `https://stripe.com`, `https://linear.app`, `https://vercel.com`). - 2 → apply 진입. slug가 없으면 §A 블록으로 레퍼런스를 고르게 한다 (예: `1. stripe — 보라 브랜드, sohne, weight 300 (SaaS 대표)` / `2. apple — 모노크롬, SF Pro, 미니멀` / `3. toss — Toss Blue 핀테크` / `4. nike — Futura/Helvetica 스포티` / `5. 다른 slug 직접 입력`). - 3 → build 진입 (Step 0 entry 분기부터). - 4 → Export 모드. --- ## 사전 준비 스킬 실행 전 다음 레퍼런스를 필요한 Step에서 읽는다: - **`$PLUGIN_ROOT/skills/insane-design/references/schema.v3.2.md`** — frontmatter + 섹션 구조의 **단일 진실 원천** (Step 0 — 가장 먼저 Read 필수). 이 파일을 읽지 않으면 frontmatter 일관성을 보장할 수 없음. - `$PLUGIN_ROOT/skills/insane-design/references/template.md` — design.md 19섹션 v3.2 템플릿 (§00~§19) (Step 5에서 Read) - `$PLUGIN_ROOT/skills/insane-design/references/report-prompt.md` — HTML 리포트 생성 규칙 v2.1 (Step 6에서 Read) - `$PLUGIN_ROOT/skills/insane-design/references/report.css` — canonical CSS (Step 6에서 Read, 있으면 사용) - `$PLUGIN_ROOT/skills/insane-design/references/pitfalls.md` — 14가지 함정 (Step 4에서 Read) - `$PLUGIN_ROOT/skills/insane-design/examples/stripe/design.md` — 골드 스탠다드 예시 (Step 5에서 참조) - `$PLUGIN_ROOT/skills/insane-design/examples/stripe/report.ko.html` — 리포트 골드 스탠다드 (Step 6에서 참조) --- ## 워크플로우 — 7 Steps > **경로 규칙**: 모든 Bash 명령은 반드시 **프로젝트 루트에서** 실행한다. > Step 실행 전 `WORK_DIR`을 확정하고, 모든 경로를 절대 경로 또는 `$WORK_DIR` 기준으로 사용한다. > 모든 결과물은 `insane-design/{slug}/` 하위에 통합 저장한다. 플러그인 자산(`$PLUGIN_ROOT/...`)은 읽기 전용. ```bash # Step 0: 프로젝트 루트 확정 (모든 Step에서 공유) WORK_DIR="$(pwd)" # 사용자의 현재 디렉토리를 프로젝트 루트로 사용 ``` ### Step 1: INIT — script URL을 파싱하고 작업 환경을 준비한다. 1. URL에서 slug 추출 (도메인 → kebab-case: `stripe.com` → `stripe`, `linear.app` → `linear`) 2. URL 검증 (**보안 필수**): - `http://` 또는 `https://` 프로토콜 확인 - `localhost`, `127.0.0.1`, `file://` 차단 - 도메인 형식 유효성 확인 - **셸 특수문자 검증**: URL에 `` ` ``, `$`, `(`, `)`, `;`, `|`, `&`, `>`, `<` 등 셸 메타문자가 포함되면 거부 - 이후 모든 Bash 명령에서 URL은 반드시 **큰따옴표로 감싸서** 사용: `"$URL"` 3. **매체(medium) 감지** (frontmatter 필드용): | 입력 패턴 | medium | medium_confidence | |----------|--------|-------------------| | URL이 `.pptx`/`.ppt`로 끝남 | `slide` | `high` | | URL이 `docs.google.com/presentation/*` | `slide` | `high` | | URL이 `*.pdf`로 끝남 | `print` | `high` (스텁만, 현 세션 미구현) | | URL이 `*.figma.com/file/*` (디자인 시스템 탐지 시) | `design-system` | `medium` | | 이미지 업로드 입력 + 정사각 비율 | `card-news` | `medium` | | 그 외 일반 URL | `web` | `high` (기본값) | 감지 결과는 Step 5 WRITE-MD에서 frontmatter `medium`, `medium_confidence` 필드에 그대로 기록한다. 4. **Archetype 감지** (v3.2 frontmatter 필드용 — 판정 #21): 사이트의 컨텍스트를 11 enum + freeform으로 분류. Step 4 INTERPRET이 archetype을 컨텍스트로 사용하여 §00 Narrative 어휘와 §13 핵심 컴포넌트 강조점을 결정. **1차 단서** (도메인 + meta tag 기반 자동 감지): - 도메인 끝 (`.shop`, `.store`, `.app`, `.dev`, `.docs.*` 등) - meta tag (`og:type`, `twitter:card`, `application-name`) - hero 구조 첫 인상 (스크린샷) **11 enum**: | archetype | 단서 | 예시 | |-----------|------|------| | `commerce-marketplace` | listing card 위주, search-bar 큼 | Airbnb, Coupang, Etsy | | `editorial-product` | 풀-블리드 제품 photography | Apple, Tesla, Nike | | `editorial-magazine` | article-first, headline 강조 | Verge, Wired, Medium | | `app-dashboard` | sidebar nav, dense data | Linear, Notion, Figma | | `saas-marketing` | hero CTA + feature grid | Stripe, Vercel, Supabase | | `landing-utility` | single-page, 가입 유도 | Resend, Posthog landing | | `documentation-site` | sidebar TOC + code blocks | Tailwind docs, MDN | | `portfolio-personal` | 프로젝트 grid + 자유 레이아웃 | 개인 포트폴리오 | | `automotive` | 차량 photography + spec | BMW, Ferrari, Tesla | | `luxury-brand` | 미니멀 + 고급 photography | Chanel, Dior, Gucci | | `other` | 위 안 맞음 | (보조 freeform 필드 사용) | **`archetype_confidence`**: high (명확) / medium (혼합) / low (추정) 감지 결과는 Step 5 WRITE-MD에서 frontmatter `archetype`, `archetype_confidence`에 기록. 5. 출력 디렉토리 생성 (**절대 경로 사용**): ```bash mkdir -p "$WORK_DIR/insane-design/{slug}/{screenshots,css,phase1}" ``` 6. 사용자에게 시작 알림: ``` 🎨 {slug} 디자인 분석을 시작합니다. URL: {url} 예상 소요: 3-5분 ``` --- ### Step 2: FETCH — script HTML/CSS와 스크린샷을 **병렬**로 수집한다. > **접근 전략**: insane-search Phase 0→1→2→3 에스컬레이션 체인을 적용. > 어떤 방법도 미리 제외하지 않는다 — 되는지는 시도해봐야 안다. > 상세: `$PLUGIN_ROOT/skills/insane-design/references/data-collection.md`. #### 성공 판정 함수 모든 tier에서 수집한 HTML에 반드시 적용: ```bash html_ok() { local f="$1" [ -s "$f" ] || return 1 [ "$(wc -c < "$f")" -ge 5000 ] || return 1 grep -q "<html" "$f" || return 1 # Cloudflare/WAF 챌린지 감지 grep -qiE "challenge-error-text|cf_chl_opt|__cf_chl_jschl|verify you are human|checking your browser" "$f" && return 1 return 0 } css_ok() { local f="$1" [ -s "$f" ] || return 1 [ "$(wc -c < "$f")" -ge 200 ] || return 1 # 403/error HTML이 CSS로 저장된 경우 감지 grep -qiE "DOCTYPE HTML|403 ERROR|Access Denied|Request could not be satisfied|challenge-error-text" "$f" && return 1 return 0 } ``` #### 2A. HTML + CSS 수집 **6-tier 에스컬레이션 체인**으로 HTML을 수집한다: ```bash URL="{url}" # Step 1에서 검증된 URL OUT="$WORK_DIR/insane-design/{slug}/index.html" # Tier 1: curl Chrome Desktop UA curl -sL \ -A "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36" \ -H "Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8" \ -H "Accept-Language: en-US,en;q=0.9" \ --compressed --max-time 30 -o "$OUT" "$URL" # Tier 2: curl Mobile UA if ! html_ok "$OUT"; then curl -sL \ -A "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1" \ -H "Accept-Language: en-US,en;q=0.9" \ --compressed --max-time 30 -o "$OUT" "$URL" fi # Tier 3: Jina Reader HTML 모드 (Cloudflare/WAF 우회 — 실증된 방법) # ⚠️ 대상 URL이 r.jina.ai로 전송됩니다. 민감한 내부 URL 사용 금지. if ! html_ok "$OUT"; then curl -sL --max-time 45 \ -H "X-Return-Format: html" \ "https://r.jina.ai/$URL" -o "$OUT" fi # Tier 4: curl_cffi TLS 임퍼소네이션 (Phase 2 에스컬레이션) # 출력 경로는 argv로 전달 — quoted heredoc 안에서는 $OUT이 확장되지 않는다. if ! html_ok "$OUT"; then python3 -c "import curl_cffi" 2>/dev/null || pip install curl_cffi -q python3 - "$OUT" <<'PYEOF' from curl_cffi import requests as cffi_req import sys url = "{url}" out = sys.argv[1] for target in ["safari", "chrome", "firefox"]: try: r = cffi_req.get(url, impersonate=target, timeout=20, headers={"Accept-Language": "en-US,en;q=0.9", "Referer": "https://www.google.com/"}) if r.status_code == 200 and len(r.text) > 5000: open(out, "w").write(r.text) break except: continue PYEOF fi # Tier 5: Wayback Machine 캐시 (사이드카 — 원본 전부 실패 시) if ! html_ok "$OUT"; then WB=$(curl -sL --max-time 15 "http://archive.org/wayback/available?url=$URL" | python3 -c "import json,sys; d=json.load(sys.stdin); print(d.get('archived_snapshots',{}).get('closest',{}).get('url',''))" 2>/dev/null) [ -n "$WB" ] && curl -sL --max-time 30 "$WB" -o "$OUT" fi # Tier 6: headless playwright (최후 수단 — JS 챌린지 전용, python playwright가 설치돼 있을 때만) # html_ok "$OUT" 실패 시 → 아래 2B의 playwright 스니펫과 같은 방식으로 page.content()를 "$OUT"에 저장 ``` > **⚠️ 외부 API 고지**: Tier 3(Jina), Tier 5(Wayback Machine)에서 대상 URL이 외부로 전송됩니다.