如何用 AI 設計一個好看的 App

想要 AI 做出好看的 App，別再只說「做得好看一點」，而是給它設計師會需要的東西：兩到三個你喜歡的參考案例、一個明確的設計方向，以及字型、配色和間距的具體規則。接著先做出一個畫面，調整到滿意，再讓 AI 把同一套系統套用到其他畫面。多數「AI 味」來自模糊的提示詞所產生的平庸答案；具體的輸入才會產生有個性的設計。

為什麼 AI 設計會看起來很制式

如果你跟 AI 說「一個現代、簡潔的 SaaS 儀表板」，它會給你所有儀表板的統計中間值：同樣的無襯線字型、紫到藍的漸層、帶柔和陰影的圓角卡片、圓圈裡的表情符號風格圖示，以及寫著「讓你的工作流程更簡單」的置中首屏。每一個單獨的選擇都沒有錯，問題在於它們沒有一個是「為你的產品」而選的。

好的設計主要是一連串決定。你的工作是做出那幾個能賦予 App 個性的關鍵決定，然後讓 AI 一致地處理其餘成千上萬的小細節。

步驟一：在下提示詞前先蒐集參考案例

花二十分鐘，蒐集兩到四個參考案例，也就是外觀適合你產品的 App 或網站。好的來源包括你的目標受眾已經在用的產品、設計作品集網站，以及相鄰領域公司的網站。

對每一個案例，用白話文寫下你喜歡的是什麼：

• 「留白很多，內容放在窄窄的欄位中，大數字上方有小小的灰色標籤。」
• 「細線分隔的密集表格，沒有卡片陰影，操作按鈕只用一種強調色。」
• 「大型襯線標題，溫暖的米白色背景，用攝影而不是插畫。」

接著把這些描述交給 AI，如果工具支援，也附上截圖。請借鑑案例的特質，而不是產品本身：整個複製另一家公司的版面、品牌或文案，不論在法律上還是在信譽上都有風險。

步驟二：選定設計方向並為它命名

設計方向是一段簡短的風格描述。它會成為 AI 每個決定的篩選標準。以下幾種方向很好用：

把它放進第一則提示詞，並說明 App 是給誰用的：

幫一間獨立瑜伽教室做一個預約 App。設計方向：沉穩簡約，像印刷出來的教室課表。溫暖的米白色背景、近黑色文字，按鈕和選取狀態只用一種低調的鼠尾草綠強調色。標題用襯線字體，內文用乾淨的無襯線字體。間距充裕，不要漸層、不要陰影、不要表情符號。行動裝置優先。

步驟三：設定規則——字型、配色與間距

這三項決定了大部分的視覺品質。把它們講得明確，是你能做的最大改善。

字型

• 一到兩種字型。 一種標題字體和一種內文字體，或同一個字族的多種字重。
• 字級系統。 只用幾個固定的字級，例如 14、16、20、28 和 40 px，而不是讓每個元件各自決定。
• 易讀的內文。 網頁上約 16 px，行高約 1.5，長篇文字的每行約 60 至 75 個字元。
• 用字重和大小區分層級，而不是用顏色。 標題更粗、更大；次要文字更小，並用較柔和的灰色。

配色

• 以中性色為主。 背景、表面、邊框和文字灰階承擔大部分的工作。
• 一種強調色用於操作與選取狀態。只有在它有明確用途時才加第二種。
• 語意色只用於成功、警告與錯誤等狀態。
• 對比度。 WCAG 2 要求一般內文的對比比至少 4.5:1，大字則為 3:1。白底上的淺灰文字常常不合格，可以請 AI 幫你檢查。
• 深色模式如果需要，請刻意設計，而不是直接反轉色彩。

間距與版面

• 間距系統，例如 4、8、12、16、24、32、48、64 px。所有元素都對齊到這套數值。
• 對齊。 邊緣要對齊；內容放在網格上，或放在一致的最大寬度欄位中。
• 鄰近原則。 相關的東西靠近，不相關的東西拉開距離。光是這一條規則，就能解決大部分雜亂的畫面。
• 少用容器。 不是所有內容都需要卡片。邊框、分隔線和留白通常能更安靜地把內容分組。

一則一次設定好整套系統的提示詞：

在做更多畫面之前，先建立一套小型設計系統，並到處使用：字級系統為 14/16/20/28/40 px，內文行高 1.5，間距系統為 4/8/12/16/24/32/48 px，中性色從接近白到接近黑，只用一種強調色（#3F6B5A）作為主要操作，紅色只用於錯誤。按鈕、輸入框與卡片應共用同一個圓角半徑。請確認所有文字都符合 WCAG AA 對比標準。

如果你使用懂程式碼的建置工具，這通常會變成設計權杖（design tokens），例如 CSS 變數或 Tailwind 主題，之後的修改就能集中在一個地方完成。

步驟四：先把一個畫面做好

不要一次生成十二個畫面，然後再一一修正。挑出使用者最常看到的畫面，通常是儀表板或主要列表，並反覆調整到滿意。接著：

以儀表板作為所有其他頁面的參考：相同的標頭、間距、字級、按鈕樣式與表格樣式。把設定頁和預約頁更新為與之一致。

一個完成的參考畫面，比任何形容詞都更能傳達你的品味。

步驟五：用具體、小幅的要求反覆調整

對 AI 的回饋，就像對初階設計師的回饋：要具體、一次只談一個區域，並且清楚說明要保留什麼。

一定要同時說明要保留什麼，例如「所有路由、文案與功能都維持不變」，這樣視覺調整才不會悄悄移除功能。每次修改後，先在手機尺寸的畫面上檢查，再進行下一個要求。關於小螢幕上什麼樣才算好，請參考如何建置適合行動裝置的網頁 App。

步驟六：讓好設計與普通設計拉開差距的細節

結構正確之後，這些小細節會讓 App 感覺更完整：

• 空白狀態。 新使用者在沒有資料時看到的畫面：一段簡短說明加上一個清楚的操作，而不是一張空白表格。
• 載入狀態。 使用與內容形狀相符的骨架畫面，而不是到處都是轉圈圈。
• 錯誤狀態。 在造成錯誤的欄位旁，用白話文說明問題。
• 每個可互動元素都要有懸停、聚焦與按下的狀態。 聚焦框對使用鍵盤的人很重要。
• 真實內容。 把「Lorem ipsum」和「John Doe」換成實際的文字與資料；預留位置的內容會掩蓋版面問題。
• 使用同一套圖示，維持一兩種尺寸，並保持一致的線寬。
• 有目的的圖片。 真實的產品、地點或人物照片，勝過通用的圖庫素材。若使用圖庫或生成的圖片，請保持一致的風格。
• 文案。 簡短、具體的標籤（「預約課程」，而不是「送出」）對感受到的品質，影響不亞於任何配色選擇。

常見錯誤

• 一則提示詞就重新設計所有東西。 大幅重寫會引入退步。請一頁一頁來。
• 強調色太多。 如果每樣東西都被強調，就等於沒有東西被強調。
• 所有內容都置中。 置中文字除了標題之外都很難掃讀，大部分內容應靠左對齊。
• 又小又低對比的文字。 在大螢幕上看起來很精緻，但在陽光下的手機上卻看不清楚。
• 用裝飾掩蓋層級。 漸層和陰影無法修正最重要的操作不夠明顯的畫面。
• 忽略首頁。 對許多產品來說，它是第一印象；請參考如何建置能帶來轉換的著陸頁。

若想了解設計以外的更多提示詞模式，請閱讀如何為 AI 應用程式建置工具撰寫提示詞。如果你的工作本身就是作品，例如設計或攝影作品集，如何建置作品集網站會更深入介紹呈現方式。

用 Mythex 進行設計

在 Mythex 中，你在對話中描述設計，在即時預覽中看到結果，並在下一次修改前檢查手機尺寸的畫面。文件中有一些簡短的範例：設計與 UI 提示詞說明如何指出要改什麼、要保留什麼；重新設計你的 UI則說明如何一次更新一個頁面，而不失去功能。Mythex 也能在對話中搜尋圖庫照片或生成圖片，例如首屏主圖、背景或分享圖，並在你要求時放進 App 中。如果某次調整出錯，請還原到該次調整之前的檢查點。如果你比較想從現成的設計開始再做調整，可以瀏覽範本。

常見問題