SuperAPI AI 工具集

artifacts-builder

前端与建站

查看项目

更新于 10-16 01:08

技能介绍

用途:面向需要构建功能丰富、多组件的 claude.ai HTML 成品的场景,提供从初始化项目到打包为单个 HTML 文件的完整流程。

主要能力:采用 React 18 + TypeScript + Vite 技术栈,样式使用 Tailwind CSS 与 shadcn/ui 主题系统,打包由 Parcel 完成。初始化脚本会生成配置完整的项目,包括路径别名(@/)、预装 40+ shadcn/ui 组件、Radix UI 依赖、Parcel 配置以及 Node 18+ 兼容处理。

使用方式:

  1. 初始化项目:bash scripts/init-artifact.sh <project-name>,然后 cd <project-name>。
  2. 编辑生成的文件进行开发。
  3. 打包为单个 HTML:bash scripts/bundle-artifact.sh,生成 bundle.html;该文件内联全部 JavaScript、CSS 与依赖,可直接在对话中作为成品分享。要求项目根目录存在 index.html。
  4. 与用户分享打包后的 HTML 文件。
  5. 测试(可选):可使用 Playwright 或 Puppeteer 等工具,但资料建议不必预先测试,以免增加延迟,可在展示或出现问题后再测。

设计建议:资料强调避免常见“AI slop”,即避免过度居中布局、紫色渐变、统一圆角与 Inter 字体。

参考:shadcn/ui 组件文档见 https://ui.shadcn.com/docs/components。

限制:资料未提供收费、价格、平台支持范围等细节;测试步骤为可选,未给出具体测试命令或配置。