cathrynlavery/diagram-design
AI 코딩 도구가 그리는 다이어그램을 흔한 둥근 사각형 대신 잡지 느낌 편집 디자인으로 바꿔주는 스킬
Claude Code, Codex, Pi 같은 AI 코딩 도구에게 다이어그램을 그려달라고 하면 보통 밋밋한 둥근 사각형 그림이 나오는데, 이 저장소는 그 대신 신문·잡지 편집 디자인 스타일의 SVG 다이어그램 38종을 만들어주는 스킬을 제공한다. 이미지 빌드 과정 없이 HTML 파일 하나로 완결되며 브라우저에서 바로 열어볼 수 있다. 웹사이트 주소만 주면 그 사이트의 색상과 폰트를 60초 만에 읽어들여 다이어그램에 똑같이 입혀준다.
무엇을 하는 레포인가
- 아키텍처도, 순서도, 상태 다이어그램, 조직도 등 38가지 다이어그램 유형을 밝은 테마, 어두운 테마, 풀 에디토리얼(카드가 추가된 고급형) 세 가지 버전으로 제공한다.
- 다이어그램마다 그림자 없이 1px 얇은 테두리, 세 가지 폰트(Instrument Serif, Geist 계열)만 쓰고 좌표·너비·간격을 모두 4의 배수로 맞춰 사람이 손으로 다듬은 듯한 느낌을 낸다.
- 기존에 draw.io나 Mermaid로 만든 다이어그램을 읽어와 같은 내용을 이 디자인 시스템으로 다시 그려주고, 결과물 포맷·크기·디테일 수준을 조절할 수 있다.
- 사용자 웹사이트를 분석해 배경색, 글자색, 강조색, 폰트를 자동 추출하고 명도 대비(WCAG AA) 기준을 통과하는지 검사한 뒤 스타일 가이드 파일에 저장한다.
- GitHub 스타 23713개를 받았고, 잘못된 스타일이나 접근성 문제를 잡아내는 자동 검증 스크립트들이 코드 저장소에 포함돼 있다.
왜 중요한가
AI에게 다이어그램을 부탁하면 브랜드와 안 어울리는 획일적인 그림만 나와 결국 디자인 도구로 직접 만들거나 다이어그램 자체를 포기하게 되는 문제를 해결해준다. 개발 문서나 블로그, 발표자료에 들어갈 다이어그램을 별도 디자인 작업 없이 AI 코딩 도구 안에서 바로 완성할 수 있게 해준다.
이 레포의 용어
- SVG · 확대해도 깨지지 않는 벡터 이미지 형식
- Mermaid · 텍스트로 다이어그램을 그리는 오픈소스 도구
- draw.io · 웹 기반 다이어그램 편집 프로그램
- WCAG AA · 글자와 배경의 명도 대비가 충분한지 정하는 웹 접근성 기준
- Agent Skill · AI 코딩 도구가 특정 작업을 수행할 때 불러오는 지침 모음
레포 원문 소개 (영문)
38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.
GitHub에서 보기주목받는 레포
- vorssaint/vorssaint-utils메뉴바 아이콘 하나로 유료 맥 앱 열 개 값을 대신하는 오픈소스 도구
- Alishahryar1/free-claude-code코딩 AI 에이전트를 무료 모델 49곳에 자유롭게 연결해주는 로컬 프록시
- freestylefly/awesome-gpt-image-2GPT-Image2로 원하는 이미지를 정확히 뽑아내는 프롬프트 설계도 532개를 모아놓은 저장소
- block/buzz사람과 AI 에이전트가 같은 채팅방에서 함께 일하는 오픈소스 협업 플랫폼
- NousResearch/hermes-agentNous Research가 만든, 쓰면 쓸수록 스스로 똑똑해지는 AI 에이전트 Hermes
- virgiliojr94/book-to-skill기술서 PDF를 AI 에이전트가 언제든 펼쳐볼 수 있는 '스킬'로 바꿔주는 도구
- VoltAgent/awesome-agent-skillsAI 코딩 도구가 특정 작업을 '전문가처럼' 하도록 도와주는 매뉴얼 1000개 이상을 한곳에 모았다
- anthropics/claude-plugins-community누구나 만든 Claude 확장 기능을 한곳에 모아 설치하게 해주는 저장소