<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> |