Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From insane-design
URL 하나로 웹사이트의 실제 CSS를 분석해 디자인 시스템 레퍼런스(design.md)와 인터랙티브 HTML 리포트(report.ko.html)를 생성하는 스킬. "디자인 분석해줘", "이 사이트 디자인 시스템 뽑아줘", "insane-design", "CSS 뜯어봐", "design.md 만들어줘", "레퍼런스 리포트 만들어줘", "사이트 분석", "디자인 토큰 추출", "analyze design", "extract design tokens". Use this skill whenever the user provides a URL and asks about design systems, design tokens, CSS analysis, or wants to replicate a website's look and feel.
How this skill is triggered — by the user, by Claude, or both
Slash command
/insane-design:insane-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> URL 하나 → 실제 CSS 기반 design.md + 인터랙티브 HTML 리포트
examples/adidas/design.mdexamples/adidas/report.ko.htmlexamples/adidas/screenshots/hero-cropped.pngexamples/adobe/design.mdexamples/adobe/report.ko.htmlexamples/adobe/screenshots/hero-cropped.pngexamples/adobe/screenshots/jina-hero.pngexamples/aesop/design.mdexamples/aesop/report.ko.htmlexamples/aesop/screenshots/hero-cropped.pngexamples/aesop/screenshots/jina-hero.pngexamples/airbnb/design.mdexamples/airbnb/report.ko.htmlexamples/airbnb/screenshots/hero-cropped.pngexamples/airbnb/screenshots/jina-hero.pngexamples/apple/design.mdexamples/apple/report.ko.htmlexamples/apple/screenshots/hero-cropped.pngexamples/apple/screenshots/jina-hero.pngexamples/arc/design.mdURL 하나 → 실제 CSS 기반 design.md + 인터랙티브 HTML 리포트
이 문서는 참고 문서가 아니라 실행 지시서다. URL이 제공되면 즉시 Step 1부터 실행한다.
스킬 실행 전 다음 레퍼런스를 필요한 Step에서 읽는다:
${CLAUDE_PLUGIN_ROOT}/skills/insane-design/references/template.md — design.md 19섹션 v3.0 템플릿 (§00~§18) (Step 5에서 Read)${CLAUDE_PLUGIN_ROOT}/skills/insane-design/references/report-prompt.md — HTML 리포트 생성 규칙 v2.1 (Step 6에서 Read)${CLAUDE_PLUGIN_ROOT}/skills/insane-design/references/report.css — canonical CSS (Step 6에서 Read, 있으면 사용)${CLAUDE_PLUGIN_ROOT}/skills/insane-design/references/pitfalls.md — 14가지 함정 (Step 4에서 Read)${CLAUDE_PLUGIN_ROOT}/skills/insane-design/examples/stripe/design.md — 골드 스탠다드 예시 (Step 5에서 참조)${CLAUDE_PLUGIN_ROOT}/skills/insane-design/examples/stripe/report.ko.html — 리포트 골드 스탠다드 (Step 6에서 참조)경로 규칙: 모든 Bash 명령은 반드시 프로젝트 루트에서 실행한다. Step 실행 전
WORK_DIR을 확정하고, 모든 경로를 절대 경로 또는$WORK_DIR기준으로 사용한다. 모든 결과물은insane-design/{slug}/하위에 통합 저장한다.
# Step 0: 프로젝트 루트 확정 (모든 Step에서 공유)
WORK_DIR="$(pwd)" # 사용자의 현재 디렉토리를 프로젝트 루트로 사용
Type: script
URL을 파싱하고 작업 환경을 준비한다.
stripe.com → stripe, linear.app → linear)http:// 또는 https:// 프로토콜 확인localhost, 127.0.0.1, file:// 차단`, $, (, ), ;, |, &, >, < 등 셸 메타문자가 포함되면 거부"$URL"mkdir -p "$WORK_DIR/insane-design/{slug}/{screenshots,css,phase1}"
🎨 {slug} 디자인 분석을 시작합니다.
URL: {url}
예상 소요: 3-5분
Type: script
HTML/CSS와 스크린샷을 병렬로 수집한다.
5-tier fallback 체인으로 HTML 홈페이지를 수집한다:
# Tier 1: curl + Chrome UA (절대 경로)
# ⚠️ URL은 Step 1에서 검증 완료된 값만 사용. 반드시 큰따옴표로 감쌈.
URL="{url}" # Step 1에서 검증된 URL
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 + <html> 태그 존재 + Cloudflare challenge 없음.
실패 시 Tier 2(Mobile UA) → Tier 3(Jina HTML mode: curl -H "X-Return-Format: html" "https://r.jina.ai/$URL") 순서로 시도.
⚠️ 외부 API 고지: Tier 3에서 Jina Reader API(
r.jina.ai)와 Step 2B 스크린샷 수집에서 대상 URL이 외부 서비스로 전송됩니다. 민감한 내부 URL에는 사용하지 마세요.
HTML에서 CSS 링크 추출 + 병렬 다운로드:
# 1. CSS 링크 추출 (상대/절대 URL 모두)
grep -oE 'href="[^"]+\.css[^"]*"' "$WORK_DIR/insane-design/{slug}/index.html" | \
sed 's/href="//;s/"$//' > "$WORK_DIR/insane-design/{slug}/css/_urls.txt"
# 2. 상대 경로 → 절대 URL 변환 후 병렬 다운로드
BASE_URL="{url}" # Step 1에서 검증된 URL
while IFS= read -r css_href; do
# 절대 URL이면 그대로, 상대 경로면 BASE_URL과 결합
case "$css_href" in
http*) abs_url="$css_href" ;;
//*) abs_url="https:$css_href" ;;
/*) abs_url="$(echo "$BASE_URL" | grep -oE 'https?://[^/]+')$css_href" ;;
*) abs_url="$BASE_URL/$css_href" ;;
esac
fname="$(echo "$css_href" | sed 's/[?#].*//' | xargs basename)"
curl -sL --max-time 15 -o "$WORK_DIR/insane-design/{slug}/css/$fname" "$abs_url" &
done < "$WORK_DIR/insane-design/{slug}/css/_urls.txt"
wait
rm -f "$WORK_DIR/insane-design/{slug}/css/_urls.txt"
# Jina Reader API로 스크린샷 캡처
# ⚠️ 프라이버시 고지: 대상 URL이 Jina Reader API (r.jina.ai)로 전송됩니다.
# Jina는 이를 Puppeteer로 렌더링 후 스크린샷을 반환합니다.
# 민감한 내부 URL에는 사용하지 마세요.
# ⏱️ X-Wait-For: 5000 → 페이지 로드 후 5초 대기 (애니메이션/lazy load 완료 보장)
curl -sL \
-H "X-Respond-With: screenshot" \
-H "X-Wait-For: 5000" \
--max-time 45 \
"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 시도:
# Playwright fallback — networkidle 대기 + 추가 3초 딜레이
python3 -c "
from playwright.sync_api import sync_playwright
import time
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
page = browser.new_page(viewport={'width': 1280, 'height': 800})
page.goto('$URL', wait_until='networkidle', timeout=30000)
time.sleep(3) # 애니메이션/lazy load 완료 대기
page.screenshot(path='$WORK_DIR/insane-design/{slug}/screenshots/jina-hero.png')
browser.close()
"
<style> 블록 추출 시도Type: script
CSS에서 디자인 토큰을 추출한다. 4개 스크립트를 $WORK_DIR에서 순차 호출:
cd "$WORK_DIR"
python3 "${CLAUDE_PLUGIN_ROOT}/skills/insane-design/scripts/brand_candidates.py" {slug}
python3 "${CLAUDE_PLUGIN_ROOT}/skills/insane-design/scripts/var_resolver.py" {slug}
python3 "${CLAUDE_PLUGIN_ROOT}/skills/insane-design/scripts/typo_extractor.py" {slug}
python3 "${CLAUDE_PLUGIN_ROOT}/skills/insane-design/scripts/alias_layer.py" {slug}
결과: $WORK_DIR/insane-design/{slug}/phase1/ 에 4개 JSON:
brand_candidates.json — 브랜드 색상 후보 (semantic + selector-role + frequency)resolved_tokens.json — var() 체인 해결된 토큰typography.json — 타이포 스케일 (heading/text/input/quote)alias_layer.json — tier 분류 (util/action/component/core)§11 Layout / §12 Responsive / §13 Components는 스크립트로 추출하지 않는다. 사이트마다 CSS 구조가 완전히 다르므로 범용 파서가 불가능하다. Step 4에서 Claude가 CSS를 직접 읽고 AI 판단으로 분석한다.
CSS custom properties 0개면:
Type: prompt (멀티모달)
Claude가 스크린샷 + 추출 결과 + CSS 원본을 직접 읽고 AI 판정을 수행한다.
insane-design/{slug}/screenshots/hero-cropped.png (또는 jina-hero.png)insane-design/{slug}/phase1/brand_candidates.jsoninsane-design/{slug}/phase1/typography.jsoninsane-design/{slug}/phase1/alias_layer.json${CLAUDE_PLUGIN_ROOT}/skills/insane-design/references/pitfalls.md — 14가지 함정insane-design/{slug}/index.html — HTML 구조 직접 확인 (§11/§13용)insane-design/{slug}/css/ 주요 CSS 파일 — 레이아웃/컴포넌트 직접 분석 (§11/§12/§13용)§11/§12/§13은 스크립트가 아니라 Claude가 직접 CSS를 읽고 분석한다. 사이트마다 클래스명, 레이아웃 방식, 컴포넌트 구조가 전부 다르기 때문에 범용 파서가 아닌 AI 해석이 필요하다. CSS 파일이 너무 크면 (>500KB) 상위 2-3개 파일만 읽되, 주요 패턴을 파악한다.
판정 항목 (16가지) — 🆕 v3.1: BOLD 방향성 4개 추가 (apply Lv3 지원):
| # | 판정 | 출력 |
|---|---|---|
| 1 | Brand color 확정 | hex (예: #533AFD) |
| 2 | Light/Dark 테마 | light / dark / mixed |
| 3 | Custom font 식별 | sohne-var = 유료, Inter = 오픈 등 |
| 4 | Framework 식별 | Next.js + HDS, Tailwind v4 등 |
| 5 | Hero anatomy 서술 | "2-column, gradient flame bg" 등 |
| 6 | Quick Start "절대 하지 말 것" | 가장 치명적인 한 가지 |
| 7 | DO/DON'T | 각 4~8 항목 (색상 DON'T는 hex 명시 강제) |
| 8 | §00 Visual Theme & Atmosphere | 3~5문단 서술 + BOLD Direction Summary 블록 |
| 9 | §11 Layout Patterns 분석 | Grid, Hero(+Pattern Summary, BG Treatment), Section, Card, Nav 구조 |
| 10 | §12 Responsive Behavior | 브레이크포인트, 터치 타겟, 접기 전략 |
| 11 | §13 Components 확장 | 카드, 네비, 인풋, 히어로 컴포넌트 |
| 12 | §17 Agent Prompt Guide | Quick Color Reference + 프롬프트 예시 |
| 13 | 🆕 BOLD 방향성 | 1~2 단어 (예: Industrial Minimalism, Refined SaaS) |
| 14 | 🆕 Aesthetic Category | redesign-aesthetics.md §3 12가지 중 1개 |
| 15 | 🆕 Signature Element | hero_impact / typo_contrast / section_transition / minimal_extreme |
| 16 | 🆕 Code Complexity | low / medium / high / very_high + 근거 한줄 |
${CLAUDE_PLUGIN_ROOT}/skills/insane-apply/references/redesign-aesthetics.md §3을 먼저 Read.
판정 #13 (BOLD 방향성) 결정 알고리즘:
1. 채도 측정: brand_candidates.json 최빈 chromatic hex의 HSL 채도(%)
2. 레이아웃 밀도: §11 grid-columns × card-count 추산 (low / medium / high)
3. 톤 키워드: §00 1문단의 핵심 단어 (warm / cool / neon / monochrome / industrial)
매핑 규칙:
- 채도 <15% + 밀도 낮음 → "Industrial Minimalism" / "Monochrome Luxury"
- 채도 <15% + 밀도 높음 → "Brutalist Raw" / "Cool Productivity"
- 채도 50-80% + 밀도 낮음 → "Refined SaaS" / "Friendly Fintech"
- 채도 >80% + 밀도 높음 → "Playful Gradient" / "Maximalist Chaos"
- warm 키워드 + 낮은 채도 → "Warm Productivity" / "Editorial Magazine"
- neon 키워드 + dark 테마 → "Retro-Futuristic"
- pastel 키워드 → "Soft Pastel"
12가지 중 가장 부합하는 1개 선택. 두 가지 사이면 더 극단적인 것.
판정 #15 (Signature Element) 결정 기준:
| Signature | 적용 조건 |
|---|---|
hero_impact | Hero가 100vh 풀스크린, 큰 H1, 강한 contrast (Apple, Tesla) |
typo_contrast | display vs body 10배 이상 사이즈 차이 (Stripe, Editorial Magazine) |
section_transition | 섹션마다 배경 톤 drastic 변화 (Notion, Discord) |
minimal_extreme | 장식 완전 제거, 색 3개 이내 (Vercel, Brutalist) |
판정 #16 (Code Complexity) 결정 기준:
| Complexity | 미학 예시 | 근거 |
|---|---|---|
low | Refined Minimalism, Brutalist | CSS 변수 + 1개 transition + 절제된 hover |
medium | Industrial Minimalism, Editorial | + staggered reveal, IntersectionObserver |
high | Playful Gradient, Refined SaaS | + 다층 그라디언트, hover bounce, 풍부한 transitions |
very_high | Maximalist Chaos | + parallax, scroll-triggered, particle, custom cursor |
Step 5 WRITE-MD에서:
bold_direction, aesthetic_category, signature_element, code_complexity) 채움### BOLD Direction Summary 블록 4줄 추가스크린샷 + tokens.json(brand_candidates, typography, alias_layer) 기반으로 브랜드 분위기와 디자인 철학을 3~5문단으로 서술한다.
작성 구조:
Key Characteristics 리스트 포함: 핵심 시각적 특징 5~8가지를 불릿으로 나열.
HTML 구조 + CSS를 분석하여 다음 항목을 추출:
분석 소스:
<section>, <nav>, <header>, <main>, <article> 태그 구조max-width, display: grid, display: flex, grid-template-columns 속성padding, margin, gap 값에서 섹션 리듬 파악CSS에서 @media 쿼리를 추출하여 다음을 파싱:
min-width / max-width 값 수집 → Name/Value/Description 테이블max-width: 100%, object-fit, aspect-ratio 처리분석 소스:
@media (min-width: ...) / @media (max-width: ...) 블록min-width 우세 → 모바일 퍼스트)기존 Buttons/Badges 외에 추가 분석:
각 컴포넌트: BEM 클래스명 + HTML 마크업 + spec 표 + 상태별(hover/active/focus) 값
분석된 토큰을 바탕으로 자동 생성:
색상 관련 DON'T 항목은 반드시 구체 hex를 포함해야 한다. apply 스킬의 Step 3 자동 위반 검증이 hex를 grep 패턴으로 사용하기 때문.
❌ 잘못된 작성 (apply가 검증 불가):
✅ 올바른 작성 (apply가 grep 가능):
#FFFFFF 또는 white로 두지 말 것 — 대신 #F4F4F4 사용"#000000 또는 black으로 두지 말 것 — 대신 #1D1D1F 사용"font-weight: 400 사용 금지 — Stripe는 300이 맞다"작성 패턴:
"X를 [금지 hex/값]으로 두지 말 것 — 대신 [올바른 hex/값] 사용"
apply가 자동 grep 하는 패턴 예시:
background:\s*(#fff|#FFFFFF|white) → 위반 알림color:\s*(#000|#000000|black) → 위반 알림body[^{]*\{[^}]*font-weight:\s*400 → 위반 알림비-색상 DON'T (구조적 금지)는 자유 형식:
brand_color는 아래 우선순위로 결정한다:
| 우선순위 | 소스 | 예시 |
|---|---|---|
| 1 | CTA/primary button의 background-color | Stripe #533AFD, Toss #3182F6 |
| 2 | CSS 토큰에서 brand/primary/accent 이름을 가진 변수 | --hds-color-core-brand-600 |
| 3 | chromatic hex 빈도 상위 (neutral/white/black 제외) | brand_candidates.json의 chromatic 1위 |
| 4 | 공식 로고 색 (위 3가지가 모두 불명확할 때만) | — |
brand_color가 될 수 없는 것:
#000000, #FFFFFF 또는 near-black/near-white (채도 < 5%) — 이들은 neutral이지 brand가 아님#1d1c1b 같은 본문 색)Dual-anchor 사이트 (light hero와 dark section에 서로 다른 accent가 있는 경우):
채도 있는 컬러가 거의 없는 사이트 (Figma, Vercel, Warp 등):
color_system: monochrome 추가#000000 사용하되, §01 Quick Start에 "이 사이트는 monochrome 디자인" 명시원칙 3가지 (절대 위반 금지):
color-brand 같은 가상 이름 금지Type: generate
design.md를 생성한다.
${CLAUDE_PLUGIN_ROOT}/skills/insane-design/references/template.md — 19섹션 v3.0 (§00~§18)${CLAUDE_PLUGIN_ROOT}/skills/insane-design/examples/stripe/design.md — 골드 스탠다드 (구조 참조)insane-design/{slug}/design.md필수 사항:
--- 블록)v3 섹션 번호 매핑 (§00~§18):
| § | 섹션 | 필수 |
|---|---|---|
| 00 | Visual Theme & Atmosphere | ✅ |
| 01 | Quick Start | ✅ |
| 02 | Provenance | ✅ |
| 03 | Tech Stack | ✅ |
| 04 | Font Stack | ✅ |
| 05 | Typography Scale | ✅ |
| 06 | Colors | ✅ |
| 07 | Spacing | ✅ |
| 08 | Radius | ✅ |
| 09 | Shadows | ⭕ |
| 10 | Motion | ⭕ |
| 11 | Layout Patterns | ✅ |
| 12 | Responsive Behavior | ⭕ |
| 13 | Components | ✅ |
| 14 | Content / Copy Voice | ⭕ |
| 15 | Drop-in CSS | ✅ |
| 16 | Tailwind Config | ⭕ |
| 17 | Agent Prompt Guide | ✅ |
| 18 | DO / DON'T | ✅ |
Type: generate
report.ko.html을 생성한다.
${CLAUDE_PLUGIN_ROOT}/skills/insane-design/references/report-prompt.md — 생성 규칙 v2.1 (v3 섹션 매핑 포함)${CLAUDE_PLUGIN_ROOT}/skills/insane-design/references/report.css — canonical CSS (있으면 사용, 없으면 Stripe report에서 추출)${CLAUDE_PLUGIN_ROOT}/skills/insane-design/examples/stripe/report.ko.html — 골드 스탠다드 (CSS/JS/구조 복사)insane-design/{slug}/design.md — 데이터 소스<style> 블록 + JS 구조를 기반으로, 토큰/섹션만 현재 서비스로 교체insane-design/{slug}/report.ko.htmlv3 → report 섹션 매핑 (template.md 주석 참조):
필수 사항:
--brand-color 만 서비스별로 교체screenshots/hero-cropped.png hero 섹션에 삽입Type: script + review
생성 결과를 검증한다.
# 1. YAML frontmatter 맨 위
head -1 insane-design/{slug}/design.md | grep -q '^---$'
# 2. 필수 섹션 존재 (v3: §00~§18)
for n in 00 01 02 03 04 05 06 07 08 11 13 15 17 18; do
grep -q "^## $n\." insane-design/{slug}/design.md || echo "Missing §$n"
done
# 3. 파일 크기
[ $(wc -c < insane-design/{slug}/design.md) -ge 8000 ]
[ $(wc -c < insane-design/{slug}/report.ko.html) -ge 20000 ]
# 4. hex 실존 (상위 3개)
for hex in $(grep -oE '#[0-9A-Fa-f]{6}' insane-design/{slug}/design.md | sort -u | head -3); do
grep -qi "$hex" insane-design/{slug}/css/*.css || echo "Missing: $hex"
done
실패 시: 최대 2회 재생성 (실패 항목만 수정). 2회 후에도 실패면 경고 포함 출력.
성공 시:
✅ {slug} 분석 완료!
📄 design.md: insane-design/{slug}/design.md ({size}KB)
🌐 report.ko.html: insane-design/{slug}/report.ko.html ({size}KB)
📸 screenshot: insane-design/{slug}/screenshots/hero-cropped.png
design.md를 Claude Code에 첨부하면 이 사이트 스타일로 UI를 만들 수 있습니다.
report.ko.html을 브라우저에서 열면 인터랙티브 디자인 리포트를 볼 수 있습니다.
| 파일 | 용도 | 참조 Step |
|---|---|---|
references/architecture.md | 전체 시스템 아키텍처 (Phase 1~6, 스크립트/AI 분담, 파일 구조) | 전체 |
references/data-collection.md | 5-tier fallback 수집 전략 + Jina Reader 스크린샷 상세 | Step 2 |
references/methodology.md | 분석 5단계 프로세스 + 서비스당 체크리스트 | 전체 |
references/workflow.md | 서비스당 절차 상세 (소요 시간, 섹션별 데이터 소스) | 전체 |
references/template.md | design.md 19섹션 템플릿 v3.0 (§00~§18, YAML frontmatter, 필수/선택 섹션, N/A 규칙) | Step 5 |
references/report-prompt.md | HTML 리포트 생성 규칙 v2.1 (v3 섹션 매핑, 인터랙티브 요소, 한글 네이밍) | Step 6 |
references/report.css | canonical CSS (리포트 공통 스타일시트, 있으면 사용) | Step 6 |
references/pitfalls.md | 35개 서비스 분석에서 발견된 14가지 함정 (가상 토큰명, 리브랜딩, light/dark 역전 등) | Step 4 |
scripts/brand_candidates.py — CSS에서 브랜드 색상 후보 추출 (semantic + selector-role + frequency)scripts/var_resolver.py — CSS var() 체인 재귀 해결scripts/typo_extractor.py — 타이포그래피 스케일 추출scripts/alias_layer.py — 시멘틱 alias tier 분류 (util/action/component/core)scripts/capture_jina_screenshots.py — Jina Reader API 스크린샷 + PIL cropexamples/stripe/design.md — Stripe 골드 스탠다드 (25KB, 16섹션)examples/stripe/report.ko.html — Stripe HTML 리포트 골드 스탠다드 (74KB)| 설정 | 기본값 | 변경 방법 |
|---|---|---|
| 리포트 언어 | 한국어 (report.ko.html) | Step 6에서 영어 전환 가능 |
| 스크린샷 | Jina Reader + PIL crop | Playwright fallback 자동 |
| design.md 파일명 | design.md | Step 5에서 변경 가능 |
| 출력 경로 | insane-design/{slug}/ | Step 1에서 변경 가능 |
npx claudepluginhub kanjseok/fivetaku-insane-designGuides collaborative design exploration before implementation: explores context, asks clarifying questions, proposes approaches, and writes a design doc for user approval.
Creates structured, bite-sized implementation plans from specs or requirements before writing code. Useful for breaking down multi-step tasks into testable steps with file structure and task boundaries.
Implements work from a spec or tickets using TDD at agreed seams, with regular typechecking and test runs, followed by code review.