走入 Agentic 時代：Source by Webflow 如何重構品牌行銷與接案設計師的 AI 協同工作流？

前言：當視覺化建站遇上「代理式行銷（Agentic Marketing）」

在過去很長一段時間裡，網站建置與數位行銷的工作流程本質上是高度割裂的：行銷人員在 Notion 寫策略、設計師在 Figma 畫稿、前端工程師在 Webflow 砌磚，而剛萌芽的通用 AI 工具（如 ChatGPT）則常因為缺乏專案上下文，產出充斥著混亂 Class 與無效結構的「代碼孤島」。

2026 年秋季，Webflow 拋出了一顆重量級震撼彈——正式發表全新旗艦平台 Source by Webflow。這不僅僅是一次介面改版，而是標誌著 Webflow 從單純的「No-Code 視覺化開發工具」，全面進化為專為現代品牌團隊與 AI 代理（AI Agents）協同共生的「代理式行銷平台（Agentic Marketing Platform）」。

作為深耕 Webflow 與 Shopify 前端架構的數位工匠，本文將從實戰技術與商業接案兩個視角，深度拆解 Source 的核心架構，以及它對接案設計師與品牌客戶帶來的深遠變革。

一、Source by Webflow 的核心架構：共享上下文與角色視圖

Source 最根本的創新在於解決了「AI 不懂專案規範」的痛點。它透過兩大核心機制重塑了生產流程：

1. 共享上下文環境（Shared Context）

傳統 AI 之所以常常把網頁改壞，是因為它每次都在「空白大腦」的狀態下猜測。Source 打造了一個將企業程式碼庫、行銷技術堆疊（MarTech）、CMS 與設計資產徹底整合的共享環境。

無論是內部的 Webflow AI，或是外部透過 Model Context Protocol（MCP）連線的 AI 代理（如 Cursor, Claude Code, Antigravity），都能即時讀取這個共享大腦，確保每一次決策都在品牌的安全護欄之內。

2. 基於角色的「工作視圖（Views）」

過去非技術人員進入 Webflow Designer，往往被繁瑣的 Style 面板與 DOM 樹嚇退。Source 提供了切換視角的能力：

• 行銷視圖（Marketing View）：聚焦於文案 A/B 測試、CMS 內容策展、SEO Meta 調優與轉換率指標，免受底層 CSS 結構干擾。
• 設計與工程視圖（Design & Dev View）：保留極致的畫布控制權、Variables 變數面板、Client-First 架構與自訂腳本管線。

二、關鍵護欄：Agent Instructions（AI 代理指令規範）

如果說 Source 是底座，那麼 Agent Instructions 就是指揮 AI 代理的專屬「作業系統」。它由兩大核心規範組成：

指令類型	核心定位	實戰範例與約束
Rules（硬性規則）	不可違背的技術與設計底線	嚴禁寫死 Hex 顏色，全數強制綁定 --black, --highlight 等 Variables；Class 命名一律遵循 kebab-case Client-First 規範。
Skills（技能指引）	任務執行的最佳實踐指南	特定 Section 的組件組裝順序、品牌極簡語調（Voice & Tone）、卡片 Hover 動效微調邏輯。

動態資產連動（Reference Integration）：終結「知識漂移」

過去寫在 Prompt 裡的規範，往往隨時會隨專案更新而過期。在 Source 中，你可以直接用 @ 符號動態關聯畫布上的實體資源（如 Variables, Components, Styles）。當你在 Designer 中微調了主色調，所有 AI 代理的 Instructions 會毫秒級動態同步，徹底終結知識漂移（Knowledge Drift）。

三、對現代接案設計師與品牌客戶的三大實戰衝擊

1. 接案角色轉型：從「切版苦力」升級為「系統架構師（System Architect）」

過去搭建一個多頁面的企業官網，70% 的時間耗費在重複性的砌磚工作（排 Grid、打 Class、校對邊界間距）。在 Agentic 模式下，AI 代理能在幾秒內依據 Instructions 產出 85% 生產級別的結構。

設計師的不可替代性，將完全轉移到「設計系統抽象能力」、「品牌動態節奏感」與「高階商業洞察」。

2. 交付物進化：從「靜態網站」升級為「自帶維護 AI 的活體品牌系統」

未來為客戶交付 Webflow 網站時，最有價值的交付物不再只是網頁本身，而是隨站附贈的 專屬 Agent Instructions。客戶的行銷團隊日後只需對 AI 說「加一個促銷 Banner」，AI 就會在不破壞你當初搭建的高階設計體系的前提下安全擴充。

3. 前端開發與外部 AI IDE（Cursor / Antigravity）的無縫串聯

得益於 Webflow MCP 2.0 的雙向打通，外部工程師可以在自己習慣的代碼環境中，直接對 Webflow Designer 下達 DOM 重構、樣式注入或 CMS 批量操作，真正實現了 No-Code 畫布與 Pro-Code 現代化工程工作流的世紀大合體。

四、結語：拥抱人機協同的數位工藝新紀元

每一次技術工具的躍進，淘汰的從來不是懂得美感與工藝的人，而是固守低效重複勞動的搬磚者。Source by Webflow 的問世，並非要讓 AI 取代人類的直覺與品味，而是為我們裝上了一台強大的外骨骼裝甲。

在這個 Agentic 時代，最優秀的數位工匠，將是那些既能深刻理解 Dieter Rams 極簡哲學、又能熟練調度 AI 代理軍團，在畫布上精準編排每一個像素的架構師。