artifacts-builder

Artifacts Builder

若要建立功能強大的前端 claude.ai 成品，請遵循以下步驟：

1. 使用 scripts/init-artifact.sh 初始化前端儲存庫
2. 編輯產生的程式碼來開發你的成品
3. 使用 scripts/bundle-artifact.sh 將所有程式碼打包成單一 HTML 檔案
4. 將成品顯示給使用者
5. （選擇性）測試成品

技術棧：React 18 + TypeScript + Vite + Parcel（打包）+ Tailwind CSS + shadcn/ui

設計與風格指南

非常重要：為避免所謂的「AI 產出垃圾」，請避免過度使用置中佈局、紫色漸層、統一的圓角以及 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 建置（無 source map）
• 使用 html-inline 將所有資源內嵌到單一 HTML 中

步驟 4：與使用者分享成品

最後，在對話中與使用者分享打包後的 HTML 檔案，以便他們將其視為成品檢視。

步驟 5：測試/視覺化成品（選擇性）

注意：這是完全可選的步驟。僅在必要或要求時執行。

若要測試/視覺化成品，請使用可用的工具（包括其他技能或內建工具，如 Playwright 或 Puppeteer）。一般來說，避免預先測試成品，因為這會增加從請求到看到完成成品之間的延遲。應在展示成品後，如有要求或出現問題時再進行測試。

參考資料

• shadcn/ui 元件：https://ui.shadcn.com/docs/components