anthropic-web-artifacts-builder

web-artifacts-builder Skill 多维度简评

类别：前端开发 / Artifact 模式 仓库：anthropics/skills 技术栈：React 18 + TypeScript + Vite + Tailwind CSS 3.4.1 + shadcn/ui + Parcel

一、核心定位与价值

它是 Anthropic 官方 16 个 Skill 中最实用的工程型 Skill 之一。它解决了一个真实痛点：在 Claude 对话中做出复杂的、带状态管理、多组件的交互式前端应用，然后打包成单个自包含 HTML 文件直接作为 Artifact 展示。

普通做法 vs 这个 Skill：

省下的不只是时间，更是 100% 的配置出错可能性。

二、核心能力清单

2.1 完整技术栈

2.2 40+ 预装 shadcn/ui 组件

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…

2.3 关键能力

• ✅ 完整开发环境（一条命令初始化）
• ✅ 暗色模式（已内置）
• ✅ 路径别名 @/（已配）
• ✅ 单文件打包（24KB 的 bundle.html）
• ✅ 实时预览（pnpm dev）

三、完整 3 步使用流程

Step 1：初始化项目

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

这个脚本做了什么（12 步）：

1. 检测 Node.js 版本 → 智能选择 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）
10. 安装全部 Radix UI 依赖（30+ 包）
11. 从 shadcn-components.tar.gz 解压 40+ 组件到 src/components/ui/
12. 生成 components.json 配置文件

Step 2：开发你的 Artifact

// src/App.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

实时预览：

pnpm dev

Step 3：打包为单文件 Artifact

../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)

bundle-artifact.sh 做了什么（6 步）：

1. 检查 package.json 和 index.html 存在
2. 安装 Parcel 相关依赖（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline）
3. 创建 .parcelrc（支持 TS 路径别名解析）
4. Parcel 构建 → 输出到 dist/
5. html-inline → 把 JS、CSS 全部内联到单个 HTML 文件
6. 输出 bundle.html

四、内置”避开 AI 俗套设计”规范

这个 Skill 特别强调避免 AI 味设计（AI slop）：

好的设计应该让人看不出是 AI 生成的——像专业设计师的手笔。

五、8 大实战场景

场景 1：交互式数据仪表板

用 web-artifacts-builder 做一个 SaaS Dashboard：
- 4 个 KPI 卡片（活跃用户、订单数、GMV、转化率）
- 月度趋势图（Recharts）
- 用户活动表格（带筛选分页）
- 深色模式切换

场景 2：多步骤表单向导

做一个注册流程表单（3 步）：
- Step 1：邮箱 + 密码
- Step 2：基本信息
- Step 3：偏好设置
- 每步有验证 + 进度条 + 前后导航

场景 3：交互式定价页

为我们的 SaaS 做定价页：
- 3 个方案（基础 / 专业 / 企业）
- 月付 / 年付切换（带折扣提示）
- 功能对比表
- 行动召唤按钮

场景 4：待办事项应用

做一个完整的 Todo App：
- 添加/编辑/删除
- 分类、优先级、截止日期
- 筛选（按状态/优先级/日期）
- 本地存储持久化
- 数据导出

场景 5：日历 / 日程管理器

做一个交互式日历：
- 月视图
- 拖拽创建事件
- 事件编辑弹窗
- 重复事件支持

场景 6：数据可视化展示

为我们的产品做一份交互式报告：
- Hero 区 KPI
- 折线图（趋势）
- 饼图（占比）
- 漏斗图（转化）
- 表格（明细）

场景 7：可折叠文档导航

做一个产品文档站：
- 左侧可折叠导航（3 级）
- 右侧内容（含代码块、表格、提示）
- 全文搜索
- 暗色模式

场景 8：电商配置器

做一个产品定制器：
- 多步骤选择（颜色、尺寸、配件）
- 实时预览
- 价格计算
- 加入购物车

六、暗色模式支持（开箱即用）

<!-- HTML 入口 -->
<body class="dark">
  <div id="root"></div>
</body>

// 或 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>
  )
}

七、什么时候不用这个 Skill

八、安装

8.1 命令

# Claude Code
/plugin install example-skills@anthropic-agent-skills

# 通用
npx skills add anthropics/skills --skill web-artifacts-builder

8.2 前置要求

• Node.js 18+（脚本会自动检测并锁定兼容版本）
• pnpm（脚本会自动检测并安装）
• 稳定的网络（下载依赖）

九、输出大小参考

十、6 条实战技巧

1. 环境变量提前：在 vite.config.ts 配置 .env
2. TypeScript 优先：组件 Props 加类型
3. shadcn 组件按需引入：不要 import 全部
4. 响应式测试：在 3 个视口（手机/平板/桌面）下检查
5. 性能预算：bundle.html ≤ 1MB 最佳
6. 暗色模式优先：现代用户偏好

十一、5 条反合理化

十二、Q&A

Q: 什么时候用 web-artifacts-builder 而不是简单 HTML？ A: 当需要多组件、状态管理、路由、shadcn/ui 时。简单单文件用原生 HTML。

Q: shadcn/ui 包含哪些组件？ A: 40+ 高质量组件（按钮、表单、对话框、表格、导航、卡片等）。

Q: 可以添加自定义依赖吗？ A: 可以。开发过程中 pnpm add xxx，打包时会自动内嵌。

Q: bundle.html 多大？ A: 简单 200-500KB，复杂 1-2MB+。

Q: 能用于生产吗？ A: 不能。这是为 Artifact 分享设计的，生产用标准 React 部署。

Q: 能在哪里部署 bundle.html？ A: 任何静态托管（GitHub Pages、Vercel、Netlify、OSS）。

Q: Node 版本要求？ A: 18+（脚本自动适配 Vite 5/6）。

十三、对比相关 Skill

十四、总结

核心价值：

• 把复杂前端 Artifact 的开发从”配置地狱”中解放
• 40+ shadcn/ui 组件预装，覆盖绝大多数 UI 需求
• 单文件输出，分享零门槛

适用人群：

• 前端开发者（快速原型）
• 产品经理（Demo 给团队/客户）
• 设计师（可交互原型）
• 教学场景（可视化示例）

投入产出比：⭐⭐⭐⭐⭐（5/5）—— 经常做前端 Artifact 必装。

配套文档：frontend-design 美学

参考资料

1. anthropics/skills - web-artifacts-builder
2. shadcn/ui 组件库文档
3. Parcel 打包工具
4. Vite 构建工具
5. Tailwind CSS 文档