Skip to main content Home Creators gaoqiongxie skills-ai web-artifacts-builder
web-artifacts-builder 复杂Web构件构建器：用React+Tailwind CSS+shadcn/ui构建多组件、带状态管理和路由的交互式Web应用。当用户说'做个复杂网页'、'带筛选的数据看板'、'交互式配置页面'、'React组件页面'、'多页面artifact'、'shadcn界面'时触发。核心特点：组件化架构、状态管理、Tailwind样式、shadcn/ui组件库、路由切换。
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/gaoqiongxie/skills-ai --skill web-artifacts-builderThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
Related occupations SOC
Based on SOC occupation classification
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 >
