참고팁X
Claude Code(클로드 코드) 생산성 향상 툴 'visual-explainer': 코드를 다이어그램/HTML로 즉시 시각화
텍스트 위주 코딩 환경을 HTML/다이어그램으로 보완하여 코드 리뷰 및 아키텍처 이해도 향상 가능.
요약
안드레 카파시(Andrej Karpathy)는 텍스트 위주의 AI 작업 방식에서 벗어나 다이어그램과 HTML 페이지를 활용하는 새로운 AI 협업 패러다임을 제시했다. 이를 구현한 'visual-explainer' 도구는 에이전트가 코드 계획, diff, 프로젝트 요약 등을 브라우저에서 바로 확인 가능한 HTML 페이지나 슬라이드 형태로 시각화해준다. Claude Code 플러그인 마켓플레이스를 통해 설치할 수 있으며, 코드 아키텍처 비교, 계획 검증, 프로젝트 리캡, 사실 확인(fact-check) 등 실무에 유용한 4가지 주요 명령어를 지원한다. 특히 4개 이상의 행을 가진 데이터를 출력할 때 자동으로 페이지를 렌더링해 가독성을 높여준다. 현재 Anthropic 엔지니어들도 코드베이스를 파악할 때 이 방식을 활용하고 있으며, Cursor, Claude Code, Codex 등 주요 환경에서 사용할 수 있다.
AI가 원문을 요약한 내용으로, 부정확할 수 있습니다.
원문 제목 @undefinedKi: Karpathy just explained how we’ll work with AI next: diagrams and HTML pages instead of walls of text. Someone already packed it i
원문 보기 ↗