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