How To Actually Design With AI

Cover Image

原始來源與檔名：2026-07-14T092102+0800-How To Actually Design With AI.md

SOURCE | 資訊源評估

準確性: 高 - 作者針對 AI 設計領域提出了具體且可操作的流程（三種工作方法），而非僅是空泛的理念。
易理解性: 高 - 文章結構清晰，循序漸進地從核心觀念過渡到實用的設計資源（如 Mobbin, Lummi 等）。
閱讀策略建議: 建議重點提取文章中提到的三大設計策略與資源列表，作為未來使用 AI 輔助 UI/UX 設計時的標準作業程序 (SOP)。

NAPKIN | 餐巾纸

餐巾纸公式

卓越的 AI 設計 = (人類品味 + 明確意圖 + 參考圖庫) × AI的執行力

AI 懂排版和色彩理論，但不懂「品味 (Taste)」。品味決定了產品是否有靈魂。

一句话

用 AI 設計不是讓 AI 幫你憑空想出一切，而是把你提煉出的「意義」和收集來的「品味」，轉化為指令讓 AI 高效執行。

餐巾纸草图

+----------------+      +----------------+      +----------------+
| 人類: 定義意義 |      | 人類: 收集靈感 |      | AI: 模塊化執行 |
| (為誰/為何/風格) | ---> | (拆解參考圖庫)  | ---> | (逐個元件建立)  |
+----------------+      +----------------+      +----------------+
        |                       |                       |
      品味 (Taste)           品味 (Taste)             速度 (Speed)

NAPKIN | 餐巾紙

餐巾紙公式

N/A

一句話

N/A

餐巾紙草圖

N/A

ROUND 1: SKELETON | 骨架掃描

“這本書在說什麼”

核心問題: 人們誤以為「用 AI 設計」就是讓 AI 代勞一切，結果產出千篇一律的無靈魂設計。那麼，到底該如何正確運用 AI 來做產品設計？
核心答案: 創意、方向與品味必須來自人類，AI 僅作為「執行工具」。透過賦予明確的設計意圖、提供參考圖庫，並將設計拆解為小元件讓 AI 逐步建構，才能產出真正優秀的設計。
論證結構: 演繹與實用型。先破除迷思，點出 AI 缺乏「品味」的盲點，接著提出三種不同深度與速度的實踐方法，最後附上工具與流程。

章節骨架

破除迷思: AI 懂規則，但沒有「品味」。
方法一 (使用 Design Skill): 依賴預先打包好的設計指令，適合講求速度的專案。
方法二 (與 AI 共創元件): 從定義意義出發，收集靈感，拆解結構，逐一讓 AI 建立，適合需要獨特性的專案。
方法三 (靈感板): 融合前兩者，將參考截圖餵給 AI 讓其融合風格。
輔助工具與結語: SVG、影片生成與圖庫工具的應用，並重申人類決策的不可替代性。

ROUND 2: DISSECTION | 血肉解剖

“憑什麼這麼說”

論證鏈

AI 無法理解何謂原創與意義 (缺乏品味) --> 若只下達「幫我設計一個網站」的指令，只會得到平庸結果 --> 因此必須將設計過程解構 --> 人類負責賦予意義、定義受眾並收集 Mobbin 等參考資料 --> 再將任務拆解為 Navigation/Hero 等小元件交由 AI 實作 --> 最終產出具備人類品味與 AI 執行效率的高品質設計

關鍵證據

AI 的能力邊界: AI 了解間距、排版、色彩理論與層級結構，但它不知道什麼叫「原創」或「真正的好看」。
降維打擊的 Prompt 策略: 作者強調不要對 AI 說「幫我建一個完整網站」，而是說「根據這種風格，為我創建一個 Hero section」。AI 處理小任務的表現遠優於大任務。
三維度的實踐路徑: 提供了從快速 (Method 1: Design Skills) 到精緻 (Method 2: Component-by-Component)，再到平衡 (Method 3: Inspiration Board) 的三套可驗證流程。

隱形假設與邊界條件

隱形假設:
- 使用者本身必須具備基礎的審美能力 (能夠分辨 Mobbin 上設計的好壞)。
- 使用者願意花時間定義產品的「意義」，而非急於求成。
邊界條件:
- 此方法論主要適用於介面設計 (UI)、登陸頁面與海報，對於高度複雜的 3D 建模或工業設計可能不完全適用。
- 高度依賴於強大的前端生成工具 (如 Cursor, Codex)。

ROUND 3: SOUL | 靈魂提取

“還能怎麼用”

作者盲點: 雖然強調了「品味」的重要性，但並未深入探討如果一個非設計師使用者本身就「沒有品味」，該如何有效利用這些靈感庫。
知識連接: 與軟體工程的「微服務架構 (Microservices)」概念相通；將龐大的設計需求拆解為獨立的、可重用的元件 (Component-by-Component)，能大幅提高 AI 生成的穩定度。
行動觸發: 在下次啟動 Cursor 進行全端開發前，先在 Mobbin 或 Pinterest 建立一個 Moodboard (情緒板)，並寫下產品的 4 個核心定義 (為誰/解決什麼/感覺/代表什麼)。

留白提問 (Guided Reflection)

當市面上所有的產品都開始使用相同的 AI Design Skills (如 Emil Kowalski 的模板) 時，「好設計」的標準是否會被重新定義？
如果 AI 總有一天學會了「品味」，人類設計師最後剩下的護城河會是什麼？

跨域映射

在 電影製作，這叫 導演與攝影指導的關係 (人類負責場面調度與意境，AI 負責運鏡與打光)
在 烹飪藝術，這叫 主廚與副手的關係 (主廚定菜單與試味，AI 負責備料與切菜)

DEEP READ | 精讀指引 (Must-Read Segments)

[!IMPORTANT] 學習的本質需要「認知阻力」。請親自回到原文閱讀以下核心段落，感受原始論述的阻力，不要只依賴 AI 的總結。

Start With Meaning: 點出了設計的核心靈魂，設計不是畫圖，而是解決問題的視覺化表達。這段問題清單是所有專案啟動前必問的核心。
Build Component by Component: 揭示了與 AI 協作的關鍵秘訣：任務切割。這對使用 LLM 進行任何形式的工程任務都有啟發。

How To Actually Design With AI (Architectural Deep Dive)

前言/背景

隨著 AI 在程式碼生成領域的突破，許多人誤以為 AI 也能無痛接管 UI/UX 設計。本文旨在破除「讓 AI 代勞一切」的迷思，指出 AI 的強項在於「執行」而非「品味」。作者提出了一套結合人類審美與 AI 執行力的結構化設計流程，幫助開發者與設計師在確保產品靈魂的前提下，大幅提升設計效率。

章節詳細總結

1. 核心認知：AI 懂規則，但不懂品味

設計一直是 AI 難以完全匹敵人類的領域。

AI 的能力邊界：AI 完美理解間距 (Spacing)、字體排印 (Typography)、色彩理論與視覺層級等「規則」。
AI 的缺陷：AI 缺乏真正的創造力與「品味 (Taste)」。它不知道什麼感覺是原創的、有意義的。
架構師視角：在人機協作的系統中，人類必須負責提供「意圖 (Intent)」、「方向」與「創意」，而將 AI 視為高效率的渲染/執行引擎。

2. 方法一：套用預設的 Design Skills (快速產出)

適用於時間緊迫或小型專案。

作法：引入已封裝好優秀設計提示詞的 Skills (如 Emil Kowalski 的 UI skills, Impeccable 等)，給予 AI 基礎上下文，讓其快速生成。
優缺點：產出具備一定水準，能避免低級的排版錯誤 (slop)，但結果容易與其他 AI 生成的網站雷同，缺乏獨特性。

3. 方法二：與 AI 共同建構 (Component-by-Component)

這是一種更具意圖性 (Intentional) 的高階流程，能產出真正與眾不同的產品。

3.1 賦予意義 (Start With Meaning)

設計 UI 之前，必須先定義基礎：

這個產品為誰服務？解決什麼問題？應該傳遞什麼感覺 (Minimal, Playful, Premium 等)？
實踐技巧：不要讓 AI 幫你設計，而是反向操作，讓 AI 提出問題引導你思考這些產品定位。

3.2 收集靈感 (Collect Inspiration)

建立個人的參考圖庫 (Reference Library)。

利用 Mobbin, Cosmos, Awwwards 等平台收集真實產品介面。
深度洞察：不要只覺得「這好看」，要問「為什麼好看？」是因為排版、間距還是互動方式？並依據 Navigation, Heroes, Pricing 等模組將靈感分類。這也是培養「品味」的過程。

3.3 結構映射與模組化建構 (Map the Structure & Build Component by Component)

結構定義：明確列出頁面所需的模組 (如：Navigation, Hero, Features, CTA 等)，並定義每個模組的內容 (如 Hero 需要 Headline, Description, CTA, Visual)。
模組化 Prompting：這是與 AI 協作的關鍵。絕對不要對 AI 說「幫我建一個完整網站」，而是將任務拆解，例如：「根據這張參考圖的風格，並適配我的品牌規範，幫我創建一個 Hero section」。AI 在處理這類小範圍任務時的準確度極高，同時讓開發者保有絕對控制權。

4. 方法三：靈感板融合 (Inspiration Board)

這是一種介於方法一與方法二之間的平衡策略。

作法：從 Mobbin 或 Awwwards 收集一組參考截圖，然後在 Prompt 中指示 AI：「結合這些參考資料的風格與方向，為我的產品進行設計，但不要直接抄襲。」
此方法能快速為 AI 注入超越預設模型的「品味參數」，產生高品質且略帶客製化的結果。

總結與結論

品味是唯一的護城河：最好的設計結果不會來自更複雜的 Prompt，而是來自人類設計師（或架構師）更好的「品味」。
微服務化設計流程：與軟體工程類似，不要試圖用單一龐大的指令完成全域設計，應採用模組化 (Component-by-Component) 的方式，逐一擊破，這能最大化 AI 的產出品質。
意圖驅動執行：AI 不應取代思考。專案的靈魂（為誰而做、為何而做、感覺如何）必須由人類定義，AI 僅負責縮短從「意圖」到「像素」的執行路徑。