一句話總結 TL;DR
AI 味的根源是缺乏上下文、只能吐出全網平均值，違反「符合預期、主次分明、克制、量身打造」四原則。Impeccable 把設計師的流程（產品訪談→現實隱喻→避坑規則→雙層審查）寫成 skill，成品明顯更貼合產品，但耗時與 token 大增，適合用在對外門面頁。
什麼是 AI 味
- AI 網頁長相三年換三套：紫色霓虹漸層→米白雜誌風→粗黑邊貼紙 00:00
- 換了長相仍一眼看得出是 AI 00:00
- 官方範例 AI 味明顯較淡：同樣全由 AI 產生 00:31
- 門檻消失導致網站高度同質化：一段 prompt 兩三分鐘就生出網頁 00:31
- 官方整理 67 條 AI 常犯設計毛病 01:04
- 毛病清單每年都在變：模型迭代後會換上新套路 01:39
- 與其追清單，不如問違反哪些原則 01:39
好設計原則一、二：符合預期與主次分明
- 好設計＝認知成本降到最低：一眼抓重點、操作都符合預期 02:11
- 符合預期：外觀就該說明用法：Don Norman 的核心觀念 02:11
- Affordance：看物品外觀就知道怎麼用，如杯耳、門把 02:44
- AI 愛放點不動的膠囊標籤：長得像按鈕卻毫無反應 03:16
- AI 愛放假的呼吸綠燈：看似連線狀態，實為純裝飾 03:16
- 主次分明：三秒看出這頁重點：對比要大到一眼可辨 03:50
- 一頁只能有一個主角：其他元素都得替它讓路 04:21
- AI 愛排三張等大功能卡：看不出產品最強在哪 04:21
好設計原則三、四：克制與量身打造
- 克制：每個元素都要有存在理由 04:54
- Less, but better：Dieter Rams，看能拿掉多少而非塞多少 04:54
- 說不出用途的設計就刪掉 05:27
- AI 滿版漸層、卡片、小灰字：全拔掉資訊一點也沒少 05:27
- 量身打造：先弄懂是什麼、給誰用：Massimo Vignelli 的主張 05:59
- 藥袋與洋芋片包裝長相相反：使用者與場合天差地別 05:59
- AI 替醫療網站放旋轉 3D 人體：焦慮病患只想找急診電話 06:34
AI 為何一直踩雷：一般 AI 的網站
- AI 只拿到兩三行 prompt：缺上下文只能吐出全網平均值 07:06
- 安裝很簡單：把 GitHub 連結丟給 Claude Code 或 Codex 07:06
- 測試案例：監控服務首頁：網站半夜掛掉就打電話叫醒你 07:40
- 一般 AI 不到兩分鐘生完：大標、手機圖、三卡片、定價表 07:40
- 乍看不差，手機也沒跑版 08:11
- 遮住產品名換成誰都成立：照公版堆出，毫無記憶點 08:11
Impeccable 流程一：產品訪談與設計命題
- 走設計師流程，不急著敲代碼：先事實、再方向、後設計 08:44
- 第一步是產品訪談：問有哪些功能、沒有哪些、使用者任務 08:44
- 也問哪些設計絕對不能做 09:16
- 訪談完全不問顏色與字體偏好：沒搞懂問題就選配色毫無意義 09:16
- 訪談結果寫成 PRODUCT.md：後續視覺與程式都依此設計 09:16
- 作者會在 agents.md 引用它：避免 agent 改前端時忘記參考 09:48
- 先抓產品要帶給人的感受：本案核心體驗是「守夜」 09:48
Impeccable 流程二：隨機隱喻、避坑與雙層審查
- 從現實系統找視覺基調：火警總機、夜班觀察表、燈塔日誌 10:21
- 擲骰隨機指定主提案：防 AI 滑回最安全的平均答案 10:21
- 抽到燈塔不必做成燈塔網站：但必須認真論證能否傳達價值 10:52
- 每個提案寫清三件事：第一眼長相、設計理由、風險 10:52
- 作者選了融合方向：深色開發者主控台，出事才亮警報 11:26
- 動手前先讀 craft-floor：把 AI 壞習慣寫成禁令的避坑手冊 11:26
- 第一層審查看「做對了嗎」：出事時幾秒內看懂哪個服務掛了 11:59
- 第二層審查照避坑清單抓漏：巢狀卡片、公版標籤、無意義漸層 12:33
成品對比、成本與設計理念
- 兩版乍看相似：都是深色底，大標題也差不多 13:06
- Impeccable 把產品機制跑給你看：亮紅燈、跳出撥號警報 13:06
- 遮掉名字仍只屬於這個產品 13:06
- 缺點：第一屏資訊量過大：到處是極小英文字，讀來費力 13:38
- 最大價值是設計 context 文件：避免後續拼出風格縫合怪 13:38
- 耗時從 2 分鐘拉到一小時多：token 消耗也大增 14:46
- 沒有黑科技，只是流程化：把一流設計師的做法變成步驟 15:19
- 避坑與審查＝對抗 AI 平庸：LLM 沒人管就端出公版 15:53
金句與關鍵數據 Quotes & Numbers
- 「好的設計不用教，你看到就會用。」——作者談 Affordance 02:44
- 「Less, but better」——Dieter Rams 04:54
- 67 條——Impeccable 官方整理的 AI 常見設計毛病數 01:04
- 「它就只是把過去幾十年一流設計師在做的事給流程化了而已」——作者總評 15:19
總結與行動建議 Takeaways
- 先寫產品事實再談視覺：功能、使用者任務、禁忌先定案
- 用四原則自我檢查：符合預期、主次分明、克制、量身打造
- 說不出用途的元素直接刪
- 對外門面才跑 Impeccable：內部小工具用一般 AI 就夠
- 在 agents.md 引用 PRODUCT.md：改動都參照同一份文件
- 把領域知識寫成 skill：用有約束力的規則管住 AI