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)

packages/skill/references/galleries.md

@@ -0,0 +1,173 @@
+# galleries.md — 어디를 볼 것인가
+
+레퍼런스 조사 단계에서 **갤러리를 고르는 표**다. 브리프를 표에 대입해 3곳을 정하고, 거기서 원본 사이트 URL을 확보한다.
+
+---
+
+## 1. 브리프 → 갤러리 라우팅
+
+`R1`은 구조, `R2`는 톤, `R3`는 디테일을 가져올 소스다. R2는 **반드시 R1과 다른 업종**에서 고른다.
+
+> **두 행에 동시에 걸리면 청중을 기준으로 고른다.** "개발자용 API 모니터링 SaaS"는
+> `SaaS · B2B` 와 `개발자 도구` 양쪽에 해당한다. 보는 사람이 엔지니어면 개발자 도구 행이다.
+>
+> **갤러리에서 원본 URL을 못 뽑으면 경쟁사·인접 제품을 직접 지목해도 된다.**
+> 갤러리는 발견 수단이지 목적이 아니다. 1단계 검증 조건은 "원본 사이트 URL을 확보했는가"이지
+> "갤러리를 경유했는가"가 아니다. **접근 실패로 왕복을 세 번 넘기지 마라** — §5를 먼저 확인하고,
+> 막히면 바로 우회해라.
+
+| 브리프 | R1 구조 | R2 톤 (다른 업종) | R3 디테일 |
+|---|---|---|---|
+| SaaS · B2B 랜딩 | Land-book | The Brand Identity | Codrops |
+| 개발자 도구 · API 문서 | Refero | Klim | Codrops |
+| 개인 · 스튜디오 포트폴리오 | Godly | Typographic Posters | Eyecandy |
+| 에이전시 · 브랜드 사이트 | SiteInspire | Mindsparkle Mag | Eyecandy |
+| 이커머스 · D2C | ecomm.design | Visuelle | Details Matter |
+| 모바일 앱 | Mobbin | Handheld.design | Spotted in Prod |
+| 대시보드 · 웹앱 내부 | Webframe | Data Viz Project | UI Sources |
+| 미니멀 · 정보량 적음 | Minimal Gallery | Httpster | Design Spells |
+| 개성 강한 · 실험적 | Hover States | Brutalist Websites | Codrops |
+| 이메일 · 뉴스레터 | Really Good Emails | Email Love | — |
+| 온보딩 · 결제 플로우 | Page Flows | UX Bites | Mobbin |
+| 타이포 주도 (텍스트가 주인공) | Awwwards Typography | Fonts In Use | Typewolf |
+| 리디자인 (개편) | Rebrand Gallery | (현행 사이트 자체) | Design Spells |
+| 한국어 사이트 | 노트폴리오 | 디비컷 | GDWeb |
+
+**국소 브리프** (한 섹션만 다시 짤 때)
+
+| 대상 | 소스 |
+|---|---|
+| 히어로 | Supahero |
+| 내비게이션 | Navbar Gallery |
+| 푸터 | Footer.design |
+| 요금제 | Pricing Pages |
+| 404 · 빈 상태 | 404s.design |
+| 후기 · 신뢰 요소 | Social Proof Examples |
+| OG · 공유 이미지 | OG Image Gallery |
+
+---
+
+## 2. 경고 — 갤러리마다 편향이 있다
+
+**Awwwards 구조를 SaaS에 이식하지 마라.**
+2026 Q1 SOTD 47건의 업종 분포는 럭셔리 패션 28% · 자동차 22% · 건축 18% · 문화기관 14%, **테크/SaaS는 5% 미만**이다.
+수상작의 전면 3D·풀스크린 인트로·스크롤 서사는 "제품을 팔지 않는 사이트"의 문법이다.
+Awwwards는 **타이포 완성도와 야심의 상한선**으로만 쓰고, 섹션 구조는 Land-book·Refero에서 가져온다.
+
+그 밖의 편향:
+
+| 갤러리 | 편향 | 대응 |
+|---|---|---|
+| Dribbble | 구현 불가능한 "샷"이 다수 | 색·타이포 발상만. **구조 참고 금지** |
+| Collect UI | Daily UI 과제 기반이라 비현실적 | 컴포넌트 아이디어만 |
+| Pinterest | 출처 추적 불가 + AI 이미지 오염 | 최후순위. 가급적 쓰지 마라 |
+| Lapa Ninja | 실무 평균값 → 슬롭 패턴이 섞여 있음 | 볼 때 antipatterns.md를 옆에 둬라 |
+| Dark Mode Design / dark.design | 다크가 전제 | 브리프가 다크를 요구할 때만 |
+
+---
+
+## 3. 텍스트로 읽히는 소스 (기본 경로)
+
+에이전트는 **이미지를 못 보는 것이 기본값**이다. 갤러리 카드는 이미지라 정보가 없다.
+아래는 **말로 설명해주는** 소스다. 폰트·색·모션은 여기서 확보한다.
+
+| 소스 | URL | 얻는 것 |
+|---|---|---|
+| Typewolf | https://www.typewolf.com | 특정 사이트가 실제로 쓴 **폰트 이름** + 무료 대체 폰트 |
+| Typewolf Google Fonts | https://www.typewolf.com/google-fonts | 구글폰트 베스트 40, 본문용/디스플레이용 구분 |
+| Fonts In Use | https://fontsinuse.com | 폰트의 산업·시대별 톤 |
+| Eyecandy | https://eyecannndy.com | 모션 **기법에 붙은 이름** (displacement, kinetic type 등) |
+| Codrops | https://tympanus.net/codrops/ | 효과의 **소스 코드** 그 자체 |
+| UI Sources | https://www.uisources.com | 인터랙션을 문장으로 분해한 해설 |
+| UX Bites | https://builtformars.com/ux-bites | 특정 앱 UX가 왜 좋은지 서술 |
+| DesignSystems.one | https://www.designsystems.one/design-systems | 실사용 디자인 시스템 88개 + **토큰 원문(design.md) 다운로드** |
+| DESIGN.md | https://designmd.app | 에이전트용으로 정제된 디자인 시스템 정의 561개 |
+| Happy Hues | https://www.happyhues.co | 색을 **역할**(배경/텍스트/강조)로 서술한 팔레트 |
+| Branding Style Guides | https://brandingstyleguides.com | 실제 브랜드 가이드 문서 |
+| Rebrand Gallery | https://rebrand.gallery | 리브랜딩 before/after — "왜 바꿨나"를 학습 가능 |
+
+**브라우저 도구(Chrome DevTools MCP / Playwright)를 쓸 수 있으면** 원본 사이트의 computed style을 직접 읽어라.
+뽑을 값: `font-family` `font-size` `line-height` `letter-spacing` `color` `background-color` `border-radius` `box-shadow` `padding` `gap` `max-width` `transition`.
+
+---
+
+## 4. 카테고리별 대표
+
+라우팅 표에서 못 찾았을 때만 본다.
+
+**종합 어워드**
+- Awwwards https://www.awwwards.com — SOTD 아카이브. 상한선용
+- The FWA https://thefwa.com — 인터랙티브·기술 실험
+- Godly https://godly.website — 주당 3~5개만 등록. 신호 대 잡음비 최고
+
+**미니멀 · 에디토리얼**
+- SiteInspire https://www.siteinspire.com — style/type/subject 3축 태깅
+- Minimal Gallery https://minimal.gallery — 여백 상한 기준선
+- Httpster https://httpster.net — 독립 스튜디오·타입 파운드리
+- Dead Simple Sites https://deadsimplesites.com — 덜어내기 하한선
+
+**브루탈 · 실험**
+- Brutalist Websites https://brutalistwebsites.com — 원본 아카이브
+- Hover States https://hoverstat.es — 아트·문화기관 웹
+- Neubrutalism https://neubrutalism.com — 스타일 정의 + 사례
+
+**SaaS · 랜딩 · 웹앱**
+- Land-book https://land-book.com — 전수 심사. 랜딩 1순위
+- Refero https://refero.design — 실제 화면 30K+, UX 패턴·요소 단위 검색
+- Webframe https://webframe.xyz — "로그인 후" 화면
+- Landingfolio https://www.landingfolio.com — 섹션 컴포넌트 동봉
+- SaaSFrame https://www.saasframe.io — 랜딩 + 앱 + 온보딩 이메일
+
+**모바일 · 플로우**
+- Mobbin https://mobbin.com — 실제 앱 전체 화면·플로우
+- Page Flows https://pageflows.com — 사용자 여정 영상
+- Handheld.design https://handheld.design — 개성 있는 모바일 UI
+
+**타이포 · 폰트**
+- Typewolf https://www.typewolf.com — **폰트 결정은 무조건 여기 먼저**
+- Fontshare https://www.fontshare.com — Satoshi, Switzer, Clash Display (무료 상업)
+- Velvetyne https://velvetyne.fr — 오픈소스 실험 파운드리
+- Klim https://klim.co.nz · Pangram Pangram https://pangrampangram.com — 유료
+- 눈누 https://noonnu.cc — **한글 무료 폰트. 라이선스 표기 명확**
+
+**컬러**
+- Happy Hues https://www.happyhues.co — 역할별 팔레트
+- Realtime Colors https://www.realtimecolors.com — 실제 레이아웃에 실시간 적용
+- Coolors https://coolors.co — 빠른 후보 생성
+
+**모션 · 코드**
+- Codrops https://tympanus.net/codrops/ — 튜토리얼 + 소스
+- Eyecandy https://eyecannndy.com — 기법 이름
+- GSAP https://gsap.com — 2026년 전 플러그인 무료
+- Motion https://motion.dev — React 모션
+
+**브랜딩 (웹 밖에서 톤 가져오기)**
+- The Brand Identity https://the-brandidentity.com
+- Mindsparkle Mag https://mindsparklemag.com
+- Typographic Posters https://typographicposters.com
+- Visuelle https://visuelle.co.uk
+
+**국내**
+- 노트폴리오 https://notefolio.net — 한국어 타이포·레이아웃 감각
+- 디비컷 https://www.dbcut.com — 국내 기업·기관 사이트 관행
+- GDWeb https://gdweb.co.kr — 국내 에이전시 수준선
+
+---
+
+## 5. 자동 접근 불가 목록
+
+아래는 `WebFetch`로 못 읽는다. 조사 계획에서 제외하거나 대체 소스를 잡아라.
+
+| 사이트 | 상태 | 대체 |
+|---|---|---|
+| **land-book.com** | **403 봇 차단.** 브라우저로 열어도 카드에 외부 URL 이 없다 | Httpster, Lapa Ninja |
+| **refero.design** | **SPA — WebFetch 가 제목만 반환** | Mobbin, Screenlane |
+| siteinspire.com | 429 간헐 차단 | Httpster, Minimal Gallery |
+| cssdesignawards.com | 403 봇 차단 | Awwwards |
+| uncut.wtf | Cloudflare 차단 | Fontshare, Fontesk |
+| refs.gallery | 429 | Godly |
+| unsplash.com | 401 | Pexels |
+| adfolio.design | 429 | Love The Work More |
+| **commercecream.com** | **HTTPS 연결 거부 (방치 상태)** | **ecomm.design로 대체. 쓰지 마라** |
+
+> 근거: research/references/01-gallery-catalog.md, 03-trends-2026.md (조사일 2026-08-20)