web-artifacts-builder · 网页组件构建
用 React + Tailwind + shadcn/ui 构建复杂的前端网页组件：初始化仓库、开发、打包成单 HTML 文件。
三步走：init-artifact.sh 初始化 React 18 + TypeScript + Vite 项目（40+ shadcn/ui 组件预装）→ 开发编辑 → bundle-artifact.sh 打包成单文件 bundle.html（JS/CSS 全部内联，可直接分享）。适合需要状态管理、路由的复杂组件；简单单文件页面不需要它。
调用示例：在聊天框中说"给我做一个带交互的数据看板组件"。
产品详解
定位
web-artifacts-builder 是一套前端组件构建工具链：把 React 项目打包成可分享的单 HTML 文件。它面向需要状态管理/路由的复杂组件，简单单文件页面不需要它。
核心能力
- 一键初始化：
init-artifact.sh生成 React 18 + TypeScript + Vite + Tailwind CSS + shadcn/ui（40+ 组件预装）项目骨架。 - 单文件打包：
bundle-artifact.sh用 Parcel 构建 + 内联，输出自包含的bundle.html，直接可分享。 - 设计约束：避免"AI 味"设计（过度居中、紫色渐变、统一圆角、Inter 字体）。
- 可选测试：可用 Playwright 等测试；默认不提前测，交付后再按需验证。
工作流程
init-artifact.sh <project-name>初始化- 开发编辑生成的代码
bundle-artifact.sh打包成bundle.html- 在对话中分享给用户
- （可选）测试/可视化验证
输入与输出
| 输入 | 必填 | 说明 |
|---|---|---|
| 组件需求 | 是 | 要构建的网页组件描述 |
输出：bundle.html 单文件（全部 JS/CSS/依赖内联）。
适用场景
- 需要状态管理、路由的复杂交互组件
- 带 shadcn/ui 组件库的精致界面
- 可分享的单文件网页交付物
使用前准备
- 需要 Node 18+；初始化脚本会自动适配 Vite 版本。
- 简单单文件 HTML/JSX 页面不需要这套工具链。
web-artifacts-builder 隶属于 Aiglade Skill 库。在 Aiglade 聊天框中用自然语言描述需求即可调用。