---
title: "Vibe Designing 是什麼？當設計從手工畫變成下指令"
slug: vibe-designing-complete-guide-2026
url: https://rar.design/posts/vibe-designing-complete-guide-2026
published_at: 2026-05-10
modified_at: 2026-05-10
author: "設計師 Riven"
category: "AI 設計"
access: public_access
---

# Vibe Designing 是什麼？當設計從手工畫變成下指令

> Karpathy 一條推文撐起一場運動，Stitch 在三月把它正式搬進設計工作流

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-05-10

AI TOOLS · 2026 QUICK ANSWER Vibe Designing 是 2026 年設計圈最熱的工作流：你不從線框開始，而是描述意圖、感受、商業目標或靈感，AI 生成多個高擬真 UI 方向，你篩選與微調。這個概念來自 Karpathy 的 Vibe Coding，今年三月被 Google Stitch 2.0 正式推上設計舞台，引發 Figma 股價單日跌 8%，並把設計師的核心技能從「畫畫面」推向「下指令、選方向、定品味」。 CHAPTER 01 · ORIGIN 一條 throwaway tweet，撐起一個年度詞 去年二月那個傍晚，Andrej Karpathy 在 X 上隨手丟了一句：這種新的寫程式方式我叫它 vibe coding——完全交給 vibes，擁抱指數級成長，連 code 存在這件事都忘掉。他自己後來形容那條是「shower of thoughts」，洗澡洗到一半隨手寫的。 那條推文跑出超過四百五十萬次瀏覽，被 Collins 詞典選為 2025 年度詞，半個科技圈跟著一整年都在繞著它打轉。Y Combinator 公開承認 2025 冬季梯次裡，有 25% 的新創團隊，程式碼是 95% 由 AI 生成的。Sundar Pichai 也在公開場合說過，Google 內部超過 30% 的新程式碼來自 AI。 設計圈這一年一直在等一個東西：我們的版本什麼時候到？ 這個春天揭曉了。 設計工作流到了一個臨界時刻。三月十八日 Google Labs 把 Stitch 全部翻新，當天 Figma 股價收跌 8%——是一個多月來最大的單日跌幅。 Stitch 2.0 推出他們自己定義的「Vibe Design」模式：你不用先畫線框，你描述商業目標、描述你想讓使用者感受到什麼、描述你最近被哪個 UI 打動，AI 生成多個高擬真方向，你來篩選與微調。Muzli 在當天的評論寫：這是設計工具二十年來最有意思的一次轉向。 CHAPTER 02 · WHAT IS IT Vibe Designing 到底是什麼 我先用一個對比講清楚這件事的本質。 傳統設計流程裡，你開了 Figma 之後做的第一件事，通常是拉一個矩形、決定 grid、選 typography、開始排版。在你回答「這個產品該長什麼樣」之前，你已經做了幾百個微決定：這個欄位寬幾，這個 spacing 多少，標題用什麼字重。 Vibe Designing 把這個順序整個翻過來。你開始的第一件事是描述：幫我設計一個冥想 app 的 landing page，要平靜、極簡，參考 Apple Health 跟 Headspace 的調性。AI 一次給你三到五個高擬真方向，排版、配色、字型、icon 全做好，你直接開始選。 一句話講完：意圖驅動，生成優先，人來收斂。 跟 Vibe Coding 的差別在哪？Vibe Coding 是把實作層丟給模型，你停留在意圖層。Vibe Designing 一樣是把製作層丟給模型，但你停留的不只是意圖——你還要當品味的最後一道閘門。AI 給你的是材料，你決定哪一個方向能上場。 VIBE DESIGNING 三件事 01 · 你不再先決定排版，你先決定 vibe。 02 · AI 生成的不是線框、不是 mood board，是真的可以點的高擬真畫面。 03 · 你的價值從「畫出來」變成「選對的、改對的」。 CHAPTER 03 · TURNING POINT Stitch 為什麼是這場運動的「正式起點」 Stitch 不是第一個 AI 設計工具。它甚至不是 Google 第一次嘗試。但三月十八日的這一發，讓「Vibe Designing」這個詞從口號變成可以指著看的東西。 幾個關鍵更新一次發出來。 ▲ Stitch 2.0 介面拼貼：描述框、設計系統、Voice Canvas、Play 互動 prototype 同框出現（圖：Google Labs） AI-Native Infinite Canvas。整個工作區重寫，你可以丟進去的不只是 prompt：截圖、競品 URL、code snippet、一段文字描述使用者輪廓——AI 把這些當作同一個專案的 context 一起讀。輸入單位從「精確的動作」變成「意圖」。 Voice Canvas。Gemini Live 接進來，你直接對著畫布講話。它會邊聽邊問你問題、給你 critique、即時改畫面。你說「這個 hero 區再強烈一點」「給我三個 menu 變體」「換成深色版本」，它直接改給你看。 DESIGN.md。這個是設計師最該抬頭看的一個。它是一份 agent-friendly 的 markdown 設計系統檔——色彩、字型、間距、元件都被寫成可讀格式，可以從任何 URL 抽取，可以匯入匯出到 Cursor、Claude Code、Antigravity、AI Studio。Stitch 在四月把這份規格 open source 了。 Play 與 MCP。靜態畫面一鍵變成可點的 prototype。MCP server 讓設計檔案可以直接餵進 vibe coding 工具，設計師輸出 DESIGN.md，工程師的 AI agent 接著生對應前端。 ▲ Stitch 的無限畫布：同一個 brief 同時展開多個方向（圖：Google Labs） 華爾街反應很直接。Stitch 2.0 公布當天，Figma 股價收跌 8%，是一個多月來最大的單日跌幅。Benedict Evans 那一週的 newsletter 寫：設計工具市場進入跟當年 photo editing 一樣的破壞循環。 Stitch 怎麼用、能做到什麼，我之前另外寫過一篇完整實作教學，這篇就不重複，聚焦在它對工作流意味的東西。 ▲ Wanderloots 的 Stitch 2.0 完整實機 demo，從 Vibe Design 到 MCP 接 vibe coding 工作流 CHAPTER 04 · WORKFLOW 設計師工作流的真實重排 我自己過去半年實際把 Vibe Designing 跑進日常工作流之後，有些感受很具體。 舊的工作流是這樣排的：聊需求、寫 brief、畫 wireframe、跟工程師對齊、做 hi-fi mock、做設計系統、再跟工程師交付。每一段都吃時間。Hi-fi mock 之前的所有東西，本質上是為了避免後面修正的成本。 Vibe Designing 直接把這條鏈砍短一截。你的第一個 deliverable 不是 wireframe，是一份 hi-fi 的初稿——而且不是一個方向，是三到五個方向。整個探索期被壓縮到幾小時。 整套工作流長這樣： VIBE DESIGNING 工作流 1 描述意圖 商業目標 + 使用者感受 + 靈感參考（URL、截圖、文字），丟進 Stitch / Figma Make / Lovable。 2 AI 生成多方向 一次給你 3-5 個高擬真版本，排版、配色、字型、icon、互動全做好。 3 篩選與品味判斷 這一步是設計師核心。挑方向、看細節、識別 AI 過度模板化的地方。 4 語音或文字微調 「再強烈一點」「換深色」「給我三個替代版本」，逐輪逼近想要的。 5 輸出 DESIGN.md / 進 Figma 收尾 設計系統檔餵給工程端 AI agent 寫前端；細節 polish 仍回到 Figma 完成。 我自己最有感的是第三步。AI 給你五個方向時，每個都看起來「好像沒問題」。那一刻你會發現，真正考驗的不是會不會用工具，是你看不看得出哪一個版本「不對」——對品牌來說、對 use case 來說、對使用者氣質來說。這個能力沒人 prompt 得出來，只能練出來。 你的角色從製作者往導演位移。手繪的部分被自動化了，品味、判斷、方向感變成被放大的東西。 CHAPTER 05 · TOOL MAP 工具地圖：四強各打哪一段 Vibe Designing 不是一個工具的事，是一條 pipeline。要把這條 pipeline 走完，你會在不同階段切換工具。Muzli 把 2026 的格局拆成四強，我認同這個拆法，加上 Figma 自家的 Make 跟 Weave，大致就是現在主流的工具光譜。 2026 VIBE DESIGN 工具光譜 Google Stitch 探索 / 多方向發散 免費。最強的早期 ideation，Voice Canvas 跟 DESIGN.md 是亮點。Production-grade 設計系統治理目前還不夠。 v0 by Vercel React 元件 / production code 輸出乾淨的 React 元件，適合接進現有 codebase。設計師通常拿它做 component-level 探索。 Lovable 全端應用 / MVP 從 prompt 到一個能跑的 web app，含資料庫跟登入。我之前另外寫過一篇為什麼 Lovable 代表新一代 founder 工具。 Bolt.new 快速 prototype 速度導向，適合「我要看看這個想法能不能跑」。輸出較粗，後續清理成本高。 Figma Make Figma 內 vibe coding Figma 自己的回應。優勢是直接吃你既有的 component library 跟 styles，流暢度高。 Figma Weave 媒體生成 / 品牌資產 node-based 的視覺工作流。處理圖、影片、3D、動畫的部分，把 vibe design 從 UI 擴到媒體層。 我目前的實際使用順序是：Stitch 探索方向 → 把選定的版本帶進 Figma 收細節 → DESIGN.md 餵給 Claude Code 處理前端。Stitch 不會取代 Figma，Stitch 會把「探索期」吃掉。 Figma 的策略也很明顯：Make 對應 vibe coding，Weave 對應 vibe media。Dylan Field 在 Welcome Weavy 那篇文章裡寫過一句很關鍵的話——AI 的 first prompt 是創意的起點，不是終點；在「夠好」已經是「平庸」的時代，要 stand out，只能逼自己超越 prompt。 CHAPTER 06 · LIMITS 限制與盲點（誠實版） 好文要欠讀者一份反證。這幾個是我自己跑下來最有感的限制。 Vibe Coding hangover 也會傳染到設計。Vibe Coding 過去一年最大的副作用，是工程團隊接手 AI 生成的 codebase 後，難以擴展跟維護，業界已經出現「Vibe Code Cleanup Specialist」這種工種。設計端類似：AI 生成的版面初看驚艷，放進真實的 design system 之後，token 不對齊、間距打架、accessibility 不過 WCAG。生成不是終點，治理才是。 設計系統治理仍然吃人力。NN/g 這幾個月反覆強調的事：user research、information architecture、accessibility 審計、design system governance，這些都還沒有 AI 替代品。Vibe Designing 改變的是「製作層」，不是「策略層」。 Quality 不穩。同一個 prompt 跑兩次可以給你完全不同水準的結果。複雜的多元件 layout 經常需要好幾輪迭代才到位。Stitch 自己也老實寫：目前不支援動畫、micro-interaction、custom component library 匯入。 Karpathy 自己一年後的補充也很重要。他在 2026 年 2 月寫了一篇 1-year retrospective，說那條原始推文本意是用 vibe coding 描述「throwaway weekend project」——一次性、低風險、可丟棄的場景。後來這個詞被泛用到 production-grade 系統，他自己更偏好的講法是 agentic engineering。Vibe Designing 同理：它對的是探索期，不是上線交付期。 67% 中大型公司設計團隊已導入 AI 生成工具（Sleek, 2026） 58% 專業設計師每週使用 AI 生成工具（Adobe Creative Trends, 2026） -8% Stitch 2.0 公布當天 Figma 股價收跌幅度 CHAPTER 07 · WHAT TO DO 設計師現在該動的三件事 講完現象、講完限制，留下「我該做什麼」是這篇最該回答的問題。 第一，把意圖描述能力練到極致。以前一份好 brief 是 BD 跟 PM 的事，現在那是設計師核心競爭力。你會不會把「我想要 Stripe 那種 premium minimalism，但帶一點 Headspace 的呼吸感，適合中小企業財務人員，主視覺要傳達秩序而不是緊張」這句話寫得乾淨，直接決定 AI 給你的東西能不能用。模糊的描述換來模糊的方向，然後你就回到一個一個拉框的舊世界了。 第二，學會 token-driven thinking，把設計系統寫成 agent 可讀的格式。DESIGN.md 不是 Stitch 的私有規格，是一個方向的代表——設計系統未來要能被 agent 讀進去、被 agent 校驗（WCAG、色彩對比、間距規則），你的設計系統如果還是只能在 Figma 裡被人看，就會變 legacy。把 design token 拉出 Figma，寫成可以被工具串起來的東西，這件事今年該開始做。 第三，把職責往策略層拉。research、IA、accessibility、design system governance、品牌方向，這些是 AI 短期內取代不了的事。Vibe Designing 把「製作層」自動化，你的時間配比要主動往上移。我之前寫過一篇設計師價值在 AI 時代怎麼遷移，可以接著看。 被取代的不是設計師，是「設計師花在重複工作上的那幾個小時」。 CHAPTER 08 · TAKEAWAYS 收回到一句話 Vibe Designing 不是新的工具類別，是設計工作流的起點被重新定義。過去你從畫布開始，現在你從一段話開始。過去你做完 wireframe 才看到方向，現在你直接面對方向選擇。過去你的價值在「能畫出來」，現在你的價值在「看得出哪個版本對」。 Karpathy 那條 throwaway tweet 撐起了一年的程式語言；設計圈在這個春天接到了棒。我不擔心設計師被取代，我擔心的是：把這套工作流當成簡單的「快速生成」用，而不是當成新工作流去重新練自己的品味。 你的 vibe 是別人 prompt 不出來的——這句話才是這場運動真正的入場券。 SUBSCRIPTION · AIWAKEN AI 覺醒設計應用攻略 AI 工具每週都在更新，我幫你過濾雜訊，只整理對設計師真正有用的應用。 ✦ AI 工具實測與工作流 ✦ 設計師角度 Prompt 技巧 ✦ 每週 AI × 設計新知 了解訂閱方案 → FAQ · 常見問題 常見問題 Q：Vibe Designing 跟 Vibe Coding 差在哪？ A：Vibe Coding 是把實作層丟給 AI，你停在意圖層。Vibe Designing 一樣是把製作層丟給 AI，但你要當品味的最後一道閘門——要選方向、判斷對錯、識別 AI 過度模板化的地方。設計師不會 vanish 進 vibe 裡，設計師被推到導演位置。 Q：設計師會被 Stitch 或 Vibe Designing 取代嗎？ A：被取代的不是設計師，是「設計師花在重複工作上的那幾個小時」。Adobe 2026 Creative Trends 報告顯示 58% 專業設計師每週使用 AI 工具，但 user research、IA、accessibility、design system governance 還是仰賴人的判斷。製作層被自動化，策略層的價值反而被放大。 Q：哪個工具最適合設計師入門？ A：Stitch。免費、瀏覽器打開就能用、Google 帳號登入即可，Vibe Design 模式跟 Voice Canvas 是入門最直觀的兩個切入點。每月 350 個免費生成，夠你練到把這個工作流跑熟。熟了之後再延伸到 v0、Lovable、Figma Make。 Q：Vibe Designing 適合做正式上線的產品嗎？ A：目前的成熟用法是「探索期用 Stitch，收尾回 Figma，前端交給 vibe coding 工具（Cursor / Claude Code）」。AI 生成的 UI 在 design system 對齊、accessibility 合規、複雜互動處理上仍有缺口，正式產品不建議跳過 Figma 收尾這一段。 Q：DESIGN.md 是什麼？要怎麼開始用？ A：DESIGN.md 是 Stitch 推出的一份 agent-friendly markdown 設計系統規格——色彩、字型、間距、元件規則都寫成可讀格式。Stitch 在四月把這份規格 open source 了，Cursor、Claude Code、Antigravity 都能讀。最快的入門方法是進 Stitch，讓它從你現有的網站 URL 自動萃取一份 DESIGN.md，再從那份 baseline 開始改。 Q：我已經是 Figma 重度使用者，有必要切換嗎？ A：不是切換的問題，是擴增的問題。Figma 在收尾、協作、設計系統治理上仍然強；Stitch 取代的是「探索期」那段。我目前的實際工作流是 Stitch 起手 → Figma 收尾。Figma 自己的 Make 跟 Weave 也朝同方向迭代，你會發現整個生態正在往「探索 AI 化、收尾人化」分工。 Q：Vibe Designing 對非設計師的創作者意義是什麼？ A：創辦人、PM、行銷可以用 Vibe Designing 把腦中的東西在幾小時內變成可點的 prototype，直接拿去做使用者訪談或 demo。意思是你不再卡在「找不到設計師檔期」這道牆上。但要做出真的 ship 得出去的產品，你還是會需要懂品味、懂治理、懂 accessibility 的人——也就是真設計師現在更值錢的地方。 延伸閱讀 · Google Stitch 完整教學：Vibe Design 模式怎麼用、Voice Canvas 怎麼開、DESIGN.md 怎麼導出 · Lovable 與新一代 founder 工具：vibe coding 怎麼讓設計師也能 ship 全端產品 · 設計師價值在 AI 時代怎麼遷移：從製作層到策略層的轉位思考