用途:帮助开发者创建结构复杂、多组件的 claude.ai HTML 工件(artifact),使用现代前端技术栈完成开发并打包为可分享的单文件 HTML。
主要能力:提供初始化脚本 scripts/init-artifact.sh 生成完整 React 项目,以及打包脚本 scripts/bundle-artifact.sh 将应用内联为单个 bundle.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> 并进入目录;第二步编辑生成的文件开发工件;第三步运行 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;测试为可选步骤;资料未提供收费、价格或平台支持等更多信息。