可運行不等於可交付：在 AI 時代重新理解設計能力

原始來源與檔名：可運行不等於可交付-設計能力重定義.md

來源：[[@xiaolinbythesea]] / X — 2026-04-28 原始檔名：2026-04-28T092732+0800-可运行不等于可交付：在 AI 时代重新理解设计能力.md

NAPKIN | 餐巾纸

餐巾紙公式

AI 時代的設計交付 = 介面生成 (交給 AI) + 行為定義 (守護底線) + 系統級約束 (DESIGN.md)

Vibe Coding 讓設計師能輕易把想法變成能動的程式碼，但「能動」不等於「可交付」。如果把排版、空狀態、錯誤處理等控制權交給模型預設值，會導致「設計質量隨機化」。設計師應該把精力放在定義極端情境的行為，並將設計規範工程化為 Agent 能讀懂的資產（如 DESIGN.md）。

一句話

不要被 Vibe Coding 跑出畫面的爽感騙了。如果你連 Loading、Error 和空狀態都沒考慮，你做的只是玩具，不是能上線交付的工程產品。

餐巾紙草圖

[ Vibe Coding 的三種層次 ]
1. 表達型: 為了向團隊展示複雜動效 (快速用完即丟)
2. 驗證型: 測試交互流程順不順 (快速用完即丟)
3. 交付型: ⚠ 最危險！無工程直覺的設計師直接生 code，導致「設計質量隨機化」。

[ 護城河的轉移 ]
舊能力：畫好看的 UI (被 AI 取代)
新能力：行為定義 (處理異常/空狀態/邊界) + 建立系統約束 (給 Agent 看的 DESIGN.md)

ROUND 1: SKELETON | 骨架掃描

“這本書在說什麼”

• 核心問題: Claude Code 和 Cursor 讓設計師能輕易寫出「能跑的 Demo (Vibe Coding)」。但很多設計師將這種「產生代碼的爽感」誤認為是「設計能力的升級」，這會帶來什麼危機？
• 核心答案: 跑起來只是起點，可交付需要嚴謹的工程約束與狀態覆蓋。設計師不該沉迷於讓 AI 盲目生成代碼，而應將能力錨定在「行為定義（處理極端狀態）」與「設計系統工程化（將規範轉化為 Agent 能讀懂的機器資產）」。
• 論證結構: 剖析 Vibe Coding 讓人上頭的原因 -> 區分 Coding 的三類用法 -> 點出「設計質量隨機化」的災難 -> 強調工程理解的重要性 -> 提出解法（沉澱 DESIGN.md 等資產）。

章節骨架

1. 沉迷的陷阱: Vibe Coding 提供了極快的即時回饋。設計師看著畫面動起來，誤以為問題解決了，其實只是讓模型用「預設值」填補了空白。
2. Coding 的三類用法: 表達型（說清楚動效）、驗證型（測試假設）、交付型（直接寫業務邏輯）。未經工程訓練直接做交付型，會稀釋設計判斷力。
3. 質量隨機化: 把控制權交給模型後，今天風格像 SaaS，明天像模板站。漏掉空狀態、權限限制、無障礙等基礎兜底。
4. 工程理解: 真正的交付要考慮異常、網路波動、灰度策略。設計系統必須從「給人看的 PDF」升級為「給 Agent 看的約束」。
5. 角色右移的冷思考: AI 模糊了 PM/Design/Dev 的邊界，但沒人守護質量標準是最危險的。
6. 重新錨定能力: 團隊的未來在於「個人做長板，團隊做基建」。把基礎規範寫進機器可讀的檔案中，讓人來主導創新。

ROUND 2: DISSECTION | 血肉解剖

“憑什麼這麼說”

• 隱形假設: 作者假設企業級產品的成功，極度依賴嚴格的「一致性」與「邊界狀態（Edge cases）處理」。在這種環境下，「能用就好」的隨機產出是無法被接受的技術債。
• 邊界條件: 如果你是在做獨立開發者的 MVP，或者內部使用的單次工具，Vibe Coding 帶來的速度絕對凌駕於「設計一致性」之上。但當產品要推向百萬用戶時，這篇文章的警告才完全成立。

ROUND 3: SOUL | 靈魂提取

“還能怎么用”

• 知識連結: 系統邊界 (System Boundaries)、防呆設計 (Poka-yoke)、Design Tokens、Headless Design System。
• 深層洞見: Vibe Coding 剝奪了設計師的「刻意摩擦力」。過去在 Figma 裡拉間距時，大腦有時間去思考「如果斷網了怎麼辦」。現在一秒生成完畢，思考的空窗期被壓縮沒了。真正的設計師護城河，不在於生成常規畫面，而在於「設計系統在崩潰邊緣（網路差、沒權限）時的優雅降級（Graceful Degradation）」。
• 行動呼籲: 不要再在 Figma 裡畫漂亮的元件了。打開一個 IDE，建立一個名為 DESIGN.md 的文件，把你們團隊的色彩、字體大小、按鈕邏輯用 Markdown 寫下來，確保下一次 Claude 寫 Code 時能精準調用。

AI 時代設計交付的工程化轉型 (Architectural Deep Dive)

前言/背景

隨著 Cursor、Claude Code 等 AI 輔助程式設計工具的普及，設計師進入了 Vibe Coding（直覺式編程）的狂歡。只要一段 Prompt，就能生成具備基礎互動的 Web 應用。然而，本文從軟體工程的視角發出警告：「進入演示態（Demo）」不等於「進入生產態（Production）」。設計能力的未來不在於寫更多代碼，而在於將設計規範轉化為工程約束。

章節詳細總結

1. Vibe Coding 與設計質量隨機化 (Randomization of Quality)

Vibe Coding 的即時反饋迴圈極易使人產生「進度幻覺」。

• 架構痛點：當設計師缺乏工程約束時，模型會自動填補所有未定義的空白（如預設字體、預設 padding、預設互動節奏）。這導致輸出的代碼雖然可運行，但其內部架構（視覺層級、品牌一致性、元件邊界）呈現高度的「隨機性」。

2. 邊界狀態的缺失 (The Void of Edge Cases)

一個成熟的軟體工程交付，其 80% 的代碼是用來處理 20% 的異常狀況。

• 架構缺陷：未經工程訓練的 Vibe Coding 產出，往往只覆蓋了「Happy Path（理想路徑）」。完全遺漏了空狀態（Empty states）、載入狀態（Loading）、錯誤回退（Error fallback）、權限阻擋（Permission denied）以及無障礙支持（a11y）。這些缺失在真實生產環境中是致命的。

3. 設計系統的機器化 (Machine-Readable Design Systems)

AI 將設計系統的受眾從「人類設計師/工程師」轉變為了「Agent」。

• 架構演進：設計團隊的基建方向必須改變。規範不能只存在於 Figma 或 PDF 中，而必須沉澱為類似 Google Stitch 專案中的 DESIGN.md。將 Design Tokens、佈局規則、動效參數結構化，成為 Agent 在生成代碼時可以強制導入的上下文約束（Contextual Constraints）。

4. 重新定義設計師的核心價值：行為建模 (Behavioral Modeling)

當「實現（Implementation）」的成本趨近於零，價值的重心將轉移到「定義（Definition）」。

• 角色重塑：設計師的核心能力應錨定在「行為定義」。理解系統架構，預判極端資料載入時的 UI 表現，定義降級策略（Degradation Strategy）。將低階的「像素推敲」交給 Agent 與 DESIGN.md 處理，人類專注於複雜系統中的互動邏輯與業務流轉。

總結與結論

• 核心警示：不要把 Vibe Coding 的快速產出感等同於能力的提升。缺乏工程約束的生成代碼，只是在累積無法維護的技術債。
• 組織策略：AI 負責拉高團隊的平均底線，填補技能短板；團隊的護城河則依賴設計師在特定領域（如無障礙、狀態機設計、架構規範）打造的「極致長板」，並透過數位資產（如 DESIGN.md）將這些長板注入到 Agent 的生成管線中。