---
# System prepended metadata

title: AI 前端工具全面比較表

---

# AI 前端工具全面比較表

在這次AI前端工具應用研究中
下方整理出工具比較、實作紀錄兩個表格
個人結論是Cursor是非常強大非常推薦的工具，另外針對有提供設計稿的開發工作建議使用Visual Copilot搭配Cursor

| 工具名稱 | 簡單介紹 | 特點 | 缺點 |
|---------|---------|------|------|
| [Cursor](https://www.cursor.com/) | 基於 Visual Studio Code 的 AI IDE，提供智能且快速的 code completion，可選擇多種方式提供 context 提升生成結果品質，並且可針對多檔案進行編輯功能 | • 支援多種 context：<br>&nbsp;&nbsp;- @Codebase：整個專案程式碼<br>&nbsp;&nbsp;- @File：當前檔案<br>&nbsp;&nbsp;- @Folder：特定資料夾<br>&nbsp;&nbsp;- @Code：選取的程式碼<br>&nbsp;&nbsp;- @Docs：文件內容<br>&nbsp;&nbsp;- @Web：網頁內容<br>• 整合 CMD (compose agent)<br>• 支援多種程式語言<br>• 因為是 IDE 有歷程、有 Diff 可以看，自由度也比較高 | • 部分功能需額外付費<br>• 無法一鍵部署 |
| [v0](https://v0.dev/) | 由 Vercel 推出的生成式 AI 開發工具，可根據 Prompt 快速生成程式碼，可以即時預覽、編輯、一鍵部署，並且可直接複製並整合到現有專案 | 生成程式碼支援：<br>• 前端框架：<br>&nbsp;&nbsp;- React<br>&nbsp;&nbsp;- Svelte<br>&nbsp;&nbsp;- Vue<br>• CSS框架：<br>&nbsp;&nbsp;- Tailwind CSS<br>&nbsp;&nbsp;- Bootstrap<br>• 基礎技術：<br>&nbsp;&nbsp;- HTML<br>&nbsp;&nbsp;- CSS<br><br>開發功能：<br>• Project 專屬 Instructions 設定<br>• 一鍵部署至 Vercel 平台<br>• Figma 設計轉程式碼（付費功能）<br>• 版本控制與差異比對（Diff） | • 需手動同步程式碼<br>• 預設看起來會以 Next.js 部署，如果生成 Vue 程式碼部署會出問題 |
| [Bolt.new](https://bolt.new/)(處於測試階段)   | 由 StackBlitz 推出的生成式 AI 開發工具，可根據 Prompt 快速生成程式碼，提供支援 Node.js 線上開發環境，可以即時預覽、編輯、一鍵部署 | • 開源專案<br>• 輕鬆完成所有開發流程 (一鍵 Prompt 增強、AI 程式碼生成、一鍵部署至 Netify)<br>• 支援上傳檔案當作 Context<br>• 支援多種前端框架、程式語言<br>• 可即時預覽、修改程式碼 | • Token 計費可能成本較高 |
| [Visual Copilot](https://www.builder.io/m/design-to-code) | 透過 Figma Plugin 將現有設計稿直接轉換成程式碼 (可包含測試)，並且可直接複製並整合到現有專案 | • Quality code generations生成輔助 (可設定 Instructions、下 Prompt)<br>• 提供生成結果歷程<br>• Figma 整合還原度很高<br><br>生成程式碼支援：<br>• 前端框架 <br>&nbsp;&nbsp;-(SwiftUI (Beta)<br>&nbsp;&nbsp;-Compose (Beta)<br>&nbsp;&nbsp;-Flutter (Beta)<br>&nbsp;&nbsp;-React<br>&nbsp;&nbsp;-ReactNative<br>&nbsp;&nbsp;-Qwik<br>&nbsp;&nbsp;-Vue<br>&nbsp;&nbsp;-Angular<br>&nbsp;&nbsp;-Solid.js<br>&nbsp;&nbsp;-Svelte<br>&nbsp;&nbsp;-Marko<br>&nbsp;&nbsp;-Mitosis)<br>• CSS框架： <br>&nbsp;&nbsp;-Tailwind<br>&nbsp;&nbsp;-Emotion <br>&nbsp;&nbsp;-Styled Components (React)<br>&nbsp;&nbsp;-Styled JSX (React)<br>• TypeScript<br>• 單元測試 | • 需手動同步程式碼 |
| [Draw-a-UI](https://github.com/SawyerHood/draw-a-ui) | 將手繪或圖片轉換為程式碼 | • 手繪/圖片轉換<br>• 開源專案 | • 需要 OpenAI API Key<br>• 不能下Prompt<br>• 只支援HTML/Tailwind |
| [TL;Browse](https://github.com/SawyerHood/tlbrowse)(處於測試階段) | 提供參考網址或下 Prompt 可直接生成網頁程式碼，點擊頁面連結會生成對應網頁 | • 支援 AI 輔助設計<br>• 開源專案 | • 需要 Anthropic API Key<br>• 文檔較少 |


| 工具名稱 | 可使用/底層使用AI模型 |  價格 | 資料隱私 |
|---------|----------------------|----------|---------|
| [Cursor](https://www.cursor.com/) |  • Claude-3.5 Sonnect<br>• GPT 4O <br>• GPT 4O mini<br>• GPT O1 mini <br>• GPT O1 preview <br>• Cursor small<br>• 自行填 API Key 可使用 OpenAI、Anthropic、Google、Azure OpenAI 模型 |  [Cursor 定價](https://www.cursor.com/pricing) 方案計費 | • 提供「隱私模式」，啟用後程式碼不被儲存或用於 AI 訓練<br>• 若未啟用，提示詞和程式碼可能用於改進 AI<br>• 索引程式碼庫會上傳片段，但純文字程式碼請求完成後即刪除<br>[詳細連結](https://www.cursor.com/privacy) |
| [v0](https://v0.dev/) |  • Vercel 自行 Fine-tuning 模型<br>（基於與網頁開發相關的數據） |  [v0 定價](https://v0.dev/pricing) 基於方案計費 | • 生成內容可能被用於改進工具，但僅限提示詞與互動數據<br>• 企業方案用戶的內容不會被用於訓練<br>• Vercel 平台托管的代碼和數據不會參與訓練<br>[詳細連結](https://v0.dev/faq#will-my-generations-be-used-for-training) |
| [Bolt.new](https://bolt.new/) (處於測試階段) | • Claude 3.5 Sonnect |  [Bolt.new 定價](https://bolt.new/?showPricing=true) 以 Token 計費 | |
| [Visual Copilot](https://www.builder.io/m/design-to-code) |  • Builder 專有 AI 模型 (Fast code generations)<br>• 經過微調的 AI 模型來生成乾淨且語義化的代碼 (Quality code generations) |  [Builder.io 定價](https://www.builder.io/m/pricing) 方案計費 | • 免費方案會被用於訓練 AI<br>• 自助付費方案用戶可選擇開啟或停用 AI 訓練<br>• 企業方案數據不會被用於 AI 訓練<br>[詳細連結](https://www.builder.io/c/docs/ai-use#data-collection-and-privacy) |
| [Draw-a-UI](https://github.com/SawyerHood/draw-a-ui)  | • GPT-4 Vision | 自行輸入 OpenAI API Key | • 使用者需自行提供 OpenAI API Key，數據不會儲存 |
| [TL;Browse](https://github.com/SawyerHood/tlbrowse) (處於測試階段) | • Claude 3 Opus<br>• Claude 3.5 Sonnect<br>• Claude 3.5 Haiku  | 自行輸入 Anthropic API Key | • 使用者需自行提供 Anthropic API Key，數據不會儲存 |

### 實際測試紀錄

[Figma 檔案](https://www.figma.com/design/chBkxRLN85vChBYrZVHkVw/Builder-Figma-to-Code-Plugin-Playground-(Copy)?node-id=60-10830&t=LVmxvyNoS3iCjXdW-1)

| 工具 | 花費時間 | 還原度 | 特點與限制 | 範例 |
|:---|:---:|:---:|:---|:---|
| Visual Copilot | 30 分鐘 | ⭐⭐⭐⭐⭐ | • 還原度最高<br>• 適合有 Figma 設計稿的情境<br>• 無 IDE 輔助 | [Figma 轉程式碼](https://www.builder.my/p/d22b3f75666b4cb3a37c87debc5b0313/5f3438d195c445ce91ba9dae7759a37d)
| Cursor | 40 分鐘 | ⭐⭐⭐⭐ | • IDE 開發友好<br>• 無一鍵部署 | - |
| Bolt.new | 50 分鐘 | ⭐⭐⭐⭐ | • 可一鍵部署<br>• 無 IDE 輔助 | [Figma 輸出圖片轉程式碼](https://bolt.new/~/sb1-bqjyu5nn)|
| v0 | 40 分鐘 | ⭐⭐⭐⭐ | • 可一鍵部署<br>• 無 IDE 輔助<br>• 對 Vue 沒有很友善 | [Figma 輸出圖片轉程式碼](https://v0.dev/chat/IUi6FFiVLN8?b=b_H0rUiKPtlET)                                                             |


參考資料：
https://www.cursor.com/
https://www.builder.io/
https://support.bolt.new/welcome
https://www.explainthis.io/zh-hant/ai/v0
https://github.com/SawyerHood/draw-a-ui
https://github.com/SawyerHood/tlbrowse

AI應用工具比較網路文章資源：
https://addyo.substack.com/p/ai-driven-prototyping-v0-bolt-and
https://tenten.co/learning/bolt-new-ai-coding-tool/
https://tenten.co/learning/cursorai-v0-bolt-new-compare/