可運行不等於可交付：Vibe Coding 時代設計師的能力重塑 (Runnable != Deliverable)

原始來源與檔名：20260512_2026-04-28T092732+0800-可运行不等于可交付：在 AI 时代重新理解设计能力.md

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

NAPKIN | 餐巾紙

餐巾紙公式

Vibe Coding = Instant feedback + High prototype fidelity. Danger = Model guessing default states + Ignoring edge cases -> Randomization of Design Quality. True Deliverable = Core UI + Empty states + Error handling + Loading + Permission states + Scale reliability. Designer’s Future Core = Behavior Definition + Engineering Understanding (Assetizing DESIGN.md).

Cursor 和 Claude Code 讓設計師能輕易透過 AI 將 Figma 畫布上的想法變成「可運行的程式碼 (Vibe Coding)」，這種即時回饋極度容易讓人上癮。然而，「能跑的 Demo」和「可交付的產品」之間橫跨著巨大的工程鴻溝。如果設計師沉迷於生成介面，而將細節、狀態邏輯、邊界條件都交由 AI 的「預設值」去猜測，將導致設計品質的嚴重隨機化。AI 時代設計師的核心能力不在於寫生產程式碼，而在於「行為定義」與「將設計規範工程化（轉為 Agent 可讀的規則資產）」。

一句話

這是一篇給沈迷於 AI 寫扣 (Vibe Coding) 的設計師的清醒劑。作者指出，AI 的即時回饋會帶來虛假的掌控感，讓設計師誤以為「介面能動」就等於「設計成熟」。事實上，如果沒有覆蓋空狀態、錯誤處理等邊界條件，這些靠 AI 猜測預設值拼湊出來的頁面將面臨「設計品質隨機化」的災難。未來的設計師不該把目標定在「替代工程師寫扣」，而是要守住「行為定義（產品如何回應人）」的底線，並將設計系統從「給人看的畫板」升級為「給 Agent 執行的規則資產 (如 DESIGN.md)」。

餐巾紙草圖

[ The Vibe Coding Trap ]

Designer -> Prompts AI -> "It works! Look at this moving button!" (Illusion of Mastery)
                         |
                         V
Reality of the "Working Demo":
- Component logic? Guessed by model.
- Error state? Missing.
- Empty state? Missing.
- Visual consistency? Today it's SaaS style, tomorrow it's a template site.
= Design Quality Randomization.

[ The Solution: Design Engineering ]
Figma Specs -> Translated into `DESIGN.md` -> AI Agent reads it -> Generates consistent UI.

ROUND 1: SKELETON | 骨架掃描

“這篇文章在說什麼”

ROUND 2: DISSECTION | 血肉解剖

“憑什麼這麼說”

核心論證鏈

  1. Demo 與 Production 的本質差異: Demo 是在理想溫室裡運行的快樂路徑 (Happy Path)。Production 則要面對網路斷線、權限不足、髒數據、歷史包袱等惡劣環境。如果設計師不懂工程的邊界條件，做出來的 Vibe Coding 就只是個漂亮的玩具。
  2. 預設值的危險性: 生成式 AI 的強大在於它的「腦補能力」。當你不說清楚按鈕間距時，它會塞一個平均值給你。長期依賴 AI 的腦補，等同於放棄了對產品微觀細節的掌控權，最終導致產品失去靈魂和品牌一致性。

關鍵證據

邊界條件

ROUND 3: SOUL | 靈魂提取

“還能怎么用”