SuperAPI AI 工具集

web-artifacts-builder

前端与建站

查看项目

更新于 10-15 21:47

技能介绍

用途:为 claude.ai 构建功能强大的前端 HTML artifact,支持多组件、较复杂的界面开发。

主要能力与栈:React 18 + TypeScript + Vite + Parcel(打包)+ Tailwind CSS 3.4.1 + shadcn/ui。初始化脚本会生成完整项目配置,包括路径别名(@/)、预装 40 多个 shadcn/ui 组件、Radix UI 依赖、用于打包的 .parcelrc,并兼容 Node 18+(自动检测并固定 Vite 版本)。

使用方式:

  1. 初始化项目:bash scripts/init-artifact.sh <project-name>,然后 cd <project-name>。
  2. 编辑生成的代码开发 artifact。
  3. 打包为单个 HTML:bash scripts/bundle-artifact.sh,生成 bundle.html(所有 JavaScript、CSS 与依赖内联),要求项目根目录存在 index.html。该脚本会安装打包依赖(parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline)、创建支持路径别名的 .parcelrc、用 Parcel 构建(不含 source map),再用 html-inline 内联资源。
  4. 在对话中向用户展示该 HTML 文件作为 artifact。
  5. 可选测试:仅在必要或用户要求时,用 Playwright、Puppeteer 等工具测试或可视化;一般避免提前测试,以免增加从请求到看到成品的延迟。

设计规范:为避免所谓“AI slop”,应避免过度使用居中布局、紫色渐变、统一圆角以及 Inter 字体。

适用场景:需要为 claude.ai 制作较复杂、多组件的交互式前端 artifact,并希望最终以单个自包含 HTML 分享。

限制:打包要求根目录有 index.html;测试步骤为可选且按需进行;组件参考见 shadcn/ui 组件文档。资料未提供收费、价格或其他平台支持信息。