生 UI:從形容詞到規格書
畀 AI 提 UI 需求,形容詞是許願,規格是指令。同一個落地頁需求,三檔提示詞能差出三個檔次的產出;這一節教你把「好看」寫成一份 AI 沒法跑偏的規格書。
「做個好看的落地頁」交出去,AI 會還你一個紫色漸變、居中堆料的大路貨。這口鍋 AI 只背一半:它沒拿到信息,只能輸出訓練數據的平均值。Prompt 工程篇講過「信息給一分,它答一分」,生 UI 是這條規律最直觀的展台。主色寫死、間距鎖網格、字重限兩級、禁止項列清單,產出立刻換一個檔次。
規格書裏最容易漏的是文字本身。介面十有八九是字,字出問題,配色再對也白搭。好消息是排印早就有現成的硬指標,About Face 4 第 17 章直接給了數:對比度、字體、大小寫、字號,四條全能翻譯成提示詞。
還有米萊和薩諾那句判詞,About Face 4 原樣收進了教材:不必要的差異是一致設計的大敵。差不多一樣的東西,就做成一樣。寫進提示詞,它就是最值錢的禁止項。
左邊是你嘴裏的人話,右邊是 AI 需要的規格。點一行翻譯一行,翻完整段複製走。
規格書不用背,六個條款各挑一塊就拼出來了。哪組選「不提」,哪部分就交回給 AI 賭運氣,預覽裏看得一清二楚。
邊句約束對 AI 生成 UI 嘅效果提升最大?
| 條款類型 | 作用 | 模板話術 |
|---|---|---|
| 正向規格 | 把能量化的都定死,AI 沒得猜 | 「主色 #DB2777,間距走 8pt 網格,圓角統一 12px,字重只用 800 和 600」 |
| 負向約束 | 把 AI 最愛跑偏的路提前堵死 | 「禁止漸變、禁止 emoji 圖標、禁止超過一種陰影」 |
| 參考錨點 | 用雙方都見過的產品當座標 | 「信息密度參考 Linear,留白參考 Notion」;別説「大廠風格」,沒有指向等於沒説 |
| 統一性條款 | 把「差不多一樣」提前統成一樣 | 「差不多一樣的元素做成一樣:全站只允許一個主色、一套圓角、一種陰影,沒有理由的差異一律刪掉」 |
第四類就是米萊和薩諾那條「不必要的差異是一致設計的大敵」的提示詞版。AI 特別愛在細節上加戲:這裏 10px 圓角、那裏 12px,兩種灰、三種陰影。統一性條款把加戲的口子提前封死。
形容詞是許願,規格是指令:主色、間距、字重、禁止項,寫成能逐條驗證的條款。
負向約束性價比最高:「禁止漸變、禁止 emoji 圖標、陰影不超過一種」,三句話砍掉大半 AI 味。
排印有硬數字可抄:對比 80%、正文無襯綫、英文禁全大寫、字號 10px 起,寫進提示詞就是四行驗收標準。
下次生 UI,用積木機拼一段規格書發給 AI,跟上一次的「隨口一句」對比產出。
內容來源:小山學堂「審美工程」專題原創;部分設計原則整理自《About Face 4:交互設計精髓》第 17 章。