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에서 보기주목받는 레포
- public-apis/public-apis세상의 모든 무료 API를 한곳에 모아둔 목록 저장소
- semantica-agi/semanticaAI 에이전트가 왜 그런 결정을 내렸는지 그래프로 증명하는 오픈소스 인프라
- cactus-compute/needle14메가바이트짜리 AI 모델로 스마트폰과 웨어러블에서 인터넷 없이 도구 호출하기
- unslothai/unsloth코딩 없이 내 컴퓨터에서 AI 모델을 돌리고 학습시키는 데스크톱 앱
- macro-inc/macro이메일, 채팅, 문서, 업무관리, CRM을 하나로 묶고 AI가 팀 전체 기억을 공유하는 업무 플랫폼
- harry0703/MoneyPrinterTurbo주제나 키워드 하나만 입력하면 대본, 영상 소재, 자막, 배경음악까지 자동으로 붙여 짧은 영상 하나를 완성해주는 오픈소스 도구
- basecamp/omarchyDHH가 만든, 미리 취향껏 세팅된 리눅스 배포판
- mattpocock/skillsAI 코딩 에이전트가 삼천포로 빠지지 않게 잡아주는 재사용 가능한 '스킬' 모음집