SuperAPI AI 工具集

artifacts-builder

前端与建站

查看项目

更新于 10-16 05:01

技能介绍

Artifacts Builder 是一套用于创建复杂、多组件 claude.ai HTML 制品的工具,基于现代前端技术栈,适合开发可分享的前端制品。

主要能力与流程:使用脚本 scripts/init-artifact.sh 初始化前端仓库,编辑生成的代码完成制品开发,再用 scripts/bundle-artifact.sh 将所有代码打包为单个 HTML 文件,最后展示给用户;测试为可选步骤。

初始化命令:bash scripts/init-artifact.sh <project-name>,随后 cd <project-name>。初始化会生成 React + TypeScript(Vite)、Tailwind CSS 3.4.1 与 shadcn/ui 主题系统、@/ 路径别名、40+ 预装 shadcn/ui 组件、Radix UI 依赖、Parcel 打包配置、Node 18+ 兼容。

打包命令:bash scripts/bundle-artifact.sh。它生成 bundle.html,内联全部 JavaScript、CSS 与依赖,可直接在 Claude 对话中作为制品分享。要求项目根目录存在 index.html。脚本会安装打包依赖(parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline)、创建支持路径别名的 .parcelrc、用 Parcel 构建(无 source map)、并用 html-inline 内联资源。

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

设计风格上,资料建议避免过度居中布局、紫色渐变、统一圆角和 Inter 字体。测试/可视化可选,可使用 Playwright 或 Puppeteer 等工具,但一般避免提前测试以降低延迟,可在展示后按需进行。shadcn/ui 组件文档见 https://ui.shadcn.com/docs/components。

限制与暂未提供信息:初始化脚本与打包脚本的具体参数(除项目名外)暂未提供;收费、价格与平台支持范围暂未提供。