[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-78007":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":15,"stars30d":16,"stars90d":14,"forks30d":14,"starsTrendScore":17,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":9,"pushedAt":9,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":14,"starSnapshotCount":14,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},78007,"design-diversity","epoko77-ai\u002Fdesign-diversity","epoko77-ai","Claude Code 산출물의 디자인 다양성 확보 — 공개 디자인 시스템을 증류한 프롬프트형 디자인 팩 100종 카탈로그 (PPT 50 + 웹 50)",null,"TypeScript",154,29,1,0,6,132,4,4.43,"Other",false,"main",true,[],"2026-06-12 02:03:45","# Design Diversity\n\n![Design Diversity — AI도 매번 다른 PPT·웹사이트를 만들 수 있습니다](.\u002Fassets\u002Fsocial-preview.png)\n\n> AI에게 PPT·웹사이트를 맡기면 결과물이 늘 비슷합니다. **design-pick 스킬**을 설치하면,\n> 서로 뚜렷이 구별되는 **100가지 디자인 스타일** 중 하나를 골라 Claude가 그 스타일대로 만들어 줍니다.\n\n🌐 **카탈로그 둘러보기:** https:\u002F\u002Fdesign-diversity.vercel.app\n\n## 왜\n\n생성형 AI에게 \"PPT 만들어줘\", \"랜딩페이지 만들어줘\"라고 하면 결과물이 서로 닮습니다 — 같은\n그라디언트, 같은 둥근 카드, 같은 산세리프. 모델이 \"안전한 평균\"으로 수렴하기 때문입니다.\n문제는 AI의 한계가 아니라 \"어떤 디자인으로\"를 알려주지 않은 것뿐입니다.\n\n## 무엇 — `design-pick` 스킬\n\n`skills\u002Fdesign-pick\u002F`는 Claude Code용 **소비자 스킬**입니다. 설치하면:\n\n- \"고급스러운 다크 톤으로 발표자료 만들어줘\"처럼 **느낌만 말하면** 어울리는 팩 2~3개를 추천하고,\n- 팩 **슬러그를 직접 지정**하면(예: `web-velvet-dark-boutique`) 그 팩으로 바로 생성하고,\n- 고른 팩의 정밀 명세(색·타이포·레이아웃·차트·다이어그램·\"하지 말 것\")를 그대로 적용합니다.\n\n100개 팩(PPT 50 + 웹 50, 이 중 20개는 5~7개 상세 페이지를 갖춘 프리미엄 팩)의 명세가 스킬 안에 `references\u002F`로 번들돼 있어, 설치 후엔 네트워크\n없이 동작합니다.\n\n## 설치\n\n```bash\n# Claude Code 프로젝트에 설치\ncp -r skills\u002Fdesign-pick YOUR_PROJECT\u002F.claude\u002Fskills\u002F\n# 또는 전역 설치\ncp -r skills\u002Fdesign-pick ~\u002F.claude\u002Fskills\u002F\n```\n\n## 쓰는 법\n\n1. **둘러보고 고르기 (시각적)** — [카탈로그 사이트](https:\u002F\u002Fdesign-diversity.vercel.app)에서 100팩의\n   미리보기를 보고 마음에 드는 팩의 슬러그를 확인합니다.\n2. **Claude Code에서 적용** — 스킬이 설치된 상태에서 이렇게 요청합니다:\n\n   > `design-pick` 스킬로 **web-velvet-dark-boutique** 팩을 적용해서 *제품 소개* 웹사이트를 만들어줘\n\n3. **또는 느낌만 말하기** — \"전문적인 컨설팅 느낌 PPT 만들어줘\"라고 하면 스킬이 후보를 추천합니다.\n\n## 저장소 구성\n\n| 경로 | 내용 |\n| --- | --- |\n| `skills\u002Fdesign-pick\u002F` | **소비자 스킬** — 설치해서 쓰는 본체. SKILL.md + 100팩 명세 references. |\n| `design-packs\u002F` | 100팩 원본 자산 — 각 폴더에 `prompt.md`·`tokens.json`·`preview.png`·`meta.yaml`. |\n| `catalog.json` | 100팩 머신리더블 인덱스 (schema v2 — `category`\u002F`pages` 포함). |\n| `site\u002F` | Next.js 15 카탈로그 웹사이트(둘러보기·picker). |\n| `.claude\u002F` | 이 카탈로그를 **만든** 빌드 하네스(에이전트 7 + 스킬 8). \"어떻게 만들었나\" 아카이브. |\n\n각 팩은 5개 스타일 축으로 분류됩니다: **color · type · layout · space · motion**.\n\n## 카탈로그 사이트 빌드\n\n```bash\ncd site && npm install && npm run build\n```\n\n## 기여\n\n새 팩 추가는 [CONTRIBUTING.md](.\u002FCONTRIBUTING.md) 참고.\n\n## 라이선스\n\n디자인 명세(`prompt.md`)·토큰(`tokens.json`)·문서·스킬은 [MIT](.\u002FLICENSE). 각 팩은 공개 디자인\n시스템·스타일에서 학습한 **시각 원리의 명세**이며 특정 제품의 상표·로고·독점 자산을 재배포하지\n않습니다. 학습 출처는 각 팩 `meta.yaml`에 기재.\n","Design Diversity 是一个旨在通过AI生成多样化PPT和网页设计的项目，它提供了一套包含40种设计风格（PPT 20种，网页20种）的目录。其核心功能是通过`design-pick`技能为Claude Code添加多样化的设计方案选择能力，用户可以通过指定风格或描述所需的感觉来获得更加个性化的输出结果。该项目采用TypeScript开发，支持离线运行，并且提供了详细的安装与使用指南，适合需要利用AI快速创建具有独特视觉效果的演示文稿或网站但又希望避免设计同质化的场景。",2,"2026-06-11 03:56:19","CREATED_QUERY"]