安裝
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 或初始化到非空目錄前，先確認副作用。超出這些已寫明的四步和樣式禁區，這份說明涵蓋不到。