把 React 整站打包成一个 HTMLClaude Artifact 终极方案不用一行行配 Vite、不用逐个装 shadcn/ui 组件、不用研究 Parcel 怎么内联资源——两条命令从空文件夹到可交互的精美前端组件。这个 Skill 是做什么的web-artifacts-builder是一套用于构建复杂 Claude.ai HTML Artifact的生产力工具包。它能让你用现代前端技术栈React TypeScript Tailwind shadcn/ui开发出功能丰富、视觉精美的交互式组件最终打包成单个自包含的 HTML 文件直接在 Claude 对话中作为 Artifact 展示。核心定位不是让你写简单的静态 HTML而是让你能做出带状态管理、路由、40 现成 UI 组件的复杂前端应用——然后把它塞进一个文件里。技术栈一览React 18 TypeScript —— 组件化开发类型安全Vite —— 极速开发服务器和构建工具Tailwind CSS 3.4.1 —— 原子化样式不写 CSS 文件shadcn/ui —— 40 预装的高质量组件Button、Dialog、Calendar、Carousel…Parcel —— 打包阶段把一切内联进单个 HTML它解决了什么痛点痛点传统做法web-artifacts-builder环境搭建繁琐手动npm create vite再配 Tailwind再配 shadcn再装 Radix半小时过去了一条命令init-artifact.sh30 秒后项目就绪组件逐个安装npx shadcn add buttonnpx shadcn add dialog…装 10 个组件输 10 次命令40 组件预装完毕开箱即用路径别名配置手动改tsconfig.json、vite.config.ts经常配错初始化时自动注入/别名打包成单文件研究 Parcel / Rollup / Webpack 的 inline 配置踩坑无数bundle-artifact.sh一键搞定AI 生成的俗套设计紫色渐变、全部居中、圆角统一、Inter 字体——一眼 AI 味内置设计规范提醒避开这些陷阱依赖版本冲突Node 18 用 Vite 6 报错shadcn 依赖的 Radix 版本不对自动检测 Node 版本智能锁定兼容的 Vite 版本典型场景为团队做一个带搜索、筛选、分页的数据看板组件做一个多步骤表单向导Step Wizard每步有表单验证做一个交互式日历/日程安排器支持拖拽和弹窗编辑做一个可折叠的文档导航 内容展示组件安装与使用前置要求Node.js 18pnpm脚本会自动检测并安装 pnpm使用流程只需 3 步Step 1初始化项目bashscripts/init-artifact.sh my-dashboardcdmy-dashboard30 秒后你会得到一个完整配置好的项目my-dashboard/ ├── src/ │ ├── components/ │ │ └── ui/ # 40 shadcn/ui 组件已就位 │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── dialog.tsx │ │ ├── calendar.tsx │ │ └── ... │ ├── lib/ │ │ └── utils.ts # cn() 工具函数 │ ├── App.tsx # 入口组件 │ └── main.tsx # React 挂载点 ├── index.html # HTML 入口 ├── tailwind.config.js # Tailwind shadcn 主题配置 ├── vite.config.ts # Vite 路径别名 ├── components.json # shadcn/ui 配置 └── package.json预装组件清单Accordion、Alert、Avatar、Badge、Breadcrumb、Button、Calendar、Card、Carousel、Checkbox、Collapsible、Command、ContextMenu、Dialog、Drawer、DropdownMenu、Form、HoverCard、Input、Label、Menubar、NavigationMenu、Popover、Progress、RadioGroup、Resizable、ScrollArea、Select、Separator、Sheet、Skeleton、Slider、Sonner、Switch、Table、Tabs、Textarea、Toast、Toggle、Tooltip…Step 2开发你的 Artifact直接编辑src/App.tsx像写普通 React 项目一样开发import { useState } from react import { Button } from /components/ui/button import { Card, CardContent, CardHeader, CardTitle } from /components/ui/card import { Input } from /components/ui/input import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from /components/ui/dialog function App() { const [tasks, setTasks] useState([ { id: 1, text: 设计产品原型, done: false }, { id: 2, text: 编写 API 文档, done: true }, ]) const [newTask, setNewTask] useState() const addTask () { if (newTask.trim()) { setTasks([...tasks, { id: Date.now(), text: newTask, done: false }]) setNewTask() } } return ( div classNamemin-h-screen bg-slate-50 p-8 div classNamemax-w-md mx-auto space-y-4 h1 classNametext-2xl font-bold text-slate-900任务看板/h1 div classNameflex gap-2 Input placeholder输入新任务... value{newTask} onChange{(e) setNewTask(e.target.value)} onKeyDown{(e) e.key Enter addTask()} / Button onClick{addTask}添加/Button /div {tasks.map((task) ( Card key{task.id} className{task.done ? opacity-60 : } CardHeader classNamepb-3 CardTitle classNametext-base flex items-center gap-2 input typecheckbox checked{task.done} onChange{() setTasks(tasks.map((t) t.id task.id ? { ...t, done: !t.done } : t )) } classNameh-4 w-4 / span className{task.done ? line-through text-slate-400 : } {task.text} /span /CardTitle /CardHeader /Card ))} Dialog DialogTrigger asChild Button variantoutline classNamew-full查看统计/Button /DialogTrigger DialogContent DialogHeader DialogTitle任务统计/DialogTitle /DialogHeader div classNamespace-y-2 pt-4 p总任务: {tasks.length}/p p已完成: {tasks.filter((t) t.done).length}/p p待完成: {tasks.filter((t) !t.done).length}/p /div /DialogContent /Dialog /div /div ) } export default App开发时实时预览pnpmdevStep 3打包为单文件 Artifactbash../scripts/bundle-artifact.sh输出 Bundling React app to single HTML artifact... Installing bundling dependencies... Creating Parcel configuration with path alias support... Cleaning previous build... Building with Parcel... Inlining all assets into single HTML file... ✅ Bundle complete! Output: bundle.html (24K)一个 24KB 的bundle.html诞生了——里面内嵌了所有 JavaScript、CSS、依赖库。你可以直接把它作为 Claude Artifact 分享或者双击在浏览器中打开。设计规范避开AI 俗套这个 skill 特别强调了避免 AI 味设计AI slop❌ 不要这样做✅ 应该这样做所有内容居中堆叠左对齐文本有明确的视觉层级紫色渐变背景用纯色或微妙的纹理所有圆角统一为rounded-lg根据元素类型使用不同圆角按钮小圆角、卡片大圆角全站 Inter 字体尝试系统字体栈或更有特色的字体组合大面积留白无内容内容密度适中信息层次清晰好的设计应该让人看不出是 AI 生成的——像专业设计师的手笔。核心脚本详解init-artifact.sh 做了什么1. 检测 Node 版本 → 智能选择 Vite 版本Node 18 用 Vite 5Node 20 用最新 2. pnpm create vite → 创建 React TS 项目 3. 清理 Vite 默认模板删除 vite.svg设置项目标题 4. 安装 Tailwind CSS PostCSS Autoprefixer tailwindcss-animate 5. 安装 shadcn/ui 工具库class-variance-authority、clsx、tailwind-merge、lucide-react 6. 生成 tailwind.config.js含完整的 shadcn 主题配置 7. 生成 src/index.cssTailwind 指令 CSS 变量 暗色模式 8. 配置 tsconfig.json / tsconfig.app.json 的路径别名 9. 配置 vite.config.ts/ → ./src 的 resolve 别名 10. 安装全部 Radix UI 依赖30 个包 11. 从 shadcn-components.tar.gz 解压 40 组件到 src/components/ui/ 12. 生成 components.json 配置文件bundle-artifact.sh 做了什么1. 检查 package.json 和 index.html 是否存在 2. 安装 Parcel 相关依赖parcel、parcel/config-default、parcel-resolver-tspaths、html-inline 3. 创建 .parcelrc支持 TypeScript 路径别名解析 4. Parcel 构建 → 输出到 dist/ 目录 5. html-inline → 把 JS、CSS 全部内联到单个 HTML 文件 6. 输出 bundle.html进阶技巧使用暗色模式shadcn/ui 的暗色模式已内置。在 HTML 入口的body标签上加classdarkbodyclassdarkdividroot/divscripttypemodulesrc/src/main.tsx/script/body或者在 React 中动态切换import { useState } from react function App() { const [dark, setDark] useState(false) return ( div className{dark ? dark : } div classNamemin-h-screen bg-background text-foreground button onClick{() setDark(!dark)} {dark ? ☀️ : } /button {/* 你的内容 */} /div /div ) }组合多个 shadcn 组件shadcn/ui 的组件设计为可以无缝组合。例如做一个带搜索和分页的数据表格import { Input } from /components/ui/input import { Button } from /components/ui/button import { Card, CardContent } from /components/ui/card import { Dialog, DialogContent, DialogHeader, DialogTitle } from /components/ui/dialog import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from /components/ui/select import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from /components/ui/table // 这些组件可以任意组合构建复杂交互界面什么时候不用这个 Skill这个 skill 的定位是复杂 Artifact如果你的需求很简单用它反而杀鸡用牛刀场景推荐方案纯展示性静态页面个人简历、简单说明文档直接写 HTML CSS用style内联单张图表或可视化用 ECharts / D3 的 CDN 版本内联到单个 HTML简单表单2-3 个输入框 提交按钮原生 HTML 表单即可需要 React 状态管理、多组件协作、shadcn/ui 交互用这个 skill总结web-artifacts-builder把复杂前端 Artifact的开发从配置地狱中解放了出来。它的核心价值在于快一条命令拥有完整开发环境不用折腾配置全40 shadcn/ui 组件预装覆盖绝大多数 UI 需求简打包成单文件分享和使用零门槛稳Node 版本自适应依赖冲突提前规避美内置设计规范避开 AI 俗套设计如果你经常需要在 Claude 对话中展示交互式组件——数据看板、表单向导、配置器、日历、待办列表等——这个 skill 能让你的产出从能用跃升到专业。完整组件列表和 API 文档请查看项目中的SKILL.md文件。
每日一个skill:web-artifacts-builder,构建复杂 Claude.ai HTML Artifact 的生产力工具包
把 React 整站打包成一个 HTMLClaude Artifact 终极方案不用一行行配 Vite、不用逐个装 shadcn/ui 组件、不用研究 Parcel 怎么内联资源——两条命令从空文件夹到可交互的精美前端组件。这个 Skill 是做什么的web-artifacts-builder是一套用于构建复杂 Claude.ai HTML Artifact的生产力工具包。它能让你用现代前端技术栈React TypeScript Tailwind shadcn/ui开发出功能丰富、视觉精美的交互式组件最终打包成单个自包含的 HTML 文件直接在 Claude 对话中作为 Artifact 展示。核心定位不是让你写简单的静态 HTML而是让你能做出带状态管理、路由、40 现成 UI 组件的复杂前端应用——然后把它塞进一个文件里。技术栈一览React 18 TypeScript —— 组件化开发类型安全Vite —— 极速开发服务器和构建工具Tailwind CSS 3.4.1 —— 原子化样式不写 CSS 文件shadcn/ui —— 40 预装的高质量组件Button、Dialog、Calendar、Carousel…Parcel —— 打包阶段把一切内联进单个 HTML它解决了什么痛点痛点传统做法web-artifacts-builder环境搭建繁琐手动npm create vite再配 Tailwind再配 shadcn再装 Radix半小时过去了一条命令init-artifact.sh30 秒后项目就绪组件逐个安装npx shadcn add buttonnpx shadcn add dialog…装 10 个组件输 10 次命令40 组件预装完毕开箱即用路径别名配置手动改tsconfig.json、vite.config.ts经常配错初始化时自动注入/别名打包成单文件研究 Parcel / Rollup / Webpack 的 inline 配置踩坑无数bundle-artifact.sh一键搞定AI 生成的俗套设计紫色渐变、全部居中、圆角统一、Inter 字体——一眼 AI 味内置设计规范提醒避开这些陷阱依赖版本冲突Node 18 用 Vite 6 报错shadcn 依赖的 Radix 版本不对自动检测 Node 版本智能锁定兼容的 Vite 版本典型场景为团队做一个带搜索、筛选、分页的数据看板组件做一个多步骤表单向导Step Wizard每步有表单验证做一个交互式日历/日程安排器支持拖拽和弹窗编辑做一个可折叠的文档导航 内容展示组件安装与使用前置要求Node.js 18pnpm脚本会自动检测并安装 pnpm使用流程只需 3 步Step 1初始化项目bashscripts/init-artifact.sh my-dashboardcdmy-dashboard30 秒后你会得到一个完整配置好的项目my-dashboard/ ├── src/ │ ├── components/ │ │ └── ui/ # 40 shadcn/ui 组件已就位 │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── dialog.tsx │ │ ├── calendar.tsx │ │ └── ... │ ├── lib/ │ │ └── utils.ts # cn() 工具函数 │ ├── App.tsx # 入口组件 │ └── main.tsx # React 挂载点 ├── index.html # HTML 入口 ├── tailwind.config.js # Tailwind shadcn 主题配置 ├── vite.config.ts # Vite 路径别名 ├── components.json # shadcn/ui 配置 └── package.json预装组件清单Accordion、Alert、Avatar、Badge、Breadcrumb、Button、Calendar、Card、Carousel、Checkbox、Collapsible、Command、ContextMenu、Dialog、Drawer、DropdownMenu、Form、HoverCard、Input、Label、Menubar、NavigationMenu、Popover、Progress、RadioGroup、Resizable、ScrollArea、Select、Separator、Sheet、Skeleton、Slider、Sonner、Switch、Table、Tabs、Textarea、Toast、Toggle、Tooltip…Step 2开发你的 Artifact直接编辑src/App.tsx像写普通 React 项目一样开发import { useState } from react import { Button } from /components/ui/button import { Card, CardContent, CardHeader, CardTitle } from /components/ui/card import { Input } from /components/ui/input import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from /components/ui/dialog function App() { const [tasks, setTasks] useState([ { id: 1, text: 设计产品原型, done: false }, { id: 2, text: 编写 API 文档, done: true }, ]) const [newTask, setNewTask] useState() const addTask () { if (newTask.trim()) { setTasks([...tasks, { id: Date.now(), text: newTask, done: false }]) setNewTask() } } return ( div classNamemin-h-screen bg-slate-50 p-8 div classNamemax-w-md mx-auto space-y-4 h1 classNametext-2xl font-bold text-slate-900任务看板/h1 div classNameflex gap-2 Input placeholder输入新任务... value{newTask} onChange{(e) setNewTask(e.target.value)} onKeyDown{(e) e.key Enter addTask()} / Button onClick{addTask}添加/Button /div {tasks.map((task) ( Card key{task.id} className{task.done ? opacity-60 : } CardHeader classNamepb-3 CardTitle classNametext-base flex items-center gap-2 input typecheckbox checked{task.done} onChange{() setTasks(tasks.map((t) t.id task.id ? { ...t, done: !t.done } : t )) } classNameh-4 w-4 / span className{task.done ? line-through text-slate-400 : } {task.text} /span /CardTitle /CardHeader /Card ))} Dialog DialogTrigger asChild Button variantoutline classNamew-full查看统计/Button /DialogTrigger DialogContent DialogHeader DialogTitle任务统计/DialogTitle /DialogHeader div classNamespace-y-2 pt-4 p总任务: {tasks.length}/p p已完成: {tasks.filter((t) t.done).length}/p p待完成: {tasks.filter((t) !t.done).length}/p /div /DialogContent /Dialog /div /div ) } export default App开发时实时预览pnpmdevStep 3打包为单文件 Artifactbash../scripts/bundle-artifact.sh输出 Bundling React app to single HTML artifact... Installing bundling dependencies... Creating Parcel configuration with path alias support... Cleaning previous build... Building with Parcel... Inlining all assets into single HTML file... ✅ Bundle complete! Output: bundle.html (24K)一个 24KB 的bundle.html诞生了——里面内嵌了所有 JavaScript、CSS、依赖库。你可以直接把它作为 Claude Artifact 分享或者双击在浏览器中打开。设计规范避开AI 俗套这个 skill 特别强调了避免 AI 味设计AI slop❌ 不要这样做✅ 应该这样做所有内容居中堆叠左对齐文本有明确的视觉层级紫色渐变背景用纯色或微妙的纹理所有圆角统一为rounded-lg根据元素类型使用不同圆角按钮小圆角、卡片大圆角全站 Inter 字体尝试系统字体栈或更有特色的字体组合大面积留白无内容内容密度适中信息层次清晰好的设计应该让人看不出是 AI 生成的——像专业设计师的手笔。核心脚本详解init-artifact.sh 做了什么1. 检测 Node 版本 → 智能选择 Vite 版本Node 18 用 Vite 5Node 20 用最新 2. pnpm create vite → 创建 React TS 项目 3. 清理 Vite 默认模板删除 vite.svg设置项目标题 4. 安装 Tailwind CSS PostCSS Autoprefixer tailwindcss-animate 5. 安装 shadcn/ui 工具库class-variance-authority、clsx、tailwind-merge、lucide-react 6. 生成 tailwind.config.js含完整的 shadcn 主题配置 7. 生成 src/index.cssTailwind 指令 CSS 变量 暗色模式 8. 配置 tsconfig.json / tsconfig.app.json 的路径别名 9. 配置 vite.config.ts/ → ./src 的 resolve 别名 10. 安装全部 Radix UI 依赖30 个包 11. 从 shadcn-components.tar.gz 解压 40 组件到 src/components/ui/ 12. 生成 components.json 配置文件bundle-artifact.sh 做了什么1. 检查 package.json 和 index.html 是否存在 2. 安装 Parcel 相关依赖parcel、parcel/config-default、parcel-resolver-tspaths、html-inline 3. 创建 .parcelrc支持 TypeScript 路径别名解析 4. Parcel 构建 → 输出到 dist/ 目录 5. html-inline → 把 JS、CSS 全部内联到单个 HTML 文件 6. 输出 bundle.html进阶技巧使用暗色模式shadcn/ui 的暗色模式已内置。在 HTML 入口的body标签上加classdarkbodyclassdarkdividroot/divscripttypemodulesrc/src/main.tsx/script/body或者在 React 中动态切换import { useState } from react function App() { const [dark, setDark] useState(false) return ( div className{dark ? dark : } div classNamemin-h-screen bg-background text-foreground button onClick{() setDark(!dark)} {dark ? ☀️ : } /button {/* 你的内容 */} /div /div ) }组合多个 shadcn 组件shadcn/ui 的组件设计为可以无缝组合。例如做一个带搜索和分页的数据表格import { Input } from /components/ui/input import { Button } from /components/ui/button import { Card, CardContent } from /components/ui/card import { Dialog, DialogContent, DialogHeader, DialogTitle } from /components/ui/dialog import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from /components/ui/select import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from /components/ui/table // 这些组件可以任意组合构建复杂交互界面什么时候不用这个 Skill这个 skill 的定位是复杂 Artifact如果你的需求很简单用它反而杀鸡用牛刀场景推荐方案纯展示性静态页面个人简历、简单说明文档直接写 HTML CSS用style内联单张图表或可视化用 ECharts / D3 的 CDN 版本内联到单个 HTML简单表单2-3 个输入框 提交按钮原生 HTML 表单即可需要 React 状态管理、多组件协作、shadcn/ui 交互用这个 skill总结web-artifacts-builder把复杂前端 Artifact的开发从配置地狱中解放了出来。它的核心价值在于快一条命令拥有完整开发环境不用折腾配置全40 shadcn/ui 组件预装覆盖绝大多数 UI 需求简打包成单文件分享和使用零门槛稳Node 版本自适应依赖冲突提前规避美内置设计规范避开 AI 俗套设计如果你经常需要在 Claude 对话中展示交互式组件——数据看板、表单向导、配置器、日历、待办列表等——这个 skill 能让你的产出从能用跃升到专业。完整组件列表和 API 文档请查看项目中的SKILL.md文件。
