用途
Web Artifacts Builder 是一套用于创建复杂、多组件 claude.ai HTML 制品的工具集，采用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）。其目标是把一个完整的前端项目最终打包成单个自包含的 HTML 文件，以便在 Claude 对话中作为制品展示和分享。
主要能力
- 通过初始化脚本创建配置完整的 React 项目，包含：React + TypeScript（基于 Vite）、Tailwind CSS 3.4.1 与 shadcn/ui 主题系统、路径别名（@/）、预装 40+ 个 shadcn/ui 组件、全部 Radix UI 依赖、用于打包的 Parcel 配置（.parcelrc）、Node 18+ 兼容性（自动检测并固定 Vite 版本）。
- 通过打包脚本将 React 应用打包为单个 HTML 制品：生成 bundle.html，所有 JavaScript、CSS 和依赖均被内联，可直接在 Claude 对话中作为制品分享。
- 打包脚本会安装打包依赖（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline），创建支持路径别名的 .parcelrc 配置，使用 Parcel 构建（不生成 source map），并用 html-inline 将所有资源内联为单个 HTML。
使用方式
- 初始化项目：运行
bash scripts/init-artifact.sh <project-name>，然后cd <project-name>。 - 开发制品：编辑生成的文件来构建制品。
- 打包为单个 HTML 文件：运行
bash scripts/bundle-artifact.sh，生成 bundle.html。要求项目根目录下必须有 index.html。 - 与用户分享制品：将打包后的 HTML 文件在对话中分享给用户，使其作为制品查看。
- 测试/可视化制品（可选）：仅在必要或被要求时执行。可使用可用工具（包括其他 Skills 或 Playwright、Puppeteer 等内置工具）。一般应避免提前测试制品，因为这会增加从请求到看到成品之间的延迟；可在展示制品后，如被要求或出现问题再测试。
设计风格指南
资料特别强调：为避免常被称为“AI slop”的观感，应避免使用过多的居中布局、紫色渐变、统一的圆角以及 Inter 字体。
适用场景
适用于需要构建功能丰富、多组件的前端 claude.ai 制品，并希望以单个自包含 HTML 文件形式在 Claude 对话中分享的场景。
限制
- 打包要求项目根目录下存在 index.html。
- 测试步骤为可选，且建议在展示制品后再按需进行。
- 资料未提供收费、价格、平台支持范围等其他信息。
参考
shadcn/ui 组件文档：https://ui.shadcn.com/docs/components