web-artifacts-builder 适合带多个界面、筛选、状态变化和组件交互的小型前端原型。它先建立 React 项目，再把代码与资源打包成 bundle.html，方便在支持 HTML artifact 的界面中展示或作为文件分享。如果只需要一段静态 HTML，完整工具链往往没有必要。
安装与调用
在 Claude Code 的聊天输入框依次发送下面两条命令。这是插件命令，不是在系统终端运行的 Shell 命令；第二条安装的是包含 web-artifacts-builder 的官方技能包。
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
安装后，在同一项目的会话里明确说“使用 web-artifacts-builder”，再提供文件或任务。下面的提示词是可修改的首次输入示例。安装会加入技能说明与资源；它不会替你准备输入资料，也不代表所有依赖已经在本机安装。若找不到技能，先检查插件是否安装并启用，以及会话是否已加载最新插件，再继续任务。
从一个不依赖后端的原型开始
使用 web-artifacts-builder 做一个会议议题排期原型。
包含议题列表、负责人筛选、状态切换和详情面板，用本地示例数据。
先说明哪些交互仅在当前页面生效，再建立项目并输出 bundle.html。
保留源码；不要连接真实账号、部署站点或把假数据说成实时数据。
首次输入说明页面、状态、数据来源和交付方式。这里的示例使用本地数据，是为了先检查信息结构与交互；如果你需要多人同步或永久保存，就必须另外设计数据存储与服务接口。刷新后是否保留状态，应作为明确要求，而不是假定 HTML 打包会自动实现。
随包初始化脚本会建立 React、TypeScript、Vite、Tailwind 和 shadcn/ui 所需的项目结构。让 Agent 从安装位置找到 scripts/init-artifact.sh，在新的项目目录操作，而不是随手覆盖已有应用。文档中的脚本相对路径指向技能目录；在任意工作目录直接粘贴相同命令，可能找不到文件。
分清源码项目和分享文件
开发阶段修改生成的源码，确认筛选、状态切换和详情打开符合预期。然后通过 scripts/bundle-artifact.sh 打包；项目根需要 index.html，最终生成的 bundle.html 把前端代码与资源内联到一个文件。源码仍然有价值，以后增加功能应回到项目修改并重新打包，而不是把构建产物当唯一源文件。
先打开实际打包结果检查，再分享给别人。重点查看按钮是否真的改变状态、筛选后空列表如何表现、窄屏下详情面板是否挡住主要内容。如果开发服务器里正常而 bundle 不正常，检查外部资源、路径别名和打包日志，不要只重复发同一个文件。
需要额外视觉调整时，给出具体方向，例如“更像紧凑的排期工具”“把次要操作收进详情”，比只要求高级感更容易落实。技能采用的默认技术组合是自己的创建流程，不意味着应把现有应用的框架全部替换。交付时同时提供 HTML、源项目位置和仍然依赖网络的资源说明；若原型后来连接了 API，应另行处理密钥和访问方式，不能把私密凭据塞进可分享的前端文件。
用具体操作验收原型
拿议题排期原型做一次小测试：选择负责人后列表减少、改变状态后对应筛选更新、打开详情后能返回原列表。再刷新页面，确认状态是按要求保留还是明确回到初始示例数据。若要分享给不在开发环境的同事，打开生成的 bundle.html，而不是只在 Vite 开发服务器里验证。
打包后发现图片或字体不见时，先检查文件是否通过构建脚本内联，以及外部 URL 是否仍需要网络。单文件交付不等于带后端或永久数据；如果演示需要真实账号、协作和持久化，应在需求中把原型与产品阶段分开。源码项目与打包文件一起交付，后续改动回到源码再构建。
给原型标明真实与模拟的边界
一个会议排期原型可以用本地示例数据展示筛选与状态切换，但界面上的“保存成功”若没有持久化就会误导试用者。让 Agent 明确说明数据在当前会话、浏览器存储还是远端服务中；只有真正接通的动作才显示对应成功状态。向团队演示时准备一条完整路径，并在分享文件旁说明哪些按钮只是交互模型、哪些能够留存数据。这样原型能用于讨论设计，而不会被误认成已上线产品。
分享单文件前做一次离线打开
“打包完成”还不等于真正自包含。有使用者在较新的 pnpm 上遇到依赖构建检查先报错，另发现旧 favicon 引用会让 Parcel 失败，而字体文件仍留在包外。遇到失败时先读构建日志，区分包管理器、资源路径与页面代码；成功后把 bundle.html 单独放进空目录、断网打开，检查字体、图标和交互都正常，再交给别人。