【DesignBIZ 專欄觀點】當數位設計師開始 Vibe Coding 的感性創作革命/李明

【DesignBIZ 專欄觀點】當數位設計師開始 Vibe Coding 的感性創作革命/李明
圖片來源/版塊 Block Studio
分享
收藏
立即加入Shopping Design會員,收藏喜歡的文章,把關注的展覽活動加入行事曆!
當 AI 與 NoCode 工具進入設計流程,Vibe Coding 讓設計師得以用感覺主導網站氛圍,走進創作自主的新時代。

專欄人物介紹
版塊設計 Block Studio 創辦人暨設計總監,自實踐大學媒體傳達設計系畢業後,即成立版塊設計。深耕設計領域逾十年,密切關注國內外網站趨勢,並梳理成自身觀點賦予新的定義與規範,持續透過作品、社群媒體與大眾互動,引領台灣網站動態特效領域發展及數位設計產業。曾任金點概念設計獎評審委員、台灣數十間大專院校設計系所評審及商業演講講者;擅長網站動態特效、介面設計、品牌識別、3D 動畫等多元設計,經典作品曾獲國內外設計獎肯定,涵括德國設計獎、AWWWARDS、臺灣金點設計獎,作品代表有台灣設計研究院線上簡介、可不可熟成紅茶、總統聊天室、RAW、高雄流行音樂中心、台北流行音樂中心等。

為什麼設計師越來越在意「氛圍」?

你是否有過這種經驗:一打開網站,還沒讀到內容,心裡就浮現出「這個品牌感覺不錯」的直覺。這種「氛圍感」早已取代過去單純講求資訊架構或設計美感的網頁標準。當畫面樣式與字型選擇都日趨一致,真正能讓人記得的,往往是明確強烈的視覺、互動的節奏、物件進場的方式,或某段滾動時的情緒節點。當網站加入動態特效時,品牌就不再只靠 Logo 與色彩,而是靠網站整體的體感來說話,在最短的時間內傳達出品牌的個性與故事,讓使用者感受到一種與眾不同的體驗。

因此,越來越多設計師從「做出好看的畫面」轉向「如何讓畫面在對的時候、用對的方式出現」。這代表一種創作觀念的轉向,數位設計師不再只是靜態排版者,而是網站節奏的導演,是數位情緒的建構者。

「網站不是頁面,而是一種氛圍體驗,一種能讓人記得的感覺。」

金色三麥
圖片來源/版塊 Block Studio

NoCode 與感性設計的交會點

當設計師希望掌控節奏與氛圍,卻又不擅長撰寫程式,NoCode 工具自然成為關鍵解方。近年國際上的主流 Webflow、Framer、Readymag 等平台提供了視覺化的編輯介面,讓設計師可以透過拖曳、參數設定,就能完成切版、動態、互動等程度。這類工具更可以讓設計師「不用碰程式」也能參與網站的體感建構。這樣的進展讓設計師從單純設計稿,開始介入到頁面開發建構、動態節奏安排、特效互動選擇的策略。

NoCode 解放的不是技術,而是讓設計師「腦中的感覺可以被製作出來」。這也是我開設 Webflow 動態網頁線上課程 的初衷,希望能將這種「設計師也能掌控互動」的創作模式,變成可複製的學習流程,讓更多非工程背景的創作者也能主導網站的氛圍節奏。

而當這些工具已經讓設計師能夠做出基礎的氛圍調性,下一個問題就出現了:那更複雜的互動效果與邏輯,設計師還能掌控嗎?

圖片來源/版塊 Block Studio
動態元件
圖片來源/版塊 Block Studio

Vibe Coding : 以「感覺」為中心的程式創作

這時候就是 Vibe Coding 出場的時候了!

程式設計過往被視為工具,但現在進入了「感受導向」的創作階段。Vibe Coding 並不是一種語法,也不是某個技術框架,而是一種新的創作邏輯。設計師透過自然語言與 AI 對話,把「我想要圖片會根據滑鼠游標位置移動」這種「情境描述」轉換為具體可執行的語法片段。

指標性的 AI 工具眾多,像是 ChatGPT、Claude、Grok…等。我擅長使用 Claude.ai 來協助我設計製作,因為 Claude 除了寫作能力強以外,它也非常擅長撰寫程式。只要透過 Vibe Coding 這種自然語言的描述,Claude 就能回應我完整程式語法 Demo,且還能夠下載。我將這些動態互動程式放入進 Webflow,接著調整更多動態細節、版型…等,改變了原本「設計想法完整 → 工程師實現」的線性工作流程,讓一場設計邏輯的轉變正在發生。

MCP 與 AI 協作:從語法到設計流程的共創

Vibe Coding 的真正潛力是搭配 MCP (Model Context Protocol) 協定,成為你的共同編輯者。

在我使用 Claude 的過程中,語法生成的體驗非常直覺,但仍需我手動將語法放入 Webflow,調整節奏、控制觸發條件。這讓我開始思考:如果 AI 能讀懂我現在正在設計的畫面、理解元素的層級關係與使用者流程,它是否能自動判斷應該套用哪些語法、在哪裡出現?

這正是 MCP 正在實現的方向。它是一種讓 AI 能夠「看懂上下文」的開放協定。當 AI 能讀取設計工具中的元件架構、頁面狀態,甚至使用者體驗流程圖,它就不再只是被動接收指令,而能主動協助設計決策與技術實作。從「生成語法」到「理解脈絡並協作建構」,是 Vibe Coding 未來真正強大的潛力點,設計師將成為節奏與氛圍的導演,而 AI 會成為可溝通、能理解場景的協作編輯夥伴,讓「感覺、氛圍」也可以系統性建構。

claude
圖片來源/版塊 Block Studio

NoCode 不是終點,而是感性創作的起點

過去,NoCode 常被視為降低技術門檻的解法,但當它結合 Vibe Coding 生成式 AI,讓設計師得以參與「感覺控制」,就像是一場感性覺醒,讓設計師從平面走向時間軸,從畫面走向氛圍,從設計者成為敘事導演。

我們不一定要會寫程式,但我們需要會「調整 Vibe」。這股新趨勢是一種設計角色的進化,讓這個時代持續檢視領域中各種角色的邊界與可能性。

2026《DesignBIZ Award 設計新商業大賞》徵件啟動!徵集設計驅動商業價值的傑出實踐

2026/06/15
Shopping Design
2026《DesignBIZ Award 設計新商業大賞》徵件啟動!徵集設計驅動商業價值的傑出實踐
© Shopping Design
分享
收藏
立即加入Shopping Design會員,收藏喜歡的文章,把關注的展覽活動加入行事曆!
2026 年 DesignBIZ Award 設計新商業大賞邁入第二屆,將持續挖掘以設計思維為核心、跨越美學框架、實現商業創新與社會影響的傑出實踐。

設計的價值,不止於表現——它引導品牌前進、形塑未來市場,創造真實影響力。

2026 年 DesignBIZ Award 設計新商業大賞邁入第二屆,將持續挖掘以設計思維為核心、跨越美學框架、實現商業創新與社會影響的傑出實踐。

聚焦「設計 × 商業 × 創新實踐」,著重設計在商業策略與創新中的關鍵角色,涵蓋品牌策略、產品設計、行銷企劃、永續實踐與新創發展等多元面向。

✹ 徵件開跑!早鳥優惠 6 折延長至 7/6|完整評選標準與徵件辦法 ➬ 請見活動官網

DBA 獎項亮點:五大獎項,涵蓋設計的多元實踐面向

設計新商業 DesignBIZ Runner:設計驅動的策略實踐,展現前瞻思維與突破精神,於營運與市場中創造價值。
潛力新銳 Market Newcomer:新創品牌以獨特風格與創新策略,快速建立市場辨識度與成長動能。
影響力企劃 Influential Maker:以策略與創意引發觀點轉變與行動參與,強調設計與企劃的整合與實效。
永續實踐 Sustainability Practitioner:創新回應永續挑戰,將設計導入產品、營運與社會實踐中,創造長期正向影響。
商業破框者 Game Changer:跳脫產業慣性,以設計為核心構築全新模式與價值,帶動市場思維轉變。

2026 年評審名單:

王宗欣 / dosomething studio 創辦人暨創意總監
吳庭安 / W 春池計畫 主理人、春池玻璃副總經理
張懷安 / 勤美集團生活創新事業協理
陳添順 / 鴻梅文創、或者影響力投資 創辦人
陳韻竹 / Plan b 共同創辦人
劉靜茹 / Shopping Design 事業部總經理


≣ 報名辦法、權益與注意事項報名費用:

◦ 早鳥票:新台幣 3,000 元整(即日起至 2026/7/6)
◦ 一般票:新台幣 5,000 元整(2026/7/7 起至 2026/7/31)
* 報名含《Shopping Design》年度季刊 3 本(價值 1,050 元)

同公司或品牌可依不同專案分次報名多項獎項。開放公司、品牌、專案或個人參與,不限產業與規模。

▍報名步驟:
① 前往 EVENT GO 報名平台 ,並完成以下作業
② 請詳閱 報名簡章,並下載 報名表單
③ 填寫報名資料表單(將完成檔案轉成 PDF),並將相關資料傳至私人雲端(Google、Dropbox、其他可下載檔案雲端,請依範本整理檔案、整理成單一資料夾,並開放檢視權限)
④ 提供應繳資料與附件雲端連結於報名系統表單
⑤ 完成報名費用繳交

▍應繳資料內容:
① 報名表單(PDF檔)
② 營利事業登記證明或相關公司登記、商業登記證明影本
③ 專案簡介(不限格式,建議包含作品圖文、理念與成果說明)
④ 品牌 LOGO(72dpi 以上)、專案圖片(至少 4 張,建議 300dpi)
⑤ 其他補充資料(如影片連結、媒體報導、用戶回饋等)

資料夾檔名規範:
2026_DBA報名_(報名類別)_ (專案名稱) _(公司或品牌名稱)
例:2026_DBA報名_設計新商業_設計新商業年會_Shopping Design

▍資料檢核提醒(請詳閱):
◦ 請務必於 EVENTGO 系統內完成資料上傳與繳交,並確認系統中填寫的聯繫 Email 與電話正確無誤,以利後續聯繫與通知。
◦ 如資料不完整或缺件,主辦單位將通知補件,並提供 3 個工作天的補件期限。逾期未補件者,將視同未完成報名,無法進入後續評選程序。

▍報名注意事項(請詳閱):
※ 企業名稱與產品、專案或服務名稱請謹慎填寫(20 字以內),若獲獎將應用於獎座與典禮相關製作,恕無法臨時更改。
※ 使用雲端連結提供檔案時,務必確認檢視與下載的權限皆有開啟。若未開啟,將視同未繳交。若貴司無法使用雲端提供檔案,可將寄送隨身碟至以下地址:106台北市大安區光復南路 102 號 9 樓 Shopping Design 收。(隨身碟無法寄回,需自行前來領取)
※ 本公司採用電子發票,發票將統一於付款完成後的兩週內由「綠界科技 ECPay」寄送電子發票開立通知至您報名時填寫的發票收件人 email。若有報帳特殊需求,敬請於報名前來信或來電告知,完成報名後恕無法受理,謝謝。
※ 本徵件於報名繳費完成後,即啟動行政與評選籌備作業,包含報名審核、評審準備、獎項製作及相關推廣安排,因此不論後續是否入選或得獎,皆無法辦理退款。請報名前審慎確認報名類別與所需資料。
※主辦單位保留活動及獎項異動之權利。


≣ 整體時程規劃
◦ 早鳥徵件:即日起至 2026/7/6
◦ 一般徵件:2026/7/7 至 2026/7/31
◦ 資格審查:2026 年 8 月初
◦ 評選會議:2026 年 8 月中旬
◦ 獲獎公告:2026 年 8 月底(將以 Email 及電話通知得獎者,未入選者恕不另行通知)
◦ 頒獎典禮:2026 年 9 月上旬

≣ 獲獎權益
◦ 專屬特製獎盃:獲選作品將獲得一只特製獎盃,作為榮譽象徵與實體識別
◦ 專屬標章授權:獲選作品可使用「DBA 獎項標章」,應用於品牌宣傳與媒體素材,作為獲獎認證標示
◦ 頒獎典禮出席:獲選者將受邀出席頒獎典禮與會後交流活動,公開亮相並接受表揚
◦ 得獎資訊發布:名單與典禮花絮將於官網與社群平台同步揭露,完整記錄獲獎亮點與現場精彩瞬間
◦ 數位專題收錄:獲獎作品將收錄於《Shopping Design》官網特別企劃,進行整合性專題綜合報導


≣ 聯絡我們
若對報名流程、資料繳交或獎項事務有任何疑問,歡迎聯繫主辦單位:
◦ 電話:02-8773-9808 #285 謝先生
◦ Email:sd@shoppingdesign.com.tw
◦ 服務時間:週一到週五 10:00-12:00;14:00-17:00

READ MORE

延伸閱讀

登入數位時代會員

開啟專屬自己的主題內容,

每日推播重點文章

我還不是會員, 註冊去!
找有趣、有用、有意義的大小設計事...
Vol.156
Vol.156 找回靈感大作戰

3條散步路線・6本靈感日記・10+私房選店・20+找靈感練習。

© 2026 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓