用途:Artifacts Builder 是一套用于创建复杂、多组件 claude.ai HTML 工件的工具,采用现代前端技术栈:React 18 + TypeScript + Vite + Parcel(打包)+ Tailwind CSS + shadcn/ui。
主要能力:提供初始化脚本与打包脚本,可将 React 项目打包为单个自包含 HTML 文件,内联全部 JavaScript、CSS 与依赖,便于直接在 Claude 对话中作为工件展示。
使用方式:
- 初始化项目:bash scripts/init-artifact.sh <project-name>,然后进入目录。该脚本生成已配置好的项目,包含 React + TypeScript(Vite)、Tailwind CSS 3.4.1 与 shadcn/ui 主题系统、路径别名(@/)、40 多个预装 shadcn/ui 组件、Radix UI 依赖、Parcel 打包配置(.parcelrc)以及 Node 18+ 兼容(自动检测并固定 Vite 版本)。
- 编辑生成的文件开发工件。
- 打包为单个 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 文件。
- 可选:测试或可视化工件,可使用其他技能或 Playwright、Puppeteer 等工具;一般建议先展示工件,之后按需再测。
设计与风格:为避免常见“AI slop”,应避免过度使用居中布局、紫色渐变、统一圆角与 Inter 字体。
限制:打包要求根目录有 index.html;测试为可选步骤;其他收费、平台与效果信息暂未提供。