用途:Artifacts Builder 是一套用于构建复杂、多组件 claude.ai HTML 工件的工具,采用现代前端技术栈,适合需要交互式界面的前端工件开发。
主要能力:提供初始化脚本与打包脚本,生成配置完整的 React 项目并最终输出单个自包含 HTML 文件。技术栈为 React 18 + TypeScript + Vite + Parcel(打包)+ Tailwind CSS + shadcn/ui。初始化后项目包含 Tailwind CSS 3.4.1 与 shadcn/ui 主题系统、路径别名(@/)、40 多个预装 shadcn/ui 组件、全部 Radix UI 依赖、Parcel 打包配置(.parcelrc),并兼容 Node 18+(自动检测并固定 Vite 版本)。
使用方式:第一步运行 bash scripts/init-artifact.sh <project-name> 初始化项目并进入目录;第二步编辑生成的文件开发工件,如需确认设计或功能可使用 mcp-feedback-enhanced(如 ask_followup_question);第三步运行 bash scripts/bundle-artifact.sh 打包,生成 bundle.html,该脚本会安装打包依赖(parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline)、创建支持路径别名的 .parcelrc、用 Parcel 构建(不含 source map)并通过 html-inline 内联所有资源;第四步在对话中分享该 HTML 文件;第五步可选测试,使用 Playwright 或 Puppeteer 等工具,建议先展示工件再按需测试以减少延迟。打包要求项目根目录存在 index.html。
设计规范:为避免“AI slop”,应避免过度使用居中布局、紫色渐变、统一圆角和 Inter 字体。
限制:资料未提供收费、价格、平台支持范围等信息;测试步骤为可选,且需依赖外部工具。