yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

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

Browse source 
웹 디자인 파이프라인 스킬과 이를 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)
This commit is contained in:
Yun Chan 2026-08-20 10:48:00 +09:00
commit 8808c672dc
135 changed files with 38838 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

181
research/references/05-sources.md Normal file
View file

@ -0,0 +1,181 @@
# 05 — 출처 목록
> **이 리서치에서 실제로 열어보고 인용한 소스 95개.**
> 별도로 **01번 문서에 갤러리·도구 URL 155개**가 있으며 그쪽도 전부 개별 검증했다.
> 모든 상태 코드는 **2026-08-20** curl 실측치.
>
> 상태 표기: `OK` = 200 · `BOT` = 봇 차단(브라우저는 정상) · `DEAD` = 소멸
---
## A. AI 슬롭 · 생성 디자인 지문 (04번 문서의 근거)
| # | URL | 상태 | 한 줄 설명 |
|---|---|---|---|
| 1 | https://www.adriankrebs.ch/blog/design-slop/ | OK | **가장 중요한 1차 소스.** Show HN 랜딩 1,590개를 Playwright로 렌더해 16개 DOM·CSS 규칙으로 채점한 실측 연구 (heavy 22% / mild 32% / clean 46%) |
| 2 | https://www.developersdigest.tech/blog/ai-design-slop-and-how-to-spot-it | OK | 위 연구의 16개 패턴을 폰트·색·레이아웃·CSS 프레임워크 4군으로 정리한 해설 |
| 3 | https://impeccable.style/slop/ | OK | 슬롭 시그니처를 시각·타이포·색·여백·모션·카피·이미지로 나눠 가장 많이 열거한 목록. 04번 문서의 뼈대 |
| 4 | https://vibecodekit.dev/ai-slop-design | OK | shadcn 기본값(`rounded-2xl shadow-lg p-6`), 카드 좌측 컬러 스트립, 벤토 남용 등 코드 레벨 지문과 수정법 |
| 5 | https://www.925studios.co/blog/ai-slop-web-design-guide | OK | Inter 기본값·보라파랑 그라디언트·radius 16px 균일화·스톡 사진 등 시그니처와 대안 폰트 제안 |
| 6 | https://growthguys.tech/blog/genuine-website-vs-ai-slop.html | OK | 60초 판별법. **경쟁사 치환 테스트**와 신뢰 신호 부재 목록의 출처 |
| 7 | https://dev.to/alanwest/how-to-fix-the-ai-generated-look-in-your-frontend-1ahh | OK | `indigo-600`·`slate-900` 등 Tailwind 기본 토큰 의존, 표준 섹션 골격(hero→features→social proof→pricing→FAQ→footer)의 출처 |
| 8 | https://rnauval.dev/en/blog/improve-web-design-without-ai-slop | OK | 슬롭 회피를 위해 레퍼런스 라이브러리를 컨텍스트로 주입하라는 접근 |
| 9 | https://gigazine.net/gsc_news/en/20260423-design-slop/ | OK | Krebs 연구를 다룬 보도. 검출률 수치(CTA 보라 10.7%, 전체 대문자 10.5%, 번호 단계 9.4%) |
| 10 | https://news.ycombinator.com/item?id=47864393 | BOT(429) | Krebs 연구의 HN 토론 스레드. 실무자 반론 포함 |
| 11 | https://medium.com/@sahilkargutkar.sk/your-website-looks-like-ai-made-it-and-thats-becoming-a-problem-e679668ca7f4 | BOT(403) | "AI가 만든 것처럼 보이는 것"이 비즈니스 문제가 되는 지점을 다룸 |
| 12 | https://aiproductivity.ai/news/how-to-spot-ai-slop-websites/ | **DEAD (410)** | 슬롭 판별 가이드였으나 삭제됨. 대체로 6번 사용 |
| 13 | https://www.blakestockton.com/dont-write-like-ai-1-101-negation/ | OK | `It's not X, it's Y` 구문이 ChatGPT 최대 지문인 이유. F-01의 근거 |
| 14 | https://copyadscontent.com/signs-of-ai-writing/ | OK | AI 글쓰기 지문 32가지. 스타카토 3연타, em-dash 과다 등 F섹션 근거 |
| 15 | https://tailwindcss.com/docs/colors | OK | Tailwind 기본 팔레트 원문. A-08의 색 이름·11단계 스케일 확인용 |
---
## B. 어워드 · 수상작 실측 (03번 §1의 근거)
| # | URL | 상태 | 한 줄 설명 |
|---|---|---|---|
| 16 | https://www.awwwards.com/about-evaluation/ | OK | Awwwards 공식 평가 체계 원문. Design 40 / Usability 30 / Creativity 20 / Content 10 |
| 17 | https://www.hontran.dev/blog/awwwards-judging-criteria | OK | 심사 배점의 실무적 해석. 심사위원 18명·극단값 3개 제외·5일 투표 |
| 18 | https://www.hontran.dev/blog/best-award-winning-websites-2026 | OK | 2026년 실제 수상작 5건(By-Kin, Iventions, Mat Voyce, Uncommon, Minh Pham) 분석 |
| 19 | https://digitalstrategyforce.com/journal/why-are-immersive-experiences-dominating-the-2026-awwwards/ | OK | 2026 Q1 SOTD 47건의 기술 분포 실측 — 3D 61%, Three.js 29/47, 배경 비디오 8% 미만, 업종 분포 |
| 20 | https://www.awwwards.com/websites/sites_of_the_day/ | OK | SOTD 원본 아카이브. 트렌드 직접 확인용 |
| 21 | https://by-kin.com/ | OK | 2026 SOTD + Developer Award 수상작. 에디토리얼 타이포 사례 |
| 22 | https://iventions.com/ | OK | CSSDA Website of the Month. Three.js 조명 설계 사례 |
| 23 | https://matvoyce.tv | BOT(307) | GSAP SOTY 노미네이트. 키네틱 타입이 가독성을 유지한 드문 사례. 자동 접근 시 Location 없는 307 반환(봇 보호) |
| 24 | https://uncommonstudio.com.au/ | OK | 그리드를 정확한 지점에서만 깨는 사례 |
| 25 | https://minhpham.design/ | OK | 3D가 작업물을 압도하지 않는 절제 사례 |
---
## C. 2026 트렌드 (03번 문서 근거)
| # | URL | 상태 | 한 줄 설명 |
|---|---|---|---|
| 26 | https://studiomeyer.io/en/blog/webdesign-trends-2026-reality-check | OK | **가장 유용한 트렌드 소스.** 상반기 실측으로 "통한 것 / 과대평가 / 미달"을 구분. 벤토 +23%, 글래스모피즘 FPS -15~30%, Spline 800KB~2MB |
| 27 | https://elements.envato.com/learn/web-design-trends | OK | 2026 키네틱 타입·깨진 그리드·시각적 개성 회귀 |
| 28 | https://www.figma.com/resource-library/web-design-trends/ | OK | Figma의 2026 트렌드 정리 |
| 29 | https://www.frontendhorizon.com/blog/view-transitions-api-and-css-scroll-driven-animations-the-browser-wins-of-2026 | OK | View Transitions API·CSS scroll-driven animation의 크로스브라우저 안착. 05번 §5.1 근거 |
| 30 | https://dev.to/nickbenksim/creating-complex-scroll-driven-animations-with-pure-css-in-2026-17l | OK | `view-timeline`, `timeline-scope` 실전 구현 |
| 31 | https://www.loungelizard.com/blog/web-design-color-trends/ | OK | 2026 컬러 트렌드 |
| 32 | https://www.recursion.agency/blog/ui-color-trends-2026 | OK | Quiet Luxury / Digital Calm / Digital Neon 등 2026 팔레트 방향 구분 |
| 33 | https://www.devtoolnow.com/guides/color-formats-hex-rgb-hsl-oklch | OK | OKLCH가 표준이 된 이유와 HEX 대비 이점 |
| 34 | https://medium.com/@orami98/designing-responsive-accessible-color-schemes-in-css-for-2026-d651cc0658a6 | OK | OKLCH + `color-mix()` + 접근성 클램핑 실무 |
| 35 | https://www.maviklabs.com/blog/design-tokens-tailwind-v4-2026/ | OK | 의미 기반 토큰 설계 (Tailwind v4 + CSS 변수) |
| 36 | https://medium.com/@aksamark/web-design-trends-2026-why-minimalism-is-evolving-into-bento-grids-16839fd31fb7 | OK | 벤토 그리드가 미니멀리즘을 대체한 과정 |
| 37 | https://webpeak.org/blog/css-js-animation-trends/ | OK | 2026 CSS/JS 모션 트렌드와 마이크로 인터랙션 |
| 38 | https://www.codercops.com/blog/web-animation-gsap-framer-motion-css-2026 | OK | GSAP vs Motion vs 플랫폼 네이티브 선택 기준. GSAP 전면 무료화 |
| 39 | https://artcoastdesign.com/blog/best-graphic-design-textures-2026 | OK | 믹스드 미디어·필름 그레인 등 2026 질감 트렌드 |
---
## D. 타이포그래피 · 폰트 (03번 §3, §7 근거)
| # | URL | 상태 | 한 줄 설명 |
|---|---|---|---|
| 40 | https://www.typewolf.com/google-fonts | OK | 구글폰트 베스트 40, 본문용/디스플레이용 구분. 7.1절 추천의 기준 |
| 41 | https://www.typewolf.com/adobe-fonts | OK | Adobe Fonts 베스트 40 |
| 42 | https://www.typewolf.com/lookbooks | OK | 파운드리별 타입 페어링 룩북 |
| 43 | https://designflea.com/typography-trends-2026/ | OK | 가변 폰트·브루탈리즘·세리프 부활 |
| 44 | https://www.wix.com/wixel/resources/typography-trends | OK | 2026 타이포 트렌드. 초대형 타입·세리프의 "의도" 신호 해석 |
| 45 | https://madegooddesigns.com/font-trends-2026/ | OK | 2026 폰트 12개 흐름 |
| 46 | https://atypeofamigo.com/quality-fonts-for-everyone-type-foundries-that-all-designers-should-know/ | OK | 오픈소스 파운드리(Velvetyne, OSP, Uncut) 소개 |
| 47 | https://velvetyne.fr/about/resources/ | OK | Velvetyne 리소스. 오픈소스 실험 타입 |
| 48 | https://github.com/orioncactus/pretendard | OK | **Pretendard 공식 저장소.** SIL OFL, Thin~Black 9단계, 가변 폰트, jsDelivr CDN 경로 |
| 49 | https://awz.kr/free-korean-fonts-commercial-use/ | OK | 상업 이용 가능 무료 한글 폰트 20종 정리 (제작처·웹폰트 지원·라이선스 표 포함). 7.3절의 근거 |
| 50 | https://hangulhub.co.kr/en/tools/fonts | OK | 상업 무료 한글 폰트 109종 갤러리 |
| 51 | https://noonnu.cc | OK | 눈누 — 한글 무료 폰트 수집처. 라이선스 범위 표기가 가장 명확 |
| 52 | https://www.freekoreanfont.com/paperlogy-font-download/ | OK | 페이퍼로지 9단계 지오메트릭 산세 상세 |
---
## E. 레퍼런스 활용 방법론 (02번 문서 근거)
| # | URL | 상태 | 한 줄 설명 |
|---|---|---|---|
| 53 | https://www.intercom.com/blog/how-to-steal-like-a-designer-and-boost-creativity/ | OK | Kleon의 "steal like an artist"를 디자인 실무로 옮긴 글. 복제와 참고의 경계 |
| 54 | https://medium.com/@ansimuz/copy-or-steal-using-references-to-create-your-art-653a3685fb19 | OK | 레퍼런스를 분해해 원리만 가져오는 방법 |
| 55 | https://miro.com/moodboard/how-to-make-a-moodboard/ | OK | 무드보드 구성 실무 |
| 56 | https://blog.cg-wire.com/animation-moodboard/ | OK | **40–60개 수집 → 12–20개로 압축**, 각 레퍼런스에 "결정 역할" 라벨링. 02번 §3·§4의 근거 |
| 57 | https://www.nngroup.com/videos/squint-test/ | OK | NN/g의 squint test 설명. 02번 축6 근거 |
| 58 | https://www.lukew.com/ff/entry.asp?2013= | OK | Luke Wroblewski의 squint test 원문 |
| 59 | https://www.nngroup.com/articles/good-visual-design/ | OK | 시각 디자인 평가 기준 (원칙 중심) |
| 60 | https://designlab.com/blog/design-critique-checklist-for-ux-designers | OK | 10항목 디자인 크리틱 체크리스트 |
| 61 | https://www.affinity.studio/blog/visual-hierarchy-in-design | OK | 회색조 스케치·8pt 그리드·타입 스케일 3단계 제한. 02번 §2 근거 |
| 62 | https://www.zekagraphic.com/grids-in-graphic-design-ultimate-guide/ | OK | 그리드 시스템 전반 |
---
## F. AI 에이전트 × 디자인 (02번 §5 근거)
| # | URL | 상태 | 한 줄 설명 |
|---|---|---|---|
| 63 | https://styles.refero.design/ai-agents/design-prompts | OK | **AI 에이전트용 디자인 프롬프트 구조.** "스타일과 구조를 동시에 요구하지 마라", 레퍼런스를 구현 요청 **앞에** 둘 것 |
| 64 | https://styles.refero.design/ai-agents/design-md-examples | OK | DESIGN.md 실제 예시 모음 |
| 65 | https://designmd.app/ | OK | AI 코딩 에이전트용 디자인 시스템 파일 561개 |
| 66 | https://www.designsystems.one/design-systems | OK | 88개 실사용 디자인 시스템 + 항목별 design.md 다운로드 |
| 67 | https://github.com/dembrandt/dembrandt | OK | 웹사이트의 디자인 토큰을 CLI로 추출하는 오픈소스. Playwright 렌더 후 computed style 분석. MCP 도구로 사용 가능 |
| 68 | https://www.dembrandt.com/blackpaper | OK | 위 도구의 토큰 추출 방법론 문서 |
| 69 | https://designsnap.dev/ | OK | 크롬 확장. computed style에서 색·폰트·그림자·CSS 변수를 뽑아 Tailwind/shadcn/Figma 토큰으로 내보냄 |
| 70 | https://www.mydesignmd.com/how-to-extract-a-design-system-from-any-website | OK | 임의 사이트에서 디자인 시스템을 추출하는 절차 |
| 71 | https://www.anthropic.com/engineering/effective-context-engineering-for-ai-agents | OK | 에이전트 컨텍스트 설계 원칙. 레퍼런스를 컨텍스트로 주입하는 방식의 근거 |
| 72 | https://www.augmentcode.com/guides/how-to-build-agents-md | OK | AGENTS.md 작성법. DESIGN.md와의 분리 구조 |
---
## G. 갤러리 카탈로그 수집원 (01번 문서 근거)
| # | URL | 상태 | 한 줄 설명 |
|---|---|---|---|
| 73 | https://www.toools.design/blog-posts/ultimate-list-100-best-inspiration-sites-to-inspire-designers | OK | **01번 카탈로그의 최대 수집원.** 100+ 사이트를 UI/UX·웹·모바일·SaaS·랜딩·이커머스·이메일·포트폴리오·모션·로고·일러스트·데이터시각화·브랜딩으로 분류 |
| 74 | https://colorlib.com/wp/showcase-inspiration-sites-web-design/ | OK | 주요 갤러리 16개의 성격 비교 (Awwwards vs CSSDA vs Godly vs SiteInspire 등) |
| 75 | https://www.siteofsites.co/ | OK | 갤러리의 갤러리. 카탈로그 갱신원 |
| 76 | https://coolcuration.com/cool/services-mobbin-vs-alternatives | OK | Mobbin vs Refero vs Page Flows 비교. Page Flows = Screenlane 후신이라는 사실의 출처 |
| 77 | https://www.producthunt.com/products/mobbin/alternatives | OK | Mobbin 대안 목록 |
| 78 | https://framify.design/blog/website-inspiration-for-framer-sites | OK | 고급 웹 인스피레이션 11선 |
| 79 | https://www.20i.com/blog/inspiration-sites-web-designers/ | BOT(403) | 인스피레이션 사이트 21선. 브라우저로는 정상 |
| 80 | https://muz.li/blog/best-color-palette-tools-and-generators-for-designers-2026/ | OK | 컬러 팔레트 도구 18종 실사용 비교. Khroma→Coolors→Stark 워크플로 |
| 81 | https://storyflow.so/blog/best-moodboard-tools-designers-2026 | OK | 무드보드 도구 비교 |
| 82 | https://www.refern.app/alternatives/best-are-na-alternatives | OK | Are.na·Savee·Cosmos의 성격과 가격 차이 (Savee 무료 체험 폐지 사실 포함) |
| 83 | https://invernessdesignstudio.com/cosmos-app-guide-7-ways-to-optimise-creative-vision-in-2026 | OK | Cosmos가 AI 생성 이미지를 필터링한다는 사실의 출처 |
| 84 | https://www.uxpin.com/studio/blog/best-design-system-examples/ | OK | 공개 디자인 시스템 15선 |
| 85 | https://reallygooddesigns.com/neo-brutalist-website-examples/ | OK | 네오브루탈리즘 사례 16선 |
| 86 | https://www.nngroup.com/articles/neobrutalism/ | OK | NN/g의 네오브루탈리즘 정의와 접근성 주의 |
| 87 | https://www.qodeinteractive.com/magazine/best-examples-of-brutalism-in-web-design/ | OK | 웹 브루탈리즘 60선. Brutalist Websites의 출처(2014, Pascal Deville) 확인 |
| 88 | https://resourceboy.com/textures/noise-textures/ | OK | 8K 무료 노이즈 텍스처 100종 |
| 89 | https://texturize.app/category/noise | OK | 무료 심리스 노이즈·그레인 텍스처 + 생성기 |
---
## H. 국내(한국) 소스
| # | URL | 상태 | 한 줄 설명 |
|---|---|---|---|
| 90 | https://notefolio.net | OK | 노트폴리오 — 국내 최대 창작자·디자이너 플랫폼 |
| 91 | https://www.dbcut.com | OK | 디비컷 — 국내외 신규 사이트 평가·아카이브 커뮤니티 |
| 92 | https://gdweb.co.kr | OK | GDWeb — 국내 웹 에이전시 큐레이션·순위 |
| 93 | https://ppcle.com/blog/web-design/web-design-reference-korea | OK | 국내 웹디자인 참고 사이트 정리 (쇼핑몰·기업 홈페이지 벤치마킹 관점) |
| 94 | https://simplewp.co.kr/ | OK | 국내외 웹디자인 레퍼런스 사이트 총정리 글의 출처 |
| 95 | https://brunch.co.kr/@@6Pxb/41 | 302(리다이렉트) | 국내 디자인 벤치마킹 사이트 정리. 브런치 리다이렉트 정책상 자동 접근 시 302 |
---
## 검증 요약
| 구분 | 개수 | 비고 |
|---|---|---|
| 05번 문서 인용 소스 | **95** | 아래 상태 분포 |
| ↳ 정상(200) | 89 | |
| ↳ 봇 차단 / 리다이렉트 | 5 | HN(429), Medium(403), 브런치(302), matvoyce.tv(307), 20i.com(403) — 브라우저로는 전부 정상 |
| ↳ **소멸(410)** | **1** | `aiproductivity.ai/news/how-to-spot-ai-slop-websites/` |
| 01번 문서 갤러리·도구 URL | **155** | 완전 소멸 0건, 접속 이상 6건 (01번 하단 리포트) |
| **총 검증 URL** | **250** (일부 중복 포함) | 2026-08-20 curl 실측. **죽은 링크는 전체에서 단 1개** |
---
## 다음 갱신 시 확인할 것
1. **Krebs 데이터셋 확장 여부** — 1,590건이 늘어나면 검출률 수치가 바뀐다 (04번 §0)
2. **Awwwards 2026 Q3–Q4 SOTD 분포** — 3D 61% 비중이 계속 오르는지, 꺾이는지 (03번 §1.2)
3. **CSS scroll-driven animation 실사용률** — GSAP 의존이 실제로 줄고 있는지 (03번 §5.1)
4. **commercecream.com HTTPS 복구 여부** — 계속 죽어 있으면 01번에서 제거
5. **Savee 가격 정책** — 무료 체험 재도입 시 01번 §15 수정