本地 HTML 编辑器，专为 Agent 协作设计
Lavish-axi 是一个轻量级 CLI 工具，它将在本地浏览器中打开 AI 生成的 HTML 文件（即 artifact），让你可以直接在界面上圈选元素、标注文本、截图，并向当前 Agent 发送反馈。它通过一个本地服务器提供一个 chrome 风格的编辑界面，支持实时预览、布局审计（检测溢出、文字裁剪等问题）、反馈队列和长轮询，使得人机协作迭代原本静态的 HTML artifact 变得流畅。项目以 AXI 标准封装，通过 npx 即可无安装运行，并可作为 skill 集成到 Claude Code 等支持斜杠命令的 Agent 中。适合需要精细调试 AI 生成页面或可视化方案的工程师。
Lavish Editor is a local CLI tool that opens agent-generated HTML files in a browser, allowing humans to annotate elements, select text, and send feedback back to the AI agent. It treats HTML as a first-class collaboration artifact, replacing the old cycle of screenshots and long textual descriptions with direct interaction on the rendered page. The tool is built as an AXI: a token-efficient, agent-first server that any capable AI agent can discover and invoke with zero prior setup.
Lavish Editor 是一款本地 CLI 工具，能在浏览器中打开 AI agent 生成的 HTML 文件，让你直接在渲染页面上圈选元素、标记文本、发送反馈。它把 HTML 当作一等合作介质，替代了老式的截图加长文描述循环。该工具以 AXI 形式构建：一种 token 高效、优先 agent 的本地服务器，任何能干的 AI agent 都可以零配置发现并调用它。
AI agents are good at producing rich HTML artifacts—plans, diagrams, tables, code views, reports. But the human-agent collaboration loop on such artifacts is broken. It falls back to taking screenshots, pasting them into chat, and writing long messages like "change the button color to blue and move that section to the right." This process loses the interactivity that makes HTML powerful: you can't point, click, or annotate directly on the rendered page. Lavish Editor fills this gap by providing a browser-based interface where humans can interact with the artifact in its natural form.
AI agent 很擅长生成丰富的 HTML 产物——计划、图表、表格、代码视图、报告。但人机协作在这些产物上的回馈机制是断裂的：你要截图，贴进聊天框，写一大段「把按钮改成蓝色，把那段移到右边」。这个过程丧失了 HTML 最宝贵的交互性——你无法直接在渲染页面上指指点点。Lavish Editor 填补了这个缺口，让你直接在浏览器里与产物互动。
- Local only — The tool runs on your machine with zero cloud dependency. HTML files are served from the local filesystem, and state is stored under
.lavish-axi/in the workspace. - Human-AI collaboration — Using a browser chrome injected around the artifact, you can click on elements or select text ranges, write a message, and queue it for the agent. The agent picks up feedback through a long-poll endpoint (
lavish-axi poll), which also reports automatic layout warnings. - Battery included — Lavish includes a design reference (
lavish-axi design) that provides a copy-pasteable Tailwind CSS v4 + DaisyUI v5 CDN fallback. It also ships with playbooks for common artifact types: diagram, table, comparison, plan, code, input, and slides. Agents reference these playbooks to produce higher-quality HTML.
- 本地优先 —— 工具运行在你的机器上，零云端依赖。HTML 文件从本地文件系统加载，状态存放在工作区下的
.lavish-axi/目录。 - 人机协作 —— 通过在产物外包裹一层浏览器 chrome，你可以点击元素或选中文字，写一段消息并加入队列。agent 通过长轮询端点（
lavish-axi poll）获取反馈，同时还能收到自动的布局警告。 - 内置设计系统 —— Lavish 提供了可直接粘贴的 Tailwind CSS v4 + DaisyUI v5 CDN 回退方案（
lavish-axi design），还附带常见产物类型的手册：diagram, table, comparison, plan, code, input, slides。agent 参考这些手册可以产出更高质的 HTML。
Lavish's server binds to 127.0.0.1 (configurable via LAVISH_AXI_HOST) and opens the HTML file in a local browser. The artifact loads inside an iframe, and Lavish injects a small SDK for annotations, snapshots, feedback controls, and layout checks. Sessions are keyed by the canonical HTML file path—no opaque IDs needed. The tool enforces an open-time layout gate: the artifact is masked until the injected SDK audits the real browser render for overflow, clipped text, and overlapping text (error-severity findings keep the curtain up; warnings let it through). A timeout reveals the page with a persistent banner so review is never blocked. The server idles out after 30 minutes (LAVISH_AXI_IDLE_TIMEOUT_MS) or when no connections remain.
Lavish 的服务器绑定到 127.0.0.1（可通过 LAVISH_AXI_HOST 配置），在本地浏览器中打开 HTML 文件。产物在 iframe 内加载，Lavish 注入一个小型 SDK 用于标注、截图、反馈控件和布局检查。会话以 HTML 文件的规范化路径为键——不需要不透明的 ID。工具强制启用打开时的布局门控：产物先被遮盖，直到注入的 SDK 审计了真实浏览器渲染，检查出溢出、裁剪文本和重叠文本（严重错误会保持遮盖，仅警告则放行）。超时后会揭开幕布并显示持续横幅，确保审查不会无限阻塞。服务器在空闲 30 分钟（LAVISH_AXI_IDLE_TIMEOUT_MS）或没有任何连接时自动关闭。
The recommended path is to install the Lavish skill via Agent Skills:
npx skills add kunchenguid/lavish-axi --skill lavish
This adds the skill to your agent's skill directory (.claude/skills/ by default). No npm install is needed. The skill teaches the agent to run Lavish through npx -y lavish-axi, so the CLI comes on demand. Once installed, in agents that expose skills as slash commands (e.g., Claude Code), you invoke:
/lavish let's discuss our plan here
Or you can just ask for anything visual—a plan, comparison, diagram, table—and the agent loads the skill automatically when it recognizes the task.
Zero-setup alternative: Just tell your agent "Use npx lavish-axi to write a product plan"—any capable agent can run the CLI directly with nothing installed.
推荐的安装路径是通过 Agent Skills 安装 Lavish skill：
npx skills add kunchenguid/lavish-axi --skill lavish
这会将该 skill 加入你的 agent 的 skill 目录（默认为 .claude/skills/）。不需要 npm install。该 skill 教 agent 通过 npx -y lavish-axi 运行 Lavish，因此 CLI 按需加载。安装后，在支持斜杠命令的 agent（如 Claude Code）中，你可以直接调用：
/lavish 我们来讨论一下计划
或者直接说一句需要视觉展示的内容——计划、对比、图表、表格——agent 会在识别到任务时自动加载该 skill。
零设置替代方案：直接告诉 agent "Use npx lavish-axi to write a product plan"——任何能干的 agent 都可以直接运行 CLI，无需任何安装。
Best for: Any workflow where an AI agent produces HTML artifacts that a human needs to review or iterate on—product plans, technical designs, UI mockups, comparison tables, diagrams, code views, slide decks. Especially useful when the artifact uses interactivity (forms, buttons, collapsible sections) that screenshots can't capture.
Caveats:
- The tool is designed for local HTML files; remote URLs or cloud-hosted artifacts are not supported.
- Root-prefixed paths (e.g.,
/assets/logo.png) will not resolve through Lavish's artifact route; use relative paths. - The server binds to loopback by default; binding beyond that (
0.0.0.0) exposes an unauthenticated server that can read and serve arbitrary local files—use only on a trusted network. - The layout gate only catches overflow and text clipping; other visual regressions (wrong colors, missing elements) still need human review.
- Agents must be compatible with the AXI protocol (long-poll, TOON output) to fully utilize Lavish.
最佳场景：任何需要 AI agent 产生 HTML 产物并由人类审查或迭代的工作流——产品计划、技术设计、UI 原型、对比表格、图表、代码视图、幻灯片。尤其适合产物包含交互元素（表单、按钮、可折叠段落）而截图无法捕获的场景。
边界与注意事项：
- 工具专为本地 HTML 文件设计；不支持远程 URL 或云端托管产物。
- 以根路径开头的路径（如
/assets/logo.png）无法通过 Lavish 的产物路由解析；请使用相对路径。 - 服务器默认绑定到 loopback；绑到
0.0.0.0会暴露一个未经身份验证的服务器，可以读取和提供任意本地文件——仅在可信网络上使用。 - 布局门控只能捕获溢出和文本裁剪；其他视觉回归（颜色错误、元素缺失）仍需人工审查。
- Agent 必须兼容 AXI 协议（长轮询、TOON 输出）才能充分利用 Lavish。