Web 组件构建技能包
Web Artifacts Builder
让 AI 用 React、Tailwind、shadcn/ui 构建复杂的多组件 claude.ai HTML artifacts。
功能概览
让 AI 用 React、Tailwind、shadcn/ui 构建复杂的多组件 claude.ai HTML artifacts。
- AI 做复杂 artifact 时状态管理乱
- 不会用 shadcn/ui 等组件库
- 复杂组件写成单文件难维护
使用场景
- 做带状态管理和路由的复杂 artifact
- 用 shadcn/ui 做仪表盘或后台
- 做多组件协作的 Web 应用
适合谁用
- 用 claude.ai 做复杂 artifact 的人
- 前端开发者
- 做内部工具的人
不适合谁
- 只需要简单单文件 HTML 的人
- 不用 claude.ai artifacts 的人
普通人版解释
用大白话说这个技能包让 AI 会做复杂的 Web 应用组件。你跟 AI 说「帮我做一个带状态管理和路由的复杂组件」「用 shadcn/ui 做一个仪表盘」，AI 会用对的技术栈做好，不会写成简单的单文件。
专业版解释
给 Claude Code / Codex 用户Anthropic 官方出品的 Web 组件构建技能包。安装后 AI 会用 React、Tailwind CSS、shadcn/ui 做复杂的多组件 claude.ai HTML artifacts，支持状态管理、路由、shadcn/ui 组件。不适合简单的单文件 HTML/JSX artifacts。
安装方式
复制对应平台的命令到终端执行。安装前建议先确认来源和安全等级。
git clone https://github.com/anthropics/skills.git && cp -r skills/skills/web-artifacts-builder ~/.claude/skills/web-artifacts-builder
SKILL.md 预览
这是这个技能包的核心内容。默认折叠预览，确认后再复制或展开。
如何使用
安装后，把下面的提示词直接发给 AI 即可触发这个技能包。
- 1.请使用 Web 组件构建技能包，做一个带路由和状态管理的仪表盘 artifact
- 2.请使用 Web 组件构建技能包，用 shadcn/ui 做一个数据表格组件
- 3.请使用 Web 组件构建技能包，做一个多组件协作的后台界面
安全说明
技能包可能不只是提示词。请先查看下面的权限表，了解这个技能包会做什么。
| 权限项 | 状态 | 风险 |
|---|---|---|
| 是否包含脚本 | 否 | 无风险 |
| 是否会执行系统命令 | 否 | 无风险 |
| 是否会读取本地文件 | 否 | 无风险 |
| 是否会联网请求 | 否 | 无风险 |
| 是否适合新手安装 | 否 | 不建议新手 |
相关技能包
shadcn/ui 组件库
前端社区最火的 UI 方案，基于 Radix UI 无障碍组件 + Tailwind，复制粘贴即拥有全部代码，深度可定制。
React 动画技能包
让 AI 在 React / Next.js 里正确使用 GSAP：useGSAP hook、清理、SSR 不报错。
前端设计技能包
让 AI 做有辨识度的前端视觉设计：美学方向、字体、避免模板化的廉价感。
HeroUI 组件库
React 生态颜值天花板之一，设计审美在线，主题系统灵活，支持明暗模式和自定义设计令牌，Next.js SSR 完美兼容。
Nuxt UI 组件库
Vue/Nuxt 生态官方旗舰 UI 库，基于 Tailwind，原生支持 SSR/SSG，对 SEO 和首屏加载友好，自带无障碍和暗黑模式。
网页动画核心技能包
让 AI 正确使用 GSAP 核心 API：做网页动画、SVG 动画、React/Vue 动画时不再写错代码。