安装
scripts/init-artifact.sh适合谁
当你要做复杂的、多组件的 claude.ai HTML artifact，并且需要状态管理、路由或 shadcn/ui 组件时，使用 web-artifacts-builder。技术栈是 React、Tailwind CSS 和 shadcn/ui。不要把它用在简单的单文件 HTML/JSX artifact 上。
更合适的前提是：你接受 React 18 + TypeScript + Vite + Parcel（打包）+ Tailwind CSS + shadcn/ui。摘要还提到需兼容 Node 18+。资料没有给出代理产品名单。官方说明页是
https://raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/SKILL.md
3 分钟完成第一次尝试
推荐的第一条命令就是初始化脚本，不要另造加载路径：
scripts/init-artifact.sh
这条命令会生成前端仓库，属于写盘。先确认当前目录可以被初始化，再执行。成功信号：生成了可编辑的前端代码。不要在未确认目录时初始化。
初始化后先不要打包。下一步是编辑生成代码，做成你的多组件界面。样式上要避开资料点名的「AI slop」：不要过度居中布局、紫色渐变、统一圆角和 Inter 字体。这是可逆的设计约束，改样式前先看现有生成文件，确认不会覆盖你刚写的结构。
若只是想先看栈是否对得上，也可以先核对：需要状态、路由或 shadcn/ui 才继续；若目标是单文件 HTML，停在这里，不要 init。
使用案例
案例一：初始化并改一版带状态的界面。先跑 scripts/init-artifact.sh，再编辑生成代码。完成标准是仓库已生成，并且你改动的是生成文件，而不是另起一个未点名的脚手架。第四步是展示给用户，但摘录没有写出展示命令，因此不要编造预览器。展示前先在本地打开生成页确认。
案例二：把项目打成可分享的单文件。命令是 scripts/bundle-artifact.sh。它会生成 bundle.html，把 JavaScript、CSS 和依赖内联进去，可直接在 Claude 对话里作为 artifact 分享。前提是项目根目录必须有 index.html。这是写盘：先确认会覆盖的 bundle.html 路径，再打包。完成标准是根目录出现自包含的 bundle.html。缺少 index.html 时不要假设脚本会替你创建。
使用边界
只面向复杂、多组件、需要状态/路由/shadcn/ui 的 artifact，不面向简单单文件 HTML/JSX。栈固定为 React 18、TypeScript、Vite、Parcel、Tailwind、shadcn/ui。打包产物是 bundle.html，根目录必须有 index.html。避免过度居中、紫渐变、统一圆角和 Inter。
不要编造除 init 与 bundle 之外的安装路径。资料没有给出客户端名单，也没有写简单单文件该改用哪条命令。覆盖 bundle.html 或初始化到非空目录前，先确认副作用。超出这些已写明的四步和样式禁区，这份说明覆盖不到。