SuperAPI AI 工具集

web-artifacts-builder

编程与开发

查看项目

更新于 10-16 07:25

技能介绍

用途:构建可交互的网页产物,如工具、计算器、仪表盘、表单,或需要 React 状态管理与多组件复杂交互的应用;输出为单个自包含 HTML 文件(bundle.html),可内联全部 JS、CSS 与依赖。不适合简单单文件 HTML。

主要能力:初始化脚本 scripts/init-artifact.sh <project-name> 生成已配置项目(React 18 + TypeScript(Vite)、Tailwind CSS 3.4.1、shadcn/ui 主题、路径别名 @/、40+ shadcn/ui 组件与 Radix UI 依赖、.parcelrc、Node 18+ 兼容)。可用组件含 accordion、alert、dialog、form、table、tabs、chart、toast 等,可直接从 @/components/ui/... 导入;可用 Tabs 做页面切换、Table 展示数据、Recharts 配合 ChartContainer 绘图。

使用方式:一、运行 bash scripts/init-artifact.sh <project-name> 并进入目录;二、编辑生成的 src 文件;三、运行 bash scripts/bundle-artifact.sh(根目录须有 index.html)完成打包并内联资源;四、在 Claude 对话中展示 bundle.html;测试可选,按需用 Playwright/Puppeteer 截图验证。设计上建议避免 Inter、紫色渐变、居中布局等常见模式,采用有意图的排版与配色。

限制:根目录须存在 index.html,打包依赖检查 .parcelrc 的 parcel-resolver-tspaths;样式需在 tailwind.config.js 内容路径中;缺失组件可用 npx shadcn@latest add <component> 安装;打包体积过大时可考虑 CDN 或 tree-shake;白屏需检查控制台。关于收费、价格与平台支持范围,资料暂未提供。