前端产物构建套件（web-artifacts-builder）：用 React + shadcn/ui 把想法做成可分享的单文件 HTML 产物
- 它是什么：一套面向 Claude.ai HTML 产物的前端工程化工具链，用 React 18 + TypeScript + Vite + Tailwind CSS + shadcn/ui 搭项目、写代码，最后一键打包成单个自包含 HTML 文件。
- 解决什么痛点：复杂前端界面靠“一段 JSX 走天下”很难维护，但随着工程化升级，又会出现“几百个文件无法分享”的矛盾——这个技能用“初始化 + 捆绑”两步脚本把矛盾消掉了。
- 核心命令：
bash scripts/init-artifact.sh <project-name>初始化，bash scripts/bundle-artifact.sh出包，产物为bundle.html。 - 差异化亮点：内置 40+ 预装 shadcn/ui 组件、
@/路径别名、Parcel 内联打包配置，并附带明确的“反 AI slop”设计风格约束。 - 适合谁：需要状态管理、路由或多组件组合的中高复杂度前端产物；不适合简单的单文件 HTML/JSX 小玩意。
该技能叫什么？如何一键安装 AI 技能提升开发效率？
这个技能的中文名是前端产物构建套件，英文名是 web-artifacts-builder，技能 ID 为 13711。
它要解决的问题非常具体：在 Claude.ai 这类环境里产出 HTML 产物时，简单页面手写一段 HTML/JSX 就够了，但一旦界面需要多组件组合、状态管理、路由或者 shadcn/ui 组件体系，单文件手写就会迅速失控——样式散乱、组件重复、依赖管不清。而这个技能给出的答案是：用一个脚本把完整的现代前端工程“一键铺开”，再用另一个脚本把整个工程“一键压回单文件”。工程化的开发体验和单文件的分享体验，两者兼得。
关于“一键安装”的思路，可以按下面三步理解（具体安装命令、技能市场入口与版本号，以官方说明为准）：
- 安装前提：运行环境需具备 Node 18+（技能中的初始化脚本会自动检测 Node 版本并固定匹配的 Vite 版本），同时你的 AI 编程环境需要支持加载 Skill 包。技能自身包含
scripts/目录与LICENSE.txt，属于自带脚本的工程化技能。 - 安装入口：在支持技能的客户端中完成该技能的添加/启用操作，具体入口名称与操作路径以官方说明为准；安装完成后，技能内的脚本会以相对路径
scripts/init-artifact.sh的形式被调用。 - 验证是否生效：安装后执行一次初始化命令
bash scripts/init-artifact.sh demo-check。如果脚本能生成一个包含 React + TypeScript、Tailwind CSS 3.4.1、shadcn/ui 主题系统、@/路径别名与 40+ 预装组件的项目骨架，就说明技能已正确生效。验证完可直接进入demo-check目录试用，也可删除。
这种“技能即工具链”的设计，把过去需要手动完成的一长串操作（建 Vite 项目、装 Tailwind、配别名、拉组件库、写打包配置）压缩成两条命令，这正是 AI 技能提升开发效率的核心逻辑：把重复的工程初始化与打包动作标准化、脚本化，让开发者只把时间花在业务代码上。
该技能的主要功能和特点
- 一键初始化完整前端工程：
scripts/init-artifact.sh <project-name>会自动生成一套完全配置好的项目，技术栈为 React 18 + TypeScript + Vite，并已接好 Tailwind CSS 3.4.1 与 shadcn/ui 主题系统。 - 40+ shadcn/ui 组件预装：不需要一个个执行 add 命令，组件开箱即用，同时预置了全部 Radix UI 依赖，复杂交互组件（弹窗、下拉、标签页等）可直接调用。
- 路径别名开箱可用：
@/别名已在项目中配置完成，导入组件与工具函数不用写一长串相对路径。 - 一键捆绑成单文件产物：
scripts/bundle-artifact.sh使用 Parcel 构建（关闭 source map），再通过 html-inline 把 JavaScript、CSS 和全部依赖内联，最终输出自包含的bundle.html。 - 打包配置自动化：脚本会安装打包依赖（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline），并生成支持路径别名的
.parcelrc配置，省去手动解决“别名在打包时失效”的经典坑。 - Node 版本自适应：自动检测 Node 18+ 兼容性并固定 Vite 版本，降低环境不一致导致的初始化失败。
- 附赠设计风格规范：技能明确要求避免“AI slop”——过度居中布局、紫色渐变、千篇一律的圆角、以及 Inter 字体。这意味着它不只管工程，还管“好不好看”，比纯粹的脚手架更像一位有审美的合作者。
和普通工具相比，它强在闭环：普通脚手架只负责“建”，打包分享还得自己折腾；普通单文件生成只负责“快”，复杂了就没法维护。这个技能把“建 → 写 → 捆 → 分享”串成了一条完整链路。
如何使用该技能？
第 1 步：初始化项目
bash scripts/init-artifact.sh <project-name>
cd <project-name>
将 <project-name> 替换为你的项目名。执行后会得到一个已配置好 React + TypeScript、Tailwind、shadcn/ui、别名与打包配置的完整项目。
第 2 步：开发你的产物
直接编辑生成的文件即可。典型操作包括：在组件中通过 @/ 别名引入预装的 shadcn/ui 组件，用 Tailwind 工具类编写样式，需要多页面时接入路由，需要共享数据时引入状态管理。
示例思路（示意，非固定模板）：
import { Button } from "@/components/ui/button";
export default function App() {
return (
<main className="mx-auto max-w-3xl px-6 py-12">
<h1 className="text-2xl font-semibold tracking-tight">销售看板</h1>
<Button className="mt-4">导出数据</Button>
</main>
);
}
输入：界面需求描述（布局、组件、交互、数据形态）+ 你的代码编辑。 输出：一个可在本地运行的 React 前端工程。
第 3 步：捆绑成单个 HTML 文件
bash scripts/bundle-artifact.sh
执行前请确认项目根目录下存在 index.html 文件（这是脚本的硬性要求）。脚本会自动安装打包依赖、生成 .parcelrc、执行 Parcel 构建并把所有资产内联，最终产出 bundle.html。
第 4 步：把产物分享出去
在对话中展示 bundle.html，用户即可直接把它作为产物查看。整个文件自带 JS、CSS 与依赖，不依赖外部资源。
第 5 步（可选）：测试与可视化
技能特别说明这一步完全可选，仅在必要时或用户要求时执行。可借助其他技能或内置工具（如 Playwright、Puppeteer）渲染验证。建议不要在出包前抢先测试，因为那会拉长“提需求 → 看到成品”的等待时间；等到用户提出疑问或确有异常时再验证更划算。
进阶参考：组件用法可查阅 shadcn/ui 官方组件文档（https://ui.shadcn.com/docs/components）。
同类型竞品对比分析
| 方案名称 | 定位 | 核心功能 | 安装/使用门槛 | 适用场景 | 优势与不足 |
|---|---|---|---|---|---|
| web-artifacts-builder（本技能） | 面向 AI 产物的一体化前端工程套件 | 一键初始化 React+Tailwind+shadcn/ui 工程；一键捆绑为单文件 HTML | 需 Node 18+，执行两个脚本即可 | 需要状态管理、路由、多组件组合的复杂产物 | 优势：闭环完整、组件预装、开箱即用的别名与打包配置；不足：对极简单页产物略显重 |
| 直接手写单文件 HTML/JSX | 最轻量的产物生成方式 | 在一个文件里写结构、样式与逻辑 | 零门槛 | 静态展示页、极简交互 | 优势：快、无构建；不足：组件无法复用，样式易失控，复杂交互几乎不可维护 |
| 通用脚手架（如 Vite 官方模板 / create-react-app） | 常规前端工程起步工具 | 生成基础 React 工程结构 | 需自行配置 Tailwind、组件库、别名、打包内联 | 正式 Web 项目开发 | 优势：灵活、生态成熟；不足：从零到“可分享的单文件”仍需大量手工配置，不面向 AI 产物场景 |
| 低代码/可视化页面搭建平台 | 拖拽式页面生成 | 组件拖拽、可视化配置、发布 | 门槛最低，但受平台组件与样式能力限制 | 营销页、内部简单页面 | 优势：非开发者也能上手；不足：深度定制与复杂状态逻辑受限，产物难以自定义内联打包 |
从对比可以看出，本技能卡位在一个相对独特的位置：既不是最轻的，也不是最通用的，而是“把工程化能力封装成 AI 产物专用流水线”。如果你的目标就是把一个复杂界面做成一个可以立刻分享的 HTML 文件，它的路径是最短的。
该技能的典型应用场景与实际体验情况
场景一：产品经理要一个能直接演示的交互原型。 痛点是原型工具做不出真实交互，开发又没空排期。使用方式是让技能初始化项目，把看板、筛选器、抽屉详情做成真实组件，最后捆绑成 bundle.html 发到群里，任何人双击即可打开。实际体验：初始化到出包路径很短，因为组件已预装，不用在“装依赖”上反复卡壳；注意点是需求越复杂，越要先定好页面结构再动手，否则返工成本上升。
场景二：数据工具作者要交付一个单文件报表页。 痛点是传统打包产物带一堆 assets 目录，发给别人经常丢资源、白屏。使用方式是用 Tailwind 快速排版、用 shadcn/ui 组件做表格与筛选，最后靠 html-inline 内联全部资产。实际体验：单文件交付确实省心，接收方不需要任何环境；注意点是产物体积会随依赖增长，组件引入应保持克制。
场景三：独立开发者做多页面小工具的产物演示。 痛点是需要路由和多组件协作，纯单文件会写成一团。使用方式是在生成的项目里接入路由与状态管理，页面拆分到不同文件，最后统一捆绑。实际体验：工程结构清晰是最大收益，长期迭代不再“一改就崩”；注意点是必须保证根目录 index.html 存在，否则捆绑脚本会失败。
场景四：对设计质感有要求的品牌方物料页。 痛点是 AI 生成页面往往一眼假——居中、紫渐变、圆角、Inter 字体四件套。使用方式是遵循技能里的设计风格指南，主动避开这些套路，用有层次的排版与克制的配色。实际体验：这是这个技能比较被低估的部分，它把“审美约束”写进了流程；注意点是风格指南是方向性要求，具体视觉仍需人工把关。
整体上手难度：中等偏低。会一点命令行即可；真正的门槛在于是否理解“先工程化开发、再单文件交付”这个心智模型。
该技能能为用户带来的价值
- 把工程化时间压到分钟级：过去搭一套 React + TypeScript + Tailwind + shadcn/ui + 别名 + 打包内联的环境，熟练开发者也要花上不短的一段时间；现在两条脚本命令即可完成，重复劳动被彻底消除。
- 把“分享”这件事的门槛降到最低：单文件
bundle.html不依赖服务器、不依赖外部 CDN、不怕资源丢失，接收方零配置即可查看，沟通成本显著下降。 - 把复杂产物的可维护性拉回来：多文件、组件化、路径别名、状态管理都支持，意味着产物不是一次性玩具，而是可以持续迭代的小型前端项目。
- 把设计下限抬高了：明确的“反 AI slop”风格约束，让输出更接近真实产品而不是模板感页面。
- 长期价值：技能沉淀的是一套可复用的产物生产流水线。用得越多，初始化、开发、捆绑、分享这条路径越顺手，团队内部也更容易形成统一的产物交付标准。
常见问题 FAQ
Q1：这个技能怎么安装？装完怎么确认成功？
在支持 Skill 的环境中完成添加与启用（具体入口与命令以官方说明为准），然后执行 bash scripts/init-artifact.sh demo-check。如果能生成带 React + TypeScript、Tailwind、shadcn/ui 与 @/ 别名的项目骨架，就说明安装生效。
Q2：它收费吗？
技能说明中提供了 LICENSE.txt，完整条款以该文件为准，建议使用前先阅读。技能本身未在详情中说明任何价格信息，是否有付费环节请以官方说明为准。
Q3：什么情况下不该用它？ 官方说明写得很清楚：它不适用于简单的单文件 HTML/JSX 产物。如果只是一个静态展示页或极简交互，手写单文件更快更省事；当需求涉及状态管理、路由或 shadcn/ui 组件体系时，它的价值才会显现。
Q4：为什么打包脚本报错说找不到 index.html？
因为 scripts/bundle-artifact.sh 有硬性要求：项目根目录下必须存在 index.html。初始化脚本生成的项目默认满足这一点，如果你手动调整过目录结构，请确保该文件回到根目录。
Q5：应该什么时候测试产物？ 技能建议默认不要提前测试，因为那会在用户提出需求与看到成品之间增加等待。只有在用户明确要求，或产物出现问题时，再用 Playwright、Puppeteer 等工具验证即可。这是一个反直觉但很实用的建议。
Q6：和直接手写单文件 HTML 相比怎么选？ 看复杂度。一次性、简单、无状态 → 手写单文件；需要多组件、路由、状态管理、统一设计系统 → 用本技能初始化工程再捆绑，长期维护成本低得多。