designpaca 초기 구현 — 스킬 · 설치 CLI · 배포 파이프라인

웹 디자인 파이프라인 스킬과 이를 5개 에이전트에 설치하는 CLI 를 담은 모노레포.

스킬 (packages/skill)
- SKILL.md 261줄 + 참조 문서 16개 3,349줄. progressive disclosure 로
  본문은 절차와 인덱스만, 지식은 references/ 로 분리
- 0~6단계 파이프라인. 규모에 따라 전체·연장·국소 세 경로로 분기
- 하드 게이트 12개는 grep·카운트로 검증 가능한 것만. 취향 판단은 제외
- 미학 프리셋 5종, AI 슬롭 지문 목록, 한글 조판 규칙,
  SVG 필터·three.js·인터랙티브 모션·HTML-in-Canvas 실전 지침

설치 CLI (packages/cli, packages/core)
- npx designpaca 온보딩 TUI. Claude Code · Codex · Cursor · Windsurf · AGENTS.md
- 매니페스트에 설치 시점 해시를 기록해 사용자가 고친 파일은 update 가 건너뛴다
- 타깃별로 본문의 references/ 경로를 실제 설치 위치로 재작성
- AGENTS.md 는 항상 로드되므로 본문 대신 303자 포인터만 주입
- Windsurf 는 12,000자 상한 초과 시 설치를 차단

배포 (build/ci, .forgejo/workflows)
- 태그 v* → 검사·테스트·빌드 → npmjs 배포 + Forgejo 레지스트리 미러
  → draft 릴리스 → Cloudflare Pages. 재실행 멱등

근거 (research/)
- 약 250개 웹 소스 조사 결과와 도그푸딩 검증 2건. 스킬의 모든 수치는 여기서 나온다

테스트 22개 통과 (core 16 · cli 6)

research/dogfood-saas/01-references.md

@@ -0,0 +1,82 @@
+# 1단계 — 레퍼런스 조사 (Pulsegate)
+
+## 브리프
+백엔드/SRE 엔지니어가 **무료 체험에 가입**하게. 느낌은 **정밀한, 절제된**.
+
+---
+
+## R1 · 구조 — Checkly  https://www.checklyhq.com
+같은 업종(합성 모니터링 SaaS). 라우팅 표의 Refero/Land-book이 모두 막혀 원본 사이트로 직행함.
+
+- **가져올 축**: 축 1(그리드), 축 4(여백 리듬), 축 6(시선 흐름)
+- **그리드**: 컨테이너 1232px (뷰포트 1440 대비 86%) / 본문 컬럼 450px / 내부 분할 584·672·745px
+- **여백**: 섹션 상하 `96/64` `80/80` `64/80` `48/48` — 4종. 섹션 간 80 : 요소 간 16~24 ≈ **1:4**
+- **타입(참고용)**: h1 48px / 본문 16px → **최대÷본문 = 3.0배 → 4배 미만, 위계가 약한 레퍼런스**
+- **시선 흐름**: 수직 낙하. h1 → 서브카피 → CTA 2개(`Book a demo` + `Start for free`) → 터미널 스니펫 `npx checkly init` → 로고월
+- **6축 밖의 관측**
+  - 히어로에 **실행 가능한 명령어**를 배치한다(`npx checkly init`). 스크린샷보다 강한 "셋업 시간" 증거다
+  - 온보딩 섹션이 **시간 눈금**으로 되어 있다(`Day 1 0:00 / 0:05 / 0:15`). 소요 시간을 주장 대신 구조로 보여준다
+  - radius 어휘 **9종**(2·4·6·8·12·16·9999·50%·복합) → antipatterns 4장 "radius가 결정이 아님"에 해당. 가져오지 않는다
+  - CTA가 12종. 주 행동이 흐려져 있다
+- **변형**: 컨테이너를 **1232 → 1120**으로 축소하고 본문 컬럼을 **450 → 640px**로 넓힌다. Checkly의 450px는 16px 본문에서 한 줄 55자 내외라 짧고, 우리 카피는 조건절이 길다
+
+---
+
+## R2 · 톤 — Fitzcarraldo Editions  https://fitzcarraldoeditions.com   [업종: 독립 출판사 — R1과 다름 ✓]
+Klim(타입 파운드리)에서 출발했으나 페이지가 자동 이탈해 이 사이트의 값을 측정하게 됨(→ FINDINGS D-2).
+reference-method.md §1이 예시로 든 "SaaS 구조 + 독립 출판사 톤" 조합에 정확히 해당해 그대로 채택.
+
+- **가져올 축**: 축 3(컬러 역할), 축 2(타입 스케일)
+- **컬러 역할**: surface 2단계(`#FFFFFF` / `#FBFBFB`) · text 3단계(`rgb(21,27,35)` 잉크 / `rgb(102,102,102)` 보조 / `rgb(54,54,54)`) · **강조 1색 `rgb(0,51,160)` 코발트 블루**, 등장 45회지만 전부 **링크 텍스트** — 즉 강조가 면적이 아니라 **글자**로만 존재한다
+- **타입**: 패밀리 2개(`adobe-caslon-pro` + `kings-caslon`) — **전면 세리프**. 크기 5단계(15/16/18/20.8/22). 최대÷본문 = **1.375배**
+- **여백/형태**: radius 2·3·4·5px — **작고 4종**. 본문 컬럼 522px
+- **6축 밖의 관측**
+  - **강조색을 배경으로 절대 쓰지 않는다.** 파랑은 오직 링크. "강조색을 지우면 여전히 읽히는가?" → 읽힌다
+  - 위계를 크기가 아니라 **서체 성격과 여백**으로 만든다. 1.375배라는 평평한 스케일이 성립하는 이유
+- **변형**: 타입 스케일을 **1.375배 → 1.333 비율 5단계(최대÷본문 3.2배)**로 벌린다. 출판사는 목록을 훑게 하지만 우리는 **하나의 CTA로 떨어뜨려야** 하므로 위계가 더 필요하다. 세리프는 디스플레이에만 쓰고 본문은 산세리프로(코드·수치 가독성)
+
+---
+
+## R3 · 디테일 — Codrops «Creating Scroll-Driven SVG Map Animations with GSAP»
+https://tympanus.net/codrops/2026/05/21/creating-scroll-driven-svg-map-animations-with-gsap/
+
+- **가져올 축**: 축 5(모션 언어) — R3는 이 축만 채운다
+- **모션**: 스크롤 진행도에 SVG `path`의 그리기 진행(`drawSVG`)을 바인딩하고, 점이 경로를 따라 이동. 뷰포트가 점을 추적하며 `scale 2.5 → 4`
+- **원문 값**: `scrub: 1` / `pin` / `duration: 1` / `ease: 'expo'` (추적), `ease: 'power1.inOut'` (줌)
+- **구현 제약**
+  - 원문은 `gsap` + `ScrollTrigger` + `DrawSVGPlugin` + `MotionPathPlugin` — **4개 합계 약 60KB(gzip)**. 히어로 JS 예산 150KB의 **40%**
+  - `pin`은 레이아웃을 `transform`으로 고정한다. 모바일 주소창 리사이즈에서 재계산이 필요하고 `ScrollTrigger.refresh()`를 폰트 로드 후 호출해야 한다
+  - 원문에 성능·브라우저 지원 언급 **없음**(→ FINDINGS D-4). 아래 제약은 내가 판정한 것
+- **변형**: GSAP을 쓰지 않고 **CSS `animation-timeline: view()` + `stroke-dashoffset`**으로 대체한다. JS 0KB. 미지원 브라우저에서는 경로가 처음부터 그려진 상태로 남아 정보 손실이 없다. 이유: 60KB를 "장식 모션 하나"에 쓰면 셋업 시간을 파는 제품의 페이지가 스스로를 반증한다
+
+---
+
+## 회색조 위계
+색을 전부 제거했을 때 가장 강한 덩어리는 **h1(셋업 시간 주장)**, 두 번째는 **터미널 설치 명령 블록**, 세 번째는 **주 CTA 버튼**.
+
+비즈니스 우선순위 [1 무료 체험 가입 / 2 셋업이 짧다는 증거 / 3 가격 투명성]와 **일치하지 않는다.**
+→ 조정: CTA를 두 번째로 올리고 명령 블록을 세 번째로 내린다. **크기·굵기·여백으로 조정하고 색은 쓰지 않는다.** 명령 블록은 배경 톤만 다르게 하고 테두리·그림자를 주지 않는다.
+
+수정 후: **h1 → CTA → 명령 블록** = [1/2/3]과 일치.
+
+---
+
+## 안 할 것 (antipatterns.md 중 이 브리프에 특히 위험한 것)
+
+1. **§1 「네온 온 다크」** — "게이밍·개발자 툴 브리프가 아닌데 나오면 즉시 티가 남". 우리는 개발자 툴이라 면책 대상처럼 보이지만, 그게 정확히 관성이다. 발광 대신 **명도 차이로만** 위계를 만든다
+2. **§4 「펄스 애니메이션 상태 점」** — 모니터링 제품의 최대 유혹. "All systems operational" 옆 깜빡이는 초록 원. **상태가 실제로 바뀔 때만** 쓴다. 랜딩의 정적 목업에는 넣지 않는다
+3. **§2 「모노스페이스를 장식으로」** — 터미널 미학을 흉내내려 라벨까지 mono로 가는 것. **코드·데이터·식별자에만** 쓴다
+4. **§6 「모든 숫자가 어림수」** — `99.9% uptime`, `10,000+ users`. Checkly도 `20+`, `10x`를 쓴다. 우리는 **측정 조건이 붙은 정확한 수치**만 쓴다
+5. **§3 「표준 골격」** — 히어로 → 3열 피처 → 로고월 → 요금제 → FAQ. Checkly가 거의 이 순서다. 섹션 순서를 **설득 논리**로 재배열한다
+6. **§4 「요금제 3열 + Most popular 배지」** — 가격 민감 청중이라 요금 섹션이 필수인데, 가장 재현율 높은 템플릿이다. 비교 표나 단일 가격으로 간다
+
+---
+
+## 검증 조건 자가 확인
+- [x] R1/R2/R3 각각 원본 사이트 URL 있음 (갤러리 URL 아님)
+- [x] R2 업종이 R1과 다름 (모니터링 SaaS ↔ 독립 출판사)
+- [x] 각 슬롯에 가져올 축 명시
+- [x] 각 슬롯에 변형 1개와 이유
+- [x] 6축에 숫자 있음 — **§5 computed style을 R1·R2 모두 실행함** (Playwright)
+- [x] R3에 구현 제약 있음 (단, 원문이 아니라 내가 판정)
+- [x] 회색조 위계 — 불일치를 발견하고 조정안을 적음