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/references/01-gallery-catalog.md

@@ -0,0 +1,359 @@
+# 01 — 디자인 레퍼런스 사이트 카탈로그
+
+> 총 **155개** URL (사이트 기준 약 145곳, 일부는 하위 페이지 별도 게재).
+> 모든 URL은 2026-08-20에 실제 HTTP 요청으로 생존을 확인함.
+> `[!]` 표시는 접속 이상이 확인된 항목 (파일 하단 "링크 상태 리포트" 참조).
+>
+> **읽는 법**: `designpaca` 스킬은 작업 시작 전 반드시 이 카탈로그에서 **최소 3개**를 고르고,
+> 왜 그 3개를 골랐는지 브리프와 연결해서 말해야 한다.
+> "언제 보나" 열이 그 선택의 근거다.
+
+---
+
+## 0. 브리프 → 갤러리 라우팅 표 (먼저 이걸 본다)
+
+| 브리프 유형 | 1순위 | 2순위 | 3순위 (디테일) |
+|---|---|---|---|
+| SaaS / B2B 랜딩 | Land-book | SaaSFrame | Refero |
+| 개인·스튜디오 포트폴리오 | Awwwards | Godly | Pafolios |
+| 에이전시 / 브랜드 사이트 | SiteInspire | The FWA | The Brand Identity |
+| 이커머스 / D2C | ecomm.design | Land-book (ecommerce) | tiny blocks |
+| 모바일 앱 UI | Mobbin | Handheld.design | Scrnshts |
+| 대시보드 / 웹앱 내부 화면 | Webframe | Nicelydone | Interface Index |
+| 문서 / 개발자 도구 | Refero | Design Systems Repo | Klim (타입) |
+| 미니멀 / 정보 밀도 낮음 | Minimal Gallery | Dead Simple Sites | Httpster |
+| 개성 강한 / 실험적 | Hover States | Brutalist Websites | Browsing Mode |
+| 다크 테마 필수 | Dark Mode Design | dark.design | Godly |
+| 이메일 / 뉴스레터 | Really Good Emails | Email Love | Inbox Flows |
+| 온보딩·결제 등 플로우 설계 | Page Flows | Mobbin | UX Bites |
+| 타이포 중심 (텍스트가 주인공) | Typewolf | Fonts In Use | Typographic Posters |
+| 모션·인터랙션이 핵심 | Codrops | Eyecandy | Landing.love |
+| 한국어 사이트 / 국내 클라이언트 | 노트폴리오 | 디비컷 | GDWeb |
+
+---
+
+## 1. 종합 어워드 · 최상위 큐레이션
+
+가장 높은 완성도의 기준선. **다만 "수상용 사이트"는 실무 제약(로딩, 접근성, CMS)을 무시한 경우가 많다.**
+구조를 그대로 가져오지 말고 "톤과 야심의 상한선"으로만 써라.
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Awwwards | https://www.awwwards.com | 심사위원 채점 기반 SOTD/SOTM/SOTY | 상한선 설정, 모션·3D 야심작 | 무료 열람 / 제출·PRO 유료 | Design 40%·Usability 30%·Creativity 20%·Content 10%로 채점 |
+| Awwwards Sites of the Day | https://www.awwwards.com/websites/sites_of_the_day/ | 일별 수상작 아카이브 | "지금 뭐가 이기고 있나" 실측 | 무료 | 최근 30일치만 봐도 트렌드가 잡힌다 |
+| The FWA | https://thefwa.com | 인터랙티브·기술 실험 프로젝트 | WebGL·캠페인 사이트 브리프 | 무료 | 1999년부터 축적된 인터랙티브 아카이브 |
+| CSS Design Awards `[!]` | https://www.cssdesignawards.com | CSS·프론트엔드 품질 중심 수상작 | Awwwards보다 실무적인 기준이 필요할 때 | 무료 열람 / 제출 $25–60 | 소규모 스튜디오 비중이 높아 재현 가능성이 큼 |
+| Godly | https://godly.website | 극도로 선별된 "잘 만든 웹" | 애니메이션·스크롤 연출 상한선 | 무료 | 주당 3–5개만 등록. 신호 대 잡음비 최고 |
+| Godly 전체 목록 | https://godly.website/websites | 카테고리·기술 필터 | 스택별로 골라볼 때 | 무료 | Framer/Webflow/Next 필터 유용 |
+| Site of Sites | https://siteofsites.co | 갤러리들을 모은 메타 갤러리 | 새 레퍼런스 소스를 발굴할 때 | 무료 | 이 카탈로그의 갱신원으로 써라 |
+| MaxiBestOf | https://maxibestof.one | 개인이 고른 "베스트 오브 베스트" | 취향이 뚜렷한 소수 정예가 필요할 때 | 무료 | 큐레이터 1인 취향이라 편차가 곧 개성 |
+| Refs.gallery `[!]` | https://refs.gallery | 주간 갱신 핸드픽 웹사이트 | 최신 감각 빠른 스캔 | 무료 | 900+ 사이트, 주간 업데이트 |
+| Webdesign-inspiration | https://www.webdesign-inspiration.com | 대량 무료 갤러리 | 볼륨이 필요할 때 | 무료 | 큐레이션 강도는 낮음 |
+| A Fresh Website | https://a-fresh.website | 신선한 실험 웹 | 뻔한 안이 나올 때 흔들기용 | 무료 | 소규모지만 밀도 높음 |
+| Call to Inspiration | https://calltoinspiration.com | 웹·브랜딩 혼합 큐레이션 | 브랜드 톤까지 같이 잡을 때 | 무료 | 웹 밖의 그래픽까지 커버 |
+
+---
+
+## 2. 미니멀 · 에디토리얼 · 타입 주도
+
+여백과 타이포만으로 승부하는 브리프. **가장 실무 재현성이 높은 카테고리다.**
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| SiteInspire `[!]` | https://www.siteinspire.com | 2010년부터 핸드큐레이션한 웹 | 에디토리얼·유럽식 절제된 톤 | 무료 | style/type/subject 3축 태깅이 가장 정교 |
+| Minimal Gallery | https://minimal.gallery | 미니멀 웹만 | 정보량 적고 여백 큰 브리프 | 무료 | "여백을 얼마나 줘도 되나"의 기준선 |
+| Httpster | https://httpster.net | 독립 디자이너·소규모 스튜디오 | 과하지 않은 현대적 톤 | 무료 | 타입 파운드리·스튜디오 사이트 비중 높음 |
+| Dead Simple Sites | https://deadsimplesites.com | 극단적으로 단순한 사이트 | 1페이지·랜딩·문서 | 무료 | "덜어내기"의 하한선 확인용 |
+| One Page Love | https://onepagelove.com | 원페이지 사이트 전용 | 캠페인·이벤트·개인 페이지 | 무료 (템플릿 유료) | 스크롤 서사 구조 학습에 최적 |
+| One Page Love 인스피레이션 | https://onepagelove.com/inspiration | 카테고리별 원페이지 | 업종 지정 브리프 | 무료 | 레스토랑·컨퍼런스 등 세분화 |
+| Cargo | https://cargo.site | 아티스트·에디토리얼 사이트 빌더 | 아트북 같은 레이아웃 | 유료 (빌더) | 예시 사이트 자체가 레퍼런스 |
+| Awwwards Typography | https://www.awwwards.com/websites/typography/ | 타이포 수상작만 | 텍스트가 주인공인 브리프 | 무료 | 대형 타입 스케일 실전 사례 |
+
+---
+
+## 3. 브루탈리즘 · 실험 · 안티트렌드
+
+**2026년 현재 bento 그리드의 반작용으로 다시 강해진 흐름.** 개성이 필요한 브리프에서 꺼낸다.
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Brutalist Websites | https://brutalistwebsites.com | 웹 브루탈리즘 원본 아카이브 | 규칙을 깨야 하는 브리프 | 무료 | 2014년 Pascal Deville이 만든 정전 |
+| Neubrutalism.com | https://neubrutalism.com | 네오브루탈리즘 가이드 + 사례 | 두꺼운 테두리·오프셋 그림자 스타일 | 무료 | 스타일 정의와 예시가 같이 있음 |
+| Hover States | https://hoverstat.es | 실험적 웹 프로젝트 | 인터랙션 발상 전환 | 무료 | 아트·문화기관 웹 비중 높음 |
+| Browsing Mode | https://browsingmode.com | 극단적·기이한 웹 | 안전한 안만 나올 때 | 무료 | "이래도 되나" 상한 테스트 |
+| The Whimsical Web | https://whimsical.club | 유머·놀이가 있는 개인 웹 | 사람 냄새가 필요한 브리프 | 무료 | 개인 사이트 위주 |
+| Crypto Design Club | https://cryptodesign.club | 크립토·웹3 웹디자인 | 다크·테크 톤 브리프 | 무료 | 다크+네온의 좋은 사례/나쁜 사례 대조군 |
+| HUDS + GUIS | https://hudsandguis.com | 영화 HUD·SF 인터페이스 | 데이터·모니터링 UI | 무료 | 실제 제품에 그대로 쓰면 안 되지만 발상 자극 |
+| Auto Interfaces | https://autointerfaces.com | 자동차 인포테인먼트 UI | 대형 화면·글랜서블 UI | 무료 | 정보 밀도 대비 가독성 사례 |
+
+---
+
+## 4. SaaS · 랜딩페이지 · 웹앱
+
+**가장 자주 쓰게 될 카테고리이자 AI 슬롭이 가장 심한 영역.**
+여기서 본 걸 그대로 따라가면 04번 문서의 금지 목록에 그대로 빠진다. 경계하며 봐라.
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Land-book | https://land-book.com | 심사를 거친 랜딩페이지 | SaaS·앱·스타트업 랜딩 | 무료 + 프로 | 전수 심사라 신호 대 잡음비 높음 |
+| Landingfolio | https://www.landingfolio.com | 랜딩페이지 + 섹션 컴포넌트 | 섹션 단위로 구조 뜯을 때 | 무료 + 프로 | Tailwind/Webflow/Figma 컴포넌트 동봉 |
+| Lapa Ninja | https://www.lapa.ninja | 업종별 랜딩 풀페이지 캡처 | "실제로 출시되는 것"의 평균 | 무료 | 실험성 낮고 실무성 높음 |
+| SaaS Landing Page | https://saaslandingpage.com | SaaS 랜딩 전용 | B2B 카피·섹션 순서 | 무료 | 섹션 유형별 필터 |
+| SaaSFrame | https://www.saasframe.io | SaaS 랜딩 + 앱 + 이메일 통합 | 제품 전체 여정 설계 | 무료 + 유료 | 랜딩만이 아니라 온보딩 이메일까지 |
+| SaaSpo | https://saaspo.com | SaaS 웹사이트 대량 아카이브 | 경쟁사 스캔 | 무료 | 볼륨 위주 |
+| SaaS Interface | https://saasinterface.com | SaaS 앱 내부 화면 | 로그인 후 화면 설계 | 무료 | 오래됐지만 패턴 학습용으로 유효 |
+| Refero | https://refero.design | 웹·iOS 실제 화면 30K+ | UX 패턴·UI 요소 단위 검색 | 무료 일부 + 유료 | v4에서 6,000개 플로우 + AI 검색 추가 |
+| Webframe | https://webframe.xyz | 웹앱 화면 스크린샷 | 대시보드·설정 화면 | 무료 + 유료 | "로그인 후"의 레퍼런스가 귀한데 여기 있음 |
+| Nicelydone | https://nicelydone.club | 잘 만든 SaaS 웹앱 | 컴포넌트 디테일 | 무료 | 요소별(모달·테이블·폼) 분류 |
+| Interface Index | https://interface-index.com | 다양한 인터페이스 수집 | 장르 불문 UI 발상 | 무료 | 분류가 느슨해 탐색형 |
+| UI Sources | https://www.uisources.com | 실제 앱의 인터랙션 분해 | "왜 이렇게 했나"까지 필요할 때 | 무료 일부 | 인터랙션을 글로 설명해줌 → **AI에게 특히 유용** |
+| UI Garage | https://uigarage.net | 일별 UI 패턴 | 특정 컴포넌트 아이디어 | 무료 | 패턴 태그가 촘촘함 |
+
+---
+
+## 5. 모바일 앱 · UX 플로우
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Mobbin | https://mobbin.com | 실제 출시 앱의 전체 화면·플로우 | 앱 UI, 온보딩·결제 흐름 | 무료 제한 / 유료 중심 | iOS·Android·Web 모두. 가장 깊음 |
+| Page Flows | https://pageflows.com | 사용자 여정 **영상** 기록 | 전환·에러·엣지케이스 | 유료 | 정적 캡처로 못 보는 전환이 보임 |
+| Screenlane | https://screenlane.com | 모바일 UI 스크린샷 | 빠른 화면 단위 참고 | 무료 | Page Flows로 통합됐으나 도메인 유지 |
+| Handheld Design | https://handheld.design | 개성 있는 모바일 인터페이스 | 앱이 뻔해질 때 | 무료 | 큐레이션 강도 높음 |
+| Scrnshts | https://scrnshts.club | 앱스토어 스크린샷 세트 | 스토어 등록용 비주얼 | 무료 | 마케팅 캡처의 타이포 사례 |
+| Spotted in Prod | https://spottedinprod.com | 프로덕션의 좋은 iOS 디테일 | 마이크로 인터랙션 | 무료 | 짧은 영상 위주 |
+| iOS Icon Gallery | https://www.iosicongallery.com | 앱 아이콘 | 아이콘·파비콘 방향 | 무료 | 아이콘 그리드 감각 학습 |
+| UX Bites | https://builtformars.com/ux-bites | 실제 앱의 UX 디테일 해설 | "왜 좋은지"를 언어화할 때 | 무료 | **글 설명이 있어 AI가 읽기 좋음** |
+| Details Matter | https://detailsmatter.framer.website | 마이크로 인터랙션 모음 | 디테일 한 스푼 필요할 때 | 무료 | 짧은 영상 중심 |
+| Pushkeen | https://pushkeen.ai | 푸시 알림 카피·패턴 | 알림·이메일 카피 | 무료 | 카피 톤 레퍼런스로 특이 |
+
+---
+
+## 6. 페이지 요소 단위 갤러리
+
+**"히어로만 다시 짜야 한다" 같은 국소 브리프에서 가장 효율적이다.**
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Supahero | https://supahero.io | 히어로 섹션만 | 첫 화면 구조 결정 | 무료 | 히어로 유형 분류가 좋음 |
+| Navbar Gallery | https://navbar.gallery | 내비게이션 바만 | 정보구조 노출 방식 | 무료 | 메가메뉴 사례 다수 |
+| Footer.design | https://footer.design | 푸터만 | 푸터가 성의 없어질 때 | 무료 | 푸터는 AI가 항상 대충 만드는 곳 |
+| Pricing Pages | https://pricingpages.design | 요금제 페이지 | 가격표·비교표 | 무료 | 3열 카드 말고 다른 방법이 여기 있음 |
+| 404s.design | https://404s.design | 404 페이지 | 에러·빈 상태 | 무료 | 빈 상태 톤 설계 |
+| OG Image Gallery | https://ogimage.gallery | OG·공유 이미지 | 소셜 카드 | 무료 | 공유 이미지도 디자인 대상임을 상기 |
+| Unsection | https://unsection.com | 섹션·호버 효과 | 섹션 단위 조립 | 무료 | 섹션 유형 라이브러리 |
+| Bento Grids | https://bentogrids.com | 벤토 그리드 레이아웃 | 벤토를 **잘** 써야 할 때 | 무료 | 나쁜 벤토와 좋은 벤토의 차이가 보임 |
+| Social Proof Examples | https://socialproofexamples.com | 후기·로고월·지표 | 신뢰 요소 설계 | 무료 | 로고월 말고 다른 방법들 |
+
+---
+
+## 7. 이커머스 · D2C
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| ecomm.design | https://ecomm.design | 이커머스 사이트 디렉토리 | 쇼핑몰 전 페이지 | 무료 | 사용 기술(Shopify 등) 필터 |
+| tiny blocks | https://tinyblocks.cc | 이커머스 요소·컴포넌트 | 장바구니·PDP 요소 | 무료 | 요소 단위라 조립하기 좋음 |
+| Commerce Cream `[!]` | http://commercecream.com | 잘 디자인된 이커머스 | 브랜드 중심 쇼핑몰 | 무료 | **HTTPS 연결 거부 상태 — HTTP만 응답** |
+
+---
+
+## 8. 이메일 · 뉴스레터
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Really Good Emails | https://reallygoodemails.com | 19,000+ 이메일 | 트랜잭셔널·마케팅 메일 | 무료 | HTML 소스까지 열람 가능 |
+| Email Love | https://emaillove.com | 이메일 디자인·템플릿 | 뉴스레터 레이아웃 | 무료 | 브랜드별 정리 |
+| Inbox Flows | https://inboxflows.com | 이메일 **시퀀스** 전체 | 온보딩 메일 흐름 | 무료 일부 | 단발이 아니라 흐름 단위 |
+
+---
+
+## 9. 포트폴리오
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Bestfolios | https://www.bestfolios.com | 디자이너 포트폴리오·케이스스터디 | 포트폴리오 브리프 | 무료 | 이력서·케이스스터디까지 |
+| Prettyfolio | https://prettyfolio.com | 예쁜 포트폴리오 | 비주얼 중심 포트폴리오 | 무료 | 큐레이션 좋음 |
+| Pafolios | https://pafolios.com | 수상급 포트폴리오 | 개인 브랜딩 상한선 | 무료 | 어워드 수상작 위주 |
+| PFolios | https://pfolios.net | 포트폴리오 쇼케이스 | 볼륨 확보 | 무료 | 분류 단순 |
+| Sideprojectors | https://www.sideprojectors.com | 사이드 프로젝트 매물 | 인디 제품의 실제 톤 | 무료 | 갤러리는 아니지만 "인디 감성"의 원본 |
+
+---
+
+## 10. 타이포그래피 · 폰트
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Typewolf | https://www.typewolf.com | 실제 웹의 폰트 사용례 + 추천 | **폰트 결정할 때 무조건 여기 먼저** | 무료 | 폰트별 사용 사이트·대체 무료 폰트 제시 |
+| Typewolf Google Fonts | https://www.typewolf.com/google-fonts | 구글폰트 베스트 40 | 무료 폰트만 써야 할 때 | 무료 | 본문용/디스플레이용 구분 표기 |
+| Fonts In Use | https://fontsinuse.com | 폰트 사용례 아카이브 (웹·인쇄) | 폰트의 "역사적 톤" 확인 | 무료 | 산업·시대별 분류 |
+| Typographic Posters | https://typographicposters.com | 타이포 포스터 | 대형 타입 구성 | 무료 | 웹 밖에서 타입 감각 가져오기 |
+| Google Fonts | https://fonts.google.com | 무료 웹폰트 | 라이선스 걱정 없는 기본 | 무료 | 가변폰트 필터 필수 |
+| Fontshare | https://www.fontshare.com | ITF의 고품질 무료 폰트 | 구글폰트가 뻔할 때 | 무료 (상업 가능) | Satoshi·Clash Display 등 |
+| Uncut.wtf `[!]` | https://uncut.wtf | 동시대 무료 폰트 163종 | 개성 있는 무료 폰트 | 무료 | 봇 차단으로 자동 접근 어려움 |
+| Fontesk | https://fontesk.com | 무료 폰트 대량 아카이브 | 실험적 디스플레이 폰트 | 무료 | 라이선스 개별 확인 필요 |
+| Velvetyne | https://velvetyne.fr | 프랑스 오픈소스 실험 파운드리 | 브루탈·아트 브리프 | 무료 (오픈소스) | 개성이 아주 강함 |
+| Klim Type Foundry | https://klim.co.nz | 상업 파운드리 | 유료 폰트 검토 | 유료 | 사이트 자체가 타이포 레퍼런스 |
+| Pangram Pangram | https://pangrampangram.com | 상업 파운드리 | 트렌디한 유료 폰트 | 유료 (일부 개인 무료) | 현재 웹에서 가장 많이 보이는 유료 폰트들 |
+| Grilli Type | https://www.grillitype.com | 스위스 파운드리 | 정밀한 그로테스크 | 유료 | 트라이얼 제공 |
+| Displaay | https://displaay.net | 체코 파운드리 | 에디토리얼 세리프 | 유료 | 사이트 데모가 훌륭 |
+| 눈누 | https://noonnu.cc | 상업용 무료 **한글** 폰트 | 한국어 사이트 폰트 선정 | 무료 | 라이선스 범위 표기가 명확 |
+
+---
+
+## 11. 컬러 · 팔레트
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Coolors | https://coolors.co | 팔레트 생성·저장 | 빠른 후보 생성 | 무료 + 프로 | 잠금 후 재생성이 빠름 |
+| Adobe Color | https://color.adobe.com | 색 이론 + 접근성 검사 | 대비 검증까지 필요할 때 | 무료 | 색각 이상 시뮬레이션 내장 |
+| Khroma | https://www.khroma.co | 취향 학습형 팔레트 AI | 방향 탐색 초기 | 무료 | 초기 50색 선택으로 학습 |
+| Happy Hues | https://www.happyhues.co | **실제 UI에 적용된** 팔레트 | 역할 배분(배경/텍스트/강조) | 무료 | 색을 역할로 보여줘 AI에게 특히 유용 |
+| Realtime Colors | https://www.realtimecolors.com | 실제 레이아웃에 실시간 적용 | 팔레트 검증 | 무료 | 팔레트를 "페이지로" 본다 |
+
+---
+
+## 12. 인터랙션 · 모션 · 코드
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Codrops | https://tympanus.net/codrops/ | 인터랙션 튜토리얼 + 데모 | 구현 가능한 효과 찾기 | 무료 | **소스 코드까지 제공 — AI가 직접 읽을 수 있음** |
+| Codrops Tutorials | https://tympanus.net/codrops/category/tutorials/ | 단계별 구현 글 | 효과를 코드로 옮길 때 | 무료 | 2009년부터 축적 |
+| Uiverse | https://uiverse.io | 커뮤니티 CSS/Tailwind 컴포넌트 | 버튼·로더 등 소품 | 무료 | 그대로 쓰면 슬롭. 발상만 가져와라 |
+| GSAP | https://gsap.com | 모션 라이브러리 + 쇼케이스 | 타임라인·스크롤 모션 | **2026년 전면 무료** | ScrollTrigger 포함 전 플러그인 무료화 |
+| Motion (구 Framer Motion) | https://motion.dev | 웹 애니메이션 라이브러리 | React 모션 | 무료 | 문서의 이징 가이드가 좋음 |
+| LottieFiles | https://lottiefiles.com | 벡터 애니메이션 에셋 | 아이콘·일러스트 모션 | 무료 + 유료 | 남용하면 즉시 슬롭이 되니 절제 |
+| Eyecandy | https://eyecannndy.com | 모션 **기법**을 이름 붙여 분류 | "무슨 기법인지" 언어화 | 무료 | **기법명이 텍스트로 있어 AI에게 최상급 소스** |
+| Landing.love | https://www.landing.love | 애니메이션 랜딩 모음 | 스크롤 연출 참고 | 무료 | 영상 프리뷰 제공 |
+| Art of the Title | https://www.artofthetitle.com | 영화 타이틀 시퀀스 | 인트로·로딩 연출 | 무료 | 웹 밖에서 모션 언어 훔치기 |
+
+---
+
+## 13. 디자인 시스템
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Design Systems Repo | https://designsystemsrepo.com | 공개 디자인 시스템 디렉토리 | 토큰·컴포넌트 구조 참고 | 무료 | 가장 오래된 집계처 |
+| DesignSystems.one | https://www.designsystems.one | 88개 실사용 시스템 + design.md | **AI에 먹일 토큰 문서** 확보 | 무료 | 각 항목에 design.md 다운로드 제공 |
+| Designsystems.com | https://www.designsystems.com | 시스템 구축 방법론 글 | 시스템을 만들 때 | 무료 | Figma 운영 |
+| DESIGN.md | https://designmd.app | AI 에이전트용 디자인 시스템 파일 561개 | 스킬에 주입할 스타일 정의 | 무료 | **designpaca 스킬과 직접 연결되는 포맷** |
+| Refero Styles (AI Agents) | https://styles.refero.design | AI 에이전트용 디자인 프롬프트·DESIGN.md 예시 | 프롬프트 구조 설계 | 무료 | 02번 문서의 근거 소스 |
+| Nielsen Norman Group | https://www.nngroup.com | UX 리서치 원문 | 패턴의 근거가 필요할 때 | 무료 | 트렌드 대신 원칙 |
+| Smashing Magazine | https://www.smashingmagazine.com | 심층 프론트엔드·디자인 글 | 구현 근거 | 무료 | 접근성·CSS 최신 정보 |
+
+---
+
+## 14. 이미지 · 텍스처 · 그래픽 에셋
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Unsplash `[!]` | https://unsplash.com | 무료 사진 | 사진이 필요할 때 | 무료 | **"랩탑 앞 다국적 팀"류는 즉시 슬롭. 추상·질감 위주로만** |
+| Pexels | https://www.pexels.com | 무료 사진·영상 | 배경 영상 | 무료 | 위와 동일 주의 |
+| Pattern Club | https://patternclub.io | 패턴·텍스처 | 배경 질감 | 무료 일부 | 반복 패턴 |
+| Modern Illustration | https://modernillustration.org | 동시대 일러스트 | 일러스트 방향 | 무료 | 스타일 사조별 |
+| Illustration.lol | https://illustration.lol | 에디토리얼 일러스트 | 기사·블로그 삽화 | 무료 | 잡지 삽화 중심 |
+| Behance UI/UX 갤러리 | https://www.behance.net/galleries/ui-ux | UI/UX 프로젝트 케이스 | 과정과 근거 | 무료 | 다단계 케이스스터디 |
+| Data Viz Project | https://www.datavizproject.com | 차트 유형 사전 | 데이터 시각화 선택 | 무료 | 차트 유형별 적합성 |
+
+---
+
+## 15. 무드보드 · 수집 · 정리 도구
+
+**레퍼런스를 "모으는" 단계의 도구. AI 에이전트는 여기 대신 파일로 무드보드를 만든다 (02번 §4 참조).**
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Are.na | https://www.are.na | 블록·채널 기반 큐레이션 | 장기 리서치 축적 | 무료 + 유료 | 한 블록이 여러 채널에 존재 → 연결형 사고 |
+| Savee | https://savee.it | 비주얼 클리핑 | 순수 시각 수집 | **유료 전용 ($9/월)** | 무료 체험 폐지됨 |
+| Cosmos | https://www.cosmos.so | AI 큐레이션 비주얼 디스커버리 | 취향 기반 탐색 | 무료 + 프로 | **AI 생성 이미지를 필터링해줌** |
+| Designspiration | https://www.designspiration.com | 색 기반 검색 가능한 수집 | 색으로 레퍼런스 찾기 | 무료 | 색 검색이 강점 |
+| Mymind | https://mymind.com | 개인 전용 자동 정리 | 혼자 쓰는 저장소 | 유료 | 태그를 자동 생성 |
+| Kive | https://kive.ai | AI 기반 에셋 검색 | 대량 에셋 관리 | 유료 | 팀 단위 |
+| Pinterest | https://www.pinterest.com | 범용 이미지 수집 | 클라이언트와 톤 합의 | 무료 | **출처 추적 불가 + AI 이미지 오염 심함. 최후순위** |
+| Muzli | https://muz.li | 디자인 뉴스 애그리게이터 | 수동적 트렌드 유입 | 무료 | 크롬 새탭 확장 |
+
+---
+
+## 16. 브랜딩 · 그래픽 · 로고
+
+웹 밖에서 톤을 훔쳐오는 곳. **웹 갤러리만 보면 웹처럼 생긴 것만 나온다.**
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| The Brand Identity | https://the-brandidentity.com | 브랜딩 프로젝트 심층 | 브랜드 톤 전체 설계 | 무료 | 케이스별 근거 설명이 충실 |
+| Branding Style Guides | https://brandingstyleguides.com | 실제 브랜드 가이드라인 | 규칙 문서 작성 | 무료 | **가이드 문서 구조 자체가 참고 대상** |
+| Brand Guidelines | https://brandguidelines.net | 브랜드 가이드 아카이브 | 위와 동일 | 무료 | 보완용 |
+| Rebrand Gallery | https://rebrand.gallery | 리브랜딩 전후 비교 | 개편 브리프 | 무료 | **before/after가 있어 "왜 바꿨나"를 학습 가능** |
+| Mindsparkle Mag | https://mindsparklemag.com | 큐레이션된 그래픽 프로젝트 | 인쇄·패키지까지 | 무료 | 웹 밖 사조 유입 |
+| AIGA Eye on Design | https://eyeondesign.aiga.org | 디자인 저널리즘 | 맥락과 담론 | 무료 | 트렌드의 "이유"를 다룸 |
+| Visuelle | https://visuelle.co.uk | 동시대 그래픽 작업 | 영국·유럽 톤 | 무료 | 인쇄물 비중 높음 |
+| Inspiration Grid | https://theinspirationgrid.com | 그래픽·브랜딩 일간 | 넓은 유입 | 무료 | 볼륨형 |
+| The Index | https://theindex.website | 그래픽 디자인 디렉토리 | 스튜디오 발굴 | 무료 | 스튜디오 사이트로 이어짐 |
+| Trending.design | https://trending.design | 트렌딩 그래픽 | 지금 뜨는 것 | 무료 | 짧은 주기 |
+| Logobook | https://logobook.com | 로고 아카이브 | 마크 설계 | 무료 | 고전 로고 다수 |
+| Logo System | https://logosystem.co | 실제·가상 로고 | 로고 시스템 | 무료 | 시스템 단위 |
+| LogoLounge | https://www.logolounge.com | 대규모 로고 DB | 로고 리서치 | 유료 | 연간 트렌드 리포트로 유명 |
+| Deck.gallery | https://www.deck.gallery | 잘 만든 발표 자료 | 피치덱·소개 자료 | 무료 | 웹이 아닌 문서 디자인 |
+| Steep | https://steep.design | 스토리형 크리에이티브 | 세로 스토리 포맷 | 무료 | 모바일 세로 구성 |
+| Love The Work More | https://lovetheworkmore.com | 수상 광고 캠페인 | 카피와 아이디어 | 무료 | 웹 카피 톤 자극 |
+| Adfolio `[!]` | https://adfolio.design | 소셜 광고 | 짧은 카피 | 무료 | 봇 차단 있음 |
+
+---
+
+## 17. 아카이브 · 메타 디렉토리 · 커뮤니티
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Web Design Museum | https://www.webdesignmuseum.org | 1991–2010년대 웹 아카이브 | 레트로·노스탤지어 브리프 | 무료 | 시대별 고증이 정확 |
+| Curated.design | https://curated.design | 디자인 리소스 디렉토리 | 도구·에셋 탐색 | 무료 | 메타 디렉토리 |
+| toools.design | https://www.toools.design | 디자인 도구·리소스 대량 집계 | 도구가 필요할 때 | 무료 | 이 카탈로그의 원 소스 중 하나 |
+| Design Spells | https://www.designspells.com | "마법 같은" 디테일 순간 | 디테일 한 방 | 무료 | 짧은 클립 중심 |
+| Recent.design | https://recent.design | 최신 UI/UX | 빠른 스캔 | 무료 | 갱신 빠름 |
+| Design Vault | https://designvault.io | UI 패턴 아카이브 | 패턴 단위 | 무료 일부 | 실제 제품 캡처 |
+| Collect UI | https://collectui.com | Daily UI 기반 수집 | 컴포넌트 발상 | 무료 | Dribbble 기반이라 비현실적인 것 섞임 |
+| Viewport UI | https://viewport-ui.design | 큐레이션된 UI 경험 | 화면 단위 | 무료 | 소규모 정예 |
+| Dribbble | https://dribbble.com | 디자인 커뮤니티 | 색·타이포 발상만 | 무료 + 유료 | **구현 불가능한 "샷"이 많다. 구조 참고 금지** |
+| Behance | https://www.behance.net | 프로젝트 케이스스터디 | 과정과 근거 | 무료 | 다단계 케이스가 강점 |
+| Best Website Gallery | https://bestwebsite.gallery | 오래된 큐레이션 갤러리 | 넓은 유입 | 무료 | 2010년대 감각 다수 |
+| Humaan | https://www.humaan.com | (스튜디오) 자체 작업 | 스튜디오 수준 기준선 | 무료 | 개별 스튜디오 사이트도 레퍼런스다 |
+
+---
+
+## 18. 다크 모드 전용
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Dark Mode Design | https://darkmodedesign.com | 다크 테마 웹 | 다크가 **요구된** 브리프 | 무료 | 다크에서의 대비 처리 학습 |
+| dark.design | https://dark.design | 다크 테마 베스트 | 위와 동일 | 무료 | 큐레이션 강도 높음 |
+
+> **경고**: 다크 모드는 AI 슬롭 1순위 시그니처다. 브리프가 요구하지 않으면 다크를 기본값으로 삼지 마라 (04번 A-01 참조).
+
+---
+
+## 19. 국내(한국) 레퍼런스
+
+한국어 타이포·정보 밀도·업종 관행은 서구 갤러리에서 안 나온다. **한국어 프로젝트면 반드시 1개 이상 포함.**
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| 노트폴리오 | https://notefolio.net | 국내 디자이너 포트폴리오·작업물 | 한국어 타이포·레이아웃 감각 | 무료 | 국내 최대 창작자 플랫폼 |
+| 디비컷 (DBCUT) | https://www.dbcut.com | 국내외 신규 사이트 평가·아카이브 | 국내 기업·기관 사이트 관행 | 무료 | 커뮤니티 평가 기능 |
+| GDWeb | https://gdweb.co.kr | 국내 에이전시·제작사 포트폴리오 | 국내 에이전시 수준선 | 무료 | 분야별 순위 제공 |
+| 눈누 | https://noonnu.cc | 상업용 무료 한글 폰트 | 한글 폰트 선정 | 무료 | 10번 항목과 중복 게재 |
+
+---
+
+## 링크 상태 리포트 (2026-08-20 검증)
+
+전체 155개 URL에 대해 curl로 최종 상태 코드를 확인했다. **완전히 죽은 링크는 없었다.**
+
+| 상태 | 대상 | 해석 |
+|---|---|---|
+| **HTTPS 연결 거부** | commercecream.com | DNS는 살아있으나 443 포트 연결 거부(Connection refused). HTTP로만 200 응답. **사실상 방치 상태 — 인용 시 주의**. 이 문서에서는 `http://`로 표기 |
+| 403 (봇 차단) | cssdesignawards.com | 브라우저로는 정상. 자동 접근(WebFetch/curl) 불가 |
+| 429 (레이트 리밋) | siteinspire.com, refs.gallery, adfolio.design | 정상 운영 중. 자동 접근 시 간헐 차단 |
+| 455 (Cloudflare 차단) | uncut.wtf | 정상 운영 중. 봇 차단 정책 |
+| 401 | unsplash.com | API 인증 요구. 브라우저 접근은 정상 |
+| 200 | 나머지 149개 전부 | 정상 |
+
+**AI 에이전트 관점 시사점**: 위 6개 사이트는 `WebFetch`로 읽을 수 없다.
+자동 리서치 파이프라인에서는 **Godly, Land-book, Lapa Ninja, Typewolf, Codrops, UI Sources, Eyecandy, DesignSystems.one**처럼
+텍스트 설명이 충실하고 봇 차단이 없는 소스를 1순위로 잡아라 (02번 §5 참조).