AI 幫我做的網站怎麼那麼醜？給新手的 UI/UX 設計與改版指南

最近在我的 AI 技術交流社群裡，有位朋友問了一個很有趣的問題： 「我用 AI 做網站，後端和資料庫都差不多了，但前端一直很醜，也沒有設計靈感，不知道怎麼跟 AI 說。」

這件事其實非常常見。以前做網站最難的是寫程式。現在有了 ChatGPT、Claude Code、Cursor，很多人沒有完整的程式背景，也有機會做出能操作的網站。

結果卻遇到另一個問題：網站是做出來了，但怎麼跟想像中的差那麼多？

於是我們開始對 AI 說「再好看一點」「再有科技感一點」「我想要更專業」。AI 改了好幾次，畫面卻不一定比較好：

這篇文章想從這次社群討論出發，整理 UI、UX、設計參考、設計規則與元件庫到底是什麼，以及如果你沒有設計經驗，該怎麼和 AI 合作，一步一步把網站改好。

一、能用不等於好用

假設你想做一個活動報名網站，你對 AI 說：

幫我做一個活動報名網站，要有活動介紹、報名表單，還要能顯示活動時間。

過一會兒，AI 幫你完成了。有活動名稱、有時間、有表單，按鈕也點得下去。功能好像都沒問題。但打開畫面，可能是這樣：上面一個很大的標題，下面塞滿活動文字，所有按鈕都是同一種顏色，每個區塊都擠在一起，手機打開後文字變得很難讀。

這個網站有完成你的需求嗎？有。它好看嗎？不一定。它好操作嗎？也不一定。

所以第一個要理解的觀念是：功能完成、視覺好看、使用方便，是三件相關但不同的事情。

這也是為什麼 AI 已經很會寫程式，UI/UX 設計仍然重要。

二、UI 跟 UX 差在哪？

第一次接觸網站設計，常會看到兩個縮寫：UI 和 UX。它們常常一起出現，但關注的事情不同。

UI：看得到的介面

UI 是 User Interface，使用者介面。就是網站裡你看得到、可以操作的東西：按鈕長什麼樣子、用什麼字體、背景是什麼顏色、表單和圖片怎麼排列、區塊之間留多少空間。

UX：用起來的感受

UX 是 User Experience，使用者體驗。它關心的不只是畫面，而是整個使用過程：進入網站後找得到報名按鈕嗎？填錯 Email 時，網站會告訴你哪裡有問題嗎？按下送出之後，你知道有沒有成功嗎？用手機操作會不會一直點錯？

用餐廳來比喻：UI 是菜單、桌椅與裝潢；UX 是你從進門、找座位、點餐到結帳的整體感受。

一家餐廳也可能裝潢普通，卻讓客人覺得方便舒服。

好看的網站不一定好用；好用的網站，也不代表視覺不重要。 我們要做的是讓兩者互相配合。

三、為什麼總是不對？

為什麼 AI 做出來的網站，常常不符合期待？我覺得一個很常見的原因是：很多人請 AI 做網站的時候，只告訴它「需要什麼功能」，沒有告訴它「希望呈現什麼感覺」。

「我要一個會員系統。」「我要一個報名頁面。」這些都是功能需求。但如果沒有補充其他資訊，AI 就得自己決定很多細節：這個網站走可愛還是商務風格？主要使用者是學生還是企業客戶？首頁先介紹品牌，還是直接讓人報名？

當你沒有提供這些資訊，AI 會用它認為常見、合理的版型。這不代表它做不好，而是它不知道你真正想要什麼。

「幫我做得好看一點」其實很模糊。喜歡簡約的人覺得留白多、文字少就是好看；喜歡炫麗動畫的人覺得有光影、有互動才叫漂亮。兩個人都說自己要「好看的網站」，期待卻完全不同。

換成實際的對話，差別會更明顯：

所以與其一直說「漂亮一點」，不如練習描述：

「我覺得現在的畫面哪裡不好？我希望它變成什麼樣子？」

這個改變非常重要。

四、方法一：先找參考

社群討論中有朋友提到一個很實用的方法：看到喜歡的網站，把網址交給 AI，讓它協助研究那個網站的設計方式。這比單純叫 AI「做一個很酷的網站」，更容易對齊期待。

但我想補充一個觀念：參考網站，不是把整個網站原封不動複製過來，而是學它的設計方法。

你可以這樣跟 AI 說：

我喜歡這個網站的排版方式。請分析它的資訊層級、留白、配色、卡片設計和按鈕位置，再提供一個適合我活動報名網站的原創設計方向。

AI 打不開網站時

有些網站會阻擋自動化瀏覽，或需要登入才能看。所以提供網址之後，最好先確認 AI 是否真的讀到內容。讀不到就自己截圖，並說清楚：「我喜歡這張圖的排版，但不要直接複製內容。我想保留它的清爽感和明確的報名按鈕。」

去哪裡找參考？

沒有靈感時，可以先看看 Awwwards、Refero 和 Framer 模板市集。不需要一次研究幾十個，先找兩三個你真的喜歡的就好。

很多時候，一個網站讓你覺得「好看」，其實是因為它「好找」。第一次來的人不會從頭讀到尾，而是在畫面上跳著找自己要的東西：

重點不是看到「這個好漂亮」，而是問自己：它到底哪個地方讓我覺得好看？ 是字體、顏色、排版，還是因為畫面不擁擠？當你能說出原因，就已經在練習設計判斷了。

五、方法二：先定規則

社群裡也有人說，他會先和 AI 討論 Design System，再把這套規則套用到網站。Design System 中文通常稱為設計系統。名字很專業，但新手可以先把它想成：

幫整個網站制定一套共同的設計規則。

假設首頁的按鈕是藍色，活動頁的按鈕變綠色，會員頁又變紫色，字體大小和圓角也都不一樣。每個畫面單獨看不一定難看，放在同一個網站就缺乏一致感。

你可以先制定這樣的簡單規則：

其中最容易被忽略的是字級。好的設計規則通常不會一個個挑字的大小，而是從內文開始，每一級乘上同一個倍數：

你可以對 AI 說：

在開始修改頁面之前，先幫我建立一份簡單的 Design System，包含顏色、字體、間距、卡片和按鈕樣式。之後新增頁面都要延續這套設計。

完整的設計系統還有更多內容，但新手先掌握這些，就很有幫助。

六、方法三：用元件庫

社群裡另一個問題是：「什麼是元件庫？」

做網站需要按鈕、輸入框、日期選擇器、選單、彈出視窗。全部從零開始當然可以，但很多東西早就有人做好，並整理成可以重複使用的形式。這些東西叫作元件（Component）。你可以把它想成樂高積木：有人已經做好輪子、窗戶、車身，你不需要每次都從製造塑膠開始。

元件庫就是把這些積木整理在一起。常被提到的有三個：

shadcn/ui：提供可加入專案並自行修改的元件，如按鈕、輸入框、對話視窗，適合 React 等相容技術的專案。
Reka UI：給 Vue 用的無預設樣式基礎元件，重視鍵盤操作與輔助使用。
React Bits：偏向文字動畫、互動背景這類動態效果。

不同工具支援的技術不一樣，所以不能直接混用：

還有一個提醒：不是看到很酷的元件，就全部加進網站。 每個地方都在閃爍、旋轉、跳動，不一定比較好看，有時反而讓使用者不知道該看哪裡。

七、方法四：先做原型

以前軟體開發常會先用 Figma 等工具畫設計稿，再交給工程師實作。現在 AI 能幫的事更多了，但「先看畫面，再決定要不要正式做」依然很有用。

不要一開始就讓 AI 寫完整套系統，可以先說：

我要做一個活動報名頁面，請先產生可以預覽的畫面原型，不需要串接真實資料庫，也不要先做登入功能。

這時候可以先確認幾件事：標題夠不夠清楚？日期和地點容不容易看到？報名按鈕位置合理嗎？手機畫面會不會太擠？如果這些還沒想清楚就直接做完整功能，後面修改的成本會增加。

一次比較多個版本

另一個很實用的方法，是讓 AI 一次提出幾種明確不同的方向，例如簡約專業、活潑社群、帶少量科技感動畫。先比較，再選自己喜歡的。初期只要比較重要的首頁區塊就可以，不用要求 AI 一次把三套完整網站做完。

八、方法五：局部修改

我覺得這可能是新手最值得練習的能力之一。

看到 AI 做好的網站不滿意，最直覺的說法是「整個幫我重新設計」。結果 AI 大改一輪，原本喜歡的地方被改掉，功能甚至可能受影響。

不要只告訴 AI 你不喜歡，而是告訴它你想修改哪個區域、原因是什麼。

例如：

首頁最上面的標題太大，導致活動時間被推到畫面下方。請縮小標題並調整間距，其他區塊先不要修改。

如果工具支援截圖或圈選，就更方便了。社群討論中也有人建議用原型圖、圈選和多版本比較來溝通。有些視覺問題真的很難單用文字說清楚。你可能不知道什麼叫「視覺層級」，但看得出哪個標題太大；你可能不知道 CSS 的間距怎麼寫，但看得出兩張卡片貼太近。

不需要一開始就懂全部設計術語，也能練習給出明確的修改意見。

九、好看也要好懂

有些網站第一眼很漂亮，有動畫、文字會飛進來、背景有炫麗特效，但你想找個按鈕卻不知道在哪裡。這就有點本末倒置了。

以活動報名網站來說，使用者最需要的是：活動是什麼？什麼時候？在哪裡？要不要付費？怎麼報名？如果這些被一堆動畫和裝飾擋住，畫面再酷也會影響體驗。

我會建議初學者先做好五件事。

1. 重要資訊要明顯

不要讓人找很久才發現想看的內容。有一個很簡單的檢查方法：把眼睛瞇起來看畫面。模糊之後還認得出來的，才是真正突出的地方。

2. 要有適當留白

不是每個地方都要塞滿文字與圖片。留白不是浪費空間，它負責告訴讀者「哪些東西是一組」。但留白也不是越多越好。

3. 文字要清楚

不要只挑漂亮的字體，卻讓文字和背景顏色太接近。AI 很喜歡用淺灰色字營造質感，但淺到一定程度就讀不到了。

4. 要考慮手機

電腦版漂亮，手機版不一定正常。特別是按鈕：滑鼠可以點得很準，手指不行。

5. 操作之後要有回應

按下報名之後，使用者應該知道是否正在送出、是否成功，或哪個欄位要修改。沒有回應的按鈕，不只是體驗差，還可能造成真正的資料問題。

這些細節加起來，才是完整的使用體驗。

十、實作一個報名頁

前面都是觀念，最後整理成一個可以操作的流程。假設你完全不會設計，今天想做一個活動報名頁面，我會這樣做：

第一步，先說目的。 不要只說「幫我做一個活動網站」，而是講清楚活動是什麼、使用者是誰、網站最重要的目的是什麼，以及目前先做原型。

第二步，提供設計方向。 說明想要簡約專業但不像企業內部系統，請 AI 先提出兩種不同方向，先不要寫完整程式。

第三步，建立基本設計規則。 選好方向後，請 AI 建立一份簡單的 Design System，之後整個網站都延續。

第四步，產生可預覽的畫面。 先完成活動介紹、活動資訊與報名區塊，不要增加沒討論過的功能，並能檢查桌面版與手機版。

第五步，針對畫面提出具體意見。 不需要一次改全部。例如：「主標題很好，但報名按鈕不夠明顯，請改用強調色，其餘維持原樣。」這時候你已經不只是叫 AI 隨機產生畫面，而是在一步一步參與設計。

第六步，確認功能與使用體驗。 視覺方向確定，再處理表單欄位、資料儲存、成功提示與錯誤處理。最後自己操作一次：用手機打開，假裝第一次進來，從看活動介紹一路操作到報名完成。如果只是畫面原型、沒有真的串接資料，也要清楚標示，不能讓使用者以為已經正式報名。

到這裡，才算真正把視覺與功能結合起來。

十一、動畫要不要做？

討論中也有人提到 GSAP 這類網頁動畫工具。GSAP 是一套 JavaScript 動畫工具，可以做捲動時內容逐漸出現、點擊時平滑的狀態變化、文字或圖片依序進場等效果。

但我不建議新手一開始就把時間花在動畫上。動畫更適合用來強化內容或互動，而不是取代該清楚呈現的資訊。

好的例子是：使用者按下送出後，按鈕短暫顯示載入狀態，這是有實際用途的互動回饋。反過來，如果使用者只想看活動日期，卻要等十秒動畫結束才能讀，那就不太合理了。

另外也要考慮動畫效能，以及不喜歡大量動態效果的使用者。我的建議是：先讓網站清楚、好操作，再考慮適當增加動畫。

十二、規格要多詳細？

這次討論還出現一個延伸問題。有人認為專案開始前就該把規格寫清楚，讓 AI 不容易做錯方向；也有人提到規格寫太細，後面需求一直改，反而增加調整成本。我覺得兩邊都有道理。

對初學者來說，與其一開始寫幾十頁規格，不如先抓住兩件事：哪些事現在一定要確定？哪些可以做出第一版之後再調整？

這很接近 MVP（Minimum Viable Product，最小可行產品）的思考：先做出夠小、能確認方向的版本，再透過實際使用與回饋決定下一步。當然，MVP 不等於隨便做，也不代表功能可以壞掉，而是避免一開始就投入大量時間，完成使用者可能根本不需要的東西。

十三、真正要練的能力

回頭看這次討論，我覺得最值得分享的不是大家推薦了多少 UI 工具，而是有人從一個很單純的問題開始：「我的網站很醜，但是我不知道怎麼辦。」

接著大家慢慢拆出不同的方法：找參考、讓 AI 分析設計、建立統一的風格、使用元件庫、先做原型、圈選畫面逐步修改，以及在正式實作前先釐清網站要解決什麼問題。

這些聽起來沒有什麼驚人的技術，但我覺得很重要。因為當 AI 讓做網站的門檻降低，新的困難會慢慢浮現：

這也是 AI 時代很值得學習的能力。你不需要因此成為專業設計師，但可以從一個簡單的地方開始：不要只問 AI 能不能做出網站，而是開始思考，使用者為什麼願意使用這個網站。

最後總結

如果你也正在用 AI 做網站，卻一直覺得畫面不好看，先記住這七件事：

先確認網站的目的與使用者，不要只列功能。
找幾個設計參考，說清楚自己喜歡的地方。
建立簡單的設計規則，讓整個網站保持一致。
善用適合自己技術環境的元件庫，不用什麼都從零做。
先做畫面原型，再逐步處理完整功能。
修改時明確指出哪裡不好，以及希望怎麼改。
最後一定要自己操作，確認網站不只好看，也真的好用。

以前要花很多時間學程式，才能做出第一個網站。現在有了 AI，更多人可以把想法變成作品。而在這個過程中，有一件事很值得記住：

延伸資源

設計靈感：Awwwards（網頁設計作品參考）、Refero（產品介面設計參考）、Framer 模板市集（網站模板與版型）

介面元件：shadcn/ui（可自行修改的 UI 元件）、Reka UI（Vue 的無樣式基礎元件）、React Bits（React 動畫與互動元件）

動畫工具：GSAP（JavaScript 網頁動畫工具）

本文整理：謝上智 Sun

社群討論參與與觀念交流：菜雞、Andy.C、Pod042-A、姜鈞行、Noct、Lorelei，以及其他參與交流的朋友

本文起源於 2026/10/8 的 AI 技術交流社群討論，針對 AI 製作網站時常見的 UI/UX 問題，重新整理成適合初學者的白話版本，並非逐字引用。文中的活動報名網站是教學示例，也加入了我對 UI/UX、AI 協作與開發流程的理解，不代表所有參與者對全文每一項描述皆有共同立場。