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)
2026-08-20 10:48:00 +09:00 · 2026-08-20 10:48:00 +09:00 · 8808c672dc
commit 8808c672dc
135 changed files with 38838 additions and 0 deletions
--- a/packages/skill/references/presets/README.md
+++ b/packages/skill/references/presets/README.md
@ -0,0 +1,17 @@
+# presets — 미학 프리셋
+
+2단계에서 읽는다. **하나를 고르고, 왜 그것인지 한 줄로 적는다.**
+
+프리셋은 템플릿이 아니라 **결정의 출발점**이다. 그대로 쓰면 그 프리셋의 평균이 나온다.
+1단계 레퍼런스 R2(다른 업종의 톤)를 여기에 섞어야 이 브리프만의 것이 된다.
+
+| 프리셋 | 한 줄 | 언제 |
+|---|---|---|
+| [editorial](editorial.md) | 잡지의 여백과 세리프 | 콘텐츠가 주인공. 브랜드·미디어·포트폴리오·럭셔리 |
+| [swiss-minimal](swiss-minimal.md) | 그리드와 침묵 | 제품이 복잡할 때. B2B·도구·문서 |
+| [anti-grid](anti-grid.md) | 의도적으로 깨진 격자 | 기억되어야 할 때. 에이전시·아트·캠페인 |
+| [dark-instrument](dark-instrument.md) | 계기판처럼 정확한 | 개발자·데이터·기술 제품 |
+| [quiet-commerce](quiet-commerce.md) | 읽히는 커머스 | 전환이 목적인 B2C. 상품 수가 적고 사양이 설득의 주체 |
+
+**어느 것도 맞지 않으면 새로 정의해라.** 브리프가 프리셋보다 우선한다.
+새로 정의할 때도 이 문서들의 항목 구조(타이포/색/간격/재질/모션/실패)는 그대로 채워야 한다.
--- a/packages/skill/references/presets/anti-grid.md
+++ b/packages/skill/references/presets/anti-grid.md
@ -0,0 +1,58 @@
+# 프리셋: anti-grid — 의도적으로 깨진 격자
+
+> 한 문장: **기억되는 것이 목적일 때.** 규칙을 알고 나서 깬다.
+
+벤토 그리드가 표준화되자 그 반작용으로 부상한 방향이다. 2026년 현재 **실제로 작동하는 차별화 수단**이다.
+
+## 언제 고르나
+
+- 에이전시·스튜디오 자사 사이트, 아트/문화 프로젝트, 캠페인, 음악·패션
+- 클라이언트가 "안전한 것 말고"를 명시적으로 요구했을 때
+- **쓰지 마라**: 전환이 목적인 커머스, B2B SaaS 구매 경로, 접근성 요구가 엄격한 공공. 이 프리셋은 읽기 비용을 높인다
+
+## 결정
+
+### 타이포그래피
+- **모노스페이스 또는 개성 강한 그로테스크**를 주역으로
+- 크기 대비를 극단적으로 — 비율 1.618 이상, 또는 스케일을 아예 무시하고 두세 개 크기만 극단적으로 배치
+- 대문자·자간 확대·세로쓰기 같은 장치를 **하나만** 쓴다. 셋을 동시에 쓰면 아마추어
+- **전체 대문자 헤드라인은 검출률 2위 슬롭 지문**이다. 쓰려면 이유가 있어야 하고, 짧아야 한다(한 줄 이내)
+
+| 슬롯 | 무료 | 유료 | 한글 |
+|---|---|---|---|
+| 디스플레이 | Karrik, Basteleur, Terminal Grotesque (Velvetyne) | Right Grotesk | 제주명조, 여기어때 잘난체 |
+| 본문 | Work Sans, Archivo | Neue Montreal | Pretendard |
+
+### 색
+- 원색 또는 극단적 대비. 중간 톤을 피한다
+- 배경색 자체를 강한 색으로 쓰는 것을 검토 (흰 배경이 기본값이라고 가정하지 마라)
+- **단, 색은 두 개까지.** 무지개는 브루탈리즘이 아니라 혼돈이다
+
+### 간격
+- 격자를 **정의한 뒤에 깬다.** 그리드 없이 배치하면 깨진 게 아니라 그냥 엉망이다
+- 요소를 겹치게(`z-index`, 음수 마진) 배치 — 단 겹침이 읽기를 방해하면 실패
+- 화면 밖으로 흘려보내기, 극단적 여백과 극단적 밀집을 한 페이지에 공존시키기
+
+### 재질 (`svg-filters.md`)
+- 거친 질감이 어울린다: **강한 그레인, 리소그래프 인쇄, 잉크 번짐(`feTurbulence` + `feDisplacementMap`)**
+- 크로마틱 애버레이션을 호버에 얹기
+- 매끄러운 유리·글로우는 이 프리셋의 반대편이다
+
+### 모션 (`motion.md`)
+- 갑작스럽게. `steps()` 이징, 짧고 각진 전환
+- 커서 인터랙션(마그네틱, 왜곡)이 잘 맞는다
+- **`prefers-reduced-motion` 대응이 특히 중요하다.** 이 프리셋의 모션은 강해서 어지러움을 유발하기 쉽다
+
+## 흔한 실패
+
+1. **그리드를 정의하지 않고 시작** → 깬 게 아니라 못 맞춘 것으로 보인다
+2. **읽을 수 없게 만들고 "의도"라고 함** → 브루탈리즘도 읽혀야 한다. 히어로 메시지는 반드시 읽혀야 한다
+3. **장치를 전부 동원** → 대문자 + 자간확대 + 겹침 + 회전 + 그레인 = 소음
+4. **접근성 포기** → 포커스 링과 대비는 이 프리셋에서도 지킨다
+5. **B2B 브리프에 적용** → 프리셋 선택 자체가 실패
+
+## 리스크 후보
+
+- 히어로 텍스트를 화면 밖으로 절반 흘려보내기
+- 스크롤에 따라 그리드 자체가 재배치되기
+- 배경을 원색 하나로 덮고 이미지를 흑백으로
--- a/packages/skill/references/presets/dark-instrument.md
+++ b/packages/skill/references/presets/dark-instrument.md
@ -0,0 +1,62 @@
+# 프리셋: dark-instrument — 계기판처럼 정확한
+
+> 한 문장: **정밀함이 곧 신뢰인 화면.** 어둡되 분위기가 아니라 기능으로 어둡다.
+
+## 언제 고르나
+
+- 개발자 도구, 인프라, 데이터/모니터링, 보안, 금융 트레이딩
+- 사용자가 이 화면을 **오래 본다**는 전제가 있을 때
+- **쓰지 마라**: 다크가 "멋있어서" 고르는 경우. **다크 기본값은 단일 슬롭 시그니처 1위다.** 이유를 댈 수 없으면 라이트로 가라
+
+### 다크를 정당화하는 이유의 예
+- 사용자가 어두운 환경(야간 운영, 스튜디오)에서 본다
+- 화면에 밝은 데이터 시각화가 있고 배경이 어두워야 대비가 산다
+- 제품 자체(터미널·에디터·모니터링)가 어둡다
+
+## 결정
+
+### 타이포그래피
+- 산세 + **모노스페이스 병용**. 수치·ID·코드는 반드시 모노
+- 비율 1.200~1.250. 정보 밀도가 높으므로 위계 차이를 작게
+- 숫자는 **tabular-nums** 를 켜라 (`font-variant-numeric: tabular-nums`). 수치가 흔들리면 계기판이 아니다
+
+| 슬롯 | 무료 | 한글 |
+|---|---|---|
+| 본문 | IBM Plex Sans, DM Sans, Switzer | Pretendard / Spoqa Han Sans Neo |
+| 수치·코드 | JetBrains Mono, IBM Plex Mono | + Pretendard |
+
+### 색
+- **순수 검정을 쓰지 마라.** `#0d0d0f`~`#14130f` 대역. 순흑은 대비가 과해 눈이 아프다
+- 텍스트도 순백 금지. `#e8e4dc`~`#e6e6e9`
+- 표면 단계를 3개로: `--surface`(가장 어두움) / `--surface-raised` / `--line`
+- 강조색은 **밝고 채도 높게, 아주 좁게.** 어두운 배경에서는 작은 면적으로도 충분히 강하다
+- 상태색(성공/경고/오류)을 강조색과 구분해서 정의해라. 여기서는 기능이 우선이다
+
+### 간격
+- 밀도를 높이되 **정렬을 완벽하게.** 이 프리셋에서 어긋난 1px은 즉시 보인다
+- 데이터 영역과 설명 영역의 간격을 명확히 구분
+- 4px 그리드를 엄격히
+
+### 재질 (`svg-filters.md`)
+- **거의 쓰지 않는다.** 어두운 배경에서 그레인은 노이즈로 보인다
+- 쓴다면: 아주 미세한 스캔라인, 또는 강조 요소에만 좁은 글로우(`feGaussianBlur` + `feMerge`)
+- 글래스모피즘은 성능 대비 이득이 없다. 내비게이션 바 정도까지
+
+### 모션 (`motion.md`)
+- 빠르고 정확하게. `--dur-instant`~`--dur-quick`
+- 실시간 데이터의 변화는 **위치 이동이 아니라 색·굵기 변화**로 알린다(레이아웃 시프트 금지)
+- 로딩은 스피너보다 스켈레톤. 무엇이 올지 미리 보여준다
+
+## 흔한 실패
+
+1. **순수 검정 + 순수 흰색** → 눈이 아프고 아마추어
+2. **네온 보라/파랑 강조** → 슬롭 지문. 어두운 배경일수록 이 함정에 빠지기 쉽다
+3. **다크만 만들고 라이트를 안 만듦** → 토큰으로 짰으면 라이트도 나온다. 다크 전용은 사용자 선택권을 뺏는 것
+4. **수치에 가변폭 폰트** → 숫자가 흔들려 읽기 어렵다
+5. **대비 미달** → 어두운 배경에서 `--ink-muted` 가 4.5:1 아래로 떨어지기 쉽다. 반드시 측정해라
+
+## 리스크 후보
+
+- 강조색을 데이터에만 쓰고 UI 전체를 무채색으로
+- 히어로를 실제 제품 화면(터미널·차트)으로 대체
+- 모노스페이스를 본문까지 확장
--- a/packages/skill/references/presets/editorial.md
+++ b/packages/skill/references/presets/editorial.md
@ -0,0 +1,56 @@
+# 프리셋: editorial — 잡지의 여백과 세리프
+
+> 한 문장: **읽는 것이 목적인 화면.** 콘텐츠가 주인공이고 UI는 뒤로 물러난다.
+
+## 언제 고르나
+
+- 콘텐츠(글·사진·작업물)가 실제로 있고 그것이 설득의 주체일 때
+- 브랜드·미디어·포트폴리오·럭셔리·문화 기관
+- **쓰지 마라**: 기능이 많은 제품, 전환이 목적인 랜딩, 데이터 밀도가 높은 화면
+
+## 결정
+
+### 타이포그래피
+- **세리프를 주역으로.** 디스플레이와 본문 중 최소 하나는 세리프
+- 비율 **1.333~1.618** — 헤드라인과 본문의 차이를 크게 벌린다
+- 본문 `--measure` 를 반드시 좁게. 라틴 60~68자, 한글 25~35자
+- 웨이트는 2개면 충분(Regular + 하나). 굵기로 소리치지 않는다
+
+| 슬롯 | 무료 | 유료 | 한글 |
+|---|---|---|---|
+| 디스플레이 | Instrument Serif, Fraunces | Signifier, PP Editorial New | 마루 부리 |
+| 본문 | Spectral, Lora | Söhne, Tiempos | 마루 부리 / 리디바탕 |
+
+### 색
+- 배경은 **순백이 아니다.** 종이 쪽으로 살짝 따뜻하게 (`#fbfaf8`, `#f7f5f0`)
+- 잉크도 순흑이 아니다 (`#1a1917`, `#211f1c`)
+- 강조색은 **하나, 작게.** 링크·인용부호·페이지 번호 정도. 면적을 넓히면 잡지가 아니라 전단지가 된다
+
+### 간격
+- **여백이 콘텐츠다.** 섹션 간격을 본문 간격의 5~6배까지 벌려도 된다
+- 비대칭을 적극적으로 — 본문을 그리드 왼쪽 2/3에 두고 오른쪽을 비우거나, 캡션을 여백에 흘린다
+- 이미지는 본문 폭을 넘어가게(`wide`/`full`) 두어 리듬을 만든다
+
+### 재질 (`svg-filters.md`)
+- **필름 그레인**이 이 프리셋의 기본 재질. `feTurbulence fractalNoise` 를 아주 약하게(opacity 0.03~0.06)
+- 인쇄물의 질감: 이미지에 미세한 듀오톤 또는 그라디언트 맵
+- 유리·네온·글로우는 이 프리셋에 어울리지 않는다
+
+### 모션 (`motion.md`)
+- **거의 움직이지 않는다.** 등장은 페이드 + 짧은 상승(8~16px) 이하
+- duration 은 느리게(`--dur-slow`), 이징은 `--ease-out`
+- 스크롤 재킹 금지. 읽는 사람의 속도를 뺏지 마라
+
+## 흔한 실패
+
+1. **세리프를 썼는데 여백이 좁다** → 세리프는 숨 쉴 공간이 없으면 그냥 답답해진다
+2. **강조색을 넓게 칠했다** → 에디토리얼의 색은 점이지 면이 아니다
+3. **모든 이미지를 같은 크기로 넣었다** → 크기 차이가 리듬이다
+4. **본문 폭이 넓다** → 이 프리셋에서 가장 자주 나오는 실패
+5. **한글에 라틴 세리프만 지정** → 한글이 시스템 기본으로 떨어져 전부 무너진다
+
+## 리스크 후보 (2단계에서 하나 고른다)
+
+- 히어로에 이미지 없이 **타이포그래피만**
+- 본문 폭을 극단적으로 좁히고 여백에 주석을 흘리기
+- 페이지 번호·러닝헤드 같은 **인쇄물 장치**를 웹에 가져오기
--- a/packages/skill/references/presets/quiet-commerce.md
+++ b/packages/skill/references/presets/quiet-commerce.md
@ -0,0 +1,69 @@
+# 프리셋: quiet-commerce — 읽히는 커머스
+
+> 한 문장: **콘텐츠가 설득하고, 화면은 한 번만 요구한다.**
+
+`editorial` 의 타이포 규율에 전환 구조를 붙인 것이다. 콘텐츠가 주인공이되 **CTA 가 경로 위에 정확히 하나** 있다.
+
+## 언제 고르나
+
+- 상품 수가 적고(5개 이하) 구매자가 **이미 카테고리를 아는** D2C — 로스터리, 소규모 브랜드, 구독 서비스, 단일 제품
+- **사진보다 사양·근거가 설득의 주체**일 때. 또는 사진이 아직 없을 때
+- **쓰지 마라**: 상품 수가 많은 커머스(그리드·필터가 주인공이 된다) · 카테고리 입문자 대상(설명이 먼저다) · B2B 도구(→ `swiss-minimal`)
+
+> 이 프리셋이 존재하는 이유: `editorial` 과 `anti-grid` 는 "전환이 목적인 랜딩에는 쓰지 마라"고 명시하고,
+> `swiss-minimal` 은 B2B·도구용이며, `dark-instrument` 는 다크 정당화가 필요하다.
+> **전환이 목적인 B2C 랜딩에는 넷 다 맞지 않는다.**
+
+## 결정
+
+### 타이포그래피
+- 디스플레이 **세리프 1** + 본문 **산세리프 1**. 세리프가 톤을, 산세리프가 가독성을 맡는다
+- 비율 **1.333**, 최대÷본문 **4배 이상**. 비율만으로 안 나오면 디스플레이를 스케일 밖에 따로 정의한다(`tokens.md` §1)
+- 단계 **4~5개**. 커머스 레퍼런스는 흔히 10단계인데 그대로 베끼면 "통제 실패"에 걸린다
+- 웨이트 2개
+
+| 슬롯 | 라틴 | 한글 |
+|---|---|---|
+| 디스플레이 | Fraunces, Instrument Serif | 마루 부리 |
+| 본문·UI | Switzer, Satoshi | Pretendard Variable |
+| 수치 | 본문 + `tabular-nums` | 본문 + `tabular-nums` |
+
+**한글 본문에 세리프를 쓰지 마라.** 16px 대에서 가독성이 급격히 떨어진다. 세리프는 디스플레이에만.
+
+### 색
+- 배경은 순백이 아니라 **오프화이트**. 단 **크림·베이지는 피해라** — "크림 = 고급"은 보라를 대체한 신종 슬롭이다. 크림을 쓰려면 브리프와 연결할 근거를 대라
+- 잉크도 순흑이 아니다
+- **강조색 하나, 면적 5% 미만.** 좋은 커머스 레퍼런스는 강조색을 CTA 한 곳과 링크에만 쓴다
+- hue 2개 (중립 + 강조)
+
+### 간격
+- 8px 그리드, 여백 값 5종
+- **섹션 간 : 요소 간 = 1:5.** 커머스는 섹션이 많아 간격이 좁으면 즉시 뭉개진다
+- 비대칭을 쓴다 — 본문을 그리드 왼쪽에 두고 오른쪽 여백에 사양·수치를 흘린다
+- `--measure` 는 좁게. 한글 25~35자
+
+### 재질 (`svg-filters.md`)
+- **필름 그레인 최약(0.02~0.04).** 오프화이트 배경의 밴딩을 없애는 용도지 질감을 과시하는 게 아니다
+- 유리·글로우·굴절 없음. 이 프리셋의 표면은 종이다
+- 사진이 있다면 듀오톤·그라디언트 맵으로 톤을 통일한다
+
+### 모션 (`motion.md`)
+- 거의 움직이지 않는다. 스크롤 진입 페이드 + 8px 상승 하나면 충분하다
+- **스크롤 재킹 금지.** 구매 결정 중인 사람의 속도를 뺏지 마라
+- CTA 는 호버·포커스 피드백을 확실히 준다. 여기가 유일하게 반응이 즉각적이어야 하는 곳이다
+
+## 흔한 실패
+
+1. **세리프 디스플레이를 쓰고 여백이 좁다** → 세리프는 숨 쉴 공간이 없으면 답답할 뿐이다
+2. **CTA 가 둘로 갈라진다** ("구매하기" + "구독하기") → 레퍼런스가 그렇더라도 베끼지 마라. 브리프가 정한 목표 하나로 통합해라
+3. **수치를 지표 배너로 만든다** → 근거 없는 숫자는 신뢰를 깎는다. 하드 게이트 #11에 걸린다
+4. **한글에 라틴 세리프만 지정** → 한글이 시스템 기본으로 떨어져 전부 무너진다
+5. **사진이 없다고 일러스트로 때운다** → 사양·수치·타이포로 채우는 쪽이 이 대상에게 더 강하다
+
+## 리스크 후보
+
+- 히어로에 이미지도 감성 카피도 없이 **사양 수치표**를 올린다 (대상이 카테고리를 아는 경우에만)
+- 가격을 첫 화면에 정직하게 노출한다
+- 제품 설명을 산문 한 문단으로 쓰고 불릿을 없앤다
+
+> 근거: research/references/03-trends-2026.md, 04-ai-slop-signatures.md, research/dogfood-coffee/ (검증일 2026-08-20)
--- a/packages/skill/references/presets/swiss-minimal.md
+++ b/packages/skill/references/presets/swiss-minimal.md
@ -0,0 +1,56 @@
+# 프리셋: swiss-minimal — 그리드와 침묵
+
+> 한 문장: **제품이 복잡하니 화면이라도 조용해야 한다.**
+
+## 언제 고르나
+
+- 기능이 많고 설명할 것이 많은 제품 — B2B, 개발자 도구, 문서, 인프라
+- 신뢰가 전환의 조건일 때
+- **쓰지 마라**: 기억에 남는 것이 목적일 때. 이 프리셋은 안전하지만 눈에 띄지 않는다
+
+## 결정
+
+### 타이포그래피
+- **그로테스크 산세 하나로 끝낸다.** 두 번째 폰트를 넣고 싶으면 모노스페이스(라벨·코드용)까지만
+- 비율 **1.200~1.250** — 위계 차이를 작게. 대신 웨이트와 색으로 구분
+- 정렬은 왼쪽. 가운데 정렬은 히어로 한 곳까지만
+- **Inter 를 기본값으로 쓰지 마라.** Switzer, Satoshi, DM Sans 가 거의 언제나 낫다
+
+| 슬롯 | 무료 | 유료 | 한글 |
+|---|---|---|---|
+| 전체 | Switzer, Satoshi, DM Sans | Söhne, GT America | Pretendard Variable |
+| 라벨·코드 | JetBrains Mono, IBM Plex Mono | — | Pretendard + JetBrains Mono |
+
+### 색
+- 무채색 90% + 강조색 하나
+- 배경/카드/경계선의 명도 차이를 **아주 작게**. 그림자 대신 1px 경계선
+- 강조색은 채도를 낮춰라. 형광에 가까운 색은 이 프리셋에서 즉시 싸구려가 된다
+- **보라~파랑 그라디언트 절대 금지** (검출률 1위 슬롭 지문)
+
+### 간격
+- 4/8 배수 그리드를 **엄격하게** 지킨다. 여기서만큼은 예외를 만들지 마라
+- 정렬선이 전부 맞아야 한다. 이 프리셋의 품질은 정렬에서 나온다
+- 섹션 간격은 본문의 4배
+
+### 재질 (`svg-filters.md`)
+- **재질을 거의 쓰지 않는다.** 이 프리셋의 표면은 평평한 종이다
+- 굳이 쓴다면 아주 약한 그레인 하나까지
+- 글래스모피즘 금지 — 실기기에서 FPS 15~30% 하락하고, 이 프리셋의 정직함과 어긋난다
+
+### 모션 (`motion.md`)
+- 상태 변화 위주(`--dur-instant`, `--dur-quick`). 등장 애니메이션은 최소화
+- 모션은 **피드백**이지 연출이 아니다. 클릭했는데 아무 반응 없는 쪽이 훨씬 큰 죄다
+
+## 흔한 실패
+
+1. **미니멀을 "요소를 지우는 것"으로 이해** → 미니멀은 정렬과 일관성이지 빈 화면이 아니다
+2. **회색이 너무 많아 위계가 사라짐** → `--ink-muted` 는 하나면 충분하다
+3. **카드에 그림자를 겹겹이** → 1px 경계선 하나가 낫다
+4. **아이콘을 이모지로** → 즉시 아마추어. 아이콘 세트 하나를 정해 일관되게
+5. **강조색을 CTA와 링크와 배지에 다 씀** → 강조가 셋이면 강조가 없다
+
+## 리스크 후보
+
+- 히어로에서 이미지를 완전히 빼고 **텍스트와 여백만**
+- 색을 무채색 + 딱 한 색으로 극단적으로 제한
+- 섹션 구분선을 전부 없애고 여백만으로 구획