SuperAPI AI 工具集

web-artifacts-builder

前端与建站

查看项目

更新于 10-15 19:47

技能介绍

用途:Web Artifacts Builder 是一套用于制作精细、多组件 claude.ai HTML artifact 的前端工具包,适合需要状态管理、路由或 shadcn/ui 组件的复杂 artifact。

主要能力:技术栈为 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+ 兼容性的项目。

使用方式:

  1. 初始化项目:bash scripts/init-artifact.sh <project-name>,然后 cd <project-name>。
  2. 编辑生成的文件开发 artifact。
  3. 打包为单个 HTML:bash scripts/bundle-artifact.sh,生成 bundle.html,其中所有 JavaScript、CSS 和依赖均已内联,可直接在 Claude 对话中作为 artifact 分享。要求项目根目录存在 index.html。
  4. 将打包后的 HTML 分享给用户。
  5. 可选测试:仅在需要或收到请求时,使用其他 SKILL 或 Playwright、Puppeteer 等工具测试或可视化 artifact;通常不建议预先测试,以免增加延迟,建议先展示 artifact 再测试。

设计注意:为避免“AI 生成感”,应避免过度居中布局、紫色渐变、千篇一律的圆角以及 Inter 字体。

限制:资料未提供收费、价格、平台支持范围等更多信息;打包脚本依赖项目根目录的 index.html。