8个可视化Playbooklavish-axi如何教会Agent写出看得懂的HTML制品【免费下载链接】lavish-axiHTML is the new markdown. Lavish is the new editor for your HTML artifacts.项目地址: https://gitcode.com/gh_mirrors/la/lavish-axilavish-axiLavish Editor是一款为 AI Agent 打造的本地 HTML 制品编辑器它把 Agent 写出的方案、对比、架构图、代码 diff 变成可在浏览器中打开、批注并回传反馈的交互式HTML 制品artifact。它真正的杀手锏是内置的8 个可视化 Playbook定义在 src/playbooks.js 中——Agent 动笔写 HTML 之前必须先看书本于是你拿到的每一页都结构清晰、可读、可批注。为什么 Agent 需要可视化手册你有没有被这种 Agent 输出折磨过让它写技术方案它给你糊了 3000 字纯文字让它做对比分析它把表格挤成一坨无法扫读的文字墙让它画架构图它拼出一堆 div 盒子比例全乱、字还溢出框外。Agent 很会写 HTML但怎么写才好看、怎么组织才易懂没有标准。lavish-axi 的解法很朴素把 8 类常见场景各写成一本 Playbook每本包含use_when何时用、choose选什么形式、structure怎么组织内容、design_rules设计规则、pitfalls常见坑五个板块。CLI 里有一条硬性路由指令MUST open each matching playbook before writing HTML.写 HTML 前必须先打开每个匹配的 Playbook而且它明确允许一份制品组合多个 Playbook——比如一个 plan 里同时包含 comparison 和 diagram。这条规则就写在 src/playbooks.js 开头随lavish-axi playbook命令直接注入给 Agent。一分钟上手给你的 Agent 装技能安装只需一条命令无需全局安装CLI 通过npx按需拉取npx skills add kunchenguid/lavish-axi --skill lavish技能本体是一个极简桩文件 skills/lavish/SKILL.md它不重复任何工作流细节只告诉 Agent 三件事——去跑npx -y lavish-axi --help、design和playbook拿最新指令。这样即使用户不升级已安装的技能副本Agent 拿到的 Playbook 也永远不会过期。装好后直接说人话即可帮我把我们的方案做个可视化——Agent 识别到任务会自动加载技能。8 个 Playbook 全览 #ID命令一句话用途1diagramlavish-axi playbook diagram用插图讲清关系、流程、状态与架构2tablelavish-axi playbook table把密集记录变成可快速扫读的评审面3comparisonlavish-axi playbook comparison展示选项、取舍与现状 vs 目标4planlavish-axi playbook plan动手前写清产品/技术方案5codelavish-axi playbook code渲染代码、补丁与 PR diff6inputlavish-axi playbook input在页面内收集选择、分诊与结构化反馈7explanationlavish-axi playbook explanation给没在现场的人讲懂既有系统8slideslavish-axi playbook slides用户明确要演示时的幻灯片逐个拆解每本 Playbook 教了什么1️⃣ diagram —— 让插图自己说话核心主张是一张图只讲一个概念假设读者对该系统一无所知先画最核心的关系细节放到图下方的模块卡片里宁要一串简单单概念插图不要一张塞满所有文件的大图。工具选择上也有讲究默认手写内联 SVG能掌控比例、强调与空间隐喻只有用户要可编辑白板时才用 Mermaid.mermaid容器里的 Mermaid 图会在 Lavish 浏览器中变成 Excalidraw 白板下文有实拍所有元素给稳定idtitle方便你在评审时精确点选批注。2️⃣ table —— 表格是评审面不是粘贴板Playbook 第一句坑位警告就是不要把终端表格直接粘进 HTML 就完事。正确姿势表上方先给一段这些行证明了什么的摘要按身份 / 证据 / 状态 / 行动分组列长路径和 URL 防溢出状态色要克制不能只靠颜色区分状态。而且每行都应是可批注目标——某行暗示后续改动时附带一个能入队具体 prompt 的行动按钮。3️⃣ comparison —— 把取舍摊到桌面上先命名这页要做的决定再给每个选项的具体行为形态而非抽象优缺点对应细节严格对齐让差异不用找就能看见成本与收益同样醒目。最后一条很有分寸只有证据真的支持时才给推荐结论——不会为了页面好看而强行站队。4️⃣ plan —— 先写方案再写代码结构固定三段目标与现状 → 高层方案 → 风险、开放问题与备选选项最后一段复用 comparison Playbook。两条设计规则尤其贴心前端体验优先视觉 mock 真实产品而不是用文字描述界面方案必须自包含到另一位开发者读完就能实现的程度且每条论断先对照代码库验证。5️⃣ code —— 代码制品的专业渲染规定渲染必须使用专门的 diff 组件pierre/diffs禁止手写pre或代码截图路径、语言、检查原因紧贴代码之前多文件改动按用户可感知的功能区域分组而不是按仓库文件顺序倾倒原始 patch。主题色Shiki 主题对需匹配页面的明暗方向避免深色页面里嵌一块刺眼浅色代码块。6️⃣ input —— 让决策直接发生在页面上这是最Lavish的一本单选、多选、下拉这些原生控件天生可交互点击即切换状态可逆选择只更新本地状态用户点Queue answer时才通过window.lavish.queuePrompt()发送恰好一条最终答案——防止每动一下选项就催一次 Agent。它还定义了 tracked batch受跟踪批次模式每个候选项有稳定 ID评审人逐项勾选处置Agent 完成后必须逐 ID 回执缺一个都不算完。7️⃣ explanation —— 给没在现场的人补课与 plan 的关键区别explanation 解释的是已经存在的东西PR 机制、事故根因、历史决策。规则要求第一句就给读者真正想要的答案再只展示相关的流程切片而非整个系统的大图证据文件路径、行号服从叙事引用而不粘贴已验证的事实与推断必须分开标注。8️⃣ slides —— 演示是请求来的不是默认送的只在用户明确要 deck/演示/路演时才用每页一个想法文字从少、视觉承重、留白刻意相邻幻灯片不要同一个空间构图。它同时划了边界致密代码评审不要用 slides。实拍效果主题跟随与可编辑白板 ✏️Playbook 只是起点lavish-axi 的浏览器侧能力让这些规范活了起来。先看 diagram Playbook 里强调的主题自适应——下图来自 task-evidence/mermaid-theme/ 的实测截图深色页面上Mermaid 流程图自动渲染为深色节点配浅色文字与页面浑然一体更妙的是活的跟随页面上 Dark/Light 开关一切换图即时重渲染为浅色主题即使操作系统偏好是深色图也只跟随页面背景而当你要求 Agent 输出可编辑白板时Mermaid 图会在浏览器中变成 Excalidraw 白板——下图是 1024x768 高分屏下的全屏白板每个节点标签都完整可读你可以直接在图上画、改再点 Queue feedback 把编辑摘要连同场景文件回传给 AgentMermaid 源码始终是权威版本注意白板只是浏览器里的视图增强。保存的文件里依然是普通 Mermaid——直接打开不经过 Lavish 也能正常渲染这正是 diagram Playbook制品必须自包含规则的落地3 步把看得懂的制品变成日常装技能npx skills add kunchenguid/lavish-axi --skill lavish一条命令搞定提需求告诉 Agent 你要方案 / 对比 / 架构图 / 表格 / 代码视图 / 报告中的任意一种它会自动加载对应 Playbook打开评审Agent 运行npx -y lavish-axi 你的文件.html打开本地浏览器你批注元素、选中文本、切选项、画白板反馈经长轮询直达 Agent改完文件浏览器还热重载保留你的滚动位置和未发送草稿。更多环境变量与 CLI 参考见 README.md设计导向与 CDN 片段的唯一权威来源在 src/design-reference.js。小结lavish-axi 没有试图猜Agent 应该怎么写页面而是用 8 本结构化的可视化 Playbook 把怎么算看得懂变成了明确契约何时用、怎么组织、什么设计规则、哪些坑不能踩——外加一条铁律动笔前先打开匹配的 Playbook。对新手来说这正是你让 AI 从能写 HTML升级到写得像人话的最短路径。 【免费下载链接】lavish-axiHTML is the new markdown. Lavish is the new editor for your HTML artifacts.项目地址: https://gitcode.com/gh_mirrors/la/lavish-axi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考