不會寫程式的設計師，Vibe Coding 能做到什麼程度？好也的真實案例

在 2026 年初，我用 Claude Code 在沒有任何前端框架經驗的情況下，花了兩天時間，為客戶的產品頁面建了一個 Velo 動態篩選器。這個篩選器讓訪客可以用材質、尺寸、顏色三個維度即時過濾商品，背後串接 Wix CMS 的 API。我沒有寫過一行 JavaScript，但它現在在客戶的網站上正常運作著。

這就是 Vibe Coding 對設計師的現實。不是魔法，但比你想像的更可行。

不會寫程式，設計師到底能做到什麼？

根據 Stack Overflow 2025 年開發者調查，超過 70% 的開發者已在工作中使用 AI 輔助寫程式。但對設計師更值得關注的是：使用 AI 工具產出可運作功能原型的非工程師比例，在 2024 到 2025 年間成長了 4 倍。

以品牌顧問公司的角度來看，Vibe Coding 最能發揮的場景有幾類：

• 資料視覺化與追蹤工具：把 CSV 或 JSON 資料轉換成可互動的儀表板，不需要 D3.js 知識

• 表單與互動功能：客戶諮詢表單、計算器、問卷，過去需要外包的工作，設計師自己就能建

• CMS 串接與內容自動化：透過 Wix Velo 或 Webflow CMS API，讓網站內容可以動態更新，不再需要每次手動改

• 自動化腳本：從公開資料源收集品牌研究情報、批次處理設計素材、定期產出報告

關鍵洞察：你能用 Vibe Coding 做到的事情，取決於你能「描述清楚問題」的能力。這恰好是設計師的優勢，我們訓練有素地定義問題、拆解需求、描述理想結果和現實差距。

如果你還不熟悉 Vibe Coding 的基本概念，可以先閱讀：什麼是 Vibe Coding？設計師、創業者都該懂的新工作方式

好也的三個真實案例：設計師能走多遠？

案例一：一個磁磚品牌客戶 Velo 篩選器

客戶的產品頁面有超過 300 個 SKU，訪客很難找到想要的材質組合。我用 Claude Code 撰寫 Wix Velo 程式碼，建立了三層篩選（材質、尺寸、顏色），透過 Wix Data API 即時查詢。整個建置過程花了約 12 小時：8 小時在對話框裡和 AI 來回調整邏輯，4 小時在 Wix 後台測試和細調。

以往這樣的功能需要發外包，市場報價約 NT$30,000 至 60,000，工期 2 至 3 週。用 Vibe Coding，我們在預算內自己完成，交付速度提升了 80%，而且需求有任何調整時，我能直接和 AI 討論修改，不用透過工程師中介。

案例二：好也內部財務追蹤系統

我在 2025 年底用 Claude Code 建了一套輕量的財務追蹤系統，可以從信用卡 CSV 自動分類支出、產出月報、比較月度趨勢。這套系統每月幫好也節省約 3 至 4 小時的帳務整理時間。技術上，它是一個 Python 腳本加上一個本地 HTML 儀表板，完全沒有後端框架，維護成本幾乎為零。

案例三：SEO Topic Cluster 追蹤儀表板

為了追蹤好也部落格 25 篇 Topic Cluster 文章的完成進度，我用 Vibe Coding 建了一個靜態 HTML 儀表板，從 JSON 讀取資料，用顏色視覺化各文章的狀態（待寫、草稿、已發布）。整個過程花了 4 小時。現在這個儀表板是好也每週 SEO 工作流程的標準工具。

三個案例的共通點：問題都是設計師能夠清楚定義的，功能複雜度在「可描述」的範圍內，而不是需要架構決策的那種規模。這正是 Vibe Coding 的甜蜜點。

Vibe Coding 真正難跨越的門檻是什麼？

在服務超過 30 個品牌的工作中，我也持續用 Vibe Coding 解決內部需求。發現設計師真正難跨越的門檻不是技術，而是三件事：

1. 除錯思維：當程式不按預期運作，你需要能描述「預期行為」和「實際行為」的差異。設計師習慣用視覺語言描述「應該要長這樣」，關鍵是把這個能力轉移到邏輯描述上。沒有這個能力，AI 很難幫你精確找到問題所在。

2. 系統邊界判斷：什麼時候應該用 Velo，什麼時候應該用第三方服務？AI 會給你技術上可行的解法，但維護成本可能極高。設計師需要對技術生態有基本認識，才能判斷 AI 建議的合理性，而不是照單全收。

3. 安全性意識：設計師用 Vibe Coding 建表單或後台工具時，容易遺漏基本的安全考量，例如 API Key 外露或輸入驗證不足。AI 會在你詢問時提醒，但你需要主動問：「這個實作有沒有安全問題？」

一個實用的定位原則：Vibe Coding 讓設計師可以「從 0 到 60 分」。從 60 到 90 分，你仍然需要工程師。但對大多數品牌設計師的日常工作來說，60 分已足以解決 80% 的問題，而且這個 60 分是你可以今天就開始累積的能力。

常見問題

不會寫程式的設計師，從哪裡開始 Vibe Coding？

最快的入口是從「解決自己的問題」開始。找一個你每週重複做的手動工作（整理資料、更新試算表、產出固定格式報告），用 Claude Code 描述你想要的自動化，跟著 AI 的指示執行一次完整流程。你不需要先學語法，但需要能清楚描述輸入、輸出和邊界條件。

Vibe Coding 適合用在客戶專案上嗎？

適合，但要看專案類型。功能明確、範圍固定、不需要長期多人協作的功能最適合，例如活動網站特效、產品篩選器、一次性的資料視覺化頁面。不建議用在需要嚴格安全性要求的核心業務系統，或需要多位工程師協作維護的大型專案。

Vibe Coding 會取代設計師嗎？

不會取代，但會重新定義設計師的邊界。能用 Vibe Coding 讓設計稿「活起來」的設計師，和只能交付靜態稿的設計師，市場定價會越來越不同。Vibe Coding 是擴張設計師的能力範圍，不是取代設計思維本身。

Vibe Coding 和傳統委外開發的費用怎麼比？

以好也的 磁磚品牌客戶 Velo 篩選器案例為例，傳統外包報價約 NT$30,000 至 60,000，工期 2 至 3 週。用 Vibe Coding，工時約 12 小時，主要成本是 AI 工具月費（約 NT$600 至 900）。對功能明確的小型專案，成本降幅可超過 90%。但這個比較不包含你自己的時間成本，需要誠實評估。

設計師學 Vibe Coding 需要多久才能做出可用的東西？

以我的觀察，大多數設計師在第一個下午就能做出「能跑起來的東西」，不一定完美，但可以解決一個真實問題。關鍵不在於學習時間，而在於選對第一個問題：不要從「我要做一個 App」開始，要從「我這週最浪費時間的一件事」開始。

設計師和 Vibe Coding 的關係，不是「能不能學」，而是「從哪裡開始用」。在好也，Vibe Coding 已經成為設計流程的一部分，讓我們能在不增加外包預算的情況下，替客戶實現更多功能性的想法。這不只是效率問題，更是重新定義設計師角色的機會。品牌策略工作坊的過程中，我們也越來越常用 Vibe Coding 快速原型化客戶的品牌互動想像，把策略從文件變成可以體驗的東西。

如果你不確定品牌現在的問題出在哪裡，可以從一次「品牌健診」開始。好也提供 90 分鐘的品牌健診服務，幫你釐清品牌定位、識別一致性與市場溝通的核心問題。了解品牌健診服務