用途:为 claude.ai 创建复杂的多组件 HTML 工件,适用于需要状态管理、路由或 shadcn/ui 组件的场景,不适合简单单文件 HTML/JSX 工件。
主要能力:技术栈为 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+ 兼容处理。提供打包脚本,将项目打包为单文件 bundle.html,内联全部 JavaScript、CSS 与依赖,可直接作为工件在 Claude 对话中共享。
使用方式:先运行 bash scripts/init-artifact.sh <project-name> 初始化项目;可用环境变量指定主题色,支持 slate(默认)、blue、green、violet,例如 THEME_COLOR=blue bash scripts/init-artifact.sh <project-name>,随后 cd 进入项目。开发时编辑生成文件。完成后运行 bash scripts/bundle-artifact.sh 打包,项目根目录需有 index.html。最后在对话中分享该 HTML 文件。可选使用 Playwright 或 Puppeteer 等工具测试或可视化工件。
设计提示:为避免常见“AI slop”风格,避免过度居中布局、紫色渐变、统一圆角与 Inter 字体。
限制:仅适用于复杂工件;其余功能细节、收费或平台信息暂未提供。