QingYunA/answer-me-with-html

해결하는 문제

AI 에이전트 응답에서 "텍스트의 벽" 문제를 해결하여 복잡한 설명을 구조적이고 시각적인 HTML 페이지로 변환합니다. LLM에 직접 HTML/CSS/SVG를 작성하도록 하는 비효율성(느리고 토큰 소모가 큼)을 해결합니다. 대신 모델은 간결한 Markdown 드래프트를 작성하고, 로컬 CLI 도구가 이를 전문적인 레이아웃으로 렌더링합니다.

작동 방식

이 시스템은 에이전트 스킬로 작동합니다. AI 모델은 콘텐츠와 특정 컴포넌트 태그(flow, sequence, tree, timeline 등)를 포함한 짧고 구조화된 Markdown 드래프트를 작성합니다. 번들된 CLI 도구는 이 드래프트를 받아 dagre 같은 라이브러리를 사용해 레이아웃, 테마 적용, 다이어그램 좌표 계산 등의 무거운 작업을 처리합니다. 이 과정은 출력 토큰을 약 7배 줄이고, 직접 HTML 생성보다 응답 속도를 3.6배 빠르게 만듭니다.

대상 사용자

Claude Code, Cursor, Codex, OpenCode와 같은 AI 에이전트 사용자 중, 긴 텍스트 블록 대신 시각적이고 이해하기 쉬운 요약, 아키텍처 다이어그램, 비교 표를 원하는 사용자들입니다.

주요 특징

• 토큰 효율성: 시각적 페이지를 생성하기 위해 필요한 출력 토큰 수를 크게 줄입니다.
• 자동 레이아웃: 코드로 패널 배치와 다이어그램 좌표를 계산하여 레이블이 잘리지 않도록 보장합니다.
• 시각적 컴포넌트: 시퀀스 다이어그램, 플로우차트, 타임라인, 폴더 트리 전용 컴포넌트를 포함합니다.
• 3b1b 스타일 동영상: 동일한 Markdown 드래프트를 기반으로 동기화된 애니메이션과 카메라 포커스를 갖춘 나레이션 해설 동영상을 생성할 수 있습니다.
• 작문 검사: ASD-STE100 기반 규칙 세트를 통합하여 어색한 표현과 수동태를 탐지해 가독성을 향상시킵니다.
• 포터블 출력: 외부 종속성 없이 오프라인에서도 작동하는 단일 파일 HTML 페이지를 생성합니다.