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ページを生成し、オフラインでも動作可能。