AI 前端工具全面比較表

# AI 前端工具全面比較表在這次AI前端工具應用研究中下方整理出工具比較、實作紀錄兩個表格個人結論是Cursor是非常強大非常推薦的工具，另外針對有提供設計稿的開發工作建議使用Visual Copilot搭配Cursor | 工具名稱 | 簡單介紹 | 特點 | 缺點 | |---------|---------|------|------| | [Cursor](https://www.cursor.com/) | 基於 Visual Studio Code 的 AI IDE，提供智能且快速的 code completion，可選擇多種方式提供 context 提升生成結果品質，並且可針對多檔案進行編輯功能 | • 支援多種 context：   - @Codebase：整個專案程式碼   - @File：當前檔案   - @Folder：特定資料夾   - @Code：選取的程式碼   - @Docs：文件內容   - @Web：網頁內容 • 整合 CMD (compose agent) • 支援多種程式語言 • 因為是 IDE 有歷程、有 Diff 可以看，自由度也比較高 | • 部分功能需額外付費 • 無法一鍵部署 | | [v0](https://v0.dev/) | 由 Vercel 推出的生成式 AI 開發工具，可根據 Prompt 快速生成程式碼，可以即時預覽、編輯、一鍵部署，並且可直接複製並整合到現有專案 | 生成程式碼支援： • 前端框架：   - React   - Svelte   - Vue • CSS框架：   - Tailwind CSS   - Bootstrap • 基礎技術：   - HTML   - CSS 開發功能： • Project 專屬 Instructions 設定 • 一鍵部署至 Vercel 平台 • Figma 設計轉程式碼（付費功能） • 版本控制與差異比對（Diff） | • 需手動同步程式碼 • 預設看起來會以 Next.js 部署，如果生成 Vue 程式碼部署會出問題 | | [Bolt.new](https://bolt.new/)(處於測試階段) | 由 StackBlitz 推出的生成式 AI 開發工具，可根據 Prompt 快速生成程式碼，提供支援 Node.js 線上開發環境，可以即時預覽、編輯、一鍵部署 | • 開源專案 • 輕鬆完成所有開發流程 (一鍵 Prompt 增強、AI 程式碼生成、一鍵部署至 Netify) • 支援上傳檔案當作 Context • 支援多種前端框架、程式語言 • 可即時預覽、修改程式碼 | • Token 計費可能成本較高 | | [Visual Copilot](https://www.builder.io/m/design-to-code) | 透過 Figma Plugin 將現有設計稿直接轉換成程式碼 (可包含測試)，並且可直接複製並整合到現有專案 | • Quality code generations生成輔助 (可設定 Instructions、下 Prompt) • 提供生成結果歷程 • Figma 整合還原度很高 生成程式碼支援： • 前端框架   -(SwiftUI (Beta)   -Compose (Beta)   -Flutter (Beta)   -React   -ReactNative   -Qwik   -Vue   -Angular   -Solid.js   -Svelte   -Marko   -Mitosis) • CSS框架：   -Tailwind   -Emotion   -Styled Components (React)   -Styled JSX (React) • TypeScript • 單元測試 | • 需手動同步程式碼 | | [Draw-a-UI](https://github.com/SawyerHood/draw-a-ui) | 將手繪或圖片轉換為程式碼 | • 手繪/圖片轉換 • 開源專案 | • 需要 OpenAI API Key • 不能下Prompt • 只支援HTML/Tailwind | | [TL;Browse](https://github.com/SawyerHood/tlbrowse)(處於測試階段) | 提供參考網址或下 Prompt 可直接生成網頁程式碼，點擊頁面連結會生成對應網頁 | • 支援 AI 輔助設計 • 開源專案 | • 需要 Anthropic API Key • 文檔較少 | | 工具名稱 | 可使用/底層使用AI模型 | 價格 | 資料隱私 | |---------|----------------------|----------|---------| | [Cursor](https://www.cursor.com/) | • Claude-3.5 Sonnect • GPT 4O • GPT 4O mini • GPT O1 mini • GPT O1 preview • Cursor small • 自行填 API Key 可使用 OpenAI、Anthropic、Google、Azure OpenAI 模型 | [Cursor 定價](https://www.cursor.com/pricing) 方案計費 | • 提供「隱私模式」，啟用後程式碼不被儲存或用於 AI 訓練 • 若未啟用，提示詞和程式碼可能用於改進 AI • 索引程式碼庫會上傳片段，但純文字程式碼請求完成後即刪除 [詳細連結](https://www.cursor.com/privacy) | | [v0](https://v0.dev/) | • Vercel 自行 Fine-tuning 模型 （基於與網頁開發相關的數據） | [v0 定價](https://v0.dev/pricing) 基於方案計費 | • 生成內容可能被用於改進工具，但僅限提示詞與互動數據 • 企業方案用戶的內容不會被用於訓練 • Vercel 平台托管的代碼和數據不會參與訓練 [詳細連結](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) • 經過微調的 AI 模型來生成乾淨且語義化的代碼 (Quality code generations) | [Builder.io 定價](https://www.builder.io/m/pricing) 方案計費 | • 免費方案會被用於訓練 AI • 自助付費方案用戶可選擇開啟或停用 AI 訓練 • 企業方案數據不會被用於 AI 訓練 [詳細連結](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 • Claude 3.5 Sonnect • 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 分鐘 | ⭐⭐⭐⭐⭐ | • 還原度最高 • 適合有 Figma 設計稿的情境 • 無 IDE 輔助 | [Figma 轉程式碼](https://www.builder.my/p/d22b3f75666b4cb3a37c87debc5b0313/5f3438d195c445ce91ba9dae7759a37d) | Cursor | 40 分鐘 | ⭐⭐⭐⭐ | • IDE 開發友好 • 無一鍵部署 | - | | Bolt.new | 50 分鐘 | ⭐⭐⭐⭐ | • 可一鍵部署 • 無 IDE 輔助 | [Figma 輸出圖片轉程式碼](https://bolt.new/~/sb1-bqjyu5nn)| | v0 | 40 分鐘 | ⭐⭐⭐⭐ | • 可一鍵部署 • 無 IDE 輔助 • 對 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/