Skip to main content Início Criadores gaoqiongxie skills-ai web-artifacts-builder
web-artifacts-builder 复杂Web构件构建器：用React+Tailwind CSS+shadcn/ui构建多组件、带状态管理和路由的交互式Web应用。当用户说'做个复杂网页'、'带筛选的数据看板'、'交互式配置页面'、'React组件页面'、'多页面artifact'、'shadcn界面'时触发。核心特点：组件化架构、状态管理、Tailwind样式、shadcn/ui组件库、路由切换。
Ir para a instalação Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/gaoqiongxie/skills-ai --skill web-artifacts-builderO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... 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 输出 ：
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" >
{/* 筛选栏 */}
示例 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
🚀 快速入口
"帮我做个复杂网页" → 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 是建筑。两者都有价值，看你要什么。"
<div className ="flex gap-4 mb-6" >
<Select value ={period} onValueChange ={setPeriod} >
<SelectItem value ="week" >
</SelectItem >
<SelectItem value ="month" >
</SelectItem >
<SelectItem value ="year" >
</SelectItem >
</Select >
<Select value ={region} onValueChange ={setRegion} >
<SelectItem value ="all" >
</SelectItem >
<SelectItem value ="north" >
</SelectItem >
<SelectItem value ="south" >
</SelectItem >
</Select >
<Button onClick ={() =>
</Button >
</div >
<div className ="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6" >
<KpiCard title ="总销售额" value ={data.total} trend ="+12%" />
<KpiCard title ="订单数" value ={data.orders} trend ="+5%" />
<KpiCard title ="客单价" value ={data.avgPrice} trend ="-2%" />
<KpiCard title ="转化率" value ={data.rate} trend ="+8%" />
</div >
<div className ="grid grid-cols-1 lg:grid-cols-2 gap-6" >
<Card >
<CardHeader >
</CardHeader >
<CardContent >
<LineChart data ={data.trend} />
</CardContent >
</Card >
<Card >
<CardHeader >
</CardHeader >
<CardContent >
<BarChart data ={data.category} />
</CardContent >
</Card >
</div >
</div >
</div >
TabsTrigger
value
"security"
</TabsTrigger >
<TabsTrigger value ="notification" >
</TabsTrigger >
</TabsList >
<TabsContent value ="basic" >
<Card >
<CardContent className ="space-y-4 pt-4" >
<div >
<label className ="text-sm font-medium" >
</label >
<Input placeholder ="请输入用户名" />
</div >
<div >
<label className ="text-sm font-medium" >
</label >
<Input type ="email" placeholder ="your@email.com" />
</div >
<Button >
</Button >
</CardContent >
</Card >
</TabsContent >
<TabsContent value ="security" >
<Card >
<CardContent className ="space-y-4 pt-4" >
<div className ="flex items-center justify-between" >
<span >
</span >
<Switch />
</div >
<div className ="flex items-center justify-between" >
<span >
</span >
<Switch defaultChecked />
</div >
</CardContent >
</Card >
</TabsContent >
<TabsContent value ="notification" >
<Card >
<CardContent className ="space-y-4 pt-4" >
<div className ="flex items-center justify-between" >
<span >
</span >
<Switch defaultChecked />
</div >
<div className ="flex items-center justify-between" >
<span >
</span >
<Switch />
</div >
</CardContent >
</Card >
</TabsContent >
</Tabs >
</div >
placeholder
"订单金额"
type
"number"
<Select >
<SelectItem value ="pending" >
</SelectItem >
<SelectItem value ="paid" >
</SelectItem >
</Select >
</div >
<div className ="flex justify-end gap-2" >
<Button variant ="outline" onClick ={() =>
</Button >
<Button onClick ={handleSubmit} >
</Button >
</div >
</DialogContent >
</Dialog >
