Web Artifacts Builder Skill
为 claude.ai 构建复杂多组件的 HTML artifact。React + TypeScript + Tailwind + 40+ shadcn/ui 组件，打包成单文件可分享。
作者： Anthropic
来源： github.com
安装
npx degit anthropics/skills/skills/web-artifacts-builder ~/.claude/skills/web-artifacts-builder
web-artifacts-builder 是单文件 artifact 的”重型版本”。需要状态管理、路由、
多组件、或者 shadcn/ui 原语时，就找它。
盒子里有什么
- React 18 + TypeScript（via Vite）
- Tailwind CSS 3.4 + shadcn/ui 主题系统
- 40+ shadcn/ui 组件预装，含 Radix UI 依赖
- 路径别名
@/配好 - Parcel 负责最后打包
- 单文件 HTML 输出（用
html-inline内联）
工作流程
bash scripts/init-artifact.sh <project-name>—— 起项目脚手架- 像正常 App 一样编辑生成的 React 代码
bash scripts/bundle-artifact.sh—— 输出bundle.html，全部内联
bundle 把所有 JS/CSS/依赖塞进一个 HTML。可以丢进 Claude 对话当 artifact、 分享文件、托管到 Cloudflare Pages —— 哪儿都行。
反”AI 味”指南
skill 明确警告四个 AI 输出常见的破绽：过度居中布局、紫色渐变、统一的圆角、 过度依赖 Inter。如果你往这些方向走，它会反对。
搭配使用
frontend-design：在这个技术栈之上的设计层theme-factory：套一致的色板polish/arrange/typeset：精修用的设计套件
调用示例
用 web-artifacts-builder 做一个看板 artifact：
三列、卡片可拖拽、localStorage 持久化、支持深色模式。
打包成单文件 HTML。
相关 Skill
ui diagram ml
小帅 Draw.io 架构图 Skill
为深度学习模型、网络架构、算法流程生成 Draw.io 图。两种模式——从零生成 或 参考图风格迁移。作者：小帅同学 (@xstongxue)。
ui diagram design
小帅 Excalidraw 手绘图 Skill
生成手绘风的架构图、流程图、数据结构图，输出 .excalidraw JSON。在 Excalidraw、Obsidian、VS Code 中可直接打开继续编辑。作者：小帅同学 (@xstongxue)。
ui web design
Frontend Design Skill
有调性、生产级的网页界面。默认 React + Tailwind + shadcn/ui。避免那种一眼 AI 味的设计。
