diagram-design
무엇인가
diagram-design은 AI 코딩 에이전트가 다이어그램을 만들 때 적용할 레이아웃 문법과 시각 규칙을 주입하는 스킬 팩이다. 규율하는 영역은 도형 선택, 밀도, 강조색 사용, 산출물 형식이다. 아키텍처·흐름·계층·비교·시계열·데이터 파이프라인처럼 설명 목적이 분명한 그림을 대상으로 하며, 노드 하나하나가 존재 이유를 가져야 한다는 규칙과 강조색을 독자가 먼저 볼 1~2개 요소에만 배정하는 규칙을 포함한다. 목표 밀도는 4/10으로 고정된다.
어떻게 동작하나
규칙은 SKILL.md에 담기고, assets/index.html 갤러리가 39개 유형의 실제 산출물을 겸한다. 각 유형은 minimal light, minimal dark, full-editorial 세 가지 정적 변형으로 제공되며 브라우저에서 바로 열린다. 빌드 단계, JavaScript, 외부 이미지 의존성이 없다. 시맨틱 패턴 계층이 동작 설명과 레이아웃을 분리하므로 큐, 정책 추적, 신뢰 경계 같은 개념을 유형 수를 늘리지 않고 가장 가까운 기존 유형에 실어 표현한다. 정적 HTML이 기본값이고, 순서가 있는 설명에 한해 선택적 모션이 붙는다. draw.io, Mermaid, Excalidraw 소스를 지정한 포맷·크기·디테일 수준으로 다시 그리는 동작도 규칙에 포함된다.
무엇과 다른가
Mermaid는 레이아웃을 자동 계산해 도형과 간격을 사용자가 통제하지 못하고, Figma는 배치를 전부 수동으로 잡아야 한다. 이 스킬은 유형 카탈로그와 고정 변형을 먼저 제시하고 그 안에서 선택하게 한다. 그림자와 일반적인 둥근 상자를 금지하고, 웹사이트를 읽어 브랜드 색과 서체를 60초 안에 맞추는 절차를 둔 점이 프롬프트를 매번 직접 작성하는 방식과 다르다. 유형 목록 자체가 산출물 스펙 역할을 하므로 결과물의 편차가 줄어든다.
어떻게 쓰나
Claude Code에서는 `/plugin marketplace add cathrynlavery/diagram-design` 후 `/plugin install diagram-design@diagram-design`으로 붙이고, `/plugin`에서 Marketplaces → diagram-design → Enable auto-update를 한 번 켜야 자동 갱신이 활성화된다. Codex는 `codex plugin marketplace add`와 `codex plugin add`, GitHub Copilot은 `copilot plugin marketplace add`와 `copilot plugin install`, Factory Droid는 `droid plugin marketplace add`와 `droid plugin install --scope user`를 쓴다. 설치 후에는 자연어로 다이어그램을 요청하면 되고, 유형을 눈으로 고르려면 `skills/diagram-design/assets/index.html`을 열거나 배포된 갤러리를 본다.
전제와 한계
Claude Code, Codex, Factory Droid, Pi, 그리고 Agent Skills 호환 호스트에서 동작한다. 산출물은 정적 HTML+SVG가 기본이며 모션은 선택 사항이다. Figma 연동은 제공하지 않고, 외부 이미지나 빌드 파이프라인에 의존하는 워크플로도 지원하지 않는다. Droid는 매니페스트의 표시 버전이 아니라 커밋 기준으로 Git 플러그인을 추적하므로 갱신 시점이 다른 호스트와 어긋날 수 있다.