--- name: insane-design description: > URL 하나로 웹사이트의 실제 CSS를 분석해 디자인 시스템 레퍼런스(design.md)와 인터랙티브 HTML 리포트(report.ko.html)를 생성하는 URL 디자인 벤치마킹 스킬. "디자인 벤치마킹", "이 사이트처럼", "URL 디자인 분석", "사이트 참고해서", "디자인 따라해", "레퍼런스 사이트", "insane-design", "/insane-design", "CSS 뜯어봐", "design.md 만들어줘", "디자인 토큰 추출", "analyze design", "extract design tokens". Use this skill when the user provides a URL and asks about design systems, design tokens, CSS analysis, or wants to replicate a website's look and feel. --- # Insane Design > URL 하나 → 실제 CSS 기반 design.md + 인터랙티브 HTML 리포트 --- ## WHEN TRIGGERED - EXECUTE IMMEDIATELY 이 문서는 참고 문서가 아니라 **실행 지시서**다. URL이 제공되면 즉시 Step 1부터 실행한다. --- ## 사전 준비 스킬 실행 전 다음 레퍼런스를 필요한 Step에서 읽는다: - `/home/jay/workspace/skills/insane-design/references/template.md` — design.md 16섹션 템플릿 (Step 5에서 Read) - `/home/jay/workspace/skills/insane-design/references/report-prompt.md` — HTML 리포트 생성 규칙 (Step 6에서 Read) - `/home/jay/workspace/skills/insane-design/references/pitfalls.md` — 14가지 함정 (Step 4에서 Read) - `/home/jay/workspace/skills/insane-design/examples/stripe/design.md` — 골드 스탠다드 예시 (Step 5에서 참조) - `/home/jay/workspace/skills/insane-design/examples/stripe/report.ko.html` — 리포트 골드 스탠다드 (Step 6에서 참조) --- ## 워크플로우 — 7 Steps > **경로 규칙**: 모든 Bash 명령은 반드시 **프로젝트 루트에서** 실행한다. > Step 실행 전 `WORK_DIR`을 확정하고, 스킬/스크립트 파일은 절대 경로를 사용한다. > 모든 결과물은 `$WORK_DIR/insane-design/{slug}/` 하위에 통합 저장한다. ```bash # Step 0: 프로젝트 루트 확정 (모든 Step에서 공유) WORK_DIR="$(pwd)" # 사용자의 현재 디렉토리를 프로젝트 루트로 사용 ``` ### Step 1: INIT **Type**: script URL을 파싱하고 작업 환경을 준비한다. 1. URL에서 slug 추출 (도메인 → kebab-case: `stripe.com` → `stripe`, `linear.app` → `linear`) 2. URL 검증: - `http://` 또는 `https://` 프로토콜 확인 - `localhost`, `127.0.0.1`, `file://` 차단 - 도메인 형식 유효성 확인 3. 출력 디렉토리 생성 (**절대 경로 사용**): ```bash mkdir -p "$WORK_DIR/insane-design/{slug}/{screenshots,css,phase1}" ``` 4. 사용자에게 시작 알림: ``` 🎨 {slug} 디자인 분석을 시작합니다. URL: {url} 예상 소요: 3-5분 ``` --- ### Step 2: FETCH **Type**: script HTML/CSS와 스크린샷을 **병렬**로 수집한다. #### 2A. HTML + CSS 수집 5-tier fallback 체인으로 HTML 홈페이지를 수집한다: ```bash # Tier 1: curl + Chrome UA (절대 경로) curl -sL \ -A "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36" \ -H "Accept: text/html,application/xhtml+xml" \ -H "Accept-Language: en-US,en;q=0.9" \ --compressed --max-time 30 \ -o "$WORK_DIR/insane-design/{slug}/index.html" \ "{url}" ``` 성공 판정: 파일 크기 ≥ 5KB + `` 태그 존재 + Cloudflare challenge 없음. 실패 시 Tier 2(Mobile UA) → Tier 3(Jina HTML mode: `curl -H "X-Return-Format: html" "https://r.jina.ai/{url}"`) 순서로 시도. HTML에서 CSS 링크 추출 + 병렬 다운로드: ```bash grep -oE 'href="[^"]+\.css[^"]*"' "$WORK_DIR/insane-design/{slug}/index.html" | \ sed 's/href="//;s/"$//' | \ xargs -n1 -P8 -I{} curl -sL -o "$WORK_DIR/insane-design/{slug}/css/$(basename {})" "{absolute_url}" ``` #### 2B. 스크린샷 수집 (병렬) ```bash # Jina Reader API 직접 호출 (slug 하드코딩 아닌 동적) curl -sL -H "X-Respond-With: screenshot" --max-time 30 \ "https://r.jina.ai/{url}" \ -o "$WORK_DIR/insane-design/{slug}/screenshots/jina-hero.png" # PIL crop (1280×1280 → 1280×800) python3 -c " from PIL import Image img = Image.open('$WORK_DIR/insane-design/{slug}/screenshots/jina-hero.png') w, h = img.size cropped = img.crop((0, 0, w, min(800, h))) cropped.save('$WORK_DIR/insane-design/{slug}/screenshots/hero-cropped.png') " ``` Jina Reader 실패 시 (파일 < 5KB) → Playwright fallback 시도. #### 수집 실패 처리 - HTML 5-tier 전부 실패 → 사용자에게 "접근 불가" 메시지 + 중단 - CSS 0개 → 인라인 `