SuperAPI AI 工具集

web-artifacts-builder

前端与建站

查看项目

更新于 10-15 23:58

技能介绍

用途:构建功能较复杂的前端 claude.ai artifact,适合需要状态管理、路由或 shadcn/ui 组件的场景;简单单文件 HTML/JSX artifact 不适用。

主要能力:技术栈为 React 18 + TypeScript + Vite + Parcel(打包)+ Tailwind CSS + shadcn/ui。初始化脚本会生成配置齐全的项目,包含 React + TypeScript(Vite)、带 shadcn/ui 主题系统的 Tailwind CSS 3.4.1、路径别名 @/、40 多个预装 shadcn/ui 组件、Radix UI 依赖、Parcel 打包配置(.parcelrc)以及 Node 18+ 兼容性。

使用方式:

  1. 初始化:bash scripts/init-artifact.sh <项目名称>,然后 cd <项目名称>。
  2. 编辑生成的文件开发 artifact。
  3. 打包:bash scripts/bundle-artifact.sh,生成 bundle.html,即内联全部 JavaScript、CSS 和依赖的自包含文件,可直接在 Claude 对话中作为 artifact 分享。要求项目根目录存在 index.html。
  4. 与用户分享打包好的 HTML 文件。
  5. 可选测试/预览:仅在必要或有要求时执行,可用 Playwright、Puppeteer 等工具;通常避免预先测试以减少延迟,出现问题或用户要求时再测。

设计建议:为避免“AI 废话”式设计,避免过度使用居中布局、紫色渐变、统一圆角和 Inter 字体。

限制:资料未提供收费、价格、平台支持范围等更多信息;测试步骤为可选,非必需流程。shadcn/ui 组件文档见 https://ui.shadcn.com/docs/components。