菜单
웹사이트 고유의 시각 관용을 디자인 팩으로 증류하는 지식 스킬. web-pack-curator가 사용한다. 반응형·뷰포트, 컴포넌트 단위 구성, 스크롤·호버·전환 모션, 접근성 대비를 검증 가능한 prompt.md 지시로 옮기는 방법과, HTML/CSS로 곧장 구현 가능한 수준의 구체성을 규정한다.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/epoko77-ai/design-diversity --skill web-design-idioms命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
디자인 팩의 prompt.md로 실제 PPT 슬라이드/웹 페이지 샘플을 생성하고, 동일 콘텐츠의 baseline 출력도 함께 만들어 preview.png를 렌더하는 방법론 스킬. sample-renderer 에이전트가 사용한다. 공정 대조용 더미 콘텐츠(fixture), 트랙별 렌더 경로, 폰트 폴백 처리를 규정한다.
검증 통과한 디자인 팩을 GitHub 공개 레포로 구조화하고, 팩을 탐색·필터·복사할 수 있는 Next.js 카탈로그 웹사이트로 빌드해 Vercel에 배포하는 방법론 스킬. catalog-publisher 에이전트가 사용한다. 레포 레이아웃, README/CONTRIBUTING/LICENSE 구성, 정적 사이트 사양, 배포 절차, 자체 QA 체크리스트를 규정한다.
"세련됨"이라는 모호어를 렌더 산출물에서 실제로 판정 가능한 항목으로 분해해 채점하는 방법론 스킬. craft-qa 에이전트가 사용한다. 결정적 기계 검사(캔버스 규격·해시 신선도·대비·폰트 로드·그리드 스냅· 여백 토큰·차트 데이터잉크)를 먼저 돌리고, 기계가 못 잡는 광학 정렬·리듬만 시각 검수로 넘긴다. hard fail 항목은 점수와 무관하게 발행을 차단한다.
基于 SOC 职业分类
正在显示 SKILL.md
| name | web-design-idioms |
| description | 웹사이트 고유의 시각 관용을 디자인 팩으로 증류하는 지식 스킬. web-pack-curator가 사용한다. 반응형·뷰포트, 컴포넌트 단위 구성, 스크롤·호버·전환 모션, 접근성 대비를 검증 가능한 prompt.md 지시로 옮기는 방법과, HTML/CSS로 곧장 구현 가능한 수준의 구체성을 규정한다. |
web-pack-curator가 웹 스타일을 팩으로 증류할 때 따르는, 웹 매체 고유의 지식.
clamp() 타이포를 지시한다.팩의 prompt.md는 최소 이 컴포넌트들에 대한 지시를 담는다:
diversity-qa가 시각 대조하므로 모호어는 통과하지 못한다. CSS로 곧장 구현되는 값으로 적는다:
| 모호 (금지) | 검증 가능 (사용) |
|---|---|
| "깔끔한 레이아웃" | "콘텐츠 최대 폭 1100px, 섹션 간격 96px, 12열 그리드" |
| "읽기 좋은 본문" | "본문 16 |
| "부드러운 모션" | "전환 200ms ease-out, 호버 시 translateY(-2px)" |
| "카드 디자인" | "radius 0, 보더 1px solid text색, 그림자 없음, 호버 시 배경 반전" |
| "강조 색" | "강조색 1개, CTA·링크에만, 면적 5% 이하" |
이 스킬의 값(콘텐츠 폭 1100px, 본문 16~18px, 전환 200ms 등)은 원본이 없을 때의 일반 권고다. exact_document·official_system·historical_canon 팩에서는 근거 인벤토리에서 관찰된 값이 우선한다. 예외는 접근성(WCAG AA)·권리(유료 폰트·상표)뿐이며, 벗어날 때는 transform_contract에 adapt로 기록한다.
웹 레퍼런스는 PPT와 달리 상태와 뷰포트가 있다. 관찰 기록에 다음을 반드시 포함한다 — 이것이 없으면 정적 스크린샷만으로 모션·인터랙션을 판정하게 되고, 그 판정은 근거가 없다.
{ "screen": "hero", "viewport": 1280, "state": "default",
"fold": "above", "observed": { "...": "..." } }
뷰포트는 최소 375 / 768 / 1280 세 폭, 상태는 default / hover / focus를 각각 기록한다. 캡처하지 못한 상태는 unobserved로 두고 팩에서 그 상태를 지시하지 않는다.
reference_mode: style_synthesis에서만 복수 출처가 공통으로 지지하는 축을 수치화해 또렷하게 만든다. exact_document·official_system·historical_canon에서는 근거 인벤토리와 변환 계약을 넘는 과장·새 모티프를 금지한다 — 없던 것을 더하면 fidelity F3(근거 정밀도)에서 반려된다.
다양성이 목적이다. 각 팩은 자기 스타일을 끝까지 민다:
backdrop-filter: blur, 반투명 표면, 라이트 그라디언트 배경.
baseline(보라 그라디언트·둥근 카드·균일 그림자의 기본 AI 미감)과 한눈에 구별되지 않으면 실패다.웹에서 Claude가 기본값으로 흔히 회귀하는 것 — 팩 성격에 맞게 prompt.md의 "하지 말 것"에 명시:
sample-renderer가 prompt.md만으로 실제 HTML/CSS(또는 Tailwind)를 렌더한다. 지시는 표준 CSS 속성으로 번역 가능해야 한다 — 실현 불가능한 효과나 외부 유료 자산 의존을 넣지 않는다. 폰트는 Google Fonts 등 공개 웹폰트 또는 시스템 폰트로 지정한다.