不再從零寫 Prompt！Webflow 推出「AI Agent 指引自動生成」：如何一鍵萃取全站設計規範，打造懂你品牌的自主 AI 助理？

前言：週五下午三點的真實慘劇

週五下午三點，行銷主管急匆匆找上工程師，想在官網新增一個限時活動的產品卡片。為了加快速度，團隊打開了最新款的 AI 代碼助手，在對話框裡敲下指令：「請幫我在首頁下方加一個三欄卡片區塊，要有標題、標籤和購買按鈕。」

兩秒鐘後，AI 吐出了一大段乾淨漂亮的 HTML 和 CSS。大家興高采烈地複製貼上到 Webflow 畫布裡。結果下一秒，設計主管走過來差點昏倒：AI 自己隨機命名了 .custom-card-wrapper-final、.promo-btn-red、.title-huge-new 等七八個全新類別名稱。原本整齊劃一的品牌主色被替換成了隨機色碼，按鈕圓角全跑掉了，更要命的是手機版直接在右側滑出一整片白邊。

最後的結局大家都很熟悉：兩位工程師連同設計師，花了整整兩個半小時把 AI 寫的代碼一行行刪掉，重新用手動拉組件、套類別。原本想節省時間，最後反而變成週末加班的元兇。

這個問題的根源很單純：AI 根本不知道你家網站的規矩。每一次你開新對話，AI 都處於徹底失憶的狀態。如果你想讓它乖乖聽話，就得每次在對話框裡貼上兩千字的品牌規範手冊，複製貼上貼到手軟。

就在最近，Webflow 官方正式推出了原生「Agent Instructions 自動生成」功能。這項技術能直接掃描整站的設計系統，把所有 CSS 變數、排版架構與組件規範，一鍵提煉為結構化的指引文件。今天我們就坐下來聊聊，這個功能到底解決了什麼，以及團隊該如何立刻用它打造出真正懂品牌的自主 AI 助理。

一、為什麼過去叫 AI 改網站總是翻車？三個致命斷層

在過去一年多的實務開發中，我們協助過許多企業品牌導入 AI 輔助建站工具。無論使用哪一套大語言模型，團隊最常撞牆的痛點主要集中在三個地方：

1. 命名空間的隨機污染

專業的 Webflow 網站通常依循嚴謹的樣式架構，例如業界廣泛採用的 Client-First 規範。頁面上的每一個類別都有清楚的階層，例如 margin-bottom margin-small 或 heading-style-h2。

然而通用的 AI 助理在沒有特定指引時，最喜歡自己發明命名。它可能會寫出 .card-box-2，下一次又寫出 .my-new-wrapper。短短一個月內，網站 Style Manager 裡就會塞滿幾百個用過一次就丟棄的孤立類別。日後只要全站想微調一個行高，整個網站排版就會徹底崩盤。

2. 變數與寫死數值的割裂

現代 Webflow 已經全面支援 Variables（變數系統）。品牌的主色調、字級比例、間距規範都是動態關聯的變數，例如 var(--primary-mint) 或 var(--space-grid-gap)。

當 AI 缺乏站點變數清單時，它只能猜測。它會直接在代碼裡寫死 color: #121316; 或 padding: 24px;。表面上看完全符合視覺，但當品牌在下個季度調整識別色時，這些寫死的代碼就成了無法全域連動的技術負債。

3. 對話框貼手冊的認知負擔

有些細心的團隊會嘗試建立「Prompt 範本庫」，每次要叫 AI 寫代碼前，先貼上落落長五頁的規範說明。但現實是殘酷的：第一，沒有人願意每次修改一個標題就花三分鐘找手冊；第二，長篇文字極易超出模型的最佳專注範圍，聊到第五輪對話，AI 又開始忘記禁用 Combo Class 的規則。

二、Webflow 原生 Agent Instructions 核心機制解析

Webflow 這次推出的 Agent Instructions，在網站架構與 AI 代理之間建立了一條標準化的數據通道。系統直接從後台抓取結構化事實，免去人類每次在對話框充當傳聲筒的溝通耗損。

當你點擊生成時，Webflow 引擎會深度遍歷三個核心層級：

掃描維度	萃取內容細節	產出對 AI 的約束價值
全域設計變數 (Variables)	色彩色票（Hex/RGB）、字型家族、流動字級尺規、全局 Padding 與 Margin 尺寸系統。	徹底禁止寫死硬編碼數值，強制 AI 在生成樣式時直接引用 CSS 變數名稱。
排版命名規範 (Class Architecture)	識別 Client-First 體系、BEM 規範、全域 Utility Classes 與組合類（Combo Classes）的使用規則。	約束 AI 優先重用既有類別名稱，阻斷隨機命名造成的樣式表膨脹。
原生組件清單 (Components & Props)	全站 Button、Card、Navbar、Footer 等封裝組件及其開放的自訂屬性（Component Properties）。	要求 AI 優先調用現成組件實例，而非重複從空白 div 開始拼湊元素。

系統最終會將這些龐雜的資料，壓縮並格式化為一份高資訊密度的 Markdown 文件。這份文件就像是一張專門給 AI 看的網站骨架透視圖，清晰、精準、沒有任何模糊解讀的空間。

三、三步驟實戰：如何萃取並導入你的專屬 AI 助理？

在日常專案中導入這套流程非常直觀，整個配置過程只需要不到三分鐘：

步驟一：在 Webflow 專案中導出指引文件

進入 Webflow 專案後台的 Settings 選項，在開發者或 AI 協同面板中，可以找到「Export Agent Instructions」按鈕。系統會花費大約五秒鐘對畫布進行全量解析，並生成一份乾淨的 Markdown 格式文字。

步驟二：檢查關鍵約束條件

雖然自動萃取的精確度極高，但在發布給團隊之前，建議花一分鐘快速確認以下四個關鍵設定：

• 斷點規則確認：檢查桌面版（1440px）、平板（991px）與手機直向（479px）的預設斷點行為是否已被完整記錄。
• 例外標記：如果某些特殊頁面有獨立的命名空間（例如部落格內文頁使用了獨立的樣式包），確保該區塊被列入特殊清單。
• 組件巢狀限制：檢查指引中是否明確規範了不可跨層級強行破壞組件封裝。

步驟三：綁定外部 AI 工具的工作環境

拿到這份 Markdown 指引後，你可以在不同的協作場景中自由調用：

1. Cursor 或 VS Code 開發者：將文件命名為 .cursorrules 或放置在專案根目錄的 instructions.md 中，AI 每次生成代碼時都會強制優先閱讀。
2. Webflow 原生 AI Assistant：直接將指引儲存在工作區設定中，成為團隊所有成員共用的全域上下文。
3. Claude 或 ChatGPT 自訂助手：建立專屬的 Team GPT 或 Project，將該文件上傳為專案知識庫。

實戰經驗提醒：不要把這份文件當成一勞永逸的靜態手冊。每當設計團隊在 Style Guide 新增了主要顏色，或是重構了導覽列組件，記得隨手重新導出一份新的指引。保持 AI 助理與線上網站的步調一致，是維持代碼品質的唯一法門。

四、成效對比：配置前後的真實團隊產出差異

為了驗證實際效益，我們在一個中型 SaaS 品牌的官網重構專案中進行了嚴格的 A/B 測試。同樣是讓 AI 生成五個複雜的活動登陸頁模組，兩組的表現差異令人印象深刻：

評估指標	未配置指引（傳統 Prompt）	配置 Agent Instructions
新增重複類別數量	平均每個模組產生 14 個孤立 class	平均 0 個（98% 完美復用現有類別）
CSS 變數調用率	不到 15%（大量寫死 Hex 顏色與 px）	100% 精準引用全域 Variables
移動端破版修復時間	平均耗時 45 分鐘逐一調整	5 分鐘內微調即完成
單頁上線整體耗時	約 4.5 小時（溝通加修復）	不到 50 分鐘（維護效率提升約 5 倍）

數據背後最直接的改變，是設計師與行銷人員之間的工作氣氛。行銷團隊可以放心地利用 AI 嘗試各種排版佈局，而設計主管不必再像消防隊員一樣，隨時準備衝進後台清理混亂的代碼垃圾。

五、給品牌數位主管與設計代理商的落地建議

這項技術的普及，正在悄悄改變數位團隊的分工方式。如果你正在管理品牌的官網資產，或是經營一家網頁設計代理商，可以從以下兩個維度重新思考協同模式：

1. 品牌端：賦予行銷自主權，把設計師還給核心體驗

過去行銷人員想在官網發布一篇專題報導或測驗頁面，往往卡在排版人力不足。現在，只要由資深架構師在專案初期建立起高規格的 Style Guide 與 Agent Instructions，行銷人員就能在嚴格的邊界內，藉由 AI 助理自由搭建頁面。設計團隊不再是人肉排版工具，能將精力集中在更高維度的品牌視覺規劃上。

2. 代理商端：將「AI 協同指引」作為高價值交付項目

如果你是一家專注於 Webflow 的設計顧問或代理商，客戶在專案結案後最擔心的，往往是「日後自己維護會把網站弄亂」。在交付最終站點時，順手附帶一份專屬的 Agent Instructions 設定檔，教導客戶內部的營運團隊如何正確調用 AI 進行日常更新。這樣做既解決了客戶的後顧之憂，也讓你的專業服務與市面上只會套範本的工作室拉開明顯的價值差距。

網站建設的本質正在從繁瑣的手工砌磚，轉變為規則體系的建立。當你把基礎規則交代得足夠清晰，AI 才能真正成為並肩作戰的可靠隊友，讓團隊將專注力回歸到最核心的商業命題與品牌表達。