這次我們來看一個比較新的東西Vercel 推出的design.md。簡單說它是一個讓 AI Agent 在生成網(wǎng)頁時(shí)自動遵守品牌風(fēng)格規(guī)范的文件機(jī)制。它解決的問題非常典型明明給 AI 描述了“高端、簡潔、有科技感”結(jié)果生成出來的頁面還是接近默認(rèn)模板顏色、字體、間距全都對不上。design.md就是用來把設(shè)計(jì)約束寫到項(xiàng)目里讓 AI Agent 在寫代碼前先讀這份文件再按文件里的規(guī)則生成頁面。這篇文章會圍繞幾個重點(diǎn)展開design.md是什么、在 Vercel 的 AI 建設(shè)流程里如何生效、文件結(jié)構(gòu)怎么寫、如何配置品牌規(guī)范、如何驗(yàn)證 Agent 是否真正遵守了風(fēng)格約束、以及落地時(shí)的注意事項(xiàng)和最佳實(shí)踐。如果你是前端開發(fā)者、設(shè)計(jì)工程師或者在折騰 AI 生成網(wǎng)頁、Agent 自動化建站這篇文章可以直接收藏。1. 核心能力速覽能力項(xiàng)說明項(xiàng)目類型網(wǎng)頁建設(shè)規(guī)范文件 / AI 上下文配置方案來源Vercel 提出的design.md機(jī)制用于約束 AI Agent 生成網(wǎng)頁時(shí)的品牌風(fēng)格主要功能將品牌色、字體、間距、語氣、布局規(guī)則寫入項(xiàng)目讓 AI Agent 在生成代碼前自動讀取并遵守使用方式在項(xiàng)目根目錄創(chuàng)建design.md配合 Vercel 的 AI 建設(shè)流程使用是否依賴特定框架不依賴屬于規(guī)范文件可與 Next.js、Vite、靜態(tài)站點(diǎn)等搭配是否支持批量任務(wù)本身不處理批量任務(wù)但可在多個項(xiàng)目中復(fù)用同一品牌規(guī)范是否有 API不直接提供 API核心是文件和讀取機(jī)制適合場景AI 生成品牌官網(wǎng)、活動頁、組件庫預(yù)覽、多頁面站點(diǎn)統(tǒng)一風(fēng)格、Agent 自動化建設(shè)流程主要優(yōu)勢將設(shè)計(jì)約束從自然語言提示詞中剝離出來變成可復(fù)用、可版本控制的配置文件從能力表能看出來design.md不是一個獨(dú)立運(yùn)行的工具而是一個“給 AI 看的設(shè)計(jì)規(guī)范”。Vercel 的做法是把它放進(jìn) AI 建設(shè)網(wǎng)頁的流程里讓 Agent 先讀規(guī)范再動手寫代碼。這個思路比單純在提示詞里加一句“請使用品牌風(fēng)格”要穩(wěn)得多。2. 適用場景與使用邊界2.1 適合誰用適合幾類人前端開發(fā)者平時(shí)用 AI 生成頁面但總需要手動改樣式design.md可以把配色、字體、間距這些規(guī)則固定下來。設(shè)計(jì)工程師品牌規(guī)范不再只存在于 Figma 或者設(shè)計(jì)文檔里可以直接進(jìn)入項(xiàng)目倉庫讓 AI 建設(shè)流程自動讀取。獨(dú)立開發(fā)者和初創(chuàng)團(tuán)隊(duì)沒有完整設(shè)計(jì)系統(tǒng)但希望 AI 產(chǎn)出的頁面至少有統(tǒng)一的品牌感。做 Agent 自動化建設(shè)流程的人如果你正在搭一個“輸入需求自動生成多頁面站點(diǎn)”的工具design.md可以有更穩(wěn)定地約束每個輸出頁面的風(fēng)格。2.2 能解決什么問題最常見的場景是你在同一個項(xiàng)目里連續(xù)讓 Agent 生成好幾個頁面結(jié)果每個頁面的樣式風(fēng)格都不一致。一個頁面用了圓角大按鈕另一個頁面是全直角導(dǎo)航欄高度也不同。這不是模型能力不行而是缺少一個跨任務(wù)的統(tǒng)一約束。design.md把原本寫在提示詞里的設(shè)計(jì)信息抽出來變成一個項(xiàng)目內(nèi)的權(quán)威文件。Agent 在生成每個頁面時(shí)都能讀取到同一份規(guī)范輸出的一致性自然比靠提示詞硬控穩(wěn)定得多。2.3 不適合的場景不適合替代完整的設(shè)計(jì)系統(tǒng)design.md本質(zhì)上是一個約束文件無法替代設(shè)計(jì)令牌、組件庫、響應(yīng)式規(guī)則的完整工程體系。不適合完全脫離代碼審查AI Agent 生成的頁面仍然需要人工檢查。design.md能減少風(fēng)格漂移但不能保證布局一定合理、內(nèi)容一定準(zhǔn)確。不適合當(dāng)作運(yùn)行時(shí)樣式配置這份文件主要給 AI 讀不是給瀏覽器用的。2.4 版權(quán)、隱私與安全邊界如果要用 AI 生成的是品牌官網(wǎng)、產(chǎn)品頁面或者營銷素材需要注意素材版權(quán)問題。從材料看這個方案只約束網(wǎng)頁生成過程不涉及額外素材庫。如果 Agent 生成的過程中帶了圖片、圖標(biāo)、字體要確認(rèn)這些資源的授權(quán)范圍。尤其是品牌字體和品牌圖片盡量使用自有授權(quán)素材避免把未授權(quán)的內(nèi)容交給 Agent 自動使用。另外如果把design.md放進(jìn)公開倉庫等于公開了你的品牌設(shè)計(jì)規(guī)范。如果品牌色、字體、間距屬于公司內(nèi)部設(shè)計(jì)資產(chǎn)就要考慮倉庫權(quán)限不要把內(nèi)部規(guī)范直接公開。這既是一個隱私邊界問題也是品牌資產(chǎn)管理問題。3. 核心思路把設(shè)計(jì)規(guī)范變成 Agent 的上下文design.md的核心思路并不復(fù)雜AI 生成網(wǎng)頁時(shí)模型只能根據(jù)當(dāng)前對話里的信息來決定輸出。如果你在對話里描述品牌風(fēng)格這些描述會占用上下文空間而且不同頁面的描述可能不一致。design.md則是把設(shè)計(jì)規(guī)范固定成了一個項(xiàng)目文件Agent 在動手生成代碼前先讀取這個文件把規(guī)范裝進(jìn)上下文然后按規(guī)范執(zhí)行。這個思路和提示詞工程里的“預(yù)先設(shè)定角色和規(guī)則”類似只不過design.md是文件化的規(guī)則不依賴用戶在每次對話中重復(fù)輸入。這樣做的好處非常明確規(guī)范可復(fù)用同一個design.md可以用于多個頁面、多個項(xiàng)目不需要每次重新寫提示詞。規(guī)范可版本控制design.md放在 Git 倉庫里改起來有記錄回滾也方便。規(guī)范可審查設(shè)計(jì)團(tuán)隊(duì)可以直接看這個文件確認(rèn) AI 的建設(shè)規(guī)則是否符合品牌要求。規(guī)范可獨(dú)立更新不需要因?yàn)榕渖{(diào)整而重寫所有提示詞。Vercel 把這份文件放到項(xiàng)目上下文中讓 Agent 在生成網(wǎng)頁前自動讀取。從工程角度講這其實(shí)是在 AI 建設(shè)流程里增加了一道“規(guī)則前置”的步驟。你不需要在每次生成需求里重復(fù)描述品牌風(fēng)格Agent 會從文件里自己拿到這些信息。4. design.md 文件結(jié)構(gòu)與配置方法4.1 基本文件位置按照 Vercel 的做法design.md一般放在項(xiàng)目根目錄和README.md同級。路徑示例my-ai-site/ ├── design.md ├── app/ ├── components/ ├── public/ └── package.json放在根目錄的好處是Agent 在掃描項(xiàng)目結(jié)構(gòu)時(shí)能第一時(shí)間看到這份文件。如果放在深層目錄Agent 可能不會主動去讀。4.2 文件內(nèi)容結(jié)構(gòu)示例design.md的內(nèi)容沒有強(qiáng)制格式但建議按區(qū)塊組織。下面給出一個通用模板# 品牌設(shè)計(jì)規(guī)范 ## 品牌概述 - 品牌定位高端、專業(yè)、可信賴 - 目標(biāo)用戶企業(yè)級客戶 - 整體風(fēng)格簡潔、現(xiàn)代、克制的科技感 ## 色彩規(guī)范 - 主色#0A0A0A深黑 - 輔助色#2D2D2D暗灰 - 品牌強(qiáng)調(diào)色#FF4D00亮橙僅用于關(guān)鍵行動點(diǎn) - 背景色#F5F5F0米白 - 文字色#1A1A1A正文 - 輔助文字#6E6E6E ## 字體規(guī)范 - 主字體Inter - 備用字體system-ui, sans-serif - 標(biāo)題字重600 或 700 - 正文字重400 - 代碼字體JetBrains Mono ## 間距與布局 - 頁面最大寬度1200px - 區(qū)塊間距80px桌面端40px移動端 - 卡片圓角8px - 按鈕圓角6px - 導(dǎo)航欄高度64px ## 組件規(guī)范 - 按鈕主按鈕使用品牌強(qiáng)調(diào)色文字為白色懸停時(shí)透明度 90% - 卡片白色背景1px 邊框顏色 #EAEAEA - 導(dǎo)航鏈接默認(rèn)文字色懸停時(shí)使用品牌強(qiáng)調(diào)色 ## 內(nèi)容風(fēng)格 - 語氣專業(yè)、直接、不使用夸張營銷詞 - 標(biāo)題簡潔不超過 12 個字 - 正文短句為主避免長段落 - 禁止使用水軍式表達(dá)和夸大承諾 ## 禁止事項(xiàng) - 不使用漸變背景 - 不使用陰影過重的卡片 - 不使用非授權(quán)圖片素材 - 不改變品牌強(qiáng)調(diào)色的使用范圍這是一個通用模板具體內(nèi)容需要按實(shí)際品牌規(guī)范調(diào)整。關(guān)鍵是design.md寫得越具體Agent 執(zhí)行時(shí)越不容易偏。像“高端大氣”這種形容詞Agent 很難穩(wěn)定翻譯成樣式代碼但“主色 #0A0A0A強(qiáng)調(diào)色 #FF4D00”這種明確信息Agent 就能直接寫進(jìn) Tailwind 配置或者 CSS 變量。4.3 配合代碼文件的落地design.md不只是給 Agent 看的它最終要落到代碼里。為了讓 Agent 生成的代碼真正和規(guī)范對應(yīng)建議在項(xiàng)目中同步建立設(shè)計(jì)令牌比如tailwind.config.js中的顏色值、間距值等。Agent 看到design.md之后再看到項(xiàng)目里的設(shè)計(jì)令牌就能把規(guī)范映射到實(shí)際代碼。// tailwind.config.js 示例 module.exports { content: [./app/**/*.{js,ts,jsx,tsx}], theme: { extend: { colors: { primary: #0A0A0A, accent: #FF4D00, background: #F5F5F0, text: #1A1A1A, muted: #6E6E6E }, fontFamily: { sans: [Inter, system-ui, sans-serif], mono: [JetBrains Mono, monospace] }, borderRadius: { DEFAULT: 8px, button: 6px } } } };如果項(xiàng)目里已經(jīng)有完整的設(shè)計(jì)令牌design.md是在更上層告訴 Agent“這些令牌如何組合使用”。兩者互相配合效果比單獨(dú)一份文件好得多。5. 在 Agent 建設(shè)中啟用 design.md5.1 通用配置思路目前design.md更適合在 Vercel 的 AI 建設(shè)流程或類似支持“項(xiàng)目上下文讀取”的 Agent 工具中使用。如果你在自己搭建 Agent 流程思路是在 Agent 生成代碼前先讀取design.md文件內(nèi)容把它拼接進(jìn)系統(tǒng)提示詞或上下文再讓 Agent 輸出代碼。一個基礎(chǔ)流程可以這樣設(shè)計(jì)Agent 接收用戶需求例如“生成一個落地頁”。Agent 檢查項(xiàng)目根目錄是否存在design.md。如果存在Agent 先讀取文件內(nèi)容納入上下文。再讀取項(xiàng)目現(xiàn)有的設(shè)計(jì)令牌或組件代碼。按需求和規(guī)范生成頁面代碼或修改現(xiàn)有代碼。這個流程里design.md是一個前置約束Agent 每次執(zhí)行任務(wù)都會先過一遍規(guī)范。這和每次都靠用戶在提示詞里反復(fù)強(qiáng)調(diào)品牌風(fēng)格效果完全不同。5.2 自定義 Agent 的偽代碼示例如果你想把design.md納入自己的 Agent 工具可以參考下面的邏輯import os def load_design_spec(project_root: str) - str: design_path os.path.join(project_root, design.md) if os.path.exists(design_path): with open(design_path, r, encodingutf-8) as f: return f.read() return def build_agent_context(project_root: str, user_requirement: str) - str: design_spec load_design_spec(project_root) if design_spec: design_block f項(xiàng)目設(shè)計(jì)規(guī)范必須遵守\n{design_spec} else: design_block 未提供項(xiàng)目設(shè)計(jì)規(guī)范保持默認(rèn)簡潔風(fēng)格。 # 將 system prompt、設(shè)計(jì)規(guī)范、用戶需求一起交給模型 return f 你是前端開發(fā) Agent。生成代碼前先閱讀項(xiàng)目設(shè)計(jì)規(guī)范并嚴(yán)格按照規(guī)范輸出。 {design_block} 用戶需求如下 {user_requirement} 這個代碼示例只展示了基本的上下文組裝方式。實(shí)際使用時(shí)你還需要處理好現(xiàn)有代碼的讀取、生成文件的寫入以及后續(xù)的人工審查環(huán)節(jié)。5.3 在 Vercel 流程中的使用Vercel 的 AI 建設(shè)流程現(xiàn)在已經(jīng)支持把design.md作為項(xiàng)目的一部分Agent 自動讀取并執(zhí)行。使用起來的大致步驟是在項(xiàng)目中創(chuàng)建design.md寫入品牌規(guī)范。將項(xiàng)目推送到 Vercel 或關(guān)聯(lián)的 Git 倉庫。通過 Vercel 的 AI 建設(shè)功能發(fā)需求比如“生成一個產(chǎn)品展示頁”。Agent 自動讀取design.md按品牌風(fēng)格生成頁面代碼。人工檢查代碼確認(rèn)內(nèi)容、布局和樣式是否符合預(yù)期。這種方式的優(yōu)勢在于Agent 不再需要你每次都解釋品牌背景直接看文件就能知道“這個站應(yīng)該長什么樣”。6. 功能測試與效果驗(yàn)證6.1 測試目的design.md的有效性需要驗(yàn)證不是寫上文件就萬事大吉。驗(yàn)證的核心指標(biāo)是Agent 生成的頁面是否符合規(guī)范中的關(guān)鍵約束。重點(diǎn)看這幾個維度色彩是否準(zhǔn)確匹配。字體是否按規(guī)范配置。間距、圓角、按鈕樣式是否一致。多頁面之間的風(fēng)格是否統(tǒng)一。是否出現(xiàn)了規(guī)范里禁止的事項(xiàng)。6.2 測試用例設(shè)計(jì)建議按以下用例驗(yàn)證測試項(xiàng)輸入示例預(yù)期結(jié)果驗(yàn)證方式單頁面生成“生成一個產(chǎn)品介紹頁”頁面使用主色、品牌強(qiáng)調(diào)色按鈕為強(qiáng)調(diào)色圓角按鈕檢查頁面色彩和按鈕樣式多頁面一致性“分別生成首頁和關(guān)于頁”兩個頁面的導(dǎo)航、按鈕、卡片風(fēng)格一致對比關(guān)鍵組件的樣式禁止事項(xiàng)檢查只提交規(guī)范不做額外說明頁面不使用漸變和過重陰影檢查樣式代碼色彩準(zhǔn)確度檢查 CSS 或 Tailwind 配置主色、背景色、文字色和規(guī)范完全一致比對十六進(jìn)制色值按鈕生成“生成一個帶按鈕的活動頁”按鈕使用品牌強(qiáng)調(diào)色懸停變透明度檢查按鈕樣式代碼6.3 判斷標(biāo)準(zhǔn)通過生成頁面的配色、字體、按鈕、卡片、導(dǎo)航欄均與design.md描述一致沒有突破禁止事項(xiàng)。基本通過整體風(fēng)格一致但個別組件細(xì)節(jié)存在偏差比如某個按鈕顏色不統(tǒng)一需要微調(diào)。不通過生成頁面仍接近默認(rèn)模板沒有體現(xiàn)品牌色彩或者規(guī)范只部分生效。如果出現(xiàn)不通過的情況優(yōu)先檢查design.md描述是否足夠具體。把“高級感”改成具體的色值、字體、間距值通常能明顯提升效果。7. 常見問題與排查方法問題現(xiàn)象可能原因排查方式解決方案Agent 生成的頁面完全沒有品牌風(fēng)格design.md未被讀取或文件路徑不對檢查項(xiàng)目根目錄是否存在design.md檢查 Agent 日志中是否有文件讀取記錄把文件移到根目錄重新發(fā)起生成任務(wù)色彩有偏差看起來像同一色系但不精確design.md中的顏色描述太模糊例如“深色”檢查規(guī)范中是否寫明具體十六進(jìn)制色值使用精確色值例如#0A0A0A部分組件遵守規(guī)范部分組件沒有項(xiàng)目里已有組件代碼覆蓋了規(guī)范設(shè)置檢查已有組件中的樣式優(yōu)先級統(tǒng)一調(diào)整組件代碼或明確組件覆蓋規(guī)則字體沒有生效項(xiàng)目未正確加載字體文件檢查字體加載方式和font-family配置在項(xiàng)目中引入字體資源并確認(rèn) CSS 配置正確頁面風(fēng)格一致但內(nèi)容布局有問題design.md只約束了樣式?jīng)]有約束布局層級檢查design.md中是否有布局規(guī)范增加區(qū)塊順序、最大寬度、柵格等布局規(guī)則Agent 在長需求中丟失部分規(guī)范約束上下文過長規(guī)范信息被壓縮檢查 Agent 的上下文管理策略將關(guān)鍵規(guī)范放在上下文中更靠前的位置或拆分任務(wù)多頁面出現(xiàn)樣式漂移每個頁面任務(wù)獨(dú)立沒有共享上下文檢查每個頁面的生成日志中是否都讀取了design.md在每次生成任務(wù)前強(qiáng)制讀取規(guī)范文件8. 最佳實(shí)踐與使用建議8.1 規(guī)范要具體到值而不是形容詞寫design.md時(shí)盡量把所有描述落到可執(zhí)行的值上。不要寫“使用高級感顏色”要寫“主色#0A0A0A強(qiáng)調(diào)色#FF4D00”。不要寫“間距舒服一點(diǎn)”要寫“區(qū)塊間距 80px卡片內(nèi)邊距 24px”。Agent 對具體數(shù)值的把握遠(yuǎn)比對感受類描述的把握更穩(wěn)定。8.2 與設(shè)計(jì)令牌同步維護(hù)design.md是給 AI 看的規(guī)則設(shè)計(jì)令牌是給代碼用的變量兩者要保持一致。如果項(xiàng)目里已經(jīng)有tailwind.config.js配置或 CSS 變量design.md里的色值、字體、間距要與之一一對應(yīng)。否則 Agent 按design.md生成代碼時(shí)可能和現(xiàn)有樣式體系沖突。8.3 控制規(guī)范文件長度design.md不是越長越好。如果文件太長Agent 在有限上下文里可能關(guān)注不到關(guān)鍵信息。建議把內(nèi)容控制在 100 到 300 行左右只保留影響視覺表現(xiàn)的核心規(guī)則。像組件庫 API 文檔、頁面模板代碼這類信息應(yīng)該放在其他文檔里不要讓design.md承擔(dān)所有職責(zé)。8.4 多項(xiàng)目復(fù)用品牌規(guī)范如果團(tuán)隊(duì)有多個項(xiàng)目需要統(tǒng)一品牌風(fēng)格可以把design.md做成模板復(fù)制到每個項(xiàng)目的根目錄再按項(xiàng)目特性微調(diào)。這樣可以保證基礎(chǔ)品牌規(guī)范一致同時(shí)保留單項(xiàng)目調(diào)整空間。更進(jìn)階的玩法是用腳本把design.md生成到多個倉庫中但需要注意各項(xiàng)目是否有特殊規(guī)范覆蓋。8.5 重視人工審查design.md可以明顯提升 AI 生成頁面的一致性但不能替代人工審查。每次生成后開發(fā)者或設(shè)計(jì)師要檢查關(guān)鍵頁面導(dǎo)航欄、按鈕、卡片、表單、頁腳。重點(diǎn)不是看“是否好看”而是看“是否遵守了規(guī)范”尤其是色值、字體、圓角這些可以量化的指標(biāo)。8.6 注意合規(guī)與授權(quán)如果項(xiàng)目最終要上線使用且design.md涉及品牌 Logo、商標(biāo)、特定圖片素材或商業(yè)字體需要確保這些資源的授權(quán)。品牌官網(wǎng)等場景中Logo 通常有嚴(yán)格的展示規(guī)范不能因?yàn)?AI 生成方便就隨意調(diào)整間距、比例和顏色。另外如果 AI Agent 在生成頁面時(shí)使用了外部圖片或圖標(biāo)資源要確認(rèn)這些資源是否允許商用。穩(wěn)妥的做法是使用團(tuán)隊(duì)已有授權(quán)素材或者讓 Agent 只生成占位結(jié)構(gòu)正式素材由設(shè)計(jì)團(tuán)隊(duì)替換。9. 總結(jié)與下一步design.md是比較輕量但很實(shí)用的方案它解決的是 AI 生成網(wǎng)頁時(shí)風(fēng)格漂移的問題。把品牌規(guī)范從提示詞里抽出來放到項(xiàng)目文件中讓 Agent 在生成前先讀取思路簡單落地也不復(fù)雜。如果你正在做 Vercel 的 AI 建設(shè)流程、自建網(wǎng)頁生成 Agent或者只是希望 AI 輸出的頁面更有品牌感建議按這個思路試一下先寫一份 50 行左右的design.md包含主色、字體、間距、按鈕樣式這些基礎(chǔ)規(guī)范然后跑一次頁面生成任務(wù)對比加文件前后的輸出差異。最容易踩的坑有兩個一是規(guī)范寫得太模糊Agent 執(zhí)行時(shí)偏了方向二是項(xiàng)目里有舊代碼Agent 生成的規(guī)范和已有組件樣式?jīng)_突。前者靠具體化數(shù)值解決后者靠同步設(shè)計(jì)令牌、統(tǒng)一組件代碼解決。下一步可以繼續(xù)擴(kuò)展的方向包括把design.md做成團(tuán)隊(duì)模板在多個項(xiàng)目里復(fù)用與設(shè)計(jì)令牌接軌把規(guī)范從文檔層落到代碼層在自定義 Agent 流程中把design.md封裝成強(qiáng)制前置讀取的上下文模塊。也可以嘗試按頁面類型拆分規(guī)范比如首頁、營銷頁、文檔頁各有一套子規(guī)則讓 Agent 在不同場景下獲取更精準(zhǔn)的約束。