사용 가이드로 건너뛰기
infographic-creator작성자 AntV

Infographic Creator 스킬.

다이어그램 및 차트를 위한 Claude Code 및 Codex skill: 주어진 텍스트에서 인포그래픽을 생성합니다.

  • Diagrams & Data Visualization
  • Image
antvis/chart-visualization-skills · skills/infographic-creator/SKILL.mdSKILL.md
--- name: infographic-creator description: Create beautiful infographics based on given text content. Use when users request to create infographics. --- ## Specifications ## Generation Process
업스트림 파일에서 읽은 앞부분 및 섹션 제목, 2026-09-14 · 전체 11,870자

01 기능

Claude Code와 Codex에서 infographic-creator Skill이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

텍스트 설명을 렌더링된 인포그래픽으로 변환하는 AntV 스킬입니다. 에이전트는 AntV Infographic 구문을 작성하는데, 이는 들여쓰기 기반 DSL로 첫 줄에 템플릿 이름을 명시하고 데이터 블록에는 title, desc와 해당 템플릿 고유의 메인 필드—목록, 시퀀스, 비교, 값, 노드 및 관계, 또는 root—를 담습니다.

테마 블록은 팔레트, 폰트, 스타일화 효과를 설정합니다. 함께 제공되는 템플릿 목록은 목록, 시퀀스, 비교, 계층, 관계, 차트 계열에 걸쳐 있으며, 타임라인, SWOT, 마인드맵, 로드맵, 사분면 분석, 워드클라우드를 다룹니다. 이후 에이전트는 <title>-infographic.html이라는 이름의 브라우저 실행 가능한 HTML 파일을 작성해 다이어그램을 렌더링하고 SVG로 내보냅니다.

산출물

  • 사용자가 읽고 보관하거나 재사용할 수 있는 AntV Infographic 구문 자체입니다.
  • Write 도구로 작성된 완전한 HTML 파일로, <title>-infographic.html이라는 이름을 가집니다.
  • 렌더링된 페이지로부터 생성된 완성된 그래픽의 SVG 내보내기입니다.
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    사용자가 실제로 보여주고 싶은 것을 파악하기

    다른 무엇보다 먼저 스킬은 사용자의 요구와 그들이 표현하고자 하는 정보를 읽어냅니다. 이것이 템플릿과 데이터 구조를 모두 결정하기 때문입니다.

  2. 02
    브리프가 부실할 때 되묻기

    콘텐츠 설명이 명확하고 간결하지 않으면 스킬은 내용을 임의로 만들어내지 않고 다시 물으며, 사용자가 원하는 템플릿이 무엇인지도 함께 물을 수 있습니다.

  3. 03
    콘텐츠 형태를 템플릿 계열에 맞추기

    엄격한 순서는 sequence-로, 의견 목록은 list-row- 또는 list-column-으로, 이항 비교는 compare-binary-로, 트리는 hierarchy-tree-로, 사분면은 compare-quadrant-로 갑니다.

  4. 04
    구조를 DSL로 표현하기

    구조는 AntV Infographic 구문으로 바뀝니다: 템플릿 줄 하나, title/desc와 템플릿의 메인 필드를 담은 data 블록, 그리고 선택적인 theme 블록입니다.

  5. 05
    HTML 파일 생성하기

    구문은 AntV Infographic 스크립트 태그, 컨테이너, 렌더 호출이 포함된 완전한 HTML 문서에 삽입됩니다.

  6. 06
    파일과 구문을 전달한 뒤 조정 사항 제안하기

    응답에는 생성된 파일 경로와 구문이 담기며, 이어서 템플릿, 색상 또는 콘텐츠를 조정할 것을 제안합니다.

02 적합성 확인

infographic-creator Skill을 사용하는 경우

이러한 종류의 다이어그램 및 차트 작업에는 Claude Code 또는 Codex에서 infographic-creator 스킬을 사용하십시오. 적합성과 제한 사항은 스킬 자체 파일에서 가져왔습니다.

적합한 경우

  • 타임라인처럼 프로세스, 단계, 발전 추세를 엄격한 순서로 보여줍니다.
  • 제품, 프로젝트 또는 아이디어에 대한 SWOT 분석입니다.
  • 주제를 여러 가지로 나누는 마인드맵입니다.
  • 숫자를 막대형, 세로형, 선형, 원형 또는 워드클라우드 차트로 변환합니다.
  • 사물들이 서로 의존하거나 흘러 들어가는 방식을 보여줍니다.

한계 인지하기

  • 이미지를 서버 사이드 또는 오프라인으로 생성하는 경우: 생성된 HTML은 unpkg에서 AntV Infographic 스크립트를 로드하므로 브라우저에서 렌더링됩니다.

제공할 사항

  • 명확하고 간결한 콘텐츠 설명인포그래픽이 전달해야 할 내용을 의미하며, 이 skill은 이를 title, desc, 데이터 항목으로 분해합니다.
  • 콘텐츠에 필요한 데이터 필드title, desc, items, label, value, icon 중 어떤 필드가 콘텐츠에 포함되는지를 파악하여 올바른 필드를 채웁니다.
  • 차트를 원할 경우 숫자 값chart-* 템플릿은 label과 value로 구성된 values 필드를 읽으며, 선택적으로 category를 포함할 수 있습니다.

03 스킬 내부

infographic-creator Skill이 Claude Code와 Codex에 제공하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

  1. 첫 줄에 템플릿 이름 지정하기

    첫 줄은 infographic <template-name> 형식이어야 하며, 템플릿은 임의로 만들어내는 것이 아니라 번들에 포함된 목록에서 가져와야 합니다.

  2. 오직 문법만 출력하기

    응답은 AntV Infographic 문법만 포함해야 하며, JSON이나 Markdown 래퍼, 그 주변의 설명적인 문장은 포함하지 않아야 합니다.

  3. 메인 데이터 필드는 정확히 하나만

    각 계열마다 단 하나의 메인 필드를 선택합니다 — list 계열은 lists, sequence 계열은 sequences, compare 계열은 compares, chart 계열은 values, relation 계열은 nodes와 relations, hierarchy 계열은 root — 그리고 두 필드를 절대 혼용하지 않습니다.

  4. 들여쓰기는 스페이스 두 칸으로

    data와 theme는 별도의 블록이며, 그 안의 모든 내용은 스페이스 두 칸으로 들여쓰고, 키-값 쌍은 key value 형식으로 작성하며, 배열 항목은 -로 시작합니다.

  5. 사용자의 언어로 답변하기

    Title, desc, label 및 문법 내부의 모든 문자열은 사용자가 사용한 언어로 작성해야 합니다.

  6. 기본값으로 items 사용하기

    어떤 메인 데이터 필드가 적용되는지 명확하지 않을 경우 items를 사용합니다.

  7. 이항 비교에는 루트 두 개

    compare-binary-와 compare-hierarchy-left-right- 템플릿은 정확히 두 개의 루트 노드를 가져야 하며, 모든 비교 항목은 이 두 루트 아래에 위치해야 합니다.

  8. 계층 구조에는 루트 하나

    hierarchy-* 트리는 children을 통해 중첩된 단일 root를 사용하며, root는 중복될 수 없습니다.

04 활용하기

Claude Code 또는 Codex에 infographic-creator 설치하기

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용 중인 에이전트에 infographic-creator 추가하기

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/antvis/chart-visualization-skills --skill infographic-creator

skills/infographic-creator/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소마다 자체 경로를 문서화할 수 있습니다.

Skill에 첫 다이어그램 및 차트 작업 부여

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt
Turn the text below into an infographic about [our product evolution], covering [five] milestones. Each entry needs a time, a label, a one-line description and an icon, and the milestones must appear in strict chronological sequence.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • HTML 파일을 브라우저에서 직접 열어 인포그래픽이 렌더링되는지 확인한 다음, 내보내기 버튼으로 SVG로 저장합니다.
  • 페이지 제목이 {title} - Infographic 패턴을 따르는지 확인합니다.
  • 렌더링 대상이 id가 container인 컨테이너 div인지 확인하세요.
  • 컨테이너의 너비와 높이가 모두 100%로 반응형인지 확인하세요.
  • 페이지에 실제로 SVG 내보내기 버튼이 있는지 확인하세요.

OpenDesign에서 SKILL.md 링크로 infographic-creator를 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
AntV
스킬 파일
skills/infographic-creator/SKILL.md 검증 시 콘텐츠 체크섬 기록됨; 커밋 089b687
License
MIT LICENSE에서 확인
리포지토리 스타
489 2026-09-14에 촬영된 GitHub 스냅샷으로, 이 카탈로그에 2개의 스킬이 포함된 antvis/chart-visualization-skills 저장소 전체를 대상으로 합니다. infographic-creator의 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. 사양DSL 문법 규칙, 데이터 예시, 템플릿 목록을 그룹화합니다.
  2. AntV Infographic Syntax템플릿, 데이터, 테마를 DSL의 세 가지 구성 요소로 정의합니다.
  3. 문법 사양첫 줄, 들여쓰기, 아이콘 키워드, 계열별 데이터 필드를 다룹니다.
  4. 데이터 문법 예시list, sequence, hierarchy, compare, chart, relation 템플릿용으로 그대로 복사해 쓸 수 있는 스니펫입니다.
  5. 사용 가능한 템플릿모든 템플릿 이름을 나열하고 콘텐츠 유형을 sequence, compare, hierarchy, chart, relation 계열에 매핑합니다.
  6. 예시list-row-horizontal-icon-arrow로 인터넷 기술 발전 인포그래픽을 만듭니다.
  7. 생성 과정두 단계로 진행됩니다: 요구 사항을 파악한 다음 HTML 파일을 렌더링합니다.
  8. 1단계: 사용자 요구 사항 이해구조를 추출하고, 필드를 명확히 하고, 템플릿을 선택하고, 문법을 작성합니다.
  9. 2단계: 인포그래픽 렌더링HTML 파일을 만들고 사용자에게 파일 경로와 문법을 보여줍니다.
스킬 자체 설명
"주어진 텍스트 콘텐츠를 기반으로 아름다운 인포그래픽을 생성합니다. 사용자가 인포그래픽 생성을 요청할 때 사용합니다."

SKILL.md의 front-matter 설명입니다. 전체 파일은 약 11,870자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

infographic-creator 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

색상과 글꼴을 변경할 수 있나요?

가능합니다. 문법의 테마 부분이 팔레트와 글꼴을 포함한 스타일 설정을 담당하므로, 두 가지 모두 렌더러에 맡기지 않고 명시적으로 지정됩니다.

미리 만들어진 시각 스타일이 함께 제공되나요?

그렇습니다. theme.stylize는 내장 스타일을 선택하고 그에 매개변수를 전달합니다. 자주 쓰이는 스타일로는 손그림 효과를 내는 rough, 패턴 채우기용 pattern, 선형 또는 방사형 그라디언트가 있습니다.

인포그래픽이 제 언어로 나오나요?

그렇습니다. 이 스킬은 사용자 입력의 언어를 그대로 따르므로, 중국어로 작성된 요청은 문법 안에서도 중국어 텍스트로 결과가 나옵니다.

Infographic Creator

실제 다이어그램 및 차트 작업에서 infographic-creator를 실행합니다.

OpenDesign을 다운로드하고, SKILL.md 링크에서 infographic-creator를 가져온 다음, 위 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

터미널
npx skills add https://github.com/antvis/chart-visualization-skills --skill infographic-creator

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원