정의
LLM이 생성한 다이어그램이 “AI가 만든 티”를 내는 원인을 미적 감각이 아니라 규칙과 토큰의 부재로 규정하고, 27종 다이어그램 타입 × 3변형을 시맨틱 디자인 토큰 위에서 자기완결 HTML+SVG로 생성하는 Claude Code 스킬 아키텍처. Mermaid 계열의 일괄 렌더링과 대비된다.
핵심 속성
- 출력 형식: 빌드 단계·JS·외부 이미지 없는 self-contained HTML + 인라인 SVG. 브라우저에서 바로 열림
- 타입 수: 27종 (architecture, flowchart, sequence, state, ER, timeline, swimlane, quadrant, tree, org-chart, venn, layers, pyramid, radar, loop, gantt, scatter, medallion, data-flow 등)
- 변형: minimal light / minimal dark / full-editorial 3종 동시 제공
- 디자인 제약: 액센트 컬러 1개, 초점 요소 1~2개, 그림자 금지, 1px 헤어라인, border-radius 최대 10px, 모든 좌표·너비·간격이 4의 배수, 목표 밀도 4/10
- 폰트 체계: Instrument Serif(제목·이탤릭 콜아웃), Geist Sans(노드명), Geist Mono(기술 서브라벨 — 포트·URL·필드 타입 한정)
- 브랜드 온보딩: 사용자 웹사이트 URL을 주면 홈페이지를 fetch → 팔레트·폰트 스택 추출 →
paper/ink/muted/paper-2/accent/link시맨틱 롤에 매핑 → diff 제안 →references/style-guide.md에 기록 - 접근성 게이트: 토큰 기록 전
inkoverpaper의 WCAG AA 대비를 9~12px 기준으로 자동 검증하고, 실패 시 조정값과 사유를 함께 제시 - 초회 실행 게이트: 스타일 가이드가 기본값이면 브랜드 프로젝트에 기본 스킨을 조용히 배포하지 않고 일단 멈춰 사용자에게 확인
- 컨텍스트 전략:
SKILL.md만 상주하고references/type-*.md는 해당 타입이 선택될 때만 로드 (progressive disclosure). 참조 파일 34개 - 품질 검사:
scripts/lint-skin.py로 신규 예제 스킨 린트, 저장소 전체 baseline 검사가 green 유지 필수 - 내보내기:
/diagram-design:export로 SVG(Google Fonts 인라인 주입) / PNG(Playwright 2배 래스터화) - 비사용 조건 명시: 유니코드 한 줄 도식, 단순 목록, before/after 비교, 도형 1개짜리 “다이어그램”은 그리지 말 것
관계
- 20260531-ai-agent-skill-packaging-prompt — 연장. 반복 작업을 스킬로 패키징하는 일반 패턴의 디자인 도메인 구현체
- 20260605-harness-engineering — 상위개념. 모델 밖 규칙층으로 출력 품질을 통제
- 20260522-filesystem-as-agent-abstraction-layer — 연장. 스타일 가이드 마크다운 파일 1개가 27종 산출물의 단일 진실 원천
- 20260811-diagram-design-skill — 이 개념을 구현한 도구 엔티티
- 20260811-cathryn-lavery — 제작자
인용
가장 품질 높은 선택은 대개 삭제다. 모든 노드는 자기 자리를 스스로 벌어야 한다. 액센트 컬러는 독자가 가장 먼저 봐야 할 1~2개를 위해 예약된다. 목표 밀도는 4/10.
모든 좌표, 너비, 간격은 4로 나누어떨어져야 한다 — 타협 불가다. 다이어그램이 AI가 만든 것처럼 느껴지지 않게 하는 것이 바로 이것이다.
그리기 전에 물어라. 잘 쓰인 한 문단보다 이 그림에서 독자가 더 많이 배우는가? 아니라면 그리지 마라.