SuperAPI AI 工具集

web-artifacts-builder

前端与建站

查看项目

更新于 10-16 02:31

技能介绍

用途:帮助开发者构建功能丰富、多组件的 claude.ai HTML artifact,采用现代前端技术栈。

主要能力:提供初始化脚本与打包脚本。执行 bash scripts/init-artifact.sh <project-name> 可创建已配置好的 React + TypeScript(Vite)项目,内含 Tailwind CSS 3.4.1 与 shadcn/ui 主题系统、路径别名(@/)、40+ 预装 shadcn/ui 组件、全部 Radix UI 依赖、Parcel 打包配置,并兼容 Node 18+(自动检测并锁定 Vite 版本)。开发完成后执行 bash scripts/bundle-artifact.sh 可生成 bundle.html,将 JavaScript、CSS 与依赖全部内联为单个可分享的 artifact 文件。

使用方式:先运行初始化脚本创建项目并进入目录,然后编辑生成的代码开发 artifact,再用打包脚本输出单文件,最后在对话中作为 artifact 分享给用户。打包要求项目根目录存在 index.html。可选测试步骤:仅在必要时或用户要求时,借助其他 Skill 或 Playwright、Puppeteer 等工具测试,一般不建议提前测试以免增加延迟。

设计风格:强调避免所谓“AI slop”,即避免过多居中布局、紫色渐变、统一圆角与 Inter 字体。

限制与未提供信息:未提供收费标准、平台细节、性能与效果保证。shadcn/ui 组件文档见 https://ui.shadcn.com/docs/components。