SuperAPI AI 工具集

artifacts-builder

前端与建站

查看项目

更新于 10-16 04:55

技能介绍

用途:帮助开发者创建结构复杂、多组件的 claude.ai HTML 构件,适用于需要用现代前端技术搭建交互式页面并在 Claude 对话中以构件形式展示的场景。

技术栈:React 18 + TypeScript + Vite + Parcel(打包)+ Tailwind CSS + shadcn/ui。

主要流程:

  1. 初始化:运行 bash scripts/init-artifact.sh <project-name> 并进入目录。生成的项目包含 React + TypeScript(Vite)、Tailwind CSS 3.4.1 与 shadcn/ui 主题系统、路径别名 @/、预装 40+ shadcn/ui 组件与 Radix UI 依赖、Parcel 打包配置(.parcelrc),并兼容 Node 18+(自动检测并固定 Vite 版本)。
  2. 开发:编辑生成的代码构建构件。
  3. 打包:运行 bash scripts/bundle-artifact.sh,生成 bundle.html,将 JavaScript、CSS、依赖全部内联为单个自包含 HTML。脚本会安装打包依赖(parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline),创建支持路径别名的 .parcelrc,用 Parcel 构建(无 source map),再用 html-inline 内联资源。要求项目根目录存在 index.html。
  4. 分享:将打包后的 HTML 文件发给用户,作为构件查看。
  5. 测试(可选):用 Playwright 或 Puppeteer 等工具测试或可视化;通常建议先展示再按需测试,以免增加延迟。

设计规范:为避免“AI slop”,避免过度居中的布局、紫色渐变、统一圆角以及 Inter 字体。shadcn/ui 组件参考:https://ui.shadcn.com/docs/components。

限制:测试步骤为可选;打包要求根目录有 index.html;其余未在资料中说明。