AI 在多個領域已接近人類能力，但設計一直是 AI 較難突破的領域之一。不過，我認為很多人對「用 AI 設計」的意義有些誤解。
在這篇文章中，我根據 Leon Lin（@LexnLin）的貼文「How To Actually Design With AI」，整理了用 AI 進行設計的實用方法，並以繁體中文呈現。
在文章最後，我會提供一個可用於 Claude 建立高品質設計的設計系統套件。
你可以在文章底部取得。
先牢記的前提
「用 AI 設計」並不是把所有事情都交給 AI。想法、方向、直覺與創意，最終還是來自於你自己。把 AI 想成是「將這些想法具體化（執行）」的工具，會更容易理解。
整體流程包含以下 3 個步驟：
- 自己發展想法
- 收集靈感
- 將你的想法轉換成提示詞，讓 AI 來創作
你可以使用任何工具或環境，例如 Cursor、Codex 或 Claude。核心在於「將你的想法轉換成指令」。
AI 非常擅長執行，但它還不具備真正的創造力。它理解「設計規則」，例如留白、字體排印、色彩理論和層級結構。然而，它無法理解什麼是「真正好的」、「原創的」或「有意義的」——換句話說，就是 品味。
這是最大的差距。目前你無法賦予 AI 真正的品味，但你可以透過假設它存在來繞過這個限制。
方法 1：使用設計技能
這是最快速的方法。當你時間不多，或只是要製作小東西時，依賴預先準備好的「設計技能」會很有效。
例如：
- Impeccable (impeccable.style
- Emil Kowalski 的 UI 技能（GitHub: emilkowalski/skills）
- Skills.sh
- TasteSkill (tasteskill.dev
流程非常簡單：
- 加入設計技能
- 提供 AI 背景脈絡
- 發送幾個提示詞，讓它建立網站、應用程式或海報
- 修正明顯的問題
- 發布
結果通常「還不錯」。它們可能看起來與其他 AI 生成的設計相似，但使用高品質的技能可以避免最糟糕的失敗和「AI 感」。這是許多人實際使用的方法。
方法 2：自己用 AI 設計
如果你想創造出「真正與眾不同」的東西，就需要更進一步。你希望使用者觸碰到你的產品時，能感受到它是「經過深思熟慮的」——為此，需要一個更有意識的流程。
無論是行動應用程式、桌面應用程式、網站、登陸頁面、儀表板還是海報，你首先需要一個明確的方向。如果你不知道自己想做什麼，AI 也無法替你找到。
從「意義」開始
首先，定義基礎。試著回答這些問題：
- 這是為誰做的？
- 它解決了什麼問題？
- 它應該給人什麼感覺？
- 它體現了什麼？
UI 反映了產品的「意義」。把這些寫下來。你也可以在這裡使用 AI，但訣竅是讓它 向你提問，而不是用它來設計。
例如，讓 AI 問你：
- 這個產品是關於什麼的？
- 目標使用者是誰？
- 你想傳達什麼樣的情感？
- 品牌氛圍應該是什麼？
- 適合什麼顏色和字型？
- 極簡 / 活潑 / 高級 / 技術感 / 實驗性——哪個方向？
收集靈感
方向確定後，開始收集參考資料。一個強大的來源是 Mobbin，它包含各種類別的實際產品畫面。
這裡的重點不只是看看然後覺得「這個很好看」。問自己 為什麼它好看。
- 是佈局嗎？
- 留白？
- 字體排印？
- 結構？
- 互動？
把你喜歡的儲存下來，並整理到像這樣的資料夾：
- 導航
- 主視覺區
- 定價
- 卡片
- 行動裝置畫面
- 儀表板
- 動畫
- 字體排印
花時間這樣建立自己的參考資料庫，就是培養「品味」的方式。
其他有用的來源包括 Pinterest、Cosmos、Awwwards、Webflow Templates、Craftwork、Rebrand Gallery、Component Gallery、Savee 和 Lummi。
注意：避免完全複製他人的設計。重要的是整合多個想法，並將其提升為適合你產品的東西。
規劃結構
接下來，定義你實際需要建構的內容。對於網站，可能是導航、主視覺區、功能介紹、定價、推薦、CTA 和頁尾。
對於應用程式，可能是引導流程、首頁、搜尋、個人檔案、設定、核心流程和空狀態。
每個區塊都需要明確的內容。對於主視覺區，你需要標題、描述、CTA 和視覺元素。AI 可以協助文案，但「清晰度」最終還是來自於你。
按元件建構
最後，是時候產出了。把你參考的個別想法拿出來，重新打造以符合你的產品。
關鍵不是說「做一個完整的網站」，而是說「基於這個風格，為我的品牌製作一個主視覺區」。
逐步進行：導航 → 主視覺區 → 卡片 → 按鈕 → 字體排印 → 細節。AI 更擅長處理小任務，這也能讓你保持控制。
生成自訂素材
視需要利用影像生成。影像生成工具現在已經夠強大了。訣竅是清楚地傳達顏色、風格、構圖和用途等脈絡。
避免使用一般的圖庫照片。使用自訂的視覺素材可以創造整體的一致性。
整體工作流程
總結來說，流程如下：
- 定義想法
- 釐清目的和使用者
- 決定品牌方向
- 收集參考資料
- 整理參考資料
- 規劃結構
- 建立元件
- 生成素材
- 加入互動
- 整體打磨
這樣做比用單一提示詞創建的效果好得多。
方法 3：使用靈感專案
還有一個稍微快一點的「中庸之道」。與其一個一個地組裝，不如提供 AI 一組精心挑選的參考資料。
從 Mobbin、Awwwards、Webflow 等地方收集畫面截圖，然後問：
請結合這些參考資料的風格和方向，為我的產品創建一個設計。但是，不要完全複製它們。
當然，這前提是你已經提供了足夠的脈絡，並讓 AI 先提問。這比手動工作快，但效果遠比一般的單次提示詞好得多。
3 種方法總結
- 方法 1：設計技能 — 快速，效果不錯
- 方法 2：基於元件 — 較慢，但品質最高
- 方法 3：靈感專案 — 平衡
其他實用工具
- SVG 生成：像 Quiver 這樣的工具可以建立 SVG。由於元素是分離的，所以更容易製作動畫。
- 影片：像是 Google Flow 的工具。可以增強主視覺區、背景和產品展示。
- 圖片庫：像是 Lummi 的平台。但請選擇符合品牌的圖片。
- 圖層疊加：透過去背和圖層疊加來增加深度、動態和互動。細節的累積會帶來很大的不同。
結論
AI 並非用來取代你的思考。
- 做什麼
- 為什麼重要
- 為誰而做
- 應該給人什麼感覺
這些始終是由你來決定。AI 只是更快地執行。最好的結果來自於更好的品味，而非更好的提示詞。
*這篇文章是根據 Leon Lin（@LexnLin）在 X 上的貼文「How To Actually Design With AI」重構而成。
我正在 LINE 上免費提供「Claude 設計系統套件」。
▼ 加入 LINE 以領取「Claude 設計系統套件」
https://t.co/90omRA4UQ7
請先加入 Open Chat（LINE 社群），然後在記事本中提到的官方 LINE 帳號傳送訊息：
設計系統
即可領取優惠。
※ 請勿在 Open Chat 社群內直接發送關鍵字。
我建議將這個模板直接放入 Claude Design，試著做出一個文件。光是這樣，就能讓你感受到如何使用設計系統。
▼ 加入 LINE 以領取「Claude 設計系統套件」
