Claude가 직접 픽셀 이미지를 생성하지 않더라도, SVG·HTML·CSS·Canvas 코드를 만들어 벡터 일러스트와 설명용 다이어그램을 만들 수 있다. 이 방식은 “그림 생성”이라기보다 코드로 시각 구조를 설계하는 작업에 가깝다.

언제 잘 맞는가

• 기술 블로그의 개념 다이어그램
• 워크플로, 아키텍처, 상태 전이 그림
• 스타일을 수정·버전 관리해야 하는 SVG 아이콘과 삽화
• 해상도 독립적인 벡터 자산

한계

사진처럼 사실적인 이미지는 이미지 모델이 낫다. 복잡한 인물, 브랜드 로고 유사물, 세밀한 질감도 코드 생성 방식과 맞지 않는다. 대신 벡터로 표현 가능한 추상 도형, 시스템 구조, 간단한 캐릭터, 움직이는 CSS 애니메이션에는 강하다.

실무 팁

Claude에게 “예쁘게 그려줘”라고 하기보다 캔버스 크기, 색상 팔레트, 레이어, 요소 수, 텍스트 사용 여부를 명시하는 편이 안정적이다. 생성 후에는 브라우저에서 직접 렌더링해 겹침, 글자 잘림, 반응형 깨짐을 확인해야 한다.

관련 문서

• claude-code — Claude Code 개요
• ui-skills — 디자인 엔지니어와 AI 에이전트를 위한 인터페이스 스킬 디렉터리

참고 자료

• Claude’s Hidden Art Skill: Making Illustrations With Code — Analytics Vidhya (2026-06-22)