visual-explainer은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

visual-explainer은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

visual-explainer은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. visual-explainer의 마지막 커밋은 2026년 10월 20일입니다.

visual-explainer은(는) 어디에 사용할 수 있나요?

팀원에게 시스템 아키텍처나 인증 흐름을 설명합니다. 대규모 diff를 리뷰하거나 요구사항을 구현 계획과 비교합니다. 에이전트가 만든 복잡한 비교 표를 읽기 쉬운 페이지로 변환합니다. 코드베이스나 기능을 바탕으로 슬라이드 덱 또는 짧은 내레이션 동영상을 만듭니다.

visual-explainer는 어떻게 설치하나요?

Claude Code에 마켓플레이스를 추가하세요: /plugin marketplace add nicobailon/visual-explainer visual-explainer 플러그인을 설치하세요: /plugin install visual-explainer@visual-explainer-marketplace 에이전트에게 다이어그램 작성이나 리뷰를 요청하면 브라우저에서 HTML 페이지가 열립니다

visual-explainer은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/nicobailon/visual-explainer

nicobailon/visual-explainer

코딩 에이전트가 다이어그램, diff 리뷰, 계획, 표를 ASCII 아트 대신 스타일이 적용된 HTML 페이지로 렌더링하게 하는 에이전트 스킬입니다.

GitHub에서 보기

스타: 10,550
포크: 677
열린 이슈: 0
마지막 커밋: 어제

어떤 프로젝트인가요?

visual-explainer는 Claude Code, Codex CLI, Cursor, Pi 같은 코딩 어시스턴트를 위한 에이전트 스킬입니다. 아키텍처 설명, diff 리뷰, 요구사항과 계획 비교 등을 요청받으면 ASCII 다이어그램이나 터미널 너비를 넘어 줄바꿈이 어색하게 되는 표를 출력하는 대신, 독립 실행형 HTML 페이지를 작성해 브라우저에서 엽니다.

이 스킬은 웹 다이어그램, 시각적 구현 계획, 슬라이드 덱, 내레이션이 포함된 MP4 동영상, diff 리뷰, 코드베이스를 기준으로 한 계획 검토, 프로젝트 요약, 옵션 비교, 문서 팩트체크 등 자주 쓰는 작업을 위한 슬래시 명령을 제공합니다. 페이지는 여러 레이아웃 스타일과 전환 가능한 11가지 색상 팔레트를 지원합니다. 다이어그램은 손으로 그린 인라인 SVG로 만들어지며, 단계별로 살펴볼 수 있습니다.

핵심 스킬은 빌드 과정 없이 브라우저만 있으면 사용할 수 있습니다. 선택 기능으로 로컬 stdio MCP 서버, Pi 확장 도구, 소규모 Node 의존성을 사용하는 PPTX 내보내기 기능도 제공됩니다.

핵심 기능

01ASCII 출력 대신 다이어그램, 표, 리뷰를 독립 실행형 HTML 페이지로 생성합니다.
02diff 리뷰, 계획 검토, 프로젝트 요약, 비교, 슬라이드 덱을 위한 슬래시 명령을 제공합니다.
03전환 가능한 11가지 색상 팔레트와 여러 페이지 레이아웃 구성을 지원합니다.
04단계별로 살펴볼 수 있는 손그림 스타일의 인라인 SVG 다이어그램을 그립니다.
05선택 기능으로 MCP 서버, Pi 도구, PPTX 내보내기 유틸리티를 제공합니다.

활용 사례

팀원에게 시스템 아키텍처나 인증 흐름을 설명합니다.
대규모 diff를 리뷰하거나 요구사항을 구현 계획과 비교합니다.
에이전트가 만든 복잡한 비교 표를 읽기 쉬운 페이지로 변환합니다.
코드베이스나 기능을 바탕으로 슬라이드 덱 또는 짧은 내레이션 동영상을 만듭니다.

빠른 시작

1
Claude Code에 마켓플레이스를 추가하세요
/plugin marketplace add nicobailon/visual-explainer
2
visual-explainer 플러그인을 설치하세요
/plugin install visual-explainer@visual-explainer-marketplace
3
에이전트에게 다이어그램 작성이나 리뷰를 요청하면 브라우저에서 HTML 페이지가 열립니다

사용 전 알아둘 점

동영상 내보내기에는 ffmpeg, Chrome, playwright-core를 별도로 설치해야 합니다.
PPTX 내보내기는 최선을 다해 제공되는 유틸리티이며, 기준이 되는 원본은 계속 HTML입니다.

토픽

#agent-skill #html #diagrams #code-review #claude-code #visualization #mcp

자주 묻는 질문

visual-explainer은(는) 무엇인가요?: 코딩 에이전트가 다이어그램, diff 리뷰, 계획, 표를 ASCII 아트 대신 스타일이 적용된 HTML 페이지로 렌더링하게 하는 에이전트 스킬입니다. visual-explainer는 Claude Code, Codex CLI, Cursor, Pi 같은 코딩 어시스턴트를 위한 에이전트 스킬입니다. 아키텍처 설명, diff 리뷰, 요구사항과 계획 비교 등을 요청받으면 ASCII 다이어그램이나 터미널 너비를 넘어 줄바꿈이 어색하게 되는 표를 출력하는 대신, 독립 실행형 HTML 페이지를 작성해 브라우저에서 엽니다.
visual-explainer은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?: visual-explainer은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
visual-explainer은(는) 아직 유지보수되고 있나요?: 활발히 유지보수 중. visual-explainer의 마지막 커밋은 2026년 10월 20일입니다.
visual-explainer은(는) 어디에 사용할 수 있나요?: 팀원에게 시스템 아키텍처나 인증 흐름을 설명합니다. 대규모 diff를 리뷰하거나 요구사항을 구현 계획과 비교합니다. 에이전트가 만든 복잡한 비교 표를 읽기 쉬운 페이지로 변환합니다. 코드베이스나 기능을 바탕으로 슬라이드 덱 또는 짧은 내레이션 동영상을 만듭니다.
visual-explainer는 어떻게 설치하나요?: Claude Code에 마켓플레이스를 추가하세요: /plugin marketplace add nicobailon/visual-explainer visual-explainer 플러그인을 설치하세요: /plugin install visual-explainer@visual-explainer-marketplace 에이전트에게 다이어그램 작성이나 리뷰를 요청하면 브라우저에서 HTML 페이지가 열립니다
visual-explainer은(는) 어디서 받을 수 있나요?: 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/nicobailon/visual-explainer

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.