Content Component

2026.03.08 更新 v0.dev、Lovable、Canva AI、Cursor、Claude、Windsurf 等工具資訊

身為網頁設計師，隨著 AI 技術的迅速發展，我每天都會想：AI 是否會取代網頁設計呢？
AI 每天都在推出新功能，這讓我覺得有點焦慮。
面對這個快速變化的未來，與其擔心自己會被淘汰，不如趕快面對與學習，
學會如何駕馭 AI，而不是被 AI 淘汰。
這篇文章會介紹 8大 AI 網頁設計工具，並教大家怎麼實際操作，
幫助我和其他設計師提升設計效率，創作出更棒的作品。
歡迎大家一起討論交流，看看 AI 如何在網頁設計領域帶來改變。

文章目錄：

一. AI／無程式碼網站建構工具比較表

二. Webflow

三. Dora AI

四. v0.dev

五. same.new 

六. Durable.co

七. relume.io

八. 為什麼 AI 工具無法取代 WordPress 或 Joomla？

九. 為什麼 AI 工具無法取代 網頁設計師？

十. lovable

十一. Canva ai

十二. AI 幫你寫網站程式？Cursor、Claude、Windsurf

十三. 網頁設計師的 AI 副駕駛：Gemini 實戰應用

 

 

 

---

一. AI／無程式碼網站建構工具比較表

 

說明：

• 推薦程度以「設計自由度」、「程式匯出能力」、「實用性」綜合評估

• 若需要真正可執行的網站程式碼，v0.dev 與 Lovable 更合適

• Canva AI 適合做視覺提案，但不適合實作開發用途

• Durable.co 功能雖全，但模板限制較大、SEO 表現較弱，不推薦

 

 

 

 

---

二. Webflow 

2.1 什麼是 Webflow？

Webflow 是一個網頁設計工具，可以用拖拉的方式設計網站，而不需要寫任何程式碼！

對於設計師來說，它就像一個可視化的設計平台，讓你可以像在 Photoshop 或 Illustrator 一樣設計網站，但設計完成後，Webflow 會自動幫你把 HTML、CSS 和 JavaScript 都生成出來，網站就能直接上線了。

2026.03.08 更新

Webflow 在 2026 年 2 月 5 日推出了大幅進化的 AI Site Builder，支援一次生成多頁網站（最多五頁），

包含結構、樣式和動畫。

Webflow AI 現在還能用對話方式生成並部署全端 Web App

 

主要特點：

(1) 視覺化設計界面：

使用者可以直接在畫布上拖放元素，進行設計，並實時查看結果，類似於傳統的設計軟體。

 

(2) 無需編碼：

設計師可以專心於設計，不需要懂程式碼，Webflow 會自動處理技術部分。

 

(3) 自訂功能強大：

即使是專業開發者，也可以在 Webflow 上做進一步的調整和寫程式碼，讓網站完全符合需求。

 

(4) 內容管理系統 (CMS)：

如果你的網站需要經常更新內容，Webflow 也有 CMS 功能，讓你輕鬆管理和更新網站內容。

 

(5) 一站式托管與部署：

網站設計完畢後，你可以直接把它托管在 Webflow 上，簡單又方便。

 

2.2 Webflow 價格

2026.03.08 更新

• Basic Site Plan 是 $18/月，CMS Plan 是 $29/月，Business Plan 是 $49/月起。年繳有約 20-25% 的折扣。
• Workspace 方面，Core 方案是 $19/月（年繳），Agency 是 $35/月（年繳）。

 

2.3 評分：1/5

 

2.4 Webflow 適合誰用？

• 不想碰html的設計師

• 對設計細節和可視化界面有需求的設計師

• 短期、小型、快速上線的網站

2.5 不建議使用 Webflow 的情況：

(1) 做太大型的網站不適合

像是新聞網站、會員系統、內容超多的部落格這類比較複雜的網站，
Webflow 就比較吃力，建議還是用 WordPress 或 Joomla 比較穩。

 

(2) 想客製功能、串接系統會卡關

Webflow 雖然可以加一點程式碼，但它不是開源的，
像進階功能像會員登入、API 串接、訂單系統等等，會比較難搞，限制多。

 

(3) 價格不便宜

免費版沒辦法用自己的網域，真的要拿來商用，

Basic Site Plan 加上 Workspace 費用加起來不便宜，

在 AI 架站工具裡算是成本偏高的。

 

(4) 不能買斷、綁平台，長期用不太划算

Webflow 是訂閱制，不能買斷安裝在自己主機上，所有網站都綁在 Webflow 上。
如果你打算做長期的大型專案或系統，這種平台限制會很明顯，
還是用 WordPress、JOOMLA 這種開源架構比較自由、彈性也比較大。

 

 

2.6 實作教學：如何使用 Webflow 的 AI 功能進行 網頁設計

Webflow 提供了強大的 AI 功能，可以幫助 網頁設計 師更高效率地設計網站。

以下是一步步的步驟，教你如何使用 Webflow 的 AI 功能來設計網站，從選擇模板到自動化設計建議。

 

Webflow 網頁設計 操作步驟

• 進入 Webflow 官網 並註冊帳號。

• 登入後，點擊「New site」來創建一個新專案。
  
  
  
  

• 選擇 ai 網站建置、網站模板和空白網站，從 網頁設計 開始建議直接選擇網站模板(template)
  
  
  

• 依照問題選擇自己要做的網站類型，Webflow 的 AI 會自動分析適合你的設計，並根據內容提供推薦的排版、顏色和字型等設計元素
  
  
  
• 這是 AI 幫我完成的網頁，坦白說，就是一個很基礎不特別的版型，沒有特殊的記憶點，根本無法商業化，還是需要人類進行設計及配色
  如果要修改的話，可以按左下角的Edit prompt進行修改
  
  
  
• 調整到你喜歡的樣式再按 start building 建立網站，就會跳到它們的網頁編輯頁面
  
  
  

• 完成之後，按右上角的 publish 按鈕，生成如下網頁 
  https://medical-aesthetics-clinic-beauty-studio.webflow.io/
  
  
• 如果選擇 template 選擇模板分類與免費或付費的模板
  
  
  
• 進入網站編輯頁面，對常使用網頁編輯器的人應該不陌生，網頁編輯器都大同小異
  可以參考網頁：
  網頁設計 頁面編輯器 Page Builder ：無需寫程式碼：輕鬆上手教學
  
  
  
  
• 除非他的模板都沒有你喜歡的，不然建議用模板不用ai是最快最好看的
  網址：https://rings-fantabulous-site.webflow.io/

  

2.7 小結：

Webflow 適合做小型網站、形象官網或作品集，

但如果有「功能複雜、長期經營、希望自己掌控網站架構」的需求，

建議慎選平台！

 

 

 

 

---

三. Dora AI 

3.1 什麼是Dora AI ?

Dora AI 是一個網站生成工具，專門為需要完全客製化網站的用戶設計的。

跟傳統的模板工具不同，Dora AI 可以根據你的提示從頭到尾生成網站，從文字內容到視覺設計，所有元素都能根據需求來建立。

 

主要功能：

• 無模板設計：
  Dora AI 完全不依賴預設的模板，而是根據你提供的提示，建立出獨一無二的網站設計。
  
  

• 品牌一致性：
  它會根據品牌需求，生成符合品牌風格的網站設計，保持整體的一致性。
  
  

• AI 佈局設計：
  每個生成的網站，Dora AI 都會調整圖片、文字和UI元素，確保用戶體驗最佳。
  
  

• 3D 資源與動畫生成：
  未來Dora AI 會加入生成3D資源和網站動畫的功能，讓網站設計更有活力。

 

3.2 Dora AI 評分： 1/5

 

3.3 Dora AI 價格

Dora AI 的付費方案分為 Basic（$14/月）和 Pro（$25/月）

 

3.4 Dora AI 適合誰用？ 

• 快速發想和產出原型

 

3.5 不建議使用 Dora AI 的情況：

• 不能修改，彈性不足
• 對 SEO 不友善
•  網站架構單一， 對複雜的網站架構或多層級內容支援不夠。

 

 

3.6 實作教學：如何使用 Dora AI 的 AI 功能進行 網頁設計

Dora AI 網頁設計 操作步驟

• 進入 Dora AI 官網 並註冊帳號。

• 給他你的網站需求，我希望他能生成一個類似下方的網站
  https://www.opera-net.jp/
  
  
  

• 他會跳出兩種版型給你挑選，坦白說這兩種和我原先預想的都差蠻多的
  
  
  
• 完成之後，按右上角的 publish 按鈕，網站頁面生成之類網址如下，目前無法修改，如要修改需另外付費
  https://uekjxnwc.dora.run/
  
  
• 網頁編輯介面
  

 

3.7 小結：

適合「快速發想」和「產出原型」， 但無法長期經營、維護、修改。 

 

 

 

 

---

四. v0.dev

4.1 什麼是 v0.dev ?

2026.03.08 更新

 

主要特點：

• 對話式生成：
  輸入你要的功能描述，AI 就會產出對應的 React 元件或完整頁面。
  你也可以上傳截圖或 Figma 設計稿，讓它直接轉換成程式碼。
  
  
• Vercel 原生整合：
  產出的專案可以一鍵部署到 Vercel，
  也能推到 GitHub 做版本控制。
  對已經在用 Next.js 生態系的開發者來說，流程非常順。
  
  
• Figma 匯入：
  Pro 以上的方案支援從 Figma 匯入設計稿，讓設計師和工程師的交接更流暢。

如果需要快速生成網站或 app 原型，這個工具就很適合。

 

4.2 v0.dev 評分：5/5

可匯出程式碼、支援 Figma 匯入、一鍵部署，非常推薦。

 

4.3 v0.dev 價格：

v0 在 2025 年底改為 token 制計費，

每個方案包含固定的月度 credit 額度，

使用不同 AI 模型會消耗不同數量的 token。

Free：$0/月，含 $5 credit 額度，適合試玩，大約能做 7～15 次生成就會用完。

Premium：$20/月，含 $20 credit 額度，支援 Figma 匯入和 API 存取，適合個人開發者。

Team：$30/用戶/月，共享 credit、集中帳務管理，適合小團隊。

Business：$100/用戶/月，Enterprise 則是客製報價。

要注意的是，使用較強的模型（Max 等級）token 消耗會快很多。

如果大部分時間用 Auto 模式讓系統自動選模型，credit 可以撐比較久。

超過額度後可以加購，不會直接斷掉服務。

 

4.4 適用人群：

• 前端開發者、UI/UX 設計師，特別是在 Next.js / React 生態系裡工作的人。

• 想快速把想法變成可互動原型的創業者或 PM，前提是你或團隊裡有人看得懂產出的程式碼、能做後續調整。

 

4.5 不建議使用 v0.dev 的情況：

(1) 完全不碰程式碼的人：

v0 產出的是 React 程式碼，如果你看不懂 JSX、不知道怎麼裝 npm 套件，

後續的修改和部署會卡住。

它比 Canva 或 Durable 這類拖拉式工具的技術門檻高不少。

 

(2) 需要完整後端功能的專案：

v0 的強項在前端 UI 生成。如果你的專案需要使用者登入、資料庫、API 串接，

這些都得自己另外接（例如用 Supabase 做後端），

v0 本身不處理這塊。

 

(3) 內容型網站或 SEO 導向的專案：

v0 沒有 CMS、沒有 SEO 工具、也沒有內容管理功能。

要做部落格、新聞站、或任何需要頻繁更新內容的網站，

WordPress 或 Joomla 還是更實際的選擇。

4.6 實作教學：如何使用 v0.dev 的 AI 功能進行 網頁設計

v0.dev 網頁設計 操作步驟

• 進入 https://v0.dev/ 並註冊帳號。

• 輸入提示詞，他就會開始寫html了
  
  
  
• 生成的網址如下
  https://kzmk6lsmdu52v32ro7cz.lite.vusercontent.net/

4.7 小結：

v0.dev 比較像是「AI 幫你寫前端程式碼」的工具，

適合用來做設計提案、測試新想法或快速生成 UI，

但要商業上線還是需要後續手動處理，適合有基礎的使用者。 

 

 

 

 

---

五. same.new

5.1 什麼是 same.new?

Same.new 是一個可以快速複製任何網頁的 UI 設計。

只需要提供一個網址，這個工具就能生成像素完美的設計，

讓開發者和設計師能夠輕鬆重建現有的網頁設計。

 

主要特點：

• 快速複製 UI 設計：讓你輕鬆複製任何網站的 UI，並迅速重建設計。

• 簡單易用：只需要提供網址，便能生成完整的設計。

 

5.3 same.new 評分：5/5

 

5.4 same.new 價格：

2026.03.08 更新

有免費方案（每月 50 萬 tokens），

但實際要做完整的網站複製，

免費額度很快就會用完。

付費方案從 Basic $10/月（200 萬 tokens）到 Ultra $100/月（2,000 萬 tokens）分成四個等級。

跟先前的純免費時期不同，現在走的是 token 制計費，

每一次操作（包括分析網址、處理圖片、產生程式碼）都會消耗 token。

對一般使用者來說，如果只是偶爾複製一兩個頁面來研究結構，

免費方案勉強夠用。

但如果要頻繁使用或處理比較複雜的網站，Basic 或 Pro 方案會比較實際。

 

5.5 適用人群：

• 設計師想參考其他網站結構 •

• 前端工程師想快速重建 UI

• 需要重新設計網站但想保留舊架構的人

 

5.6 不建議這樣用 same.new 

• 直接整站複製來做公司官網、 商業活動頁、客戶專案

• 沒有修改設計風格就上線使用

• 使用對方的品牌色、Logo、圖片、 文字等原始素材

 

5.7 建議這樣用 same.new 

• 拿來學習、分析別人網站的排版和架構

• 參考設計邏輯後重新設計、配色、 調整風格

 

 

5.8 實作教學：如何使用same.new複製網站？

• 進入 https://same.new/ 並註冊帳號。
• 輸入要複製的網站網址，它就會開始整個網站的複製
  
  

 

 

 

 

5.9 Same.new 是不是可以合法使用？會不會有法律問題？

Same.new 這類工具的確很方便，可以快速複製某個網站的整體結構、設計樣式，甚至做到像素級還原。但正因為它「太方便」，在法律上可能會踩到一些紅線，尤其是在商業用途上更需要小心。

 

(1) UI 設計的著作權保護

根據多數國家的著作權法（包含台灣），網站的 UI 設計（排版、配色、圖片組合、字型設計）是受著作權保護的。
也就是說，如果你把一個網站整頁照抄，包括配色、排版、圖片、字體搭配等，可能會侵犯原設計者的著作權。

即使你是用 AI 工具自動複製的，只要結果與原網站非常相似，就有侵權風險。

 

(2) 非商業 vs 商業使用的差異

• 學習 / 研究用途：如果你只是把它當作學習 UI 結構的練習，不公開、不上線、不用於任何商業用途，基本上是安全的。

• 商業用途（公開網站、公司官網、客戶專案）：這種就要非常小心，因為一旦你拿來賺錢、對外營運，就有可能被原設計方提出侵權警告或法律行動。

 

(3) 避免法律問題的建議

• 不要整站直接複製，請用 Same.new 作為「參考」，然後加入自己的創意與風格進行再設計。

• 避免抄襲品牌標誌、字體、圖片，尤其是商用圖片、logo、或品牌色彩配置。

• 修改排版、調整元件、改變風格，只保留結構邏輯，避免太過相似。

 

5.10 小結：Same.new 很好用，但請「參考用，不要照抄用」

這類工具很適合拿來研究、學習網站結構，甚至作為快速 Wireframe 建立工具也很棒，但如果是商業案，請一定要改過、加上自己的設計思維，才不會踩到法律底線。

你可以把 Same.new 當成快速取樣器，但最終還是要用設計師的專業去「重新演繹」出一個屬於自己或客戶的作品。這樣才安全，也更有價值。

 

 

 

 

---

六. Durable.co

6.1 什麼是 Durable.co?

Durable.co 專門幫助小型企業快速建立專業網站。

只需要簡單的幾個步驟，Durable 就能幫你自動生成一個完整的網站，還有內建的 SEO 和行銷工具。

 

主要功能：

1. AI網站建置：
   只要提供一些基本資訊，Durable 就能快速生成網站，還能根據需求進行自訂。
   
   

2. 內建 SEO：
   它會自動優化你的網站，幫助它在搜尋引擎中有更好的排名，吸引更多流量。
   
   

3. 品牌工具：
   Durable 可以幫你快速建立品牌識別，並且生成符合品牌風格的設計，讓網站看起來更專業。
   
   

4. 自動化內容生成：
   不僅是網站，Durable 還能自動幫你生成部落格文章、廣告文案等內容，輕鬆管理網站。

5. 專業支持與分析：
   它提供詳細的網站分析、即時的安全保護，還有免費的自訂域名，讓你的網站更加專業和安全。

 

6.2 Durable.co 評分：不推薦，完全無法測試和修改

 

6.4 Durable.co價格

0~85美金/月

 

 

6.5 實作教學：如何使用 Durable.co的 AI 功能進行 網頁設計

進入 https://app.durable.co/並註冊帳號。

輸入相關資訊

 

很快速的建立了網頁，但需要另外付費之後才可以使用其他功能

 

6.6 小結：

其他 AI 工具比這個好 

 

 

 

 

---

七. relume.io

7.1 什麼是 relume.io?

2026.03.08 更新：Relume 現在也支援 React 元件庫的匯出

Relume 是專門幫助設計師和開發者更快速的建置網站。

它能利用 AI 自動生成網站結構、線框和風格指南，並且可以無縫整合到 Figma、Webflow 和 React，

讓整個設計過程變得更加高效率。

主要功能：

1. AI 生成網站結構和線框：
   只要提供一些簡單的指示，Relume 就能快速生成網站結構和線框，幫你省下不少時間和精力。
   
   

2. 自動生成風格指南：
   它會自動幫你建立設計系統，讓整體風格一致，讓設計更有系統。
   
   

3. 超過 1000 個元件庫：
   Relume 提供超過1000個設計元件，這些元件可以直接用在 Figma、Webflow 或 React 上，讓你快速組裝網站。
   
   

4. 跨團隊協作：
   它支援設計師、開發者和客戶之間的協作，讓整個設計流程更加順暢，並且方便分享和討論。

 

7.2 relume.io 評分：1/5

 

7.3 relume.io 價格

Starter 約 $20～$32/月，Pro 約 $200～$250/月，依方案和計費週期而異

 

7.4 適用人群：

• UI/UX 設計師

• 前端工程師

• 需要準備提案或做 wireframe 的設計團隊

• 需要快速討論網站架構與版面配置的 PM 或創業者

 

7.5 不建議使用 relume.io 的情況：

(1) 希望 AI 幫你直接做好整個網站的人：

Relume 是規劃工具， 不會直接幫你「生出一個可用網站」， 需要自己後續設計與開發。

 

(2) 完全不懂設計或缺乏開發資源的使用者：

它幫你加快流程沒錯， 但還是需要你會 Figma、 懂 Webflow 或前端整合， 不能當成一鍵架站工具。

 

(3) 想要超客製化功能或後端邏輯的網站：

Relume 聚焦在前期架構與視覺規劃， 後台功能還是得靠工程師或 其他工具來補足。

 

 

7.6 實作教學：如何使用 relume.io 的 AI 功能進行 網頁設計

進入 https://www.relume.io/ 並註冊帳號。

輸入相關資訊後他會生成網站地圖

 

線框圖

 

網站識別

 

7.7 小結：

Relume 是我這一輪 AI 工具實測中，最偏向「設計師專用」的一款。
它不會直接幫你生成整個網站，而是更聚焦在「幫你規劃網站結構、線框和設計系統」，
非常適合拿來做設計提案和團隊合作！

輸入簡單的描述，它就能快速產出網站架構（sitemap）、線框圖（wireframe）和品牌風格指引（style guide），
而且還能直接整合到 Figma、Webflow、React，讓整個設計流程更順暢、更高效率。

 

 

 

---

八. 為什麼 AI 工具無法取代 WordPress 或 Joomla？

我實際測試完之後，發現這些 AI 工具雖然在「快速生成網站原型」上真的很方便，但距離真正「取代」像 WordPress 或 Joomla 這種成熟的 CMS 平台，還有很大差距。

這些 AI 工具比較像是幫助我們快速「起草」的工具，可以大幅提升我們設計初期的速度，但在真正商業化、功能整合、長期維護這些面向上，還是遠遠比不上 WordPress 或 Joomla 這樣成熟的平台。

AI 是我們的工具，不是我們的替代者。真正的核心價值，還是來自設計師的經驗與判斷。

原因大概可以歸納成幾個重點：

 

1. 缺乏完整的內容管理功能（CMS）

WordPress 和 Joomla 都是標準的內容管理系統，適合做部落格、新聞網站、企業網站，甚至電商平台。
AI 工具像 Dora AI、v0.dev、Relume 都是以「產出設計」為主，根本沒有後台讓你去管理文章、分類、標籤、權限、使用者帳號……等網站基本功能。

 

2. 無法擴充大型網站需求

WordPress 和 Joomla 有龐大的外掛系統、開源社群，幾乎你想到的功能都有外掛可以安裝。
但 AI 工具目前頂多能做到產出靜態頁面或簡單互動，無法處理更複雜的功能整合，例如會員系統、購物車、API 串接、SEO 深度優化… 這些根本不是 AI 一句 prompt 可以搞定的。

 

3. 網站維護、權限、SEO、語言版本處理都還很陽春

AI 工具產出的網站雖然快速，但後續要做維護、權限分層、備份、伺服器管理、SEO設定、RWD 調整、語系切換等功能幾乎都要手動處理，而且彈性很低。
而像 WordPress / Joomla 則已經內建一整套成熟的解決方案，穩定性與擴充性都經得起考驗。

 

4. 商業用途仍需人工介入調整

AI 工具產出的網站通常版型簡單、結構死板，很難完全符合商業品牌的風格、行銷動線或 UI/UX 流程。

最終還是得靠網頁設計師去調整細節、強化視覺、優化體驗。

 

 

 

 

---

九. 為什麼 AI 工具無法取代 網頁設計師？

這題我自己也常常在思考，畢竟身為網頁設計師，每次看到 AI 工具推出新功能時，心裡都會閃過：「那我是不是很快就會被取代？」
但實際測試過這些工具之後，我很確定地說

—— AI 工具暫時還無法取代真正的網頁設計師。

原因有幾個我很有感的點：

 

1. AI 沒有「設計邏輯」和「美感判斷力」

AI 可以幫你生成一個「還過得去」的排版，但它看不懂品牌調性、不知道用戶習慣、更沒有視覺設計的邏輯。

例如色彩搭配、字距行距、視覺焦點、CTA（行動按鈕）擺哪裡最有效，這些都不是用 prompt 說「請幫我設計一個美美的網站」就會得到的。

這些需要的是經驗、審美、對使用者行為的理解——也就是設計師的價值所在。

 

2. AI 缺乏使用者導向的思考能力

一個好的網站不是只有畫面好看，還要考慮使用者怎麼使用這個網站、行動流程是否順暢、按鈕擺哪裡、手機上滑起來順不順等等。

這些「以人為本」的細節，AI 完全無法掌握。

AI 頂多產出一個靜態頁面，但沒辦法做「體驗設計」。

 

3. 客戶的需求永遠不是一個 prompt 可以解決的

我們接案、做企業網站時都知道，客戶給的 brief 永遠模糊、需求會一直改、流程需要溝通和協調。

AI 不會幫你跟客戶解釋設計邏輯、不會進行簡報、不會根據實際品牌狀況去調整畫面，這些都還是設計師要做的工作。

AI 只能執行，但它無法「溝通」。

 

4. 品牌策略與創造力，是 AI 學不來的

設計師最有價值的地方，在於我們能從品牌角度出發，幫助企業建立獨特風格，賦予網站「靈魂」。

AI 工具目前產出的網站，很像是設計模板的快速複製，缺乏創意、缺乏個性，很多看起來都很像，而且很快被看膩。

但真正的設計，是要「說故事」，是要「讓品牌被記住」，這點 AI 還做不到。

 

AI 工具很厲害，但它只是助手，不是主角。

AI 的確能幫助我們設計得更快、更有效率，特別是在草圖、元件、文案這些地方節省很多時間。
但設計的核心價值——理解人、創造美感、溝通品牌、解決問題——這些還是需要設計師來完成。

我們不該害怕被取代，而是應該學會怎麼用 AI 來強化我們的能力，成為更有競爭力的設計師。

 

 

 

 

 

---

十. lovable

2026.03.08 更新

Lovable 2.0 在 2026 年 2 月已改版定價，

Pro 方案起價為 $25/月，

Teams 方案起價 $30/月。

Pro 方案包含 100 個月度 credits 加上每日 5 個 bonus credits，

改為 credit 制計費。

 

10.1 什麼是 lovable?

Lovable 是一個蠻有趣的 AI 網頁應用開發工具，簡單說，它可以讓我們用聊天的方式跟 AI 說需求，然後它就會幫你生出對應的網頁畫面和程式碼。

整個開發過程變得很直覺、很快速，對新手或是要快速開發原型來說真的蠻方便的。

 

主要功能：

• 直接用自然語言開發：
  你只要打出你要什麼功能，AI 就幫你寫程式碼。

• 即時預覽：
  左邊是聊天視窗，右邊會即時顯示畫面變化。

• 支援前端主流技術：
  像是 React、TypeScript、Tailwind CSS，還有 shadcn UI 元件，建置工具則是用 Vite。

• 部署超簡單：
  一鍵上線，還能綁定自己的網域、版本控制也有做。

• 支援 GitHub 同步：
  可以把專案推上 GitHub 來做版本管理或編輯同步。

 

10.2 lovable 評分：4/5

扣分點在沒有辦法變成 Figma ，可以參考 四. v0.dev

 

10.3 lovable 價格

每月最低25美金

有免費方案

 

10.4 適用人群：

• 剛學程式的

• 想快速開發 MVP 的創業團隊

• 自學者、練習者

• 希望用 AI 來加速開發流程的人

• 或是你只是想快速弄個 demo 給老闆看 

 

10.5 不建議使用 lovable的情況：

(1) 需要很複雜的後端邏輯：

 

(2)要做手機 App（它只支援 Web）

 

(3) 專案指定要用 Angular 或 Next.js

 

(4)需要高度客製邏輯、企業等級的大型系統

 

(5) 你對程式碼有很嚴格的控制要求

 

10.6 lovable 優點

• 上手超快

• 可以直接看到成品，不用一直 build

• 對不熟前端的人很友善

• 免費開始用，有社群可以討論

 

10.7 我的看法

我覺得 Lovable 這類工具，最強的地方就是它可以大幅壓縮「從想法到畫面」的時間，特別適合早期開發階段，或是給客戶 demo 用。

如果不是要開發什麼超大型系統，而是想快速弄出可用的介面，甚至做給設計師、PM 參考，它真的可以幫很多忙。

雖然它不是萬能的，但絕對是一個很不錯的幫手。

如果你剛好有想做的小東西，或正在學寫網頁，可以試試看。

 

 

 

 

---

十一. Canva ai －版面設計我願稱它為最強

demo站：
https://bmi1.my.canva.site/

 

11.1 Canva AI 是什麼？

Canva AI 在2025 年 4 月 13 日 推出了 code for me 的新功能，讓 Canva 除了設計外也能用在網站原型製作及程式設計了。

 

11.2 主要功能與特色

Canva AI 是個設計領域的 AI 助手，但是他現在也能寫程式碼了嗎？

是的，Canva AI 現在具備簡單的程式碼產生能力。

可以請 AI：

• 協助設計網頁元件（例如按鈕、表單、卡片 UI）

• 撰寫與「設計內容」相關的程式（例如動畫效果）

但注意：Canva AI 並不等同於完整的開發平台，它無法像 v0.dev 建構整個 Web App、設定部署環境或管理 Git 專案。

也不能將程式碼匯出或做成Figma格式。

 

11.3 Canva AI 評分：3/5

無法匯出程式碼

 

11.3 Canva AI  價格

Canva Pro  $12.99/月，

Teams 方案從 $14.99/月起。

Canva 在 2024 年底有一波爭議性的漲價，

目前 Canva Business 方案是 $20/用戶/月

有免費方案

 

11.4 適用人群：

 

(1) 行銷人員 / 社群小編

想快速產出社群圖文、短影片、活動素材，不會用 Photoshop 沒關係，用 Canva 就能搞定。

 

(2) 簡報需求者（業務、主管、教育工作者）

只要輸入主題，Canva AI 就能自動幫你生成整份簡報，從封面到內容都搞定。

 

(3) 設計初學者 / 自媒體創作者

不會設計也能做出有質感的作品，還有 AI 幫你想文案、排版。

 

(4) 創業者 / PM 想快速畫原型

想呈現產品介面概念，可以用 Canva AI 做出視覺原型圖，不需請設計師也能快速迭代。

 

(5) 需要靈感、起手草稿的設計人

用 Canva AI 幫你起草初版，再進 Figma、Illustrator 做進一步優化。

 

11.5 不建議使用 Canva AI的情況：

雖然 Canva AI 功能豐富、上手簡單，但在以下這些情境中，可能就不太適合使用 Canva AI：

 

(1) 需要匯出完整程式碼的專案

Canva AI 雖然能產生一些 HTML/CSS/JS 的片段，但目前無法匯出完整專案結構，也不支援 GitHub 上傳或部署功能。

 

(2) 要開發具互動性的 Web 應用或 SPA

如果你的專案需要像表單送出、資料串接、頁面切換、使用者登入等互動邏輯，那 Canva AI 就不夠力，應該使用像 v0.dev、Lovable.dev、Replit 或傳統 IDE。

 

(3) 須串接 API、資料庫等後端邏輯

Canva AI 是設計導向工具，不支援建立後端服務，也不具備資料儲存或伺服器端處理能力。

 

(4) 對程式碼品質、結構有嚴格要求的開發團隊

Canva AI 的程式碼偏向原型概念用途，若需維護性高、可讀性好、可測試的專案結構，不建議倚賴其生成內容。

 

(5) 須與 CI/CD、自動化開發流程整合的團隊

Canva AI 不支援版本控制、專案分支管理、測試或持續整合工作流，無法應付需要 DevOps 流程的專案環境。

 

11.6  Canva AI優點

 

(1) 操作超簡單，人人都能上手

Canva 本來就主打「拖拉就會用」，AI 加進來之後更誇張，連不會設計、不會寫文案的人也可以做出不錯的成果，完全零技術門檻。

 

(2) 整合設計 + AI 一站搞定

從文案、圖像、影片、簡報到排版、動畫，Canva AI 全部都包，無需來回切換工具，整個工作流程超順。

 

(3) AI 協助速度快，靈感隨手來

輸入一個主題，它可以馬上幫你產出一份簡報草稿、社群貼文、或是一段影片腳本，對於靈感枯竭或趕時程的情況超有幫助。

 

(4) 不需要專業設計軟體或硬體

完全雲端，開瀏覽器就能用，不用學 Photoshop、不用跑 Figma，也不用裝軟體，對學生、小編、創作者來說非常親民。

 

(5) 內建模版與社群支持超多

Canva 原本就有超多免費設計模版，AI 功能是建立在這個基礎上做延伸，變得更聰明、更省時間。

 

11.7 我的看法

我認為 Canva AI 是一個非常適合「非技術型創作者」使用的工具，它把設計、寫文案、剪影片這些原本很吃技能的工作，用 AI 拉到一個「每個人都可以參與」的高度。

它最大的價值不是「取代設計師」，而是幫助一般人不用設計背景也能做出像樣的內容。

對行銷、社群、教育、簡報這類需求來說，它幾乎是神器等級。

但也不要期待它能做到像 v0.dev 或 VS Code 那種開發等級的東西，

它不是給工程師用來寫 App 的，而是給需要「設計感 + AI 輔助」的創作場景。

 

 

 

 

---

十二. AI 幫你寫網站程式？Cursor、Claude Code、Windsurf以及其他選手

2026.03.08 更新：

2025 到 2026 年間，

AI 程式開發工具的市場變化速度比 AI 架站工具還快。

除了本篇介紹的 Cursor、Claude、Windsurf 之外，

還有幾個目前很主流但這篇文章篇幅有限無法一一實測的工具，

這裡先簡單點名，讓大家知道它們的存在：

 

Bolt.new：

跟 Lovable 定位非常接近的 AI 全端開發工具，

同樣 $25/月的 Pro 方案，但採用 token 制計費，

支援多種框架（不只 React），

在全端原型開發的彈性上比 Lovable 稍高一些。

如果你試了 Lovable 覺得不夠用，Bolt.new 值得列入比較清單。

 

Replit Agent：

Replit 本身是老牌的線上 IDE，

它的 AI Agent 功能可以用對話方式從零建立整個應用程式，

從前端到後端到資料庫一條龍處理。

Core 方案 $15/月，適合想在瀏覽器裡完成所有事情、不想碰本地開發環境的人。

 

Claude Code：

這個在前面 已經提過，但再強調一次

它是 Anthropic 在 2025 年推出的終端機 AI 工具，

到 2026 年初搭配 Opus 4.6 已經被普遍認為是最強的 AI 程式助手之一。

跟 Cursor、Windsurf 形成目前 AI 開發工具的三大主力。

 

GitHub Copilot：

微軟旗下的老牌 AI 程式補全工具，$10/月的個人方案價格最低，

功能持續在追趕 Cursor 和 Windsurf，

但目前在代理式開發（Agent 模式）的能力上還有差距。

 

這些工具各有擅長的場景，沒有哪一個能通吃所有需求。

接下來我會針對自己實際測試過的三款 Cursor、Claude、Windsurf 做比較詳細的介紹。

除了能幫你設計網站版型的工具，現在也有不少 AI 工具是直接「幫你寫程式」的，

 

12.1. Cursor：AI 原生程式碼編輯器，開發者的主力工具

2026.03.08 更新：

Cursor 由 Anysphere 團隊開發，建構在 VS Code 之上，

但它不只是「VS Code 加裝 AI 外掛」那麼簡單，

整個編輯器的工作流程都是圍繞 AI 重新設計的。

2026 年 2 月推出的 2.5 版加入了長時間運行的代理（Agent）和自研的 Composer 1.5 模型，

讓它從「AI 輔助寫 code」正式跨入「代理式工程」的階段。

Cursor 支援多種前沿模型自由切換，

包括 GPT-5.2、Claude Sonnet 4.6、Gemini 3 Pro、Grok Code 等，

不再像早期只綁定單一模型。

它的 Composer 功能可以理解整個專案的脈絡，

做到跨多個檔案同時重構、改 bug、建立新功能。

Background Agent 可以在背景獨立跑任務，

你負責看大方向，AI 負責搬磚。

 

價格：

Cursor 在 2025 年中改為 credit 制計費，

Pro 方案 $20/月（含 $20 credit 額度），

超過額度會按模型的 API 費率另外計算。

也有 Ultra 方案（$200/月）給重度使用者，

Business 方案（$40/用戶/月）給團隊。

這個計費模式在社群中引起不少爭議，

有些開發者覺得實際花費比表面價格高，

使用前建議先搞清楚 credit 消耗機制。

 

適合：

前端、後端、全端工程師，

特別是每天都在寫 code、需要 AI 理解整個 codebase 的開發者。

 

不太適合：

只想偶爾用一下 AI 補 code 的輕度使用者（GitHub Copilot 可能更划算），

或是完全不碰程式碼的人。

 

我的評價：

Cursor 在 2026 年依然是 AI 程式編輯器裡的第一梯隊，

超過半數的 Fortune 500 企業都在用。

跟 Windsurf 相比，Cursor 的生態更成熟、使用者社群更大；

缺點是計費不夠透明，重度使用可能踩到帳單暴增的坑。

 

 

12.2. Claude：寫程式邏輯、改 bug、解釋程式都靠它

2026.03.08 更新：Claude 目前最新的版本是 4.6 系列，

包含 Opus 4.6（最強的推理能力）和 Sonnet 4.6（速度與能力的平衡款）。

舊版的 Claude 3.7 已經是很早以前的產品了。

Claude 本身不是 IDE，你沒辦法在裡面直接開專案、跑程式。

但它在「用對話釐清技術問題」這件事上，

目前是所有 AI 模型裡做得最好的之一。

你可以把一段程式碼丟進去，

它會幫你解釋邏輯、抓出潛在的 bug、建議更好的寫法。

更常見的用法是拿它來討論系統架構：

API 怎麼設計、資料庫結構怎麼規劃、微服務怎麼拆分，這些需要邏輯推理的問題，Claude 回答的品質很穩定。

另外一個值得關注的產品是 Claude Code，這是 Anthropic 在 2025 年推出的終端機 AI 工具，

可以直接在命令列裡對整個 codebase 下指令，讓 AI 幫你改 code、跑測試、做 Git 操作。

到 2026 年初，Claude Code 搭配 Opus 4.6 已經被普遍認為是目前最強的 AI coding 助手組合之一，

跟 Cursor、Windsurf 形成三足鼎立的態勢。

 

適合：

需要 AI 幫忙思考架構和邏輯的工程師、正在學程式的學生、需要技術顧問角色的 PM。

如果搭配 Claude Code 使用，也能直接拿來實作開發。

 

不太適合：

期待一個視覺化介面、按按鈕就能生成網站的人。

Claude 的強項是思考和推理，不是拖拉式設計。

 

我的評價：

如果你只用 Claude 的對話介面，它比較像是「最聰明的技術顧問」，

幫你想清楚再動手。

但搭配 Claude Code 之後，它就變成能直接實作的開發工具了，

戰力跟 Cursor 同一個等級。

建議兩個搭配使用：

用 Claude 對話想架構，用 Claude Code 或 Cursor 落地執行。

 

12.3. Windsurf：AI 原生的程式碼編輯器，寫 code 的新選擇

2026.03.08 更新

Windsurf 原本由 Codeium 團隊打造，

2025 年底被開發出自主 AI 工程師 Devin 的 Cognition AI 以約 2.5 億美元收購，

是目前 AI 程式編輯器領域中聲量最高的產品之一。

它的核心是一個叫 Cascade 的 AI 代理系統。

跟一般的程式碼補全工具不同，Cascade 能讀懂你整個專案的脈絡，

做到跨檔案的推理、自動重構、甚至直接在終端機執行指令。

介面基本上就是 VS Code 的操作邏輯，上手門檻很低，

但 AI 介入的程度比 Cursor 或 GitHub Copilot 更積極。

幾個值得注意的功能：

• Flow 模式：你和 AI 共享同一個工作狀態，你改一半的東西它可以接手繼續，不會斷掉上下文。
• Turbo 模式：讓 AI 自主跑終端指令，適合快速迭代，但需要信任它不會搞砸。
• 支援多種模型：GPT-5 系列、Claude Opus/Sonnet 4.6、Gemini 3 都能切換使用。
• 已擴展到 JetBrains 系列 IDE（IntelliJ、PyCharm、WebStorm 等），不只限於 VS Code 系。

適合：

前端、後端、全端工程師，特別是手上有中大型專案、需要 AI 理解整個 codebase 再給建議的開發者。

 

不太適合：

完全不碰程式碼的人。Windsurf 是給工程師用的 IDE，不是設計工具也不是資料分析平台。

 

我的評價：

Windsurf 被 Cognition 收購後，產品方向會不會大轉彎還不確定，

這是目前最大的觀望因素。

但單看工具本身的能力，

它在 2026 年初確實是 AI 程式編輯器裡很強的一個選項，

跟 Cursor 各有擅長，值得工程師試用比較。

 

12.4 跟 v0、Lovable、Canva AI 差在哪？

這三款（Cursor、Claude、Windsurf）比較偏「程式開發邏輯面」，而 v0、Lovable、Canva 則是偏向「前端 UI / 設計面」。

這些工具不是做圖的，但在工程思維、後端流程、系統設計這塊，是目前 AI 工具裡非常強的選擇。

 

如果你目的是實際開發網站、建 API、或整理專案邏輯，那你會發現這三款工具非常實用：

• 要實作，選 Cursor

• 要協助構思與邏輯推理，選 Claude

• 要用 AI 原生 IDE 寫 code，選 Windsurf

 

 

 

 

---

十三. 網頁設計師的 AI 副駕駛：Gemini 實戰應用

除了上述專門的網頁工具，身為網頁設計師，

你其實每天都在用的 Gemini 也是一個強大的設計夥伴。

在 2026 年的今天，Gemini 3 系列已經不再只是聊天機器人，

它具備了「Vibe Coding」（直覺開發）與強大的多模態理解能力。

 

13.1 如何用 Gemini 輔助網頁設計？

從草圖到代碼 (Sketch-to-Code)：

你可以在筆記本上隨手畫出網頁的排版，拍照傳給 Gemini。

它能識別你的手寫標籤（如：Hero section, Footer），

直接幫你寫出對應的 React 或 Tailwind CSS 代碼。

 

視覺風格顧問：

你可以問它：

「我要幫一個科技品牌設計網站，請推薦 3 組符合『極簡、高效、冷色調』的 Hex 色碼，

並搭配適合的 Google Fonts 字體建議。」

 

SEO 文案與 UX Writing：

網頁設計不只是圖，內容也重要。

Gemini 可以幫你針對不同的產品頁面生成具備 SEO 關鍵字的文案，

並優化按鈕（CTA）的引導文字，提升轉換率。

 

13.2 Gemini 的實作優勢

多樣化的格式輸出：

它可以輸出 SVG 程式碼（讓你直接貼進網頁）、完整的 HTML/CSS/JS 檔案，

甚至是幫你規畫 Figma 插件所需的 JSON 數據。

 

邏輯除錯：

如果你在 Webflow 或自寫程式碼時遇到響應式（RWD）跑掉的問題，

把代碼丟給它，

它能精準告訴你哪一行的 media query 寫錯了。

 

13.3 與通用型 AI 協作 Gemini 的價值在於靈活性

相比於 v0.dev 或 Lovable 這些有固定框架的工具，

Gemini 更像是一個全能的設計助理。

你可以隨時拋出靈感，讓它幫你處理瑣碎的技術細節，

而你只需要專注於最後的審美把關與品牌策略。

 

省錢小撇步： 

如果你只是要讓 AI 幫你檢查一段 CSS 代碼，

免費版就非常夠用；

但如果你需要它「看懂整個專案的資料夾結構」並給出重構建議，

訂閱付費版能獲得更高的處理額度與更精準的邏輯推演。

 

13.4 AI 工具比較：前端設計 vs 程式開發

 

相關文章：

程式設計 x AI：自己動手寫一個健康管理網頁！

網頁設計 新時代：如何使用 AI 設計網頁 圖片與影片

電商 網路開店：AI商品情境圖 及 AI模特兒 教學

LINE 官方帳號 行動官網 與 AI客服機器人 社群行銷 

如何使用全球熱門的 ChatGPT 提升行銷業績？

---

網頁設計　問與答：

SEO 及 廣告投放 問與答 https://des13.com/faq/seo.html

網站建置 報價相關　 https://des13.com/faq/quote.html

網站建置 技術相關　 https://des13.com/faq/webtech.html

購物網站 網路開店    https://des13.com/faq/e-commerce.html

B2B形象官網建置　  https://des13.com/faq/b2b.html

網站升級維護　 https://des13.com/faq/upgrade.html

---

推薦閱讀：omo跨境品牌電子商務購物網站 全後台模組化形象官網

簡易電子書下載：一頁式網頁設計電子書

如果您喜歡我們的文章，歡迎分享！也歡迎查看我們的其他文章。如果有任何疑問也歡迎加line和我們聯絡

全後台模組化形象官網，符合各式商業模式與需求，請參考：https://des13.com/service/rwd.html

Written by Ring
作者：益盛科技 專案經理
通過Google Ads-Measurement Assessment
15年 網站專案管理及人員管理實務經驗。 
具網站美編企劃繪製能力
具多媒體網頁設計與 RWD設計之實務經驗

標籤內 ====== -->