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