AI 怎麼幫你設計網站？從架構到上線、一次跑十種設計的完整流程

找外包做一個公司網站，最磨人的往往不是預算，是來回。光首頁風格就能改上三輪，一個月過去還是沒對到味。自己跳下來用 AI 做，又是另一種卡：對著 ChatGPT 打「幫我做一個科技公司官網」，出來的不是版型老套，就是改一個地方整頁走鐘，根本不知道從哪裡接手。

這一年我用 AI 重做了不少網站，包括浪花科技自己這個站，慢慢磨出一套能把設計「變可控」的流程。核心觀念很簡單：別讓 AI 一步到位生一個網站，而是把它拆成「先定架構文案、再一次跑十種設計挑一個、把首頁做到定稿、最後才往下長子頁」這幾關，每一關都有明確的產出和驗收點。這篇就把整套流程攤開講，包括我當初一次跑出十種首頁設計怎麼選（截圖都放在文中），還有一個讓成品質感直接跳級的關鍵：幫 AI 掛上專門的 UI/UX 設計技能包。

為什麼「直接叫 AI 做個網站」幾乎都會失敗

不是 AI 不夠強，是我們給它的任務一開始就錯了。把常見的卡點拆開，會看到四個結構性的問題：

• 沒先定架構就跳設計。連有幾頁、每頁要放什麼、文案講什麼都還沒想清楚，就要 AI 出畫面，等於請設計師在沒有需求單的情況下開工，做出來當然不對。
• 一次只看一個版本，根本無從取捨。AI 給你一個首頁，你只能說「不喜歡」，卻講不出要往哪個方向調。沒有對照組，品味就無法收斂。
• 版型醜，是因為沒給它設計知識。通用模型對「什麼叫好看」只有平均值的概念。沒掛上設計規範，它就只會給你最安全、最像範本的版型。
• 首頁還沒定調就做子頁，風格必散。每一頁都重新發揮，字級、間距、配色各做各的，最後拼起來像四個外包做的。

這四點，正好對應到下面流程的四道關卡。AI 真正擅長的是執行，把判斷和方向留給你，它就能變成一個很猛的設計助手。這跟我們在〈為什麼你的 Vibe Coding 總是產出無法維護的架構〉裡講的同一個道理：AI 放大的是人的判斷力，不是取代它。

全流程總覽：六關，從一份文件到上線

先給你整條路的全貌，後面每一關再展開：

這套流程不綁特定工具，Claude、Antigravity、Codex 都能跑，差別只在你慣用哪一個。三者的定位差異，我們在〈Antigravity、Claude Code、Codex 三大 AI Coding Agent 完整比較〉裡有完整討論。

第一關：先讓 AI 生成一份規格 md

所有事情的起點，是一份 Markdown 規格文件，不是畫面。我會先讓 AI 把整個網站一次規劃成一份 md：有哪些頁面、每頁的區塊順序、每個區塊要放的文案、需要哪些功能（表單、會員、金流、串接）。一份文件就把「這個網站到底是什麼」講清楚。

為什麼是 md 而不是直接做？因為文字最好改。架構不對、文案要修，在一份純文字裡調整只要幾秒，比改畫面快太多；而且這份 md 之後會變成餵給 agent 的施工藍圖，一次到位地告訴它要蓋什麼。如果你想更系統地規劃資訊架構，我們在〈AI 網站規劃與架構指南〉裡有更深入的方法。要讓 AI 寫出像樣的文案而不是空話，這份 md 也是把品牌語氣、目標客群、賣點先講清楚的地方。

第二關：一次跑出十種首頁設計，再來選

這一關是整套流程最爽、也最關鍵的一步。拿著第一關的 md，讓 agent 用同一個品牌、同一份文案，只換設計語言，一口氣生成十種不同風格的首頁。重點是同文案、不同設計，這樣你比較的是「設計方向」，而不是被不同文案干擾。下面這張就是當初做浪花科技時實際跑出來的十版。

十版各有鮮明性格：Linear 極簡、海洋暗夜 Aurora、Bento Grid、Tech Brutalist、Glass 海洋玻璃、Terminal / IDE、Editorial 文藝、Electric Cyber、Swiss / Bauhaus、信任型現代風。同樣一句標題，放進不同設計語言，氣質天差地遠。下面這兩張可以感受一下落差，一個是乾淨的極簡風，一個是雜誌感的文藝風：

並排比較的好處是，你不用憑空想像，直接用眼睛挑。看不順的當場淘汰，順眼的留下來再比細節，品味很快就收斂出方向。如果手上已經有喜歡的參考網站，也可以直接丟給 agent，請它往那個調性靠，省下更多來回。最後浪花科技選的是 Terminal / IDE 風，因為它最能傳達「我們是寫程式的」這件事。想看完整成品怎麼落地，可以逛一下我們的作品案例。

第三關：選定方向後，把首頁做到定稿

挑中一版，先別急著做其他頁。把所有注意力放在首頁，和 AI 來回討論微調：這個區塊的間距太擠、這個按鈕的顏色再深一點、hero 的標題想換個說法、滾動到這裡想加個動效。首頁是整個網站的門面，也是後面所有頁面的範本，值得花時間打磨到你真的滿意為止。

這個階段就是不斷對話、不斷看結果。AI 改一版，你看一眼給回饋，它再改一版，像在跟一個不會累的設計師結對工作。改到首頁定稿，等於整個網站的視覺基調也定下來了。

第四關：用首頁定調全站的設計語言

首頁滿意之後，關鍵動作是把它「固定成一套規則」。請 AI 從定稿的首頁整理出一份設計語言：主色與輔色、字體與各級字級、間距尺度、圓角陰影、按鈕與卡片的樣式。有了這套共用規範（不論是寫成 CSS 變數、Tailwind 設定還是設計 token），後面每一頁都引用同一套，風格自然一致。

這一步是避免「整站像四個人做的」最有效的保險。少了它，子頁很容易各自飄移；有了它，AI 開新頁時就有明確的依據。我們自己這個站的深淺主題切換、語意化配色，就是靠這層設計語言撐起來的。

第五關：往下長子頁與功能

基調定了，剩下就是把工作量鋪開。套用同一套設計語言，一頁一頁開發內頁：關於我們、服務項目、案例、聯絡表單。這時候重點從「設計」轉向「功能」，因為視覺已經有範本，AI 主要在處理的是表單驗證、資料串接、互動邏輯這些事。

因為每頁都站在同一套設計語言上，子頁開發會比首頁快很多，你也能把心力放在功能正不正確、流程順不順。需要串接後端或第三方服務時，可以參考我們在〈AI 驅動的網站開發實戰〉裡的做法。

讓 AI 設計更漂亮的關鍵：掛上 UI/UX 設計技能包

前面說過，AI 設計醜，常常是因為它腦袋裡只有「平均值」的審美。解法是給它一套專業的設計知識，也就是現在很流行的 Agent Skills（技能包）。把設計 skill 掛上去，等於請了一位資深設計師在旁邊隨時校正，產出的質感會明顯不一樣。這套技能包機制怎麼運作，我們在〈把同事煉化成技能包〉裡完整拆解過。

下面這幾個都是公開、可以直接掛的設計相關資源，本文查證於 2026 年六月十八日：

• anthropics/skills（官方技能庫）：Anthropic 官方公開的技能庫，裡面的 frontend-design 技能會教 AI 現代前端的設計模式（React、Tailwind、無障礙、響應式），讓產出的 UI 看起來像資深設計師做的；另有 web-artifacts-builder 可產出免建置的單檔 HTML 原型。
• shadcn/ui MCP 與 shadcn/ui Skills：2026 年 React 加 Tailwind 最主流的元件庫。掛上它的 MCP 後，AI 能直接用自然語言（例如「加一個登入表單」）取用官方元件，避免亂掰元件名稱或用過時寫法。
• jiji262/claude-design-skill：一個可攜的 Claude 設計技能包，把 Claude 變成 HTML 設計專家，能做簡報、landing page、原型、動畫、海報，改編自 Claude.ai 內部的設計 system prompt。
• VoltAgent/awesome-agent-skills 與 travisvn/awesome-claude-skills：兩份社群精選清單，收錄上千個技能包，相容 Claude Code、Codex、Gemini CLI、Cursor，要找特定領域的設計或前端 skill 從這裡挖最快。

實務上我的搭配是：用官方 frontend-design 打底審美，接上 shadcn/ui 的 MCP 確保元件正確又現代，需要特定風格時再加一個對應的設計 skill。三者疊起來，AI 產出的版面就從「能看」進化到「有設計感」。要提醒的是，技能包本質上是可執行的指令集，掛來路不明的 skill 等於在環境裡跑別人的程式碼，務必只用可信來源並先看過內容。

這套流程的注意事項與限制

方法好用，但有幾件事得先有心理準備：

• AI 給方向，品味還是你的。十種設計再多，最後拍板的是人。AI 負責快速產出選項，但什麼最適合你的品牌，機器替不了你決定。
• 設計 skill 要稽核來源。如上所述，第三方技能包可能藏風險，導入前一定要看過內容、只用信得過的來源。
• 好看不等於好用。視覺定稿後，無障礙（鍵盤操作、對比度）、響應式、載入效能這些都要另外驗，別讓漂亮的首頁在手機上跑版或載很慢。
• 工具與技能包會變。本文提到的 skill 與工具在 2026 年都還在快速演進，連結與用法請以各自的官方頁面為準。

資料來源與延伸連結

本文相關工具與技能包查證於 2026 年六月十八日，內容變動頻繁，使用前請以官方頁面為準：

• anthropics/skills：Agent Skills 官方公開庫
• shadcn/ui：MCP Server 文件
• shadcn/ui：Skills 文件
• jiji262/claude-design-skill：Claude 設計技能包
• VoltAgent/awesome-agent-skills：跨工具技能包精選清單
• travisvn/awesome-claude-skills：Claude Skills 精選清單

延伸閱讀

• AI 網站規劃與架構指南
• 把同事「煉化」成技能包：用 Claude、Antigravity、Codex 留住老鳥的經驗
• AI 做的簡報總是很醜？改用 Codex 把每頁當 16:9 資訊圖生成
• AI 與網頁設計的未來

如果你想要的是一個從架構、設計到功能都用這套 AI 流程做出來的網站，又不想自己跟工具纏鬥，這正是我們在做的事。看看我們的網站設計服務，或直接跟浪花科技聊聊你的專案。