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/design.md

@@ -0,0 +1,91 @@
+# design.md — Pulsegate
+
+이 프로젝트를 다음에 이어받는 사람(또는 에이전트)이 읽는 파일이다. **여기 적힌 결정을 designpaca 기본값보다 우선한다.**
+
+## 브리프 3줄
+```
+무엇을:  API 모니터링 SaaS "Pulsegate" 랜딩 페이지 (단일 페이지)
+누구에게: 백엔드/SRE 엔지니어. Datadog·Grafana 사용 중. 가격과 셋업 시간에 민감. 목표는 무료 체험 가입
+제약:    영어 / React + Vite / 다크·라이트 둘 다 / 제품 스크린샷 있음 / 성능 예산 스킬 기본값
+```
+
+## 레퍼런스
+| 슬롯 | 사이트 | 가져온 것 |
+|---|---|---|
+| R1 구조 | https://www.checklyhq.com | 컨테이너 폭, 여백 리듬(섹션:요소 = 1:4), 히어로에 실행 가능한 명령을 두는 관행 |
+| R2 톤 | https://fitzcarraldoeditions.com | 강조색을 **링크 글자에만** 쓰는 규율, 전면 세리프, radius 2~5px |
+| R3 디테일 | https://tympanus.net/codrops/2026/05/21/creating-scroll-driven-svg-map-animations-with-gsap/ | 스크롤-진행도 바인딩 개념 (**최종 미채택** — 하드게이트 #8 위반) |
+
+## 한 문장 컨셉
+**야간 당직실의 계기판 — 읽히도록 어둡고, 출판물처럼 조판된.**
+
+## 프리셋
+`dark-instrument`.
+
+**다크를 기본으로 삼은 근거** (프리셋이 요구하는 정당화):
+1. 청중이 온콜 SRE다 — 어두운 환경에서 본다
+2. 제품 스크린샷이 다크 대시보드다 — 라이트 랜딩이면 스크린샷이 뜬다
+
+라이트는 파생물이 아니라 **동등한 정의**로 작성했다(`tokens.css`에 값이 따로 있다).
+적용 규칙: OS가 라이트를 선호하면 라이트, 그 외 다크. 토글이 있으면 토글이 이긴다.
+
+## 감수한 리스크 하나
+> **주 CTA에 강조색을 쓰지 않는다.** 잉크 반전(밝은 표면 + 어두운 글자)으로만 만들고, 코발트는 인라인 링크와 데이터 축에만.
+
+- 철회 조건: 회색조 위계에서 CTA가 3위 밖으로 밀리면 즉시 강조색 투입
+- 5단계 검사 결과 CTA는 2위 유지 → **철회하지 않음**
+
+## 토큰
+전문은 `hero/src/styles/tokens.css`. 요약:
+- **타입**: 본문 스케일 비율 **1.250 / 5단계**(13·16·20·25·31). 디스플레이 2개는 **스케일 밖**(`--display-1` 44→64, `--display-2` 32→40). h1÷본문 = **4.0배**
+- **폰트**: Newsreader(디스플레이) / IBM Plex Sans(본문) / IBM Plex Mono(코드·수치)
+- **색**: surface 2단계 + ink 2단계 + line + accent 1개(코발트) + 상태 3색. 다크·라이트 각각 정의
+- **간격**: 4px 그리드, `--space-1`~`8`, `--container: 70rem`
+- **형태**: radius 2px / 4px **2종만**. 그림자 없음(표면 톤 차이로 깊이)
+- **모션**: `tokens.md` 값 그대로
+
+## 성능 예산과 실측
+예산 원본은 `tokens.md` §5. 실측은 `05-preflight.md` §2.
+
+| 항목 | 예산 | 실측 |
+|---|---|---|
+| 총 전송량 (첫 화면) | 1MB | **12.4KB** |
+| WebGL 추가분 | +200KB | **0KB** |
+| CLS | 0.1 | 구조적 0 (`aspect-ratio` + `width/height`) |
+| **JS gzip** | 150KB | **미측정** |
+| **LCP / 첫 인터랙션** | 2.5초 / 3초 | **미측정** |
+| 폰트 파일 | 2개 이하 | **3종 (초과)** — 디스플레이는 h1 전용 서브셋, Mono는 400 단일 웨이트 |
+
+## 채택한 이펙트와 그 폴백
+| 이펙트 | 폴백 |
+|---|---|
+| SVG 필터 | **미채택.** `dark-instrument`는 그레인 금지, "재질을 거의 안 쓴다" |
+| three.js / WebGL | **미채택.** `three.md` §0 게이트 조건 1에서 탈락 — 필요한 것이 플랫 표면과 SVG 선뿐이라 CSS로 충분 |
+| 모션 | **거의 없음.** CTA·버튼 hover의 `translateY(-1px)`만. `prefers-reduced-motion`에서 1ms로 축소 |
+| 테마 토글 | JS 실패 시 OS 설정을 따르는 CSS 경로가 그대로 남는다 |
+| 복사 버튼 | JS 실패 시 명령 텍스트가 선택 가능한 `<code>`로 남는다 |
+
+## 미확정 — 다음 사람이 채워야 할 것
+- `{{REGION_COUNT}}` — 실제 리전 수. **지어내지 않았다**(하드게이트 #11)
+- 과금 모델("호스트 무료, 체크 과금")이 실제 제품 사실인지 확인 필요. 헤드라인 전체가 여기 걸려 있다
+- 제품 스크린샷 실제 파일 (`/product-checks.png`가 placeholder)
+- 빈 상태·오류 상태·로딩 상태
+- 2~6번 섹션 (반론 처리 → 실제 화면 → 가격 → 마이그레이션 → 최종 CTA)
+
+## 의도적으로 하지 않은 것과 그 이유
+**이 절이 가장 중요하다. 적어두지 않으면 다음 사람이 "빠뜨린 것"으로 착각하고 되돌린다.**
+
+| 안 한 것 | 이유 |
+|---|---|
+| **로고월** | 검증 가능한 고객 실명이 없다. `antipatterns.md` §4 — 회색조 로고 일렬은 신뢰를 깎는다 |
+| **후기 섹션** | 실명·직함·원문 링크가 없다. 없으면 넣지 않는다 |
+| **FAQ** | 실제로 받은 질문이 없다. 가상 질문 FAQ는 지문이다 |
+| **3열 피처 카드** | `antipatterns.md` §3 — 콘텐츠가 3개여서가 아니라 3이 예쁘게 떨어져서 3인 것 |
+| **지표 배너** (`99.9% uptime` 등) | 브리프가 수치를 주지 않았다. 하드게이트 #11 |
+| **펄스 상태 점** | 모니터링 제품의 최대 유혹. 정적 정보에 장식 애니메이션은 금지 |
+| **터미널 목업 div** | 하드게이트 #12. 실제 스크린샷을 쓴다 |
+| **스크롤 애니메이션** | R3에서 가져오려 했으나 `stroke-dashoffset` 애니메이션이 하드게이트 #8(transform/opacity만) 위반. GSAP 60KB도 예산의 40% |
+| **Inter** | R1(Checkly)이 Inter지만 `antipatterns.md` §2가 "이유 없는 Inter"를 금지 |
+| **CTA 2개 나란히** | 주 행동을 정하지 못했다는 신호. 보조는 텍스트 링크로 격하 |
+
+> 근거: research/dogfood-saas/01~05 (작업일 2026-08-20)