SuperAPI AI 工具集

tools-artifacts

前端与建站

查看项目

更新于 10-15 17:21

技能介绍

用途:构建功能丰富的前端 claude.ai 工件(artifact),将多组件 React 应用打包为单个自包含 HTML 文件,便于在对话中分享展示。

主要能力:提供初始化与打包脚本,技术栈为 React 18 + TypeScript + Vite + Parcel(打包)+ Tailwind CSS + shadcn/ui。初始化后自动配置路径别名(@/)、预装 40+ shadcn/ui 组件及全部 Radix UI 依赖,并兼容 Node 18+。

使用方式:

  1. 初始化项目:bash scripts/init-artifact.sh <project-name>,然后 cd <project-name>。
  2. 编辑生成的文件开发工件。
  3. 打包为单文件:bash scripts/bundle-artifact.sh,生成 bundle.html,内联全部 JS、CSS 与依赖。要求项目根目录存在 index.html。
  4. 在对话中分享该 HTML 文件作为工件。
  5. 可选测试:使用 Playwright 或 Puppeteer 等工具,建议先展示工件,按需再测试以减少延迟。

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

限制:打包脚本需项目根目录有 index.html;测试为可选步骤;其余细节暂未提供。