lavish

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Lavish Editor

Lavish Editor helps agents turn rich HTML artifacts into collaborative human review surfaces. Whenever you are about to give user a complex response that will be easier to understand via a rich / interactive page, consider using Lavish Editor. First generate an interactive HTML artifact according to user request, then run

npx -y lavish-axi <html-file>

so the user can visually review it, annotate elements or selected text, queue prompts, and send feedback back through

npx -y lavish-axi poll

You do not need lavish-axi installed globally - invoke it with

npx -y lavish-axi <html-file>

. If lavish-axi output shows a follow-up command starting with

lavish-axi

, run it as

npx -y lavish-axi ...

instead.

Lavish Editor 可帮助Agent将丰富的HTML制品转换为协作式人工审阅界面。每当您要向用户提供复杂响应，且通过富交互页面更易理解时，不妨考虑使用Lavish Editor。首先根据用户请求生成交互式HTML制品，然后运行

npx -y lavish-axi <html-file>

，让用户可以直观审阅、标注元素或选中的文本、提交提示，并通过

npx -y lavish-axi poll

反馈意见。

无需全局安装lavish-axi——直接通过

npx -y lavish-axi <html-file>

调用即可。如果lavish-axi的输出显示后续命令以

lavish-axi

开头，请改用

npx -y lavish-axi ...

运行。

Request

请求

$ARGUMENTS

If the request above is non-empty, the user invoked

/lavish

explicitly - build an HTML artifact for that request now, following the workflow below. If it is empty, infer what to visualize from the conversation.

$ARGUMENTS

如果上述请求非空，说明用户已显式调用

/lavish

——请立即按照以下工作流为该请求构建HTML制品。如果请求为空，请从对话内容推断需要可视化的内容。

When to use

使用场景

Use lavish-axi when the user asks for a visual artifact, HTML explainer, interactive prototype, review surface, product or technical plan, comparison, report, or browser-based feedback loop

当用户需要可视化制品、HTML说明文档、交互式原型、审阅界面、产品或技术方案、对比分析、报告，或基于浏览器的反馈循环时，使用lavish-axi。

Workflow

工作流

Create the HTML artifact (default location
```
.lavish/<name>.html
```
in the working directory).
Run
```
npx -y lavish-axi <html-file>
```
to open or resume a review session in the browser.
Run
```
npx -y lavish-axi poll <html-file>
```
to long-poll for the user's annotations, queued prompts, and browser-reported
```
layout_warnings
```
. The poll stays silent until the user acts or the real browser reports fresh layout warnings - leave it running, never kill it. If your harness limits how long a foreground command may run, run the poll as a background task; if it gets killed or times out anyway, just re-run it - queued feedback is never lost.
If poll returns
```
layout_warnings
```
, fix overflow, clipped text, or overlapping unreadable content and re-check before involving the human.
Apply human feedback, then poll again with
```
--agent-reply "<message>"
```
to reply in the browser and keep the loop going.
Run
```
npx -y lavish-axi end <html-file>
```
when the review is finished.

创建HTML制品（默认位置为工作目录下的
```
.lavish/<name>.html
```
）。
运行
```
npx -y lavish-axi <html-file>
```
，在浏览器中打开或恢复审阅会话。
运行
```
npx -y lavish-axi poll <html-file>
```
，长轮询获取用户的标注、提交的提示以及浏览器报告的
```
layout_warnings
```
。轮询会保持静默，直到用户操作或真实浏览器报告新的布局警告——请让它持续运行，切勿终止。如果您的执行环境限制前台命令的运行时长，请将轮询作为后台任务运行；若它意外终止或超时，只需重新运行即可——已提交的反馈不会丢失。
如果轮询返回
```
layout_warnings
```
，请修复内容溢出、文本截断或重叠不可读的问题，然后再交由用户审阅。
应用用户反馈后，再次运行带
```
--agent-reply "<message>"
```
参数的轮询命令，在浏览器中回复用户并持续反馈循环。
审阅完成后，运行
```
npx -y lavish-axi end <html-file>
```
结束会话。

Visual guidance

视觉指导

Use visual hierarchy to make the most important decisions, risks, tradeoffs, and next actions obvious at a glance
Use visual structure such as sections, cards, tables, diagrams, annotated snippets, and side-by-side comparisons instead of long prose
Choose typography, spacing, color, and layout deliberately so the artifact has a clear point of view
Prevent horizontal overflow at every nesting level: nested grid/flex children also need minmax(0, 1fr) tracks and min-width: 0, especially when badges, labels, or status text use wide pixel or monospace fonts; wrap, truncate, or contain long unbreakable text deliberately

利用视觉层级，让最重要的决策、风险、权衡和下一步操作一目了然
使用视觉结构，如分区、卡片、表格、图表、带注释的代码片段和并排对比，替代冗长的文本
审慎选择排版、间距、颜色和布局，使制品具有明确的核心观点
避免所有嵌套层级出现水平溢出：嵌套的网格/弹性容器子元素也需要设置
```
minmax(0, 1fr)
```
轨道和
```
min-width: 0
```
，尤其是当徽章、标签或状态文本使用宽像素或等宽字体时；需刻意对长不可断文本进行换行、截断或限制显示

Playbooks

操作手册

Run

npx -y lavish-axi playbook <id>

for focused, detailed guidance on any of these. One artifact often combines several playbooks (for example a plan that includes a comparison and a diagram), so read every playbook relevant to your artifact, not just one, for the best quality:

```
diagram
```
- Map relationships, flows, state, and architecture
```
table
```
- Turn dense records into scan-friendly review surfaces
```
comparison
```
- Show options, tradeoffs, and current vs target behavior
```
plan
```
- Explain a product or technical plan before implementation
```
code
```
- Render source code, code files, patches, PR diffs, and before/after code inside Lavish artifacts
```
input
```
- Must be used when the agent needs to collect user input on decisions, choices, preferences, triage, scope, or other structured feedback from within the artifact
```
slides
```
- Create a deliberate presentation when slides are requested

运行

npx -y lavish-axi playbook <id>

获取以下任一场景的详细针对性指导。一个制品通常会结合多个操作手册（例如包含对比和图表的方案），因此请阅读所有与制品相关的操作手册，而非仅阅读其中一个，以获得最佳质量：

```
diagram
```
- 映射关系、流程、状态和架构
```
table
```
- 将密集记录转换为易于浏览的审阅界面
```
comparison
```
- 展示选项、权衡以及当前与目标行为
```
plan
```
- 在实施前解释产品或技术方案
```
code
```
- 在Lavish制品中渲染源代码、代码文件、补丁、PR差异以及前后版本代码对比
```
input
```
- 当Agent需要从制品内收集用户关于决策、选择、偏好、分类、范围或其他结构化反馈时，必须使用此手册
```
slides
```
- 当用户需要幻灯片时，创建定制化演示文稿

Commands & rules

命令与规则

Run
```
npx -y lavish-axi <html-file>
```
to open or resume a Lavish Editor session
Unless the user specifies another location, create HTML artifacts in the current working directory under
```
.lavish/
```
Lavish serves the html file through a local express.js server. If your html needs to reference other filesystem assets such as images, CSS, fonts, and local scripts, copy them into the same directory as the HTML file, then reference them with relative paths from that directory. Never prepend
```
/
```
to those asset paths - root paths won't work
Run
```
npx -y lavish-axi poll <html-file>
```
to wait for user feedback or browser-reported layout_warnings. It long-polls and stays silent until the user sends feedback, ends the session, or the real browser reports fresh layout_warnings, so leave it running - never kill it. Fix layout_warnings before involving the human. If your harness limits how long a foreground command may run, run the poll as a background task; if it gets killed or times out anyway, just re-run it - queued feedback is never lost
Run
```
npx -y lavish-axi end <html-file>
```
to end a session
Run
```
npx -y lavish-axi stop
```
to shut down the background server (it also self-stops when idle or after the last session ends with nothing connected)
Run
```
npx -y lavish-axi playbook <playbook_id>
```
for focused artifact guidance. One artifact often combines several playbooks (for example a plan that includes a comparison and a diagram), so read every playbook relevant to the artifact, not just one, for the best quality
Lavish does not auto-inject any design system - artifacts stay portable so they render identically when opened directly without lavish-axi running. Before writing any HTML, decide the design direction in this strict priority order, and only move to the next step when the current one truly yields nothing: (1) if the user asked for a specific look or named design system, use that; (2) otherwise you must first inspect the project the artifact is about - the subject or product whose content or UI it represents, which may differ from your current working directory - and match that project's design system: Tailwind or theme config, shared CSS variables or design tokens, component library, brand assets, or existing styled pages. If the artifact previews, proposes, or mocks a specific app's UI, render it in that app's own design system so it faithfully shows the product, even when you are running in a different repo; (3) only when both steps come up empty, use the Lavish-recommended Tailwind CSS browser runtime v4 + DaisyUI v5, available via CDN - run
```
npx -y lavish-axi design
```
for a copy-pasteable CDN snippet plus component reference, and prefer that CDN snippet over hand-writing styles unless explicitly instructed otherwise by the user. When you deliver the artifact, state which of the three design sources you used and why.
Use lavish-axi when the user asks for a visual artifact, HTML explainer, interactive prototype, review surface, product or technical plan, comparison, report, or browser-based feedback loop

运行
```
npx -y lavish-axi <html-file>
```
打开或恢复Lavish Editor会话
除非用户指定其他位置，否则请在当前工作目录下的
```
.lavish/
```
文件夹中创建HTML制品
Lavish通过本地express.js服务器提供HTML文件服务。如果您的HTML需要引用其他文件系统资源（如图像、CSS、字体和本地脚本），请将它们复制到与HTML文件相同的目录中，然后使用该目录下的相对路径引用。切勿在这些资源路径前添加
```
/
```
——根路径无法正常工作
运行
```
npx -y lavish-axi poll <html-file>
```
等待用户反馈或浏览器报告的
```
layout_warnings
```
。它会进行长轮询，直到用户发送反馈、结束会话或真实浏览器报告新的布局警告前保持静默，因此请让它持续运行——切勿终止。在交由用户审阅前修复
```
layout_warnings
```
。如果您的执行环境限制前台命令的运行时长，请将轮询作为后台任务运行；若它意外终止或超时，只需重新运行即可——已提交的反馈不会丢失
运行
```
npx -y lavish-axi end <html-file>
```
结束会话
运行
```
npx -y lavish-axi stop
```
关闭后台服务器（当服务器空闲或最后一个会话结束且无连接时，它也会自动停止）
运行
```
npx -y lavish-axi playbook <playbook_id>
```
获取针对性的制品指导。一个制品通常会结合多个操作手册（例如包含对比和图表的方案），因此请阅读所有与制品相关的操作手册，而非仅阅读其中一个，以获得最佳质量
Lavish不会自动注入任何设计系统——制品保持可移植性，因此即使在未运行lavish-axi的情况下直接打开，也能呈现相同效果。在编写任何HTML之前，请严格按照以下优先级确定设计方向，当前一步确实无法实现时再进入下一步：(1) 如果用户要求特定外观或指定设计系统，请使用该系统；(2) 否则，您必须首先检查制品所针对的项目——即其内容或UI所代表的主题或产品，这可能与您当前的工作目录不同——并匹配该项目的设计系统：Tailwind或主题配置、共享CSS变量或设计令牌、组件库、品牌资产或现有样式页面。如果制品预览、提议或模拟特定应用的UI，请使用该应用自身的设计系统，以便真实展示产品，即使您在不同的代码库中运行；(3) 只有当前两步都无法实现时，才使用Lavish推荐的Tailwind CSS浏览器运行时v4 + DaisyUI v5，可通过CDN获取——运行
```
npx -y lavish-axi design
```
获取可复制粘贴的CDN代码片段及组件参考，除非用户明确指示，否则优先使用该CDN代码片段而非手写样式。交付制品时，请说明您使用的三种设计来源中的哪一种及其原因。
当用户需要可视化制品、HTML说明文档、交互式原型、审阅界面、产品或技术方案、对比分析、报告，或基于浏览器的反馈循环时，使用lavish-axi