每日一个skill:web-artifacts-builder,构建复杂 Claude.ai HTML Artifact 的生产力工具包

把 React 整站打包成一个 HTML：Claude 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.sh`，30 秒后项目就绪
组件逐个安装	`npx shadcn add button`，`npx 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 18+，pnpm（脚本会自动检测并安装 pnpm）

使用流程只需 3 步：

Step 1：初始化项目

bash 复制代码

bash scripts/init-artifact.sh my-dashboard
cd my-dashboard

30 秒后，你会得到一个完整配置好的项目：

复制代码

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 项目一样开发：

tsx 复制代码

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 className="min-h-screen bg-slate-50 p-8">
      <div className="max-w-md mx-auto space-y-4">
        <h1 className="text-2xl font-bold text-slate-900">任务看板</h1>

        <div className="flex 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 className="pb-3">
              <CardTitle className="text-base flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={task.done}
                  onChange={() =>
                    setTasks(tasks.map((t) =>
                      t.id === task.id ? { ...t, done: !t.done } : t
                    ))
                  }
                  className="h-4 w-4"
                />
                <span className={task.done ? 'line-through text-slate-400' : ''}>
                  {task.text}
                </span>
              </CardTitle>
            </CardHeader>
          </Card>
        ))}

        <Dialog>
          <DialogTrigger asChild>
            <Button variant="outline" className="w-full">查看统计</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>任务统计</DialogTitle>
            </DialogHeader>
            <div className="space-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

开发时实时预览：

bash 复制代码

pnpm dev

Step 3：打包为单文件 Artifact

bash 复制代码

bash ../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 5，Node 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.css（Tailwind 指令 + 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 标签上加 class="dark"：

html 复制代码

<body class="dark">
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>

或者在 React 中动态切换：

tsx 复制代码

import { useState } from 'react'

function App() {
  const [dark, setDark] = useState(false)

  return (
    <div className={dark ? 'dark' : ''}>
      <div className="min-h-screen bg-background text-foreground">
        <button onClick={() => setDark(!dark)}>
          {dark ? '☀️' : '🌙'}
        </button>
        {/* 你的内容 */}
      </div>
    </div>
  )
}

组合多个 shadcn 组件

shadcn/ui 的组件设计为可以无缝组合。例如做一个"带搜索和分页的数据表格"：

tsx 复制代码

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 文件。