如何用 AI 設計外觀出色的應用程式

要讓 AI 做出外觀出色的應用程式，就不要只說「幫我設計得好看一點」，而是給它設計師會想要的資料：兩三個你喜歡的參考、一個明確的設計方向，以及字體、顏色和間距的具體規則。然後先做一個畫面，把它調到滿意，再要求 AI 把同一套系統套用到其他畫面。大多數「AI 味」都來自含糊的提示，得到平均化的答案；具體的輸入才會得到有個性的設計。

為什麼 AI 的設計看起來很普通

如果你只要求「一個現代、簡潔的 SaaS 儀表板」，AI 會給你它見過的所有儀表板的統計中間值：同一種無襯線字體、紫藍色漸變、帶柔和陰影的圓角卡片、放在圓圈裡的圖示，以及一個寫著「你的工作流程，簡化了」的置中主視覺。每一項單獨來看都沒有錯，問題是這些選擇都不是「為你的產品而選」的。

好的設計主要是一連串決定。你的工作，是做出那少數幾個能賦予應用程式個性的決定，然後讓 AI 一致地處理其餘數以千計的小決定。

第一步：提示前先收集參考

花二十分鐘，收集兩至四個參考：外觀適合你產品的應用程式或網站。好的來源包括你的目標用戶已經在用的產品、設計圖庫，以及相鄰行業的公司網站。

對每個參考，用平實的文字寫下你喜歡的是什麼：

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

然後把這些描述交給 AI，如果你的工具接受圖片，也可以附上截圖。學習的是品質，而不是產品本身：整體照搬別家公司的版面、品牌或文案，既有法律風險，也會令你失去可信度。

第二步：選定並命名設計方向

設計方向是對整體感覺的簡短描述，讓 AI 在每個決定上都有一個過濾標準。以下幾種效果不錯：

把它放在第一個提示裡，並說明應用程式是給誰用的：

為一間獨立瑜伽室建構預約應用程式。設計方向：冷靜簡約，像印刷的課程時間表。暖白色背景，近黑色文字，按鈕和已選取狀態用一種柔和的鼠尾草綠強調色。標題用襯線字體，內文用簡潔的無襯線字體。間距寬鬆，不要漸變，不要陰影，不要表情符號。以手機優先。

第三步：訂立規則：字體、顏色與間距

這三項決定了大部分的視覺質素。把它們說清楚，是你能做的最大改善。

字體

• 一至兩種字體。 一個標題字體加一個內文字體，或一個字族的多個字重。
• 一套字級刻度。 只用少數幾個尺寸，並且一致地使用，例如 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 提供回饋，就像向初級設計師提供回饋：具體、一次只談一個範圍，並清楚說明要保留什麼。

每次都要說明保留什麼，例如「所有路由、文案和功能維持不變」，這樣視覺調整就不會悄悄移除功能。在要求下一項修改之前，請先在手機大小的螢幕上檢查每次改動；關於小螢幕上什麼才算好，請參閱如何建構適合手機的網頁應用程式。

第六步：區分好與普通的細節

當結構正確之後，以下這些小細節會令應用程式感覺完成：

• 空白狀態。 新用戶在沒有資料時看到的畫面：一段簡短的說明，加一個清晰的操作，而不是空白的表格。
• 載入狀態。 形狀與內容相近的骨架畫面，而不是到處都是旋轉的載入圖示。
• 錯誤狀態。 在引致錯誤的欄位旁，用淺白的文字說明問題。
• 滑鼠懸停、焦點和按下狀態。 每個可互動元素都要有，焦點環對於使用鍵盤的用戶尤其重要。
• 真實內容。 把「Lorem ipsum」和「John Doe」換成貼近現實的文字和資料；佔位內容會掩蓋版面問題。
• 來自同一套的圖示，只用一兩種尺寸，線條粗幼保持一致。
• 有目的的圖片。 你的產品、地點或人物的真實相片，勝過一般的圖庫照片。如果使用圖庫或生成的圖片，請保持風格一致。
• 文案。 簡短、具體的標籤（「預約課堂」而不是「提交」），對於感受到的質素，作用不亞於任何顏色選擇。

常見錯誤

• 一次過重新設計所有東西。 大規模改寫會引入退步。請逐頁進行。
• 強調色太多。 如果每樣東西都突出，就等於沒有東西突出。
• 所有東西都置中。 置中的文字除了標題之外都難以掃視，大部分內容應靠左對齊。
• 細小、低對比的文字。 在大螢幕上看起來優雅，在陽光下的手機上卻無法閱讀。
• 用裝飾代替層次。 漸變和陰影無法修好一個最重要的操作不夠明顯的畫面。
• 忽略著陸頁。 對很多產品來說，它是第一印象；請參閱如何建構能促成轉換的著陸頁。

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

在 Mythex 中設計

在 Mythex 中，你在對話中描述設計，在即時預覽中看到效果，並在進行下一項修改之前檢查手機大小的畫面框。文件中有一些簡短的做法：設計與 UI 提示說明如何說明要修改什麼和保留什麼，重新設計你的 UI則說明如何逐頁更新而不丟失功能。Mythex 也可以在對話中搜尋圖庫照片，或生成一張圖片，例如主視覺、背景或分享圖，並在你要求時放進應用程式。如果某次修改出了問題，請還原到該次修改之前的檢查點。如果你寧願從現有設計開始再作調整，可以瀏覽範本。

常見問題