web-artifacts-builder

Web 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