11.7k 스타 삽화 스킬, Claude Code용 대체판 안내

Hi～, 저는 三金입니다.

지난번 글을 올린 지 거의 한 달이 되었습니다. 이 한 달 동안 三金의 많은 동료 짝꿍들이 정리해고의 신(裁神)의 방문을 받았습니다. 짝꿍이 해고되자 한때 금단 반응이 생기기도 했고, 업무량도 배로 늘어 자주 새벽 한 시가 넘도록 코드를 commit하고 있었습니다🤷‍♀️.

바쁜 업무가 기본적으로 제 모든 정력을 차지했지만, 수확이 없었던 것만은 아닙니다. 오히려 소재를 좀 모았는데, 다음과 같습니다.

- UI 자동화 테스트 - 개인판

- 글 삽화

- 기타

UI 자동화는 이미 두 편을 냈으니, 오늘은 그 사이에 글 삽화 Skill 하나를 소개하겠습니다.

생각해 보면 글을 쓰는 대부분의 미디어 종사자 친구들은 '삽화'라는 일에 시달려 본 적이 있을 겁니다.

AI에게 삽화를 만들라고 하면, 그것은 본문과 전혀 관계없는 장식화 한 장을 던져주거나——푸른 하늘과 흰 구름, 악수, 톱니바퀴, 빛나는 뇌——아니면 한눈에 가짜인 AI 일러스트를 생성하는데, 흐릿하기 짝이 없을 뿐만 아니라 글 내용과도 전혀 관계가 없습니다. 독자는 훑어 넘기고, 기억에 남는 것은 아무것도 없습니다.

최근 저는 글 삽화류 Agent Skill을 조사하다가 매우 흥미로운 두 프로젝트를 만났습니다. 하나는 뜨겁지만 진입 장벽이 낮지 않은 것이고, 다른 하나는 비주류지만 마침 그 장벽을 메워주는 것입니다. 이 글에서는 둘 다 명확히 설명하고, 후자(대체품)를 Claude Code에서 설치하고 사용하는 방법을 직접 안내하겠습니다.

一、Codex 전용 스킬: ian-xiaohei-illustrations

이것은 Github star 수가 무려 11.7k에 달하는 본문 삽화 생성 Skill입니다.

그 핵심 목표는 글 속의 인지적 앵커를 이해함으로써, 그중 하나의 판단, 흐름, 구조, 상태 또는 은유 등을 기억에 남는 16:9 수작업 설명 그림으로 변환하는 것입니다.

수작업 설명 그림에서는 기본적으로 '小黑'——검은 실체, 흰 점 눈, 가느다란 다리, 무표정의 카툰 캐릭터——를 사용해 흐름의 참여자로 삼습니다.

그 저장소 주소는 helloianneo/ian-xiaohei-illustrations이며, 우리는 다음과 같은 방식으로 스킬을 설치할 수 있습니다.

저장소 클론 git clone https://github.com/helloianneo/ian-xiaohei-illustrations.git cd ian-xiaohei-illustrations # 스킬 복사 mkdir -p " ${CODEX_HOME:- $HOME /.codex} /skills" sk " ${CODEX_HOME:- $HOME /.codex} /skills/"

그런 다음 codex를 재시작하면 사용할 수 있습니다.

⚠️주의, 여기서는 정식으로 로그인한 Codex 사용자이거나 gpt-image-2-high 모델을 지원해야만 사용할 수 있는데, 이 스킬이 주로 image_gen **** 을 사용해 이미지를 생성하기 때문입니다.

정상적인 경우, 그것은 이렇습니다.

$ian -xiaohei-illustrations 를 사용해 이 중국어 글을 위해 3장의 小黑 괴기 본문 삽화를 설계하고 생성하세요.

01-design-entry.png :

전체 Skill의 본문에서 완성 이미지까지의 완전한 파이프라인은 다음과 같습니다.

- 글, Markdown, Notion 내용 또는 사용자가 준 주제를 읽기

- 핵심 관점, 인지적 전환, 흐름 구조를 추출

- 먼저 shot list를 출력(각 그림은 인지적 앵커를 하나만 선택, 기본 4-8장, 상한 9장)

- 각 그림에 구조 유형을 선택: Workflow, 전후 비교, 캐릭터 상태, 개념 은유, 방법 계층화……

- 로우테크하고 괴기하지만 성립하는 물리적 은유를 새로 발명

- 小黑가 핵심 동작을 맡도록 함

- 각 그림마다 이미지 도구를 개별 호출해 생성

- QA checklist에 따라 검사: 흰 배경, 여백, 小黑 동작, 중국어 표기, PPT 느낌이 아님

- 최종 PNG 저장

그러면 그것을 다른 AI Agent에서 직접 사용할 수 있을까요? 예를 들어 Claude Code? OpenCode?

답은 안 된다입니다. 왜냐하면 이 Skill 안에 이런 문장이 있기 때문입니다.

사용자가 명확히 "생성 / 출력 / 이미지 만들기 / 나를 위해 생성"을 요구하면 확인을 기다리지 말고 멈추지 말 것; 내장 image_gen으로 각 장을 개별 생성할 것.

image_gen은 OpenAI Codex 환경에 내장된 이미지 생성 도구로, Claude Code에는 이 도구가 없습니다. 그래서 우리가 이 Skill을 원형 그대로 ~/.claude/skills/ 에 복사하더라도, Claude가 모든 스타일 규범, 구도 방법론, QA 체크리스트를 다 읽고도 여전히 이미지를 뽑아낼 수 없습니다.

二、개조판: character-illustrations

공식 Codex도 없고 이미지 생성 API도 없다면 어떻게 해야 할까요?

걱정 마세요, 친구여, 여기 GitHub에서 당신을 위해 대체품을 찾아냈습니다: character-illustrations.

그것은 2026년 7월에야 만들어졌고, 현재는 아직 매우 비주류로 star가 딱 1개입니다. 하지만 그 사고방식은 상당히 견고합니다——작성자가 ian-xiaohei-illustrations를 직접 개조해, 그것을 'Codex 전용'에서 AI Agent 범용으로 바꾸었습니다.

README에 명확히 적혀 있습니다: 원판 skill의 아키텍처——스타일 DNA, 구도 패턴, prompt 템플릿, QA 체크리스트, 小黑 캐릭터 전부를 기반으로 남겨두고, 그 위에 세 가지 핵심 개조를 더 했습니다.

1. 플러그 가능한 캐릭터 시스템

원판 Skill에서는 小黑라는 IP가 하드코딩되어 있었습니다. 이 버전에서는 캐릭터를 플러그 가능한 입력으로 바꾸었습니다.

각 캐릭터는 characters/ 디렉터리에 Markdown 파일 형식으로 저장되며, 파일 내용에는 외형, 성격, 동작 라이브러리, 색상 팔레트, SVG 그리는 법과 이미지 생성 prompt가 들어 있습니다. 네 개의 캐릭터가 내장되어 있는데, 이미 알려진 小黑 외에도 monkey\peanut\trump가 있습니다.

그 외에도 직접 캐릭터를 만들 수 있습니다: prompt로 원하는 캐릭터를 묘사하면, Skill이 자동으로 characters/_TEMPLATE.md 템플릿을 적용해 전체 파일을 완성하고 저장하며, 다음번에 바로 재사용합니다.

2. 로컬 SVG 렌더링

이것이 image_gen 의존성을 해결하는 핵심 방안입니다.

Skill은 더 이상 이미지 생성 모델을 호출하지 않고, AI를 통해 SVG를 작성합니다: feTurbulence + feDisplacementMap 필터로 수작업 떨림 느낌을 만들고, 시스템 필기체로 표기를 쓰고, 그런 다음 본체에 설치된 Chrome으로 SVG를 3200×1800의 고해상도 PNG로 렌더링합니다.

이 방안에는 실질적인 세 가지 이점이 있습니다:

- 중국어 표기 오타 제로. 이미지 모델로 생성할 때 중국어 오타는 대재앙 지역인데, SVG 방안의 글자는 코드에 직접 쓰이므로 한 글자도 틀리지 않습니다.

- 소스 파일 편집 가능. 라벨을 바꾸고 위치를 옮기려면 SVG를 편집해 다시 렌더링하면 되며, 반복이 결정적입니다.

- 어떤 이미지 생성 서비스에도 의존하지 않음. API key도, 할당량도, 비용도 없이 로컬에서 돌아갑니다.

원판의 image-gen prompt 템플릿도 남겨두어 선택적 백엔드로 삼았습니다——환경에 정말 이미지 생성 도구가 있을 때만 활성화됩니다.

3. Persona 메커니즘

캐릭터의 profile에는 선택적인 '어조와 태도' 단락을 둘 수 있습니다: 라벨의 말투, 입버릇(그림당 최대 한 마디), 시그니처 제스처, 무대 습관.

설치

전제 조건: 사용 가능한 AI Agent, 예를 들어 Claude Code; Git은 Skill 저장소를 다운로드하는 데 사용; Google Chrome은 SVG 렌더링에 사용; Pillow는 선택 도구로, 이미지에 워터마크를 넣고 싶을 때만 필요합니다.

git clone https://github.com/moxordo/character-illustrations.git ~/.claude/skills/character-illustrations

검증

새 Claude Code 세션을 열고, 바로 한마디 물어보세요:

peanut으로 "shipping beats polishing" 개념도 한 장 그려줘

글에서의 실천

저는 주로 일부 글에서 이 Skill을 사용하며, 일반적으로 먼저 계획하고 나중에 생성하는 원칙을 따릅니다. 예를 들어:

/character-illustrations 먼저 이미지를 생성하지 마. xxx 글에서 어디에 삽화를 넣을 만한지 분석하고, 5장 정도의 shot list를 출력해. 각 그림마다 명확히 써줘: 어느 단락 뒤에 넣을지, 주제, 핵심 의미, 구조 유형, 小黑가 무엇을 하는지, 제안하는 중국어 표기 단어.

만약 어떤 그림의 효과가 만족스럽지 않다면, 수정할 수도 있습니다:

/character-illustrations 이 그림을 편집해줘, 왼쪽 위의 "流程图" 제목을 없애고 나머지 내용은 그대로 유지해.

character-illustrations의 산출물은 일반적으로 ~/Downloads/<角色名>-illustrations/ 에 저장되며, 각 캐릭터는 하나의 디렉터리를 공유하고 배치를 넘나들며 연속 번호가 매겨집니다. 이는 정품 小黑와 차이가 매우 큰데, ian-xiaohei-illustrations는 이미지를 현재 작업 공간에 직접 저장합니다.

예를 들어 peanut으로 그린 것은 ~/Downloads/peanut-illustrations/ 입니다. 다음 배치의 그림은 먼저 디렉터리를 나열하고, 지난번 번호에 이어서 아래로 매겨져 자연스럽게 각 캐릭터의 '작품 전집'을 형성합니다.

저는 이런 방식이 별로 좋지 않아서 여기의 저장 규칙을 수정해, 小黑의 방식대로 현재 작업 공간에 직접 저장하도록 했습니다.

덧붙이자면, 이 계보에는 세 번째 프로젝트도 있습니다: 땅콩의 저작권자인 aishwaryaashok14/peanut-illustrations로, character-illustrations의 땅콩 캐릭터와 워터마크 스크립트는 모두 여기서 왔습니다.

둘은 둘 중 하나를 고르는 관계가 아닙니다. 일반적인 논리 관계의 이미지 생성은 character-illustrations로 구현할 수 있고, 복잡한 논리 관계를 만나면 다시 ian-xiaohei-illustrations로 돌아가면 됩니다.

三金得鑫

프런트엔드 개발 엔지니어

181

글

359k

읽음

498

팬