diagram-design 사용법: Claude Code의 다이어그램을 웹사이트 색상에 맞추기 (순수 Claude와의 비교 포함)

Claude Code에게 다이어그램 생성을 요청하면, 내용 자체는 잘 갖춰져 있지만 자신의 블로그나 자료와 다른 색상의 그림이 반환됩니다.

작도용 플러그인 diagram-design을 사용하여 웹사이트 URL을 한 번 알려주면, 이후 생성되는 다이어그램을 해당 사이트의 색상과 서체로 그리게 하는 방법을 소개합니다. 이 글은 Claude Code로 그린 다이어그램을 블로그나 슬라이드에 붙여 넣는 사람들을 위한 글입니다.

먼저 결론부터 말씀드리겠습니다. 단순히 색상을 맞추기만 한다면, 순수(bare) Claude에게 URL을 전달해도 가능합니다. 하지만 이 플러그인을 사용하면 한 번 알려준 후에는 더 이상 URL이 필요하지 않게 되며, **강조점을 정해서 범례를 붙이는 '다이어그램 작성법'**까지 갖추게 됩니다. 단 한 장만 색상을 맞추고 싶다면 불필요하며, 비슷한 모양의 다이어그램을 여러 장 그리는 사람에게 유용합니다.

diagram-design으로 할 수 있는 것

위쪽은 기본 모습이고, 아래쪽은 가상의 회사 페이지를 알려준 후입니다. 요청 내용은 동일하고 박스 배열도 그대로지만, 배경색과 강조 색상만 변경되었습니다.

diagram-design은 Claude Code 등에서 사용할 수 있는 플러그인입니다. 내부적으로는 Agent Skill이며, 요청하면 다이어그램을 자체 완결형 HTML + SVG로 작성해 줍니다. MIT 라이선스이며, Anthropic 제품이 아닙니다 (작성자 개인 리포지토리에 공개되어 있습니다).

사용 방법은 다음 흐름을 따릅니다.

• 요청문 맨 앞에 'diagram-design 스킬을 사용해서'라고 이름을 언급합니다.
• onboard diagram-design to <URL> 명령어로 사이트의 색상과 서체를 읽게 합니다. - 나타난 차이점을 확인하고 승인합니다.
• 이후에는 URL 없이 평소처럼 다이어그램을 요청합니다.
• 알려준 모양에 이름을 붙여 저장하고 전환합니다.

전제 및 준비

준비물

• Claude Code (본문에서는 2.1.289, 모델은 Sonnet)
• diagram-design (본문에서는 2.6.51. 2026-10-05 시점의 최신 버전은 2.6.56) 색상을 맞추고 싶은 웹사이트 URL

지정할 예시 (가상의 회사 페이지). 진한 녹색 배경・노란색 강조・둥근 고딕체

설치 및 확인

공식 README의 Claude Code용 절차에서는 Claude Code 내에서 다음 두 줄을 입력합니다.

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

README에는 이어서 자동 업데이트를 한 번만 활성화하는 절차도 있습니다.

Then enable updates once: run

/plugin,
openMarketplaces, selectdiagram-design, and chooseEnable auto-update. Claude Code disables auto-update by default for third-party marketplaces

(이후 한 번만 업데이트를 활성화한다. /plugin을 열고 Marketplaces에서 diagram-design을 선택한 후 Enable auto-update를 선택한다. Claude Code는 서드파티 마켓플레이스의 자동 업데이트를 기본적으로 비활성화하고 있다)

README에 따르면, 업데이트를 불러올 때는 안내가 나오면 /reload-plugins를 입력하거나 다음 세션 시작을 기다립니다. 설치한 후에는 /plugin을 열고 목록에 diagram-design이 있는지 확인합니다.

스킬 로드는 절차 1에서 요청했을 때의 화면에서 알 수 있습니다. 처음에 Skill(diagram-design:diagram-design)가 나오면 로드된 것입니다.

절차 1: 이름을 언급하며 첫 번째 다이어그램을 요청하기

요청문 맨 앞에 스킬 이름('skill name')을 언급합니다. 요청문의 예시입니다.

diagram-design 스킬을 사용해서, 다음 절차를 한 장의 다이어그램으로 만들고 자체 완결형 HTML 파일 diagram.html에 저장해 주세요. 절차: 입사 수속 → 계정 발급 → 교육 영상 → 선배와 동행 → 처음 단독 배송. 교육 영상 다음에 확인 테스트가 있고, 불합격이면 교육 영상으로 돌아갑니다. 16:9 (1920×1080) 전체에 걸쳐 본문은 28px 이상으로 수용하고 스크롤바가 나오지 않게 해 주세요.

이름을 지정하지 않으면, 플러그인이 설치되어 있어도 스킬(skill)이 호출되지 않는 경우가 있었습니다. 마지막 문장에서 붙일 위치의 크기를 미리 알려주면, 다이어그램이 화면 중앙에 작게 모이는 것을 방지할 수 있습니다.

화면에는 다음과 같이 나타납니다.

● Skill(diagram-design:diagram-design)
⎿ Successfully loaded skill

완성된 diagram.html을 브라우저로 열면, 상단의 이미지 아래에 다이어그램이 표시됩니다. 연한 회색 배경에 흰색 박스, 그리고 목표 지점만 주황색인 플러그인의 기본 모습입니다.

단계 2: 사이트의 URL 알려주기

다음 한 줄을 입력합니다. 슬래시 명령어는 아닙니다. Claude Code에게 평범하게 말을 거는 문장입니다.

onboard diagram-design to https://example.com

플러그인은 사이트의 HTML과 CSS를 읽어 색상과 서체를 가져옵니다. 가상의 회사 페이지에서는 CSS 변수 값이 그대로 가져와졌습니다.

단계 3: 차이점을 확인하고 승인하기

바로 다시 그리지는 않습니다. 가져온 색상과 서체 목록을 보여주고 멈춥니다. 아래는 가상의 회사 페이지를 기준으로 한 출력 발췌본이며, 표의 테두리를 제거하여 정리했습니다 (실제 출력도 일본어였습니다).

역할 light（導出） dark（사이트 실값） 신뢰도
paper #f3f7f5 #0f2a24（--bg） 높음
ink #0f2a24 #e9f2ee（--text） 높음
...

목록 아래에는 어두운 버전과 밝은 버전 중 어떤 것을 기본값으로 할지 등, 결정해야 할 사항들이 나열됩니다. 읽어보고 괜찮으면 다음과 같이 응답합니다.

yes, apply it

알려준 색상과 서체는 플러그인 내부 설정 파일 references/style-guide.md에 기록됩니다. 변경되기 전의 기본 모습은 ~/.diagram-design/profiles/default.md에 보관되어 있습니다.

단계 4: URL을 쓰지 않고 같은 요청문 내기

단계 1과 글자 하나 틀리지 않게 똑같은 요청문을 다시 한번 내립니다. URL은 어디에도 쓰지 않습니다. 그럼에도 불구하고 상단 이미지 아래의 다이어그램처럼, 진한 녹색 배경에 노란색 강조로 그려졌습니다. 배경의 #0f2a24와 강조의 #f2c14e는 페이지에 설정된 값과 같고, 서체도 페이지와 같은 Zen Kaku Gothic New 및 M PLUS Rounded 1c입니다.

공식 README에는 알려준 후에 다음과 같이 쓰여 있습니다.

Every new diagram now uses your colors.

(이후의 새로운 다이어그램은 모두 당신의 색상을 사용합니다.)

다른 사이트를 다시 알려주면, 같은 요청문 그대로 모습이 교체됩니다. 기본 모습과 비슷한 사이트에서는 변화가 알아보기 어려우므로, 색상과 서체가 완전히 다른 herdr.dev에서 시도했습니다.

herdr.dev를 알려준 후의 다이어그램. 배경・보라색 강조・굵은 고딕 제목이 사이트의 밝은 표시와 같은 조합이 되었습니다

배경은 herdr.dev의 밝은 표시와 같은 #efece5,
강조는 보라색인 #8839ef,
서체는 제목 Archivo・본문 Inter입니다.

단계 5: 알려준 모습을 저장하고 전환하기

다른 사이트를 다시 알려주려고 할 때, 플러그인은 덮어쓰기 전에

순수 Claude와 비교하기

비교한 이유와 조건

여기까지 시도해 본 결과, 하나의 가설을 세웠습니다. URL을 전달하며 요청하면, 순수한 Claude(기본 모델)로도 색상을 변경할 수 있을 것이라는 것입니다. 그래서 플러그인 유무에 따라 동일한 요청 문구를 제시하여 다이어그램을 그려 비교했습니다.

• 요청 문구는 절차 1의 문구에 'https://herdr.dev의 색상과 서체에 맞춰,'를 추가한 것. 플러그인이 있는 경우에만, 머릿속으로 스킬 이름을 언급했습니다.
• 둘 다 절차 2~5의 설정은 사용하지 않고, 요청 문구의 URL만으로 그리게 했습니다.
• 각 2회씩, 총 4장. 어느 것이 무엇인지 숨기고 5단계로 채점했습니다.

결과: 색상은 기본 모델도 따라 한다. 차이는 강조와 범례

분홍색 테두리가 강조 색을 사용한 부분입니다. 위는 파랑·빨강·초록이 전체에 흩어져 있고, 아래는 판정 및 되돌림 선에 국한되어 있으며, 범례도 붙어 있습니다.

차이는 색상의 사용법과 무너짐에 대한 저항력에서 나타났습니다. 플러그인이 없는 1장에서는 목표 상자의 글자가 넘쳐흐르고 있었습니다.

'첫 단독 배송'의 '송(送)'이 상자 오른쪽 끝에서 잘려 있습니다.

이유: 제작자의 방침과 스킬의 규칙

이 차이는 우연이 아닙니다. 제작자는 README에 방침을 적어두었습니다.

The accent color is reserved for the 1–2 things the reader should look at first.

(강조 색은, 독자가 처음에 보고 싶은 1~2곳을 위해 남겨둔다)

스킬 본체인 SKILL.md에도 규칙으로 적혀 있습니다.

Focal rule:accent
goes on 1–2 elements max.

(초점의 규칙: 강조 색은 최대 1~2 요소에만 사용한다)

Orthogonal only.… Diagonals fail.

(직교만. ……사선은 실패)

그 외에도, 노드는 9개까지 (최대치 표에 Max nodes 9), 범례는 사용된 형태를 모두 덮고 있는지 여부라는 체크 항목도 있습니다. 플러그인이 있는 다이어그램에서는 강조가 이 규칙을 따라 판정 및 되돌림 선에 국한되었고, 범례도 붙었습니다.

시도하기 전에는 이 플러그인의 장점을 색상 맞추기라고 생각했습니다. 비교해 보니 진짜 장점은 따로였습니다. 색상은 한 번 알려주면 되고, 다이어그램의 작법까지 갖춰집니다. 자료에 붙일 다이어그램을 여러 장 모아야 한다면, 이 두 가지가 효과적입니다.

어려워하기 쉬운 점 (주의할 점)

첫 질문을 기다리지 않고 onboard를 입력하는 것

SKILL.md에는 설정이 기본값인 경우, 첫 다이어그램 전에 멈추고 'Customize now?(지금 커스터마이징 할까요?)'라고 묻는다고 적혀 있습니다. 시도해 본 2.6.51 버전에서는 이 질문이 나오지 않았습니다. 대신 '첫 확인은 묻지 않고, 기본 스킨을 그대로 사용했습니다'라고 보고하고, 기본 모양으로 그렸습니다. 사이트에 맞추고 싶다면, 질문을 기다리지 말고 스스로 onboard를 입력해야 합니다.

서체가 기본값으로 돌아가지 않았는지 확인하는 것

herdr.dev를 알려준 후, 요청 문구 처음에 '다크 버전으로,'를 추가하면, 색상은 사이트 상단과 같은 어두운 배경색과 라벤더가 되었습니다. 하지만 서체는 기본값인 Instrument Serif·Geist로 돌아가 있었습니다. 설정 파일 표는 수정되었지만, 본문에는 구(舊) 서체의 기술과 Google Fonts의 로딩이 남아있었기 때문입니다.

사이트가 자체적으로 배포하는 서체도 그대로 사용된다는 보장은 없습니다. Google Fonts의 동일한 이름 서체로 대체할 방안이나, 기본 서체로 되돌리는 방안이 제시되었습니다. 다이어그램을 그릴 수 있게 되면, 제목과 본문의 서체를 한 번 확인해 보세요.

어두운 버전과 밝은 버전 중 어느 것을 사용할지 읽고 승인하는 것

어두운 배경만 있는 가상의 회사 페이지에서는, 어두운 버전을 기본값으로 설정하자는 제안이 나왔습니다. 어두운 배경이 기본값이면서도 밝은 표시를 가진 herdr.dev의 경우, 재차 질문 없이 밝은 버전을 기본값으로 하자는 제안이 나오고 있습니다. 무엇을 기본값으로 할지는 차이점 목록에 적혀 있습니다. 승인하기 전에 읽어보면, 생각했던 것과 반대되는 배경색으로 그려지지 않게 할 수 있습니다.

화살표를 하나씩 추적해서 붙이는 것

겉보기에는 맡길 수 있지만, 화살표의 흐름은 틀릴 수 있습니다.

빨간색 원형 화살표를 따라가면, 확인 테스트를 통과하지 못하고 교육 영상에서 선배와 동행으로 넘어가 버립니다.

플러그인을 사용해서 그린 그림이라도 이런 화살표가 나왔습니다. 자료에 붙이기 전에 화살표를 하나하나 눈으로 쫓아보세요.

새로운 그림은 한 장당 1~2분이 걸린다고 예상하세요

아무것도 없는 상태에서 새로 그리게 하니, 한 장당 1~2분이 걸렸습니다. 비교 조건에서는 순수 Claude가 약 1분, 플러그인 사용 시가 약 1분 반이었습니다. 플러그인을 사용한 쪽은 스킬의 절차서(手順書)를 읽고 그린 후 자체 점검 스크립트를 실행했습니다.

적합한 상황 / 부적합한 상황

적합한 상황

• 블로그나 사내 자료, 슬라이드에 붙일 그림을 매체 색상과 맞추고 싶을 때
• 같은 모양의 그림을 여러 장 그려야 할 때. 한 번 가르치면 이후에는 요청문에 URL을 쓸 필요가 없습니다.
• AI가 그린 그림에서 '강조색이 너무 많다', '범례가 없다', '글자가 넘친다'는 점을 줄이고 싶을 때

부적합한 상황

• 한 장만, 색상을 사이트에 맞추고 싶을 때. 순수 Claude에 URL을 전달하는 것이 더 빠르고 사이트와 유사성도 높았습니다.
• 서체까지 정확하게 맞추고 싶을 때 (기본값으로 돌아가는 경우가 있었습니다)
• README 자체가 사용하지 않기를 권장하는 경우. 터미널용 간단한 그림, 단순히 목록(표나 글머리 기호로 충분), 전후 비교(표로 충분), 상자 하나짜리 그림

요약

• diagram-design은 Claude Code의 그림을 사이트 색상과 서체로 그리게 하는 작도용 플러그인입니다. 설치는 공식 README의 2줄입니다.
• 요청문 맨 앞에 'diagram-design 스킬을 사용해서'라고 이름을 언급합니다.
• onboard diagram-design to <URL>

→ 차이점을 읽고 yes, apply it

. 이후에는 URL 없이 그 색상이 되고 저장된 프로파일로 전환할 수 있습니다 - 색상을 맞추기만 한다면 순수 Claude로도 가능합니다. 플러그인으로 얻을 수 있는 것은 '한 번 가르치면 이후 URL 불필요'와 '강조를 줄이고 범례를 붙이는 그림 작성법'입니다.

• 서체는 기본값으로 돌아갈 수 있고, 화살표도 틀릴 수 있습니다. 붙이기 전에 눈으로 직접 확인해야 합니다.

우선 자신의 사이트 URL로 onboard를 한 번 입력하고, 차이점을 읽고 승인한 후, 평소 그림을 한 장 요청해 보세요.

검증 조건

• 환경: Claude Code 2.1.289・Sonnet・Linux. diagram-design 2.6.51 (커밋 f903933). 2026-10-04에 시도.
  (기사 내의 README 및 SKILL.md 인용과 링크는 2026-10-05 시점의 최신 버전(커밋 cb80b0d)으로 확인)

• 플러그인은 클론한 것을 --plugin-dir로 읽어들였습니다. 마켓플레이스에서 설치하지 않았습니다 -
  이름을 언급하는지 여부: 비대화 모드(claude -p)에서 이름을 언급하지 않고 요청했을 때는 스킬이 호출되지 않았고, 이름을 언급한 7번은 모두 호출되었습니다 -
  화면 크기에 대한 문장: 문장이 없는 경우는 그림이 화면 중간 정도의 띠에 담겼고 글자는 8~12px이었습니다. 문장을 넣은 6번은 모두 1920×1080에 담겨 스크롤바가 없었습니다. 다만 상하로 여백이 남았던 경우도 있었습니다.

• 절차 1~5: 대화 모드에서 실시했습니다. 절차 4의 옷 갈아입히기는, 가르친 후 같은 대화에서 다음 한 장이 그 색상이 된 것까지 확인했습니다. 소요 시간은 첫 번째 그림이 약 1분 54초. 가르친 후 다시 그리기는 같은 대화의 연속으로 약 31초.

• 순수 Claude와의 비교:

claude -p ・Sonnet・설정 파일을 읽지 않음(--setting-sources “”). 각 2회. 어느 것이 어느 것인지 숨긴 4장을 5단계로 평가했습니다 -
화살표 오류: 같은 지시로 URL만 바꾼 다른 한 장에는 나오지 않았습니다. 원인을 분리하지 못했습니다.

영상이 보고 싶으신 분은 여기 → diagram-design 입문｜AI가 그리는 그림을, 자신의 사이트 색상으로 만들기

참고 링크 (일차 정보)

• cathrynlavery/diagram-design (GitHub・MIT)
• README: Install (Claude Code의 2줄과 자동 업데이트)
• README: Editable install (업데이트 시 style-guide.md가 대체됨 - 프로파일은 유지)
• README: Onboarding (onboard 과정 흐름 - 첫 확인 - 여러 브랜드)
• README: 作者の方針 (강조 색상)
• README: When not to use this skill
• SKILL.md: §0 初回の確認
• SKILL.md: 강조 색상・노드 수・연결선 규칙
• references/profiles.md (프로파일 저장・읽기・프로젝트 연결)
• commands/profile.md (/diagram-design:profile의 인자)
• herdr.dev (가르치는 대상 예시로 사용된 사이트)

Discussion