用途:Artifacts Builder 用于创建复杂、多组件的 claude.ai HTML 制品,借助现代前端技术栈开发,并打包成单个可在对话中分享的 HTML 文件。
主要能力与流程:通过 scripts/init-artifact.sh 初始化前端仓库,编辑生成的代码进行开发,再用 scripts/bundle-artifact.sh 将全部代码打包为单个 HTML 文件,最后展示给用户;测试为可选步骤。
快速开始: 第一步,初始化项目: bash scripts/init-artifact.sh <project-name> cd <project-name> 该命令生成配置完整的 React + TypeScript(Vite)项目,包含 Tailwind CSS 3.4.1 与 shadcn/ui 主题、路径别名(@/)、40 多个预装 shadcn/ui 组件、Radix UI 依赖、用于打包的 Parcel 配置,并兼容 Node 18+。 第二步,编辑生成的文件开发制品。 第三步,打包为单个 HTML: bash scripts/bundle-artifact.sh 将生成 bundle.html,内联全部 JavaScript、CSS 与依赖,可直接作为制品分享。要求项目根目录存在 index.html。 第四步,将打包后的 HTML 分享给用户。 第五步(可选),使用 Playwright、Puppeteer 等工具测试或可视化;一般避免提前测试,以免增加延迟。
技术栈:React 18 + TypeScript + Vite + Parcel(打包)+ Tailwind CSS + shadcn/ui。
设计与样式指南:为避免“AI slop”,避免过度使用居中布局、紫色渐变、统一圆角和 Inter 字体。
参考:shadcn/ui 组件文档 https://ui.shadcn.com/docs/components 。
限制:打包要求根目录有 index.html;测试步骤为可选;资���未提供其他收费、平台或效果信息。