什麼是 vibe design？2026 年用意圖做設計的完整指南

設計師、創辦人與產品工程師在 2026 年不斷聽到「vibe design」這個詞——但有一半的文章是廠商的業配，另一半則從來沒講清楚在 AI 吐出一個畫面之後會發生什麼事。這份指南會給你一個清楚的定義、它的來龍去脈、工作流程怎麼跑，以及那個沒人願意談的缺口：上線。

什麼是 vibe design？

vibe design 是一種 UI 與產品設計的取徑，你最主要的輸入是意圖——用自然語言、一張參考圖或一個網址來描述——再由 AI 生成設計，而你靠感覺來掌舵，而不是親手操刀。

你不再一個個擺放元件、微調間距、在調色盤裡翻找顏色，而是描述那個vibe：調性、版面方向、感覺。你扮演的角色少了一點工匠味，多了一點創意總監的味道——負責審視與重新指引。它由三件事構成：

• 輸入意圖——一句提示、一張截圖、一個參考網站，或一張粗略的草圖。
• 輸出生成——AI 回傳真正的 UI，而不是一張空白畫布。
• 掌舵——你用自然語言評點與重新指引，直到對為止。

vibe design 與 vibe coding 的差別

這個詞直接源自 Andrej Karpathy 在 2025 年提出的 vibe coding：別再親手寫程式碼——描述你想要什麼，讓 AI 來實作。vibe design 把同樣這套「意圖優先」的哲學套用到視覺層。

	vibe coding	vibe design
輸入	意圖（它該做什麼）	意圖（它該長什麼樣、給人什麼感覺）
輸出	可運作的程式碼	可運作的介面
你靠什麼掌舵	行為與邏輯	調性、版面、品味
由誰帶起風潮	Karpathy，2025 年	Google Stitch，2026 年初

它們是同一場轉變的兩端，而到了 2026 年正逐漸合流：最好用的 agent 既設計又動手做。Google 在 2026 年初推出 Stitch，把「vibe design」推向主流，為這個品類取了名字，也帶來一波搜尋需求。

vibe design 實際上是怎麼運作的

一個典型的循環分四步：

1. 描述 vibe——「一個沉穩、值得信賴的金融科技儀表板，大量留白，只用一個強調色。」
2. 生成——AI 回傳一個真正的畫面（或好幾個變體）。
3. 掌舵——「排得密一點」、「色調再暖一些」、「加一個空狀態」。
4. 反覆迭代，直到它符合意圖。

它換來的是速度與門檻的降低：一兩個人指揮 AI，一週就能產出數十個精緻的概念，而非設計師也能不必學一套笨重的工具就做出一個像樣的介面。

在像 Open Design 這樣的agent 原生工作空間裡，這個循環就活在同一個介面上——你把 vibe 描述給同一個之後能寫程式碼的 agent，所以「掌舵設計」與「打造產品」就不再是兩個互不相通的工具。（利益揭露：Open Design 是我們做的。）

沒人願意談的缺口：從設計稿到上線

多數「vibe design」工具就在這裡悄悄停下了腳步——停在一張靜態的設計稿。你拿到一個漂亮的畫面，然後又得回頭親手把它翻成程式碼，而那份設計從此再也不會更新。

真正的 vibe design 不該止步於一張圖。更難、也更有價值的版本是 agentic vibe design：一個 agent 生成設計、自我評點並讓它持續演進，再把它送進生產環境的程式碼——在你掌舵的同時，讓設計與程式碼保持同步。

階段	當今多數工具	agentic vibe design
生成 UI	✅	✅
自我評點與迭代	❌ 一張靜態畫面	✅ agent 自行修改
輸出成真正的程式碼	❌ 之後再親手翻譯	✅ 匯出可運作的程式碼
讓設計 ↔ 程式碼保持同步	❌	✅
開源／BYOK	多半封閉	✅

這正是 Open Design 耕耘的賽道——開源、agent 原生的設計工作空間。你描述 vibe，agent 設計出 UI、讓它演進，再把它送進真正的程式碼；它走 BYOK，並且與你早已在用的 coding agent（Claude Code、Cursor 等）並肩運作，而不是把你鎖進一塊封閉的畫布——所以下面的實作演示是把工作流程跑給你看，而不只是嘴上說說。

我們經常跑的一個具體循環：對著一個儀表板下提示 → 拿到一個可運作的版面 → 「把間距收緊一點，再加上深色模式」 → agent 把設計與程式碼一起改 → 匯出生產環境的 HTML。產出的成品是可以直接上線的，而不是一張截圖。

關於 vibe design 的常見迷思

• 「它會取代設計師。」不會——它是把設計師移往創意指導與品味的位置，在那裡判斷力更重要，而非更不重要。
• 「它只能做一次性的設計稿。」只有當工具停在設計稿時才會這樣。agentic 的工具會把它一路帶到程式碼。
• 「你得懂技術才行。」恰恰相反——意圖就是介面。
• 「它不過就是 AI 生圖。」vibe design 產出的是結構化、可編輯的 UI，而不是一張扁平的圖片。

今天就開始做 vibe design 的方法

1. 挑一個能輸出到程式碼的意圖優先工具，而不只是設計稿，這樣你的成果才不會走進死胡同。
2. 從一個參考開始——貼上一張截圖或網址；說清楚哪些要保留、哪些要改。
3. 用大白話掌舵——在密度、配色、調性與各種狀態上反覆迭代。
4. 盡早推進到程式碼——設計愈早變成真正的程式碼，你就愈早知道什麼行得通。
5. 讓它保持開放、屬於你自己——開源 + BYOK 能在這個品類快速演進時避免被綁死。（如果你是從一塊封閉畫布走過來的，這裡有從 Figma 出走的開源路徑，以及從 Claude Design 出走的路徑。）

重點總結

vibe design 是意圖優先的設計：你描述，AI 生成，你掌舵。它脫胎自 vibe coding，並在 2026 年由 Google Stitch 推向主流，把點子與介面之間的距離壓縮到幾乎為零。但真正重要的那個版本不會停在一張設計稿——它是 agentic 的，而且會輸出到程式碼。從那裡開始，vibe design 才會變成真正的產出，而不只是一張好看的圖。

準備好試試了嗎？開啟 App 或瀏覽設計系統與技能庫。