想给同事展示一个有筛选、有状态切换的交互原型，临时拼一个 HTML 往往容易失控：组件样式不一致，文件散落多处，交接时还不知道该打开哪个文件。Web Artifacts Builder Skill 提供的，是一套初始化 React 项目并打包为单个 HTML 的工作流程。

本文用“课程报名名单筛选原型”说明从源码包检查、环境准备到交互验收的步骤。它适合做复杂一点的前端演示，不是现成的报名系统，也不会替你建立数据库、登录或真实支付。 以下为依据固定源码版本整理的教学方案，未运行上游脚本，不冒充已完成的构建测试。

一、先判断是否值得用这个 Skill

这个 Skill 来自 Anthropic 官方 skills 示例仓库，目录名为 web-artifacts-builder。说明列出的技术栈包括 React、TypeScript、Vite、Tailwind CSS、shadcn/ui，以及用于最终构建的 Parcel。

如果只是一个静态通知页，普通 HTML 可能更省事；如果需要筛选名单、切换状态、显示统计与展开详情，组件化项目更容易组织。但“有路由组件”不等于已经实现后台路由或服务器，不能把演示能力直接当成生产系统能力。

本篇下载包使用明确的 commit 标识，保留原始 SKILL.md、LICENSE.txt、两个脚本和组件压缩包，另加中文说明。这是一份 Skill 源码资料包，不包含 Node 运行时、完整 npm 依赖或已经编译好的业务网页。 固定源码版本也不代表之后联网安装的所有依赖自动被锁定。

二、下载后先核对目录与脚本影响范围

从下方资料表的百度网盘入口下载，解压后应看到 web-artifacts-builder 文件夹。重要文件如下：

  • SKILL.md：任务用途、流程与构建说明。
  • LICENSE.txt：该 Skill 的 Apache-2.0 许可文本。
  • scripts/init-artifact.sh：生成项目并安装依赖。
  • scripts/bundle-artifact.sh：构建并内联为 bundle.html。
  • scripts/shadcn-components.tar.gz：初始化使用的组件资源。
  • README-中文.md：本站添加的来源、版本与注意事项。

不要只复制两个脚本而漏掉组件压缩包。初始化脚本会检查压缩包路径，缺失时无法完成原来的流程。

在运行前阅读脚本。固定版本的初始化脚本在找不到 pnpm 时会尝试通过 npm 全局安装；构建脚本会清理当前项目中的 dist 目录与旧 bundle.html。应在新建练习目录操作，先备份自己的成品，不在已有业务仓库里盲目执行。 本文仅解释这些动作，没有替读者执行。

三、准备 Bash 与实际兼容的 Node 工具链

这些文件是 Bash 脚本，不是 Windows 双击安装程序。Windows 用户可以在已准备好的 WSL 环境中学习；macOS 或 Linux 用户也要检查 Bash、Node、npm、pnpm 与 tar 等工具是否可用。

bash --version
node --version
npm --version
pnpm --version
tar --version

不要在 PowerShell 原生环境里，把 Bash 语法当成 PowerShell 命令逐行复制。WSL 中的 Node 与 Windows 安装的 Node 也不是同一个环境，版本检查与后续安装应在同一个终端完成。

Skill 说明写有 Node 18 以上兼容处理，但源码仍调用创建工具并获取部分最新依赖。脚本里的最低版本检查，不等于今天下载到的所有依赖都支持同一个最低版本。 安装前还应检查当前 Vite 指南和所下载包的 engines 要求，选择满足要求的受支持 Node 版本；遇到引擎不兼容，不要先跳过检查强行安装。

四、让 AI 按一个边界明确的需求实现原型

把这个 Skill 交给支持自定义 Skill 的宿主，按宿主的官方机制安装；若只是阅读学习，也可以打开 SKILL.md，让有文件编辑能力的助手依据说明协助，但不要因此声称宿主已经成功注册或自动触发 Skill。官方仓库 README 给出了 Claude Code 插件市场的使用方式，入口与权限以实际产品为准。

示例需求可以这样写：

使用 web-artifacts-builder 的工作流程制作课程名单演示原型。
仅用六条虚构记录，不接真实接口，不收集个人信息。
字段为编号、课程、报名状态；状态只有待确认和已确认。
支持按课程筛选、按编号搜索、切换确认状态，显示当前结果数量。
无匹配时显示空状态，提供重置按钮。
只保存当前页面会话状态，刷新后恢复初始数据，并明确告知用户。
先解释环境与文件变更，再分步实现，完成后给出验收清单。

这里特意不要求真实手机号和邮箱。六条记录可以用 P001 到 P006 编号，课程分为写作与表格两类；至少保留两种状态，才能检查筛选与计数是否联动。若后来要改成实际报名系统，需要另行设计权限、存储、安全与数据处理规则。

Web Artifacts Builder从源码检查、项目初始化、交互实现到HTML构建的流程示意

五、初始化和构建命令要看工作目录

下面假定终端位于解压后的 web-artifacts-builder 根目录。审阅脚本并确认环境以后，才执行初始化：

bash scripts/init-artifact.sh roster-demo
cd roster-demo
pnpm dev

开发服务器的实际地址以终端打印为准，不假定固定端口永远空闲。打开页面后，先确认是新项目的页面，再让助手修改生成的代码、添加虚构数据和交互。一个好看的静态截图不能证明搜索、切换和统计真的有效。

要构建单文件产物，先停止开发服务器，再确认当前仍在 roster-demo 项目根目录。由于脚本位于项目的上一级 scripts 中，对应命令是：

bash ../scripts/bundle-artifact.sh

上游说明里的 scripts/bundle-artifact.sh 是相对路径示例，不要忽略切换目录后脚本位置已经变化。如果你采用其他目录结构，就用自己核对过的真实路径；无论脚本放在哪里，执行时的工作目录必须是包含 package.json 和 index.html 的项目根目录。

脚本会安装 Parcel 等构建依赖，生成 dist，再用 html-inline 输出 bundle.html。保留 package.json、锁文件和源代码，方便之后定位依赖变化。出现失败时先读第一条真正错误，不把最后没有产物当成唯一线索。

六、验收单文件，别把“内联”理解成什么都离线

原型至少检查以下动作：

  1. 六条初始记录完整出现，统计数与列表一致。
  2. 选择某门课程，只显示这一类记录，编号搜索同时生效。
  3. 切换状态后，显示状态与相关统计一起更新。
  4. 搜索不存在的编号，出现清晰空状态而不是白屏。
  5. 点击重置后，恢复约定的筛选和搜索条件。
  6. 刷新页面恢复初始数据，与页面上的说明一致。

再打开最终 bundle.html 进行同样操作，而不只检查开发服务器版本。最终产物和开发环境可能存在差异，控制台报错、资源路径和文件体积也要查看。

脚本会内联构建工具处理的资源，但运行时主动访问的外部 API、远程图片和字体不一定因此变成离线资源。想交付离线演示，应使用可合法分发的本地资源，断开网络后再次检查，不能只根据“单文件”三个字作保证。

课程名单原型的筛选、状态、空结果和最终HTML验收示意

七、常见错误与交付边界

提示找不到组件压缩包，检查解压是否完整及 scripts 目录是否移动；提示 pnpm 不存在，先确认在同一环境准备好工具，不未经考虑接受全局变更；提示没有 package.json 或 index.html，检查当前工作目录；出现依赖引擎错误，核对创建工具与 Node 的实际版本要求。

页面能打开但按钮没有行为，回到状态定义和事件处理，不把演示文字当成交互实现。最终 HTML 发给别人前，用一台未打开开发服务器的浏览器验证，避免把开发服务恰好在线误认成产物独立可用。

交付建议包括 bundle.html、源码目录、锁文件、简短使用说明和已知限制。Skill 的 Apache-2.0 许可不自动覆盖你后来添加的字体、图片和依赖；第三方资源仍按各自许可处理。对外介绍时说明这是自制原型，不借官方项目名称暗示获得 Anthropic 背书。

官方资料