8808c672dc
웹 디자인 파이프라인 스킬과 이를 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)
16 KiB
16 KiB
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번 문서 근거)
D. 타이포그래피 · 폰트 (03번 §3, §7 근거)
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번 문서 근거)
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개 |
다음 갱신 시 확인할 것
- Krebs 데이터셋 확장 여부 — 1,590건이 늘어나면 검출률 수치가 바뀐다 (04번 §0)
- Awwwards 2026 Q3–Q4 SOTD 분포 — 3D 61% 비중이 계속 오르는지, 꺾이는지 (03번 §1.2)
- CSS scroll-driven animation 실사용률 — GSAP 의존이 실제로 줄고 있는지 (03번 §5.1)
- commercecream.com HTTPS 복구 여부 — 계속 죽어 있으면 01번에서 제거
- Savee 가격 정책 — 무료 체험 재도입 시 01번 §15 수정