Web Artifacts Builder：把 React 打成单文件

给 AI 一套 React + shadcn/ui 脚手架，把多文件前端项目压成一个可分享的 HTML。

聊天窗口里的 HTML 工件通常是一个单文件，写得了按钮写不了路由，更不用说状态管理。这个技能的思路是先把工程做足：起一个带 Tailwind、shadcn/ui、路径别名的完整 React + TypeScript 项目，该写组件写组件，最后用一个包装脚本把全部 JS、CSS、依赖内联成一个 bundle.html。你得到的是一个文件，但开发过程是正经的工程结构。

核心能力

1. 一条命令起一个巳经配好的工程
跑 bash scripts/init-artifact.sh <项目名>，你拿到的是 React 18 + TypeScript + Vite，Tailwind 3.4.1 已接好 shadcn/ui 主题体系，@/ 路径别名配完，40 多个 shadcn/ui 组件与全套 Radix 依赖预装。这些配置手写要花半小时且容易漏，尤其是 Tailwind 与主题变量的对应关系。

2. 打包成真正的单文件
bash scripts/bundle-artifact.sh 会用 Parcel 构建，再用 html-inline 把 JS、CSS、字体全部塞回一个 HTML。产物可以直接丢进聊天窗口、发给同事、或放到任意静态服务器上。注意前提：项目根目录必须有 index.html，否则脚本会直接失败。

3. 有状态、有路由的界面也能做
因为底子是完整 React，不是一段内联 script，多页切换、表单状态、弹窗、表格排序都能正常写。做原型演示时差别很大：一个只有按钮的静态页看不出交互问题，一个能真点的原型才能让产品经理提对意见。

4. 写了“反 AI 味”的硬约束
技能说明里明确列了四条禁例：滥用居中布局、紫蓝渐变、统一圆角、Inter 字体。这在同类工具里少见——大多数技能只教“怎么做”，它额外告诉你“别做什么”。对做交付物的人，这几条直接决定了成品看起来像模板还是像设计。

5. 与测试链路可拼接
官方说明里注明：需要可视化验证时，可以接其他技能或 Playwright / Puppeteer 类工具。建议的顺序是先交付、后测——先把东西给用户看，发现问题再回头改，避免把时间花在没人要看的截图上。

使用上手

1. 确认 Node 18+ 与 bash 环境。脚本会向动适配并锁定 Vite 版本，Node 太老会直接报错。
2. 初始化。bash scripts/init-artifact.sh my-app && cd my-app。
3. 先搭骨架再填内容。把页面结构和组件拆完，再写样式细节，否则很容易反复重构。
4. 打包。bash scripts/bundle-artifact.sh 生成 bundle.html，先在本地浏览器打开确认样式没丢。
5. 交付前自查那四条风格禁例。尤其注意圆角是否全站一个值、字体是否回退到了 Inter。
6. 需要上生产就丢掉打包层，直接用 Vite 构建。这个技能面向单文件交付，不面向部署。

优点与不足

优点：

• 真正把多文件工程压成单文件，交付链路很短。
• 40+ 预装组件，不用从零写基础元件。
• 自带设计禁忌清单，成品质量比纯生成稳定。
• 工程结构规范，后续可以脱离打包脚本单独演进。

不足：

• 依赖 Node 与 Parcel，首次装依赖耗时较长。
• 打包后的文件体积不小，组件多了会到几 MB。
• 只适合前端工件，后端逻辑、数据库都做不了。
• 技能许可证以仓库内 LICENSE.txt 为准，商用前需确认。

适合谁

• 需要做可交互原型、又只能交付单文件的前端。
• 想把内部小工具一键发给同事的产品与运营。
• 在聊天窗口里做演示、要求“能点”的售前与咨询。

下载与访问

• 仓库目录：https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder
• 组件文档：https://ui.shadcn.com/docs/components

获取与授权

本文属于「技能」分类的 AI 资源专栏，更多评测见分类页。