Tai-ch0802 Web 產出物建構器
要建構強大的前端 claude.ai 產出物，請依照以下步驟：
- 使用
scripts/init-artifact.sh初始化前端專案 - 編輯生成的程式碼來開發你的產出物
- 使用
scripts/bundle-artifact.sh將所有程式碼打包為單一 HTML 檔案 - 向使用者展示產出物
- （可選）測試產出物
技術堆疊：React 18 + TypeScript + Vite + Parcel（打包）+ Tailwind CSS + shadcn/ui
設計與風格指南
非常重要：為避免所謂的「AI 廉價感」，避免使用過多置中佈局、紫色漸層、統一的圓角和 Inter 字體。
快速入門
步驟 1：初始化專案
執行初始化腳本以建立新的 React 專案：
bash scripts/init-artifact.sh <project-name>
cd <project-name>
這會建立一個完整配置的專案，包含：
- ✅ 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 建置（無 source maps）
- 使用 html-inline 將所有資源內嵌至單一 HTML
步驟 4：與使用者分享產出物
最後，在對話中分享打包的 HTML 檔案，讓使用者可以作為產出物檢視。
步驟 5：測試/視覺化產出物（可選）
注意：這是完全可選的步驟。僅在必要或被要求時執行。
要測試/視覺化產出物，使用可用工具（包括其他技能或內建工具如 Playwright 或 Puppeteer）。一般來說，避免事先測試產出物，因為這會增加請求到完成產出物之間的延遲。如果有需要或出現問題，在展示產出物後再測試。
參考資料
- shadcn/ui 元件：https://ui.shadcn.com/docs/components