diagram-design (Claude Code 스킬)

개요

Claude Code / Claude Cowork / Codex에서 동작하는 다이어그램 생성 스킬. 27종의 에디토리얼 품질 다이어그램을 자기완결 HTML + SVG로 만들어내며, 사용자 웹사이트에서 브랜드 토큰을 추출해 전 타입에 일괄 적용한다.

저장소: cathrynlavery/diagram-design (GitHub)
버전 이력: 2.0에서 Loop 타입(공유 메모리 허브를 둔 플라이휠, 점선은 write-back) 추가
설치 경로 1: repo 클론 후 skills/diagram-design을 ~/.claude/skills/에 심볼릭 링크 — 스타일 가이드 직접 수정이 유지됨
설치 경로 2: /plugin marketplace add cathrynlavery/diagram-design → 플러그인 설치. 간편하지만 플러그인 캐시에 있어 style-guide.md 수정이 업데이트 시 소실
설치 경로 3 (Codex): npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design
구조: SKILL.md(상시 로드, 철학·선택 가이드·체크리스트) + references/(타입별·프리미티브별 34개 파일, 필요 시만 로드) + assets/(갤러리·템플릿·예제) + docs/screenshots/
프리미티브 3종: annotation callout(이탤릭 세리프 + 대시 베지어 리더선), sketchy filter(SVG turbulence 손그림 변형), terminal(차콜 CLI 창 변형)
아이콘: 55종 모노크롬 IT/클라우드 아이콘. Tabler Icons(MIT) 스트로크 + Simple Icons(CC0) 브랜드 실루엣, 전부 currentColor 상속
기본 팔레트: jet-black + atomic-tangerine (white-smoke paper, jet-black ink, atomic-tangerine accent, blue-slate muted, silver hairline)
의존성: PNG 내보내기에 한해 pip install playwright && playwright install chromium 1회 필요. 그 외 빌드 의존성 없음

27종. Claude Code 스킬 하나. 60초 만에 당신의 브랜드로 — 스킬이 당신의 웹사이트를 읽고 컬러와 폰트를 모든 다이어그램에 매핑한다. Figma 없음. 일반적인 둥근 박스 없음. 30분짜리 컬러 고르기 세션 없음.