为 AI 代理提供视觉反馈，无需截图和冗长说明
你让 Claude Code 或 Copilot 创建架构图或产品计划。代理会生成一个包含图表的交互式 HTML 文档。但当你想要修复某个块上的标签或移动某个元素时，事情就变得繁琐了。你要么需要截一张带箭头的截图，要么用文字描述："从下往上数第三节，把块 B 换成 C"。
lavish-axi 仓库的核心理念是让这个过程重新恢复正常的交互性。该工具无需文本描述，直接在浏览器中打开生成的文件，并提供便捷的编辑工具。
Lavish Editor 的功能
这是一个 CLI 工具，也是 AXI 协议（Agent eXtension Interface，代理扩展接口）的实现。该工具启动一个本地 Web 服务器，并在浏览器中打开生成的 HTML 文件。
你可以选择文本、点击元素、留下评论或编辑图表。所有注释都会收集到一个队列中，通过长轮询或 CLI 钩子发送回代理。神经网络会收到精确的 CSS 选择器和文本片段，因此能快速理解需要修复的内容。
所有功能都在本地完全运行。默认情况下不涉及第三方云服务或向外部服务器发送代码。
将 Mermaid 转换为 Excalidraw 画板
如果代理生成了 Mermaid 图表，Lavish 会自动将其转换为交互式 Excalidraw 画板，直接在页面上呈现。
你点击图表，移动形状，绘制连接线，或更改文本。然后点击发送反馈。该工具会生成一份包含视觉预览的更改摘要，代理会更新文件中的原始 Mermaid 代码。
同时，最终的 HTML 本身不会被外部库污染。如果在没有 Lavish 的普通浏览器中打开它，将显示标准的干净 Mermaid。
自动布局验证
一个有趣的细节：在向用户展示内容之前，Lavish 会运行内部布局检查。
内置脚本会检查文本是否溢出容器边界，以及控件是否被遮挡。如果检测到严重的界面问题，该工具会在打开的页面引起你注意之前，向代理发送修订消息。
技术实现原理
交互基于清晰的原则构建：
- 会话与规范的 HTML 文件路径绑定，代理无需存储 ID。
- 内容在隔离的 iframe 中运行，注入脚本不会破坏你的样式。
- 反馈以紧凑的 TOON 格式发送给代理，以节省上下文令牌。
- 文件保存时页面自动重新加载，保持滚动位置不变。
要与合作者分享结果，export 命令会将图像和样式打包成单个独立文件。如果你需要快速将结果发布到网上，share 命令可以将其上传到公开或受密码保护的主机。
连接到代理
添加该工具最简单的方式是通过技能管理器：
npx skills add kunchenguid/lavish-axi --skill lavish
在 Claude Code 或类似环境中，会出现一个现成的命令：
/lavish давайте обсудим план проекта
要进行跨所有开发会话的端到端集成，你可以全局安装该工具并启用钩子：
npm install -g lavish-axi
lavish-axi setup hooks
该命令会为 Claude Code、Codex、OpenCode 和 GitHub Copilot CLI 写入 SessionStart 钩子。当任何新会话启动时，代理会立即看到活跃的审查流程。
谁会发现这个项目有用
该工具对于积极使用 AI 代理创建技术文档和界面原型的开发人员非常有用。该工具完全消除了围绕"修复右边那个块"的无休止来回沟通，并节省上下文令牌。
相关项目