Web Artifacts Builder 是做什麼的？
若要建立強大的前端 claude.ai 構件，請遵循以下步驟：
- 使用
scripts/init-artifact.sh初始化前端儲存庫 - 透過編輯生成的程式碼來開發您的構件
- 使用
scripts/bundle-artifact.sh將所有程式碼打包成單一 HTML 檔案 - 將構件顯示給使用者
- （可選）測試構件
技術棧：React 18 + TypeScript + Vite + Parcel（打包）+ Tailwind CSS + shadcn/ui
設計與樣式指南
非常重要：為避免所謂的「AI 風格樣式」（AI slop），請避免使用過度的置中佈局、紫色漸層、統一的圓角以及 Inter 字型。
快速開始
步驟 1：初始化專案
執行初始化腳本以建立新的 React 專案：
bash scripts/init-artifact.sh <專案名稱>
cd <專案名稱>
這將建立一個完整設定的專案，包含：
- ✅ React + TypeScript（透過 Vite）
- ✅ Tailwind CSS 3.4.1 搭配 shadcn/ui 主題系統
- ✅ 路徑別名（
@/）已設定 - ✅ 預先安裝 40 個以上的 shadcn/ui 元件
- ✅ 包含所有 Radix UI 依賴項
- ✅ Parcel 已設定用於打包（透過 .parcelrc）
- ✅ Node 18+ 相容性（自動偵測並固定 Vite 版本）
步驟 2：開發您的構件
若要建構構件，請編輯產生的檔案。請參閱下方的 常見開發任務 以取得指導。
步驟 3：打包成單一 HTML 檔案
若要將 React 應用程式打包成單一 HTML 構件：
bash scripts/bundle-artifact.sh
這將建立 bundle.html - 一個自包含的構件，其中所有 JavaScript、CSS 和依賴項都已內聯。此檔案可以直接在 Claude 對話中作為構件分享。
需求：您的專案必須在根目錄中擁有 index.html。
腳本功能：
- 安裝打包依賴項（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline）
- 建立包含路徑別名支援的
.parcelrc設定 - 使用 Parcel 建置（無原始碼映射）
- 使用 html-inline 將所有資產內聯至單一 HTML
步驟 4：與使用者分享構件
最後，在對話中與使用者分享打包後的 HTML 檔案，以便他們將其視為構件檢視。
步驟 5：測試/視覺化構件（可選）
注意：這是完全可選的步驟。僅在必要或要求時執行。
若要測試/視覺化構件，請使用可用的工具（包括其他技能或內建工具，如 Playwright 或 Puppeteer）。一般來說，請避免事先測試構件，因為這會增加請求到成品構件之間的延遲。請在呈現構件後，應要求或出現問題時，再進行測試。
參考資料
- shadcn/ui 元件：https://ui.shadcn.com/docs/components