<aside> <img src="/icons/star_brown.svg" alt="/icons/star_brown.svg" width="40px" />
此文件內容由 iCHEF Sr. Product Designer Kat 撰寫
想要測試完整的操作流程，包含多個頁面之間的跳轉
想要測試較複雜的元件互動效果
| 推薦工具 | 優點 | 缺點 | 使用限制 |
|---|---|---|---|
| Figma Variables | |||
直接使用 Figma 設計稿 |
・直接使用 Figma 設計稿，UI 還原度最高 | ・需要對 Variables 功能熟悉，使用上較不直覺 | ・僅有教育和付費方案可以使用 Variables 功能 |
| Claude | |||
僅能附上 Figma 設計稿圖片作為參考 |
・程式碼生成速度快 | ||
| ・可以建立較簡單的元件互動效果 | ・無法顯示圖片 | ||
| ・無法匯入 Figma 檔案，僅能透過對話一步步調整為接近 Figma 設計稿的 UI 風格 | ・免費版有對話長度限制 | ||
| ・最低價的付費方案用量沒有明確寫出，不過目前都還很夠用 | |||
| Bolt | |||
可匯入 Figma 設計稿 |
・可以建立較複雜的元件互動效果 | ||
| ・Figma 設計稿還原度高 | ・程式碼生成速度較慢 | ||
| ・無法快速查看程式碼的歷史版本 | |||
| ・發布公開連結的失敗率較高，需要一直排錯 | ・最低價的付費方案發送訊息次數為 10m token/月 | ||
| Lovable | |||
可匯入 Figma 設計稿 |
・程式碼生成速度較快 | ||
| ・可以建立較複雜的元件互動效果 | |||
| ・Figma 設計稿還原度較低，但可以快速調整 | ・如果不小心沒有把訊息打完就送出，也會減少一個訊息用量額度 | ・免費版的發送訊息次數為 5 次/天 | |
| ・最低價的付費方案發送訊息次數為 100 次/月 |
案例裡面都有更精確下 prompt、達成期待效果的 tips！
<aside> <img src="/icons/star_purple.svg" alt="/icons/star_purple.svg" width="40px" />
Bolt v.s. Lovable
| Bolt | Lovable | |
|---|---|---|
| Figma 匯入方式 | 只需貼上連結即可 勝 |
需要用 Builder.io plugin 轉換 |
| Figma 設計稿還原度 | UI 細緻度較低，若 Figma 設計稿結構複雜，排版會容易亂掉 | UI 細緻度較高，若 Figma 設計稿結構複雜，也能調整到 80% 相似 勝 |
| 工程邏輯 | 如果 prompt 有下得精確，通常都能一次就達到期待效果 勝 |
就算 prompt 下得精確，有時還是要再調整幾次 |
| 程式碼產生速度 | 較慢 | 較快 勝 |
| 公開連結 | 連結產生速度較慢，且容易產生錯誤 | 連結產生速度較快 勝 |
| 查看歷史版本程式碼 | 僅能回復歷史版本，且無法復原到最新版本 | 可以查看與回復歷史版本，也能復原到最新版本 勝 |
| 用量（以最低價付費方案比較） | 每天有 10m token 額度 勝 |
每月僅有 100 次發送訊息額度 |
| </aside> |