用途:构建功能丰富的多组件 claude.ai 前端工件,并打包成可直接在对话中分享的单文件 HTML。
主要能力:提供初始化与打包脚本,预配置 React 18 + TypeScript(Vite)、Tailwind CSS 3.4.1 与 shadcn/ui 主题系统、路径别名(@/)、40+ 预装 shadcn/ui 组件、Radix UI 依赖,并兼容 Node 18+(自动检测并锁定 Vite 版本)。打包由 Parcel 与 html-inline 完成,产出内联全部 JS、CSS 与依赖的 bundle.html。
使用方式:1) 运行 bash scripts/init-artifact.sh <project-name> 初始化项目并进入目录;2) 编辑生成代码开发工件;3) 运行 bash scripts/bundle-artifact.sh 打包为单文件;4) 将 bundle.html 在对话中分享给用户;5) 可选测试,使用 Playwright、Puppeteer 等工具。打包要求项目根目录存在 index.html。
设计建议:为避免“AI slop”,避免过度居中布局、紫色渐变、统一圆角与 Inter 字体。
适用场景:需要在 claude.ai 中交付复杂交互式前端页面或演示时使用。
限制:测试为可选步骤,建议先展示工件再按需测试以减少延迟;其他功能、收费与平台支持信息暂未提供。shadcn/ui 组件参考:https://ui.shadcn.com/docs/components