web-artifacts-builder

name	web-artifacts-builder
description	复杂Web构件构建器：用React+Tailwind CSS+shadcn/ui构建多组件、带状态管理和路由的交互式Web应用。当用户说'做个复杂网页'、'带筛选的数据看板'、'交互式配置页面'、'React组件页面'、'多页面artifact'、'shadcn界面'时触发。核心特点：组件化架构、状态管理、Tailwind样式、shadcn/ui组件库、路由切换。

来源: 改编自 Anthropic 官方 skill（github.com/anthropics/skills/web-artifacts-builder）

发布时间: 2026-05-29

理念: "单文件 HTML 做原型，React+shadcn 做产品。"

🏗️ Web Artifacts Builder — 复杂 Web 构件构建器

用 React + Tailwind CSS + shadcn/ui 构建生产级复杂交互界面，支持多组件、状态管理、路由切换。

---

🎯 和简单 HTML 的区别

维度	简单 HTML（html-ppt-skill）	Web Artifacts Builder
技术栈	原生 HTML + CSS + JS	React + Tailwind + shadcn/ui
组件化	❌ 单文件	✅ 多组件拆分
状态管理	❌ 无	✅ useState / useReducer
路由	❌ 单页面	✅ 多页面/Tab 切换
UI 组件库	❌ 手写	✅ shadcn/ui（Button/Card/Table/Dialog...）
适用场景	原型、演示文稿、静态页面	数据看板、管理后台、配置页面

---

🛠️ 技术栈规范

核心依赖

React 18+      # 组件框架
Tailwind CSS   # 原子化样式
shadcn/ui      # 无头 UI 组件库
Lucide React   # 图标库

shadcn/ui 常用组件速查

组件	用途	引入方式
Button	按钮	import { Button } from "@/components/ui/button"
Card	卡片容器	import { Card, CardHeader, CardContent } from "@/components/ui/card"
Table	数据表格	import { Table, TableHeader, TableRow, TableCell } from "@/components/ui/table"
Dialog	弹窗/模态框	import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
Input	输入框	import { Input } from "@/components/ui/input"
Select	下拉选择	import { Select, SelectItem } from "@/components/ui/select"
Tabs	标签页切换	import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
Badge	状态标签	import { Badge } from "@/components/ui/badge"
Skeleton	加载骨架屏	import { Skeleton } from "@/components/ui/skeleton"

Tailwind 常用类

布局: flex, grid, grid-cols-3, gap-4, p-4, m-2
响应式: md:grid-cols-2, lg:grid-cols-4
颜色: bg-slate-50, text-red-500, border-gray-200
阴影: shadow-sm, shadow-md, rounded-lg
尺寸: w-full, h-screen, max-w-4xl, min-h-[200px]

---

📁 项目结构模板

my-web-app/
├── src/
│   ├── components/
│   │   ├── ui/           # shadcn/ui 组件（自动生成）
│   │   ├── Header.tsx    # 顶部导航
│   │   ├── Sidebar.tsx   # 侧边栏
│   │   └── DataTable.tsx # 数据表格组件
│   ├── pages/
│   │   ├── Dashboard.tsx # 首页看板
│   │   ├── Settings.tsx  # 配置页
│   │   └── Profile.tsx   # 详情页
│   ├── hooks/
│   │   └── useData.ts    # 自定义 Hook
│   ├── lib/
│   │   └── utils.ts      # 工具函数
│   ├── App.tsx           # 根组件+路由
│   └── main.tsx          # 入口
├── public/
├── index.html
├── package.json
├── tailwind.config.js
└── tsconfig.json

---

💡 使用示例

示例 1：数据看板 Dashboard

用户：帮我做一个销售数据看板，带筛选和图表

AI 输出：

// App.tsx
import { useState } from "react";
import { Card, CardHeader, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Select, SelectItem } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { LineChart, BarChart } from "@/components/charts"; // 假设

export default function Dashboard() {
  const [period, setPeriod] = useState("month");
  const [region, setRegion] = useState("all");
  
  const data = useSalesData({ period, region });
  
  return (
    <div className="min-h-screen bg-slate-50 p-6">
      <div className="max-w-7xl mx-auto">
        {/* 筛选栏 */}
        
          
            本周
            本月
            本年
          
          
            全部区域
            华北
            华南
          
           exportData(data)}>导出报表
        
        
        {/* KPI 卡片 */}
        
          
          
          
          
        
        
        {/* 图表区 */}
        
          
            销售趋势
            
              
            
          
          
            品类占比
            
              
            
          
        
      
    
  );
}

---

示例 2：多 Tab 配置页面

用户：做一个用户配置页面，分基本信息、安全设置、通知偏好三个 Tab

AI 输出：

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";

export default function SettingsPage() {
  return (
    <div className="max-w-3xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-6">系统配置</h1>
      
      <Tabs defaultValue="basic">
        <TabsList className="mb-4">
          <TabsTrigger value="basic">基本信息</TabsTrigger>
          < =>安全设置
          通知偏好
        
        
        
          
            
              
                用户名
                
              
              
                邮箱
                
              
              保存
            
          
        
        
        
          
            
              
                两步验证
                
              
              
                登录通知
                
              
            
          
        
        
        
          
            
              
                邮件通知
                
              
              
                短信通知
                
              
            
          
        
      
    
  );
}

---

示例 3：Dialog 弹窗 + 表单验证

import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

export function CreateOrderDialog() {
  const [open, setOpen] = useState(false);
  
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button>新建订单</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>新建订单</DialogHeader>
        <div className="space-y-4 py-4">
          <Input placeholder="客户名称" />
          <Input = = />
          
            待处理
            已付款
          
        
        
           setOpen(false)}>取消
          确认
        
      
    
  );
}

---

🚀 快速入口

"帮我做个复杂网页" → React + Tailwind + shadcn 多组件架构
"带筛选的数据看板" → Dashboard + KPI卡片 + 图表 + 筛选栏
"交互式配置页面" → Tabs切换 + Form表单 + 状态管理
"多页面artifact" → 路由/Tab切换 + 页面组件拆分
"React组件页面" → 组件化架构 + hooks + props传递
"shadcn界面" → shadcn/ui组件库 + Tailwind样式系统

---

🆚 与现有 Skill 的关系

Skill	关系	场景对比
prd-to-demo	互补	prd-to-demo 生成快速原型（单文件HTML），web-artifacts-builder 生成生产级复杂界面
screenshot-to-prototype	互补	截图还原用 screenshot-to-prototype（快速），复杂交互用本 Skill
html-ppt-skill	互补	html-ppt 是演示文稿，本 Skill 是 Web 应用
frontend-design	前置	frontend-design 定视觉方向，本 Skill 执行代码构建
frontend-code-review	后置	本 Skill 编码完成后，用 frontend-code-review 审查质量

最佳实践链：

需求 → prd-to-demo（快速原型验证）→ web-artifacts-builder（生产级实现）
  → frontend-code-review（代码审查）→ quality-gate（质量检查）

---

"单文件 HTML 是草图，React + shadcn 是建筑。两者都有价值，看你要什么。"