QingYunA/answer-me-with-html

解决的问题

消除 AI 代理响应中的「文字墙」问题，将复杂解释转换为结构化、视觉化的 HTML 页面。它特别解决了让大语言模型直接编写原始 HTML/CSS/SVG 的低效问题——这既慢又消耗大量 token；取而代之的是，允许模型编写简洁的 Markdown 草稿，由本地 CLI 工具将其渲染为专业布局。

如何工作

该系统作为一项代理技能运行。AI 模型编写一个简短、结构化的 Markdown 草稿，其中包含内容和特定组件标签（如 flow、sequence、tree 或 timeline）。捆绑的 CLI 工具随后接收此草稿，并使用 dagre 等库处理布局、主题应用和图表坐标计算等繁重任务。此过程将输出 token 数量减少了约 7 倍，响应速度相比直接生成 HTML 提高了 3.6 倍。

适用人群

使用 AI 代理（如 Claude Code、Cursor、Codex 和 OpenCode）的用户，希望获得高度可视化、易于理解的摘要、架构图和对比图，而非冗长的文本块。

亮点

• Token 效率：大幅减少创建视觉页面所需的输出 token 数量。
• 自动布局：使用代码计算面板位置和图表坐标，确保标签从不被截断。
• 视觉组件：包含序列图、流程图、时间线和文件夹树等专用组件。
• 3b1b 风格视频：可基于相同的 Markdown 草稿生成带有同步动画和摄像机焦点的解说视频。
• 写作检查：集成基于 ASD-STE100 的规则集，标记冗长表达和被动语态，提升可读性。
• 可移植输出：生成无外部依赖的单文件 HTML 页面，支持离线使用。