作為一位完全沒有網頁開發經驗的桌面應用工程師，我在這次 PWA 平台的開發中，嘗試讓 AI 擔任主力設計師的角色。與其一開始就投入所有頁面的開發，我選擇先聚焦在核心畫面，優先確立整體風格與邏輯架構，等方向穩定後，再逐步擴展其他功能與介面。

這篇文章將分享我如何與 AI 溝通 UI 設計風格與實作細節，並透過不斷調整與驗證，建立出屬於自己的平台介面。

開發流程：以驗證為核心的迭代設計

由於我沒有網頁前端開發經驗，整個開發流程基本上圍繞以下節奏展開：

與 AI 討論 → 請 AI 實作或修改 → 閱讀修改說明 → 審核程式碼與結構 → 實際操作驗證 → 版本控管

每次請 AI 修改後，我都會透過 Git 做版本管理。一旦結果偏離預期，也能快速回退。這讓我即使不懂太多底層語法，也能在安全範圍內自由實驗。

我從側邊欄與其中一個主要分頁的介面開始，請 AI 協助設計介面和圖像資源（如左上角的圖示、右下角的角色插圖），透過這些具體元素先定調整體風格，再逐步延伸到其他區塊。

沒有前端基礎，怎麼審核程式碼？

老實說，我的 UI 程式碼審核方式並不嚴謹，主要依靠以下邏輯判斷：

• 整體架構邏輯是否清楚？
• AI 是否清楚說明哪些檔案被新增或修改？內容是否合理？
• 新產生的檔案只要說明合理就接受；原有檔案的修改需留意是否影響現有功能
• 實際操作驗證功能是否如預期運作

換句話說，我審核的重點其實放在「整體架構」與「實際結果」，而不是逐行閱讀程式碼。雖然不比資深前端細緻，但在 AI 協作情境下，我覺得這樣的方式效率還算高，AI 的發揮算是穩定，如果後面發現問題，只要架構不失控，也都可以再請 AI 重新調整。

與 AI 合作設計 UI，有哪些不同？

傳統的開發流程大多是：

規格制定 → UI/UX 設計 → 討論 → 開發 → 發現問題 → 再討論 → 調整設計 → 修改開發 → 完成

而與 AI 的協作模式則是：

規格制定 → 設計與開發同步進行 → 即時討論 → 即時修改 → 持續優化 → 完成

這樣的流程讓我能更即時調整設計方向，也大幅降低了設計師、前端工程師間來回溝通的時間成本。

• 這種 AI 協作方式特別適合「個人開發者」或「前期 MVP 開發」
• 初始風格定調後，可以讓 AI 延續做發揮，我只負責審核和引導
• 缺點是需要自己對整體風格有一定把關與判斷，不然容易零碎、不一致

寫提示詞的技巧：指引方向但保留空間

AI 可以沒有創意，也可以非常有創意，關鍵在於提示詞的寫法。

如果我只說：

設計一個可愛風格、小孩喜歡的介面。

那麼 AI 給出的風格可能千篇一律，甚至充滿「AI 味」。

但如果我這樣寫提示：

請參考這張圖片的風格，並以符合我目前專案整體樣式的方式，設計出一個可愛風格、小孩喜歡的 介面。

AI 輸出的結果也會更貼近我想要的方向。

簡單原則是：

• 方向要給清楚（例如風格、用途、參考來源）
• 細節交給 AI 發揮
• 不滿意就請它重來一次或是微調

注意細節：結構與命名決定一切

這段期間我學到最深的一件事就是：

命名與結構如果沒處理好，AI 也救不了你。

我曾經犯過的錯包括：

• 命名不夠明確，導致不同元件樣式互相影響
• 即使明確指定檔案名稱，AI 還是可能修改錯誤檔案
• React 專案中的 CSS 全域污染問題

我曾經因為某個 UI 元件一直壞掉，卡關了好幾天。問 AI 也查不出原因，最後才發現是 CSS 命名衝突導致樣式被污染。這件事也提醒我，不應過度依賴 AI，有時直接用關鍵字 Google 搜尋反而更快。

現在我特別注意幾件事：

• 每個元件的 CSS class 命名都要獨立且具語意性
• 保持元件結構與介面設計邏輯一致
• 目錄層級清晰，便於 AI 理解與維護

只要這些基礎搭好，後續 UI 改動就能放心交給 AI 處理。

與 AI 溝通 UI 的幾個重點建議

最後，我整理幾個這次與 AI 協作 UI 設計時的重點：

• 提示詞給明確方向，但保留一定的創作空間
• 仔細閱讀 AI 的修改說明，確認新增/變動內容是否合理
• 時時注意整體架構是否被破壞
• 特別注意 CSS 命名，避免樣式污染與衝突

到目前為止，我平台上所有 UI 元件都是 AI 幫我完成的。雖然我仍不太會手寫 UI，也不是介面設計師，但透過 AI 不斷嘗試與驗證，也能打造出符合自己需求的介面風格。

這就是我從一位完全不懂前端的開發者，如何透過 AI 協作打造出一個 能用、可調整、風格一致的 PWA 應用介面 的經驗。

這種方式不只節省了大量設計與開發的溝通成本，也讓我能以自己的節奏反覆嘗試、微調出一個真正「自己滿意」的產品原型。

敬請期待下一篇《用 AI 設計 Logo 與命名：實作與思考》