lavish

lavish

热门

借助 lavish-axi CLI,将复杂或具象化的 Agent 回复转化为内容丰富、方便审核的 HTML Artifact。用户可以在其中添加标注并反馈意见。当你准备输出方案规划、对比分析、架构图表、表格数据、代码 Diff 或报告等比纯文本更适合可视化呈现的内容时,请使用此 Skill。

1886Star
156Fork
更新于 2026/7/14
SKILL.md
只读
名称
lavish
描述

借助 lavish-axi CLI,将复杂或具象化的 Agent 回复转化为内容丰富、方便审核的 HTML Artifact。用户可以在其中添加标注并反馈意见。当你准备输出方案规划、对比分析、架构图表、表格数据、代码 Diff 或报告等比纯文本更适合可视化呈现的内容时,请使用此 Skill。

Lavish Editor

Lavish Editor 能够帮助 Agent 将丰富的 HTML Artifact 转化为方便人类协作审核的界面。每当你准备向用户输出一份通过富文本或交互式页面更易于理解的复杂回复时,都可以考虑使用 Lavish Editor。首先根据用户需求生成一个交互式 HTML Artifact,然后运行 npx -y lavish-axi <html-file>,以便用户可以直观地审核内容、标注元素或选中文本、排队发送 Prompt,并通过 npx -y lavish-axi poll 将反馈实时回传给 Agent。

你不需要在全局安装 lavish-axi —— 直接通过 npx -y lavish-axi <html-file> 即可调用。
如果 lavish-axi 的输出提示后续需要运行以 lavish-axi 开头的命令,请一律以 npx -y lavish-axi ... 的形式运行。
在受限的子进程沙盒、CI 环境或 npx -y 会异常退出(例如返回错误码 216)的 Agent 运行环境中,可以直接使用已安装好的副本:本地安装请使用 node "$(npm root)/lavish-axi/dist/cli.mjs" <html-file>,全局安装请使用 node "$(npm root -g)/lavish-axi/dist/cli.mjs" <html-file>;或者在首次安装完成后直接调用 lavish-axi <html-file> 可执行文件。

Request

$ARGUMENTS

如果上述请求不为空,说明用户显式调用了 /lavish 命令 —— 请立即按照以下工作流为该请求构建 HTML Artifact。
如果为空,请结合上下文推断需要可视化的内容。

When to use

当用户请求生成可视化 Artifact、HTML 讲解页面、交互式原型、审核界面、产品或技术方案、对比分析、报告,或要求基于浏览器建立反馈循环时,请使用 lavish-axi。

Workflow

  1. 创建 HTML Artifact(默认路径为工作目录下的 .lavish/<name>.html)。
  2. 运行 npx -y lavish-axi <html-file> 在浏览器中打开或恢复审核 Session。
  3. 运行 npx -y lavish-axi poll <html-file> 长轮询等待用户的标注、排队的 Prompt 以及经过真实浏览器验证的严重布局失效(以 layout_warnings 形式返回)。
    首次轮询时,建议加上 --agent-reply "<用一句话总结你构建的内容以及优先审核的要点>",以便对话面板在打开时即带有上下文。
    轮询会保持静默,直到用户做出操作,或者真实浏览器证实关键内容不可用/无法访问 —— 请保持轮询持续运行,绝不要主动杀掉该进程。
    对于纯视觉修饰性、故意为之、暂时的、微小的或不确定的观察项,轮询将保持静默。
    默认将轮询保持在前台运行,让反馈直接返回给 Agent。
    仅当使用 Harness 原生的可追踪后台任务机制(且该机制能保证完成结果可以恢复或通知到当前同一个 Agent)时,才允许使用后台轮询。
    切勿仅为了保持轮询存活而使用 nohup、Shell &disown、重定向的“即发即弃”进程或脱离终端(除非配备了显式且经过验证的回调机制)。
    如果 Harness 没有具备完成感知能力的后台机制,请使用前台轮询,或者先在周围的 Supervisor 中接入经过验证的唤醒回调。
    在唤醒路径正式生效前,不要告知用户该 Artifact 正在被监控。
    如果轮询不幸被杀掉或超时,直接重新运行即可 —— 排队的反馈绝不会丢失。
  4. 如果轮询返回了 layout_warnings,请遵循返回的 next_step 指引:在邀请人类介入前,先修复严重的布局失效问题并重新检查。
  5. 应用人类的反馈意见,然后带上 --agent-reply "<消息>" 再次进行轮询,在浏览器中进行回复,并在相同的前台运行或已验证唤醒路径规则下维持循环。
  6. 审核完成后,运行 npx -y lavish-axi end <html-file>
  7. 点击 Send & End 会结束当前 Session。其最终反馈仍会被正常投递一次。在该回复之后,轮询停止,Agent 不得在未受邀请的情况下重新打开 Session。后续如有任何遗留更新,请直接在当前对话中输出。

Visual guidance

  • 运用视觉层级,让人能一眼看清最重要的决策、风险、权衡和后续行动
  • 多使用章节、卡片、表格、图表、标注代码片段和双排对比等视觉化结构,避免大段纯文本
  • 深思熟虑地选择字体、间距、颜色和布局,确保 Artifact 具备清晰的表达视角
  • 确保在每个嵌套层级都防止水平溢出:嵌套的 grid/flex 子元素同样需要 minmax(0, 1fr) 轨道和 min-width: 0,尤其是当 Badge、标签或状态文本使用较宽的像素字体或等宽字体时;请明确做好长文本的折行(wrap)、截断(truncate)或容器收容
  • 当 Artifact 需要描述既有或当前的 UI / 状态时,直接展示它:截取真实页面的截图(必要时以只读方式运行应用)并嵌入其中,而不是用文字描述当前外观;将文字留给无法直接展示的内容,例如设计初衷、权衡考量和待定问题

Playbooks

针对以下任意场景,运行 npx -y lavish-axi playbook <id> 即可获取针对性且详尽的指引。
单个 Artifact 通常会结合多个 Playbook(例如包含对比和架构图的方案规划),因此在编写 HTML 之前必须打开每个匹配的 Playbook。
对于流程图、架构图、状态图或时序图,不要用 div/flexbox 手动拼凑框线图;请打开 diagram playbook,并使用来自 npx -y lavish-axi design 具备主题感知能力的 Mermaid 代码片段,除非节点需要极其丰富的标注而必须使用 SVG。

  • diagram —— 梳理关系、流程、状态与架构
  • table —— 将密集的数据记录转化为易于扫视的审核界面
  • comparison —— 展示可选方案、权衡考量以及当前 vs 目标行为
  • plan —— 在实施前详细阐述产品或技术方案
  • code —— 在 Lavish Artifact 中渲染源代码、代码文件、补丁、PR diff 以及对比代码
  • input —— 当 Agent 需要从 Artifact 内部收集用户对决策、选择、偏好、优先级筛选、范围或其他结构化反馈意见时必须使用
  • slides —— 当用户要求提供演示文稿时,创建精心设计的幻灯片展示

Commands & rules

  • 运行 npx -y lavish-axi <html-file> 可打开或恢复 Lavish Editor Session。如果用户已在浏览器中显式结束了 Session,该命令将拒绝重新打开并说明原因,而不会在未经邀请的情况下强行重开 —— 仅当用户要求进一步审核或有重要内容需要其视觉关注时,才传入 --reopen
  • 除非用户指定了其他路径,否则请在当前工作目录下的 .lavish/ 目录中创建 HTML Artifact
  • Lavish 通过本地 Express.js 服务器托管 HTML 文件。如果你的 HTML 需要引用其他文件系统资源(如图片、CSS、字体和本地脚本),请将它们复制到 HTML 文件所在的同一目录下,并使用相对于该目录的相对路径进行引用。切勿在资源路径前加上 / —— 根路径引用将无法生效
  • 运行 npx -y lavish-axi poll <html-file> 以等待用户反馈或经真实浏览器验证的严重布局失效。它会进行长轮询并保持静默,直到用户发送反馈、结束 Session,或者真实浏览器证实关键内容不可用/无法访问,因此请保持其持续运行 —— 切勿主动杀掉进程。在邀请人类介入前,先修复并重新检查每一个返回的布局问题;对于修饰性、故意为之、暂时的、微小的或不确定的观察项,轮询将保持静默。默认将轮询保持在前台运行,让反馈直接返回给 Agent。仅当使用 Harness 原生的可追踪后台任务机制(且该机制能保证完成结果可以恢复或通知到当前同一个 Agent)时,才允许使用后台轮询。切勿仅为了保持轮询存活而使用 nohup、Shell &disown、重定向的“即发即弃”进程或脱离终端(除非配备了显式且经过验证的回调机制)。如果 Harness 没有具备完成感知能力的后台机制,请使用前台轮询,或者先在周围的 Supervisor 中接入经过验证的唤醒回调。在唤醒路径正式生效前,不要告知用户该 Artifact 正在被监控。如果轮询不幸被杀掉或超时,直接重新运行即可 —— 排队的反馈绝不会丢失。Send & End 会结束当前 Session。其最终反馈仍会被正常投递一次。在该回复之后,轮询停止,Agent 不得在未受邀请的情况下重新打开 Session。
  • 渲染在 .mermaid 容器中的 Mermaid 图表会在浏览器中自动转换为可嵌入、可编辑的 Excalidraw 白板(点击图表即可解锁编辑;点击全屏操作可在整个视口中打开)—— 流程图、时序图、类图、ER 图和状态图会转换为可编辑的图形;其他类型则以图片形式嵌入供涂鸦标注。画布会在本地自动保存;当页面刷新检测到 Mermaid 源码发生变更时,审核者可以显式选择重新转换并丢弃已保存的编辑,或继续编辑已保存的画布。独立导出和生成的副本仍会渲染为普通 Mermaid。排队反馈会将 Prompt 添加到对话面板中;当用户发送时,轮询会返回带 "whiteboard" 标签的 Prompt,其中包含有界的编辑摘要以及本地 scenePath(.excalidraw JSON)和 previewPath(PNG)文件 —— 请先阅读摘要,仅在必要时打开文件,然后通过更新 Artifact 中的 Mermaid 源码来应用修改(切勿尝试将画布写回文件)
  • 运行 npx -y lavish-axi end <html-file> 由 Agent 端主动结束 Session —— 以这种方式结束在后续仍允许直接重新打开。而如果是用户在浏览器端结束了 Session,后续直接运行 npx -y lavish-axi <html-file> 会拒绝重新打开(除非加上 --reopen
  • 运行 npx -y lavish-axi export <html-file> [--out <path>] 可导出 Artifact 的便携副本 —— 将本地资源内联到单个 HTML 文件中 —— 这样无需运行 Lavish 服务器或附带其他同级文件即可直接打开。远程 CDN/字体引用仍保留为链接,因此渲染这些资源仍需要网络。用户也可以在浏览器界面的溢出菜单中进行导出
  • 运行 npx -y lavish-axi share <html-file> [--password <pw>] [--token <t>] 可将 Artifact 发布到第三方托管服务 ht-ml.app(https://ht-ml.app ,非 Lavish 官方内置),并获取可访问的 URL。发布的页面默认是公开的(PUBLIC),任何拥有链接的人都可以打开。传入 --password 可发布受密码保护的私密页面;查看者必须输入密码才能查看。本地资源会被自动内联,远程引用则通过网络加载。命令会返回页面 URL 以及用于后续管理该页面的密钥 secret update_key。仅当拥有可选的 Bearer Token 时才需要传入 --token 或使用 LAVISH_AXI_HTML_APP_TOKEN,这绝非必选项。用户同样可以在浏览器界面的溢出菜单中进行发布
  • 运行 npx -y lavish-axi stop 可关闭后台服务器(在空闲或最后一个 Session 结束且无任何连接时,服务器也会自动停止)
  • 针对具体的 Artifact 制作指引,运行 npx -y lavish-axi playbook <playbook_id>。单个 Artifact 通常结合了多个 Playbook(例如包含对比和架构图的方案),因此在编写 HTML 之前必须打开每个匹配的 Playbook。
  • Lavish 不会自动注入任何设计系统 —— Artifact 保持高度便携性,因此在未运行 lavish-axi 的情况下直接打开也能完全一致地渲染。在编写任何 HTML 之前:必须严格按照以下优先级顺序确定设计风格方向,且仅当上一步确实无任何参考依据时,才进入下一步:(1) 如果用户要求了特定的外观或指定的设计系统,直接使用该设计系统;(2) 否则,你必须首先检查 Artifact 所针对的项目 —— 即其内容或 UI 所代表的主体或产品,这可能与你当前的工作目录不同 —— 并匹配该项目的设计系统:Tailwind 或主题配置、共享的 CSS 变量或设计 Token、组件库、品牌资产或现有的带样式页面。如果 Artifact 预览、提议或 Mock 了特定 App 的 UI,请直接在该 App 自身的设计系统下进行渲染