
미리보기 갤러리
비슷한 Skill
모든 Skill 보기제공 내용
- KPI 라인 패널 전체 소스 — 컴포넌트 파일과 실행 가능한 사용 예시가 포함되어 바로 붙여 넣고 편집할 수 있습니다.
- 문서화된 비주얼 규약: 팔레트, 타입 스케일, 모서리 반경, 아이콘 선 굵기, 모션 타이밍을 모두 한곳에서 수정하는 토큰으로 정리했습니다.
- 일반 데이터로 제공되는 차트 설정 — 내 시리즈로 바꿔 넣기만 하면 나머지는 차트 레이어가 처리합니다.
이런 분께 추천
- 페이지에 데이터 시각화가 필요하지만 차트 라이브러리를 직접 연결하고 싶지는 않은 경우.
- 차트 팔레트와 간격을 페이지의 나머지 부분과 맞추고 싶은 경우.
- 또 하나의 의존성을 계속 업그레이드하며 관리하기보다, 읽기 쉽고 직접 수정할 수 있는 소스를 원하는 경우.
이런 분께는 비추천
- 이미 성숙한 디자인 시스템을 운영 중인 팀 — 이 팔레트와 타입 스케일이 기존 것과 충돌합니다.
- 버전 관리되는 npm 패키지를 원하는 경우 — 이 Skill은 직접 유지보수할 소스를 제공합니다.
- 실시간 스트리밍 데이터나 매우 큰 데이터셋의 가상 스크롤이 필요한 차트.
고객·경영진 보고연구·기술 커뮤니케이션웹 디자인·디지털 경험인포그래픽 제작UI 비주얼 제작홈페이지 제작편집 가능한 결과물세련된 비주얼초보자 친화웜 뉴트럴틸 포인트제너레이티브 배경
이 Skill 소개

블록 하나만 붙여 넣으면 SVG로 대충 스케치한 것이 아니라 제대로 그려진 실제 데이터 시각화가 페이지에 나타납니다. 숫자를 넣으면 도형이 알아서 다시 그려집니다.
제공 내용
- KPI 라인 패널 전체 소스 — 컴포넌트 파일과 실행 가능한 사용 예시가 포함되어 바로 붙여 넣고 편집할 수 있습니다.
- 문서화된 비주얼 규약: 팔레트, 타입 스케일, 모서리 반경, 아이콘 선 굵기, 모션 타이밍을 모두 한곳에서 수정하는 토큰으로 정리했습니다.
- 일반 데이터로 제공되는 차트 설정 — 내 시리즈로 바꿔 넣기만 하면 나머지는 차트 레이어가 처리합니다.
사용 방법
- 섹션을 넣을 위치를 어시스턴트에게 알려 주세요. 먼저 프로젝트를 읽은 뒤, 기존 코드 작성 방식에 맞춰 블록을 작성합니다.
- 문구를 직접 쓴 내용으로 바꾸세요. 글자 크기와 간격은 알아서 유지됩니다.
- 숫자를 내 시리즈로 바꾸세요 — 차트가 다시 그려지고 색상과 축은 일관되게 유지됩니다.
- 배포하기 전에 휴대폰에서 확인해 보세요. 모바일에서도 무너지지 않도록 이미 만들어져 있습니다.
시작 전에 필요한 것
- 의존성
- ECharts — 필수
- 최근 테스트
- v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
사용자 리뷰
리뷰를 불러오는 중…






