SuperAPI AI 工具集

web-artifacts-builder

前端与建站

查看项目

更新于 10-16 05:45

技能介绍

用途:用于创建复杂、多组件的 claude.ai HTML 艺术作品(artifact),基于现代前端技术栈开发,并最终打包为可直接在对话中分享的单个自包含 HTML 文件。

主要能力:提供初始化脚本 scripts/init-artifact.sh 和打包脚本 scripts/bundle-artifact.sh,配套 React 18 + TypeScript + Vite + Parcel + Tailwind CSS + shadcn/ui 技术栈。初始化后可获得:React + TypeScript(Vite)、Tailwind CSS 3.4.1 与 shadcn/ui 主题系统、路径别名(@/)、40+ shadcn/ui 组件、Radix UI 依赖、Parcel 打包配置及 Node 18+ 兼容性。

使用方式:

  1. 运行 bash scripts/init-artifact.sh <project-name> 并进入项目目录;
  2. 编辑生成代码开发作品;
  3. 运行 bash scripts/bundle-artifact.sh 打包,生成 bundle.html(所有 JS、CSS 和依赖内联);
  4. 在对话中分享该 HTML 文件;
  5. 可选:使用 Playwright、Puppeteer 等工具测试或可视化,建议展示后再按需测试。打包要求项目根目录存在 index.html。

设计规范:避免过度居中布局、紫色渐变、统一圆角及 Inter 字体。

限制:资料未提供收费、价格、平台等信息;打包依赖需脚本自动安装;测试为可选步骤。