用Figma Make出圖三個(gè)月我最大的一個(gè)感受是大部分人說(shuō)它“畫不準(zhǔn)”其實(shí)不是AI沒(méi)聽(tīng)懂而是Prompt根本沒(méi)搭好。這個(gè)工具和Midjourney那類文生圖有一個(gè)本質(zhì)區(qū)別——它不是在畫圖而是在Figma畫布上生成一套可編輯的真實(shí)圖層。在這個(gè)機(jī)制下越像“需求文檔”的Prompt越準(zhǔn)越像“靈感的囈語(yǔ)”的Prompt越飄。這篇文章想把我目前在用的整套可復(fù)用Prompt模板、完整走查流程和踩坑記錄整理出來(lái)給正在用Figma Make做產(chǎn)品初稿、UI探索和提案稿的設(shè)計(jì)師一個(gè)可以直接抄作業(yè)的版本。文章里所有內(nèi)容都來(lái)自我自己的實(shí)際項(xiàng)目不保證每個(gè)版本都適用但大方向應(yīng)該能幫你把生成結(jié)果的方差壓下去。1. 為什么“每次重寫Prompt”等于把決定權(quán)交給AI自由發(fā)揮1.1 我最早用Make的四次失敗剛接觸Figma Make那會(huì)兒我的用法和大多數(shù)人一樣接到需求當(dāng)場(chǎng)即興寫一段Prompt粘貼進(jìn)去等結(jié)果。聽(tīng)起來(lái)很靈活實(shí)際上慘不忍睹。我統(tǒng)計(jì)過(guò)自己前兩周的生成記錄平均每個(gè)畫面要重試4到5次改Prompt的時(shí)間比我從空白畫布手畫還久。舉四個(gè)最典型的翻車?yán)幽銈兏惺芤幌碌谝粋€(gè)需求是“做一個(gè)好看的零售App首頁(yè)”。我寫了“好看的零售App首頁(yè)要有促銷橫幅、商品列表、底部導(dǎo)航”結(jié)果它給我生成了一版紫色漸變、超大圓角、所有商品卡片堆成一坨的頁(yè)面。單看不丑但只要換到真實(shí)商品內(nèi)容里首頁(yè)的“促銷感”和“貨架感”完全不對(duì)。第二個(gè)我偷懶寫“多生成幾個(gè)頁(yè)面”結(jié)果它一口氣吐了7頁(yè)。仔細(xì)一看第一頁(yè)和第三頁(yè)是同一個(gè)頁(yè)面只是模塊順序換了。我明明只需要4頁(yè)它擅自替我做了一種“內(nèi)容編排”這就是Prompt里沒(méi)有明確數(shù)量約束的結(jié)果。第三個(gè)我讓AI“用藍(lán)色調(diào)”它確實(shí)用了藍(lán)色但首頁(yè)的藍(lán)色、列表頁(yè)的藍(lán)色、詳情頁(yè)的藍(lán)色完全是三種藍(lán)。有的偏紫、有的偏灰、有的飽和度拉滿?？雌饋?lái)是“一個(gè)App”實(shí)際上像三個(gè)團(tuán)隊(duì)各做了一頁(yè)然后拼在一起。第四個(gè)最坑。我在一個(gè)幾輪對(duì)話的歷史里反復(fù)修改Prompt風(fēng)格好不容易穩(wěn)住了。第二天新開(kāi)對(duì)話我忘了把之前積累的風(fēng)格約束復(fù)制過(guò)去只寫了“和昨天一樣”。結(jié)果它根本不認(rèn)識(shí)“昨天”生成了完全不同的風(fēng)格。每次重寫Prompt都等于把風(fēng)格、結(jié)構(gòu)、內(nèi)容這三樣?xùn)|西的判斷權(quán)全部交給了AI的隨機(jī)偏好。1.2 Make的生成機(jī)制決定了Prompt必須像設(shè)計(jì)文檔后來(lái)我去研究Figma Make的生成邏輯發(fā)現(xiàn)它的工作機(jī)制和Midjourney完全不同。Midjourney是在算像素你給一堆情緒化描述它能腦補(bǔ)出漂亮畫面。但Make是在生成圖層它要在Figma畫布里創(chuàng)建frame、text、shape這些真實(shí)對(duì)象。這意味著它必須理解頁(yè)面結(jié)構(gòu)、層級(jí)關(guān)系、模塊順序然后把這些結(jié)構(gòu)翻譯成圖層樹(shù)。這帶來(lái)的直接結(jié)果是它對(duì)“目標(biāo)描述”的理解遠(yuǎn)好于“像素描述”。你說(shuō)“這是一個(gè)咖啡店點(diǎn)單頁(yè)第一屏是品牌區(qū)第二屏是飲品分類第三屏是熱門推薦”它能給你搭出合理的結(jié)構(gòu)。但你說(shuō)“高級(jí)一點(diǎn)、精致一點(diǎn)、有質(zhì)感一點(diǎn)”它只會(huì)自由發(fā)揮因?yàn)樗鼘?duì)“高級(jí)”這個(gè)詞沒(méi)有統(tǒng)一的解碼表。另一個(gè)關(guān)鍵點(diǎn)在于Make不是從零開(kāi)始閉門造車它會(huì)讀取你在Figma畫布上已經(jīng)有的內(nèi)容。如果你在畫布上先做了某個(gè)模塊的設(shè)計(jì)再觸發(fā)Make它會(huì)主動(dòng)模仿那個(gè)模塊的風(fēng)格。這本來(lái)是好事但也意味著如果你畫布上留了一堆亂七八糟的實(shí)驗(yàn)圖層、舊版本、參考截圖它會(huì)把那些東西一起當(dāng)成風(fēng)格來(lái)源結(jié)果生成的頁(yè)面風(fēng)格四分五裂。所以我把Prompt的定位從“聊天內(nèi)容”改成了“設(shè)計(jì)文檔”。每次生成之前我會(huì)先把需求拆成結(jié)構(gòu)化的字段像填表一樣把信息寫清楚再用模板組裝。這樣每次生成都是同一套信息的輸入輸出邏輯AI的“自由發(fā)揮空間”就被壓縮到可控范圍。這也就是為什么我強(qiáng)調(diào)可復(fù)用Prompt它最大的價(jià)值不是省打字時(shí)間而是穩(wěn)定輸出。1.3 判斷模板是否有效的標(biāo)準(zhǔn)我給自己定過(guò)一個(gè)判斷標(biāo)準(zhǔn)同一個(gè)Prompt灌進(jìn)同一個(gè)產(chǎn)品需求里不同對(duì)話生成的結(jié)果方差如果大于三成說(shuō)明模板的有效信息不足需要繼續(xù)補(bǔ)充約束。注意我不是說(shuō)每次要生成一模一樣的頁(yè)面——那也不現(xiàn)實(shí)因?yàn)槟Ｐ捅旧碛须S機(jī)采樣。但如果連“頁(yè)面數(shù)量”“模塊順序”“整體色系”這種宏觀的東西都每次變那這個(gè)模板就是廢的。后來(lái)我總結(jié)出判斷Prompt是否合格只看三個(gè)問(wèn)題把Prompt里所有形容詞刪掉頁(yè)面結(jié)構(gòu)還能保持嗎把業(yè)務(wù)背景刪掉生成結(jié)果還像這個(gè)行業(yè)的頁(yè)面嗎把套話刪掉AI還能知道要輸出幾個(gè)頁(yè)面、每頁(yè)放什么模塊嗎如果三個(gè)問(wèn)題里有一個(gè)答案是否模板就要改。這套排查邏輯在我后面講具體案例時(shí)會(huì)反復(fù)用到。2. 一套可直接抄走的可復(fù)用Prompt模板結(jié)構(gòu)、參數(shù)與作用原理2.1 模板設(shè)計(jì)思路管理兩個(gè)自由度做可復(fù)用Prompt核心是管理兩個(gè)自由度結(jié)構(gòu)自由度和視覺(jué)自由度。結(jié)構(gòu)自由度指的是頁(yè)面的清單、模塊順序、頁(yè)面之間的關(guān)系視覺(jué)自由度指的是色彩、字體、圓角、卡片形式這類表層樣式。兩個(gè)自由度都不能靠形容詞管理要靠“變量加邊界”。變量就是明確告訴AI“這個(gè)位置有具體值”邊界就是告訴AI“這個(gè)維度你只有這些可選范圍”。比如“主色是深綠輔助色是暖灰背景色是米白”這就是三個(gè)變量加一個(gè)范圍而“配色看起來(lái)舒服”就沒(méi)有任何約束力。這里有個(gè)反直覺(jué)的點(diǎn)AI默認(rèn)有自己的一套審美偏好。你不寫圓角它默認(rèn)可能給你16到24px的大圓角你不寫字體它默認(rèn)可能給你一套英文優(yōu)先的字庫(kù)你不寫底部導(dǎo)航它也會(huì)很自然地在每頁(yè)底部塞一個(gè)導(dǎo)航欄。這些默認(rèn)值在單個(gè)頁(yè)面上都不難看但放在整個(gè)產(chǎn)品體系里就是不協(xié)調(diào)。所以可復(fù)用模板的重心不是“讓AI畫得更好看”而是“讓AI每次都在同一個(gè)框架里發(fā)揮”。2.2 模板完整版直接復(fù)制可用我目前在用的模板大概是下面這樣用純文本格式維護(hù)在Notion里每次接到新需求就復(fù)制一份、替換變量。不同項(xiàng)目會(huì)有些微調(diào)但骨架始終沒(méi)變。ROLE / 產(chǎn)品背景 - 產(chǎn)品類型 - 使用人群 - 核心使用場(chǎng)景 PAGES / 頁(yè)面清單共N頁(yè)按邏輯順序排列 1. 頁(yè)面名稱 2. 頁(yè)面名稱 3. 頁(yè)面名稱 4. 頁(yè)面名稱 STRUCTURE / 頁(yè)面結(jié)構(gòu) 頁(yè)面1 - 頁(yè)面目標(biāo) - 第一屏必須包含 - 模塊順序業(yè)務(wù)優(yōu)先級(jí)從高到低 頁(yè)面2 - 頁(yè)面目標(biāo) - 第一屏必須包含 - 模塊順序業(yè)務(wù)優(yōu)先級(jí)從高到低 STYLE / 風(fēng)格參數(shù) - 字體族 - 主色 - 輔助色 - 背景色 - 圓角范圍8px 到 16px - 卡片風(fēng)格 - 圖標(biāo)風(fēng)格 ASSETS / 內(nèi)容數(shù)據(jù) - 文案語(yǔ)言中文 - 文案風(fēng)格使用行業(yè)真實(shí)詞匯 - 圖片使用灰色占位塊不生成攝影圖 RULES / 排除項(xiàng) - 不要出現(xiàn)與業(yè)務(wù)無(wú)關(guān)的裝飾元素 - 不要在每個(gè)頁(yè)面重復(fù)添加底部導(dǎo)航 - 不要使用酸性漸變和玻璃擬態(tài) OUTPUT / 輸出 - 頁(yè)面數(shù)N - 每個(gè)頁(yè)面一個(gè)頂層frame - frame命名規(guī)則01_頁(yè)面名稱2.3 每個(gè)字段不是在提建議而是在定約束有人可能會(huì)問(wèn)這模板看起來(lái)平淡哪來(lái)的效果關(guān)鍵在于每個(gè)字段都在縮小生成結(jié)果的取值空間。我逐條說(shuō)ROLE字段決定的是行業(yè)氣質(zhì)。你寫“健身約課App”AI會(huì)朝運(yùn)動(dòng)類產(chǎn)品靠配色會(huì)默認(rèn)偏深色或熒光色你寫“線上問(wèn)診平臺(tái)”它會(huì)朝偏藍(lán)、偏白的醫(yī)療感靠。這個(gè)字段管的是整體氣場(chǎng)代價(jià)是必須寫準(zhǔn)寫含糊了等于沒(méi)寫。PAGES字段決定的是產(chǎn)出邊界。AI生成的時(shí)候是按頁(yè)面走的每一頁(yè)都是獨(dú)立的frame。你明確說(shuō)4頁(yè)它就是4頁(yè)你寫“幾個(gè)頁(yè)面”它就會(huì)按自己的理解給你3到7頁(yè)。對(duì)設(shè)計(jì)師來(lái)說(shuō)頁(yè)面數(shù)量本身就是需求約束AI無(wú)權(quán)替你做主。STRUCTURE字段是模板里最長(zhǎng)的部分也是信息量最大的部分。它本質(zhì)上在寫每個(gè)頁(yè)面的信息架構(gòu)。我用“第一屏必須包含”這個(gè)說(shuō)法是因?yàn)镸ake對(duì)首屏的處理經(jīng)常失控——它喜歡把最漂亮的模塊放在首屏哪怕那個(gè)模塊業(yè)務(wù)優(yōu)先級(jí)最低。有了這句話它才會(huì)先把首屏塞滿你指定內(nèi)容再考慮其他模塊。STYLE字段里我特意寫了“圓角范圍8px到16px”。單一數(shù)字反而容易出問(wèn)題因?yàn)槟憬o8px它會(huì)全用8px所有卡片邊緣都顯得生硬給“小圓角”它又可能理解為4px或24px。給一個(gè)范圍讓它在合理區(qū)間內(nèi)自己選出來(lái)的統(tǒng)一感會(huì)好很多。ASSETS字段里“使用灰色占位塊、不生成攝影圖”是我踩過(guò)幾次坑后加的。Make默認(rèn)喜歡生成很漂亮的圖片內(nèi)容但這些圖片不是可用的產(chǎn)品素材還會(huì)把整個(gè)頁(yè)面的真實(shí)內(nèi)容感沖淡。設(shè)計(jì)初稿要的是布局和結(jié)構(gòu)圖片內(nèi)容反而是噪音。RULES字段是典型的“排除法”。AI生成時(shí)是概率采樣你不排除某些風(fēng)格它總會(huì)在某些頁(yè)面里冒出來(lái)。我這里寫的三條是我項(xiàng)目里最常見(jiàn)的三類跑偏你們可以根據(jù)自己的產(chǎn)品類型調(diào)整。2.4 一個(gè)快速輕量版模板完整模板適合正式項(xiàng)目但很多場(chǎng)景下我只是想快速探索幾版布局并不需要那么重的約束。這時(shí)候我會(huì)用下面這個(gè)輕量版字段少一半生成也快產(chǎn)品健身約課App 頁(yè)面首頁(yè)、課程列表、預(yù)約詳情、個(gè)人中心 首頁(yè)首屏品牌區(qū) 分類標(biāo)簽 今日熱門課程 課程列表日期篩選 課程卡片 可約狀態(tài) 詳情頁(yè)課程信息卡 教練 預(yù)約表單 個(gè)人中心用戶信息 預(yù)約記錄 風(fēng)格主色深綠輔助暖灰背景米白圓角16以內(nèi) 數(shù)量4頁(yè)輕量版的核心是保留頁(yè)面結(jié)構(gòu)、首屏要求、矢量級(jí)風(fēng)格參數(shù)、數(shù)量四個(gè)東西其余全部砍掉。它適合做初步探索完事之后再去完善完整模板。兩套模板配合使用效率和穩(wěn)定性都能兼顧。3. 一個(gè)完整案例健身預(yù)約App從需求到初稿的生成全過(guò)程3.1 需求拆解先自己想清楚再讓AI動(dòng)手我以一個(gè)虛擬的健身工作室預(yù)約需求為例完整走一遍流程。背景是小型健身工作室要做App核心用戶是需要約團(tuán)課的老會(huì)員。第一版不需要全部功能只要首頁(yè)、課程列表、預(yù)約詳情、個(gè)人中心四個(gè)頁(yè)面能走通預(yù)約路徑。按照模板我會(huì)先用一個(gè)表格把每個(gè)頁(yè)面的目標(biāo)和核心模塊拆清楚頁(yè)面用戶在這頁(yè)要完成什么核心模塊關(guān)鍵轉(zhuǎn)化出口首頁(yè)快速看到今天有什么課產(chǎn)生預(yù)約意愿品牌區(qū)、今日熱門課程、課程分類標(biāo)簽、底部導(dǎo)航預(yù)約按鈕課程列表查看最近七天的課程并篩選時(shí)間日期篩選器、課程卡片列表、可約狀態(tài)標(biāo)識(shí)課程卡入口預(yù)約詳情確認(rèn)教練、時(shí)間、價(jià)格后提交預(yù)約課程信息卡、教練介紹、預(yù)約表單提交預(yù)約按鈕個(gè)人中心查看我的預(yù)約記錄和賬號(hào)信息用戶信息、預(yù)約記錄列表、設(shè)置入口改期/取消入口這個(gè)拆解過(guò)程不要跳步。很多人用AI出圖不理想是因?yàn)樽约憾紱](méi)想清楚頁(yè)面要放什么卻指望AI能替你想。AI能快速把模塊排成頁(yè)面但模塊本身是什么需要你先定義。尤其是“關(guān)鍵轉(zhuǎn)化出口”這一列是決定頁(yè)面信息層級(jí)的關(guān)鍵。拆完之后把表格內(nèi)容填進(jìn)完整版模板得到最終Prompt。為了方便閱讀我貼一下去掉注釋后的實(shí)際提交版本ROLE / 產(chǎn)品背景 - 產(chǎn)品類型健身工作室團(tuán)體課預(yù)約App - 使用人群已有健身習(xí)慣、會(huì)定期約團(tuán)課的都市白領(lǐng) - 核心使用場(chǎng)景打開(kāi)App看今天有什么課、快速預(yù)約、管理自己的預(yù)約記錄 PAGES / 頁(yè)面清單共4頁(yè)按用戶操作路徑排列 1. 首頁(yè) 2. 課程列表 3. 預(yù)約詳情 4. 個(gè)人中心 STRUCTURE / 頁(yè)面結(jié)構(gòu) 首頁(yè) - 頁(yè)面目標(biāo)讓用戶3秒內(nèi)看到今天可預(yù)約的熱門課程 - 第一屏必須包含品牌區(qū)、課程分類標(biāo)簽、今日熱門課程橫向列表 - 模塊順序品牌區(qū)課程分類標(biāo)簽今日熱門課程工作室介紹底部導(dǎo)航 課程列表 - 頁(yè)面目標(biāo)按日期篩選并瀏覽全部可約課程 - 第一屏必須包含日期篩選器、課程卡片列表 - 模塊順序日期篩選器課程卡片列表顯示可約/約滿狀態(tài) 預(yù)約詳情 - 頁(yè)面目標(biāo)確認(rèn)課程信息并完成預(yù)約 - 第一屏必須包含課程信息卡、教練簡(jiǎn)介、預(yù)約表單 - 模塊順序課程信息卡倒計(jì)時(shí)與剩余名額教練簡(jiǎn)介預(yù)約表單 個(gè)人中心 - 頁(yè)面目標(biāo)查看我的預(yù)約記錄和個(gè)人信息 - 第一屏必須包含用戶信息頭、預(yù)約記錄列表 - 模塊順序用戶信息頭預(yù)約記錄設(shè)置入口 STYLE / 風(fēng)格參數(shù) - 字體族非襯線中文優(yōu)先 - 主色深橄欖綠 - 輔助色暖灰 - 背景色米白 - 圓角范圍8px 到 16px - 卡片風(fēng)格低陰影、白底、線條簡(jiǎn)潔 - 圖標(biāo)風(fēng)格線性圖標(biāo) ASSETS / 內(nèi)容數(shù)據(jù) - 文案語(yǔ)言中文 - 文案風(fēng)格使用課程行業(yè)真實(shí)詞匯 - 圖片使用灰色占位塊不生成攝影圖 RULES / 排除項(xiàng) - 不要出現(xiàn)與課程預(yù)約無(wú)關(guān)的裝飾元素 - 不要讓個(gè)人中心重復(fù)出現(xiàn)底部導(dǎo)航 - 不要使用熒光色和玻璃擬態(tài) OUTPUT / 輸出 - 頁(yè)面數(shù)4 - 每個(gè)頁(yè)面一個(gè)頂層frame - frame命名規(guī)則01_首頁(yè)、02_課程列表、03_預(yù)約詳情、04_個(gè)人中心3.2 操作細(xì)節(jié)與生成結(jié)果在實(shí)際操作時(shí)我會(huì)先在Figma里新建一個(gè)1200乘900的空白frame選中它再觸發(fā)Make。這樣做的好處是讓AI明確知道“當(dāng)前畫布就是我的頁(yè)面容器”而不是讓它自己去猜一個(gè)畫布尺寸。粘貼Prompt后等待生成。Make一般會(huì)給我?guī)装孀凅w我挑一版方向最對(duì)的展開(kāi)——注意這里不是挑最漂亮的而是挑結(jié)構(gòu)最接近我要求的。顏色和風(fēng)格后期都能改結(jié)構(gòu)錯(cuò)了基本等于重做。第一輪生成通常不會(huì)完美。我這次生成后的結(jié)果有三處跑偏每一處都有自己的原因和修法。第一處跑偏在首頁(yè)。我要求“今日熱門課程橫向列表”它確實(shí)做了橫滑卡片但把卡片高拉到了差不多四分之一屏導(dǎo)致整個(gè)第一屏只有這一個(gè)模塊品牌區(qū)被擠上去分類標(biāo)簽列被擠到了首屏以下。簡(jiǎn)單說(shuō)AI把“熱門課程”理解成了首屏唯一主角而不是首屏的一個(gè)組成部分。修法很簡(jiǎn)單不用重新寫整個(gè)Prompt。我選中首頁(yè)這個(gè)frame重新觸發(fā)Make把原來(lái)“第一屏必須包含品牌區(qū)、課程分類標(biāo)簽、今日熱門課程橫向列表”這句話改成“第一屏垂直順序固定為品牌區(qū)占一行課程分類標(biāo)簽占一行然后才是今日熱門課程橫向列表卡片高度不超過(guò)160px”。第二次生成結(jié)果就正常了。這也驗(yàn)證了一件事與其重做不如針對(duì)跑偏的頁(yè)面做局部重新生成Prompt只改對(duì)應(yīng)模塊的約束別的都不要?jiǎng)?。第二處跑偏在預(yù)約詳情頁(yè)。AI給我生成的課程信息卡里只有課程名稱、教練頭像和時(shí)間卻沒(méi)有我要求的“倒計(jì)時(shí)與剩余名額”。這不是它沒(méi)聽(tīng)懂而是我在STRUCTURE里把這幾個(gè)模塊放在了同一行描述里它判斷“預(yù)約表單”才是本頁(yè)的核心就把這種緊迫感信息當(dāng)作輔助內(nèi)容省略了。修正方式是直接在該頁(yè)重新生成單獨(dú)補(bǔ)一個(gè)H3層級(jí)的內(nèi)容塊明確寫“課程信息卡下方必須顯示距離開(kāi)課倒計(jì)時(shí)和剩余名額兩行信息”。這次生成后倒計(jì)時(shí)和名額都出來(lái)了。這里面有個(gè)心得Make對(duì)“強(qiáng)調(diào)信息”的理解依賴位置和獨(dú)立性。你越是把它單獨(dú)寫成一行它越容易當(dāng)成一個(gè)必選模塊你越是把它和別的內(nèi)容擠在一起描述它就越容易當(dāng)作附加裝飾。第三處跑偏在個(gè)人中心。AI給個(gè)人中心頁(yè)也加了一條底部導(dǎo)航和首頁(yè)的重復(fù)了。原因是我在PAGES里定義了四個(gè)頁(yè)面但沒(méi)有告訴它“底部導(dǎo)航是全局元素只在首頁(yè)出現(xiàn)一次”。它在生成個(gè)人中心時(shí)默認(rèn)每個(gè)頁(yè)面都適合放底部導(dǎo)航于是復(fù)制了一份。這個(gè)問(wèn)題的修法比前兩個(gè)簡(jiǎn)單。我回到個(gè)人中心頁(yè)重新生成在RULES里把“不要讓個(gè)人中心重復(fù)出現(xiàn)底部導(dǎo)航”這一條保留然后只生成該頁(yè)。第二次結(jié)果沒(méi)有底部導(dǎo)航了。如果你們遇到更頑固的重復(fù)問(wèn)題可以在模板規(guī)則里加一條“所有內(nèi)頁(yè)都不允許出現(xiàn)底部導(dǎo)航”效果會(huì)更好。3.3 從生成稿到工程稿組件化整理流程生成稿確認(rèn)結(jié)構(gòu)沒(méi)問(wèn)題之后距離真正能用的設(shè)計(jì)稿還有一段路。Make生成的圖層樹(shù)命名普遍比較亂很多是系統(tǒng)默認(rèn)的隨機(jī)名稱也沒(méi)有組件概念。這種稿子如果直接交出去后續(xù)改一輪就會(huì)瘋掉。我的整理流程固定三步大概花15到20分鐘第一步統(tǒng)一文本樣式。全選所有文本圖層統(tǒng)一字體族、字重、字號(hào)層級(jí)。Make生成的英文風(fēng)格字在下中文項(xiàng)目里經(jīng)常不合適這一步不能省。第二步把重復(fù)出現(xiàn)的卡片轉(zhuǎn)成組件。比如課程列表里的每張課程卡手動(dòng)整理一張成一個(gè)Component其余拖進(jìn)去替換。注意替換時(shí)保留原位置和間距別讓自動(dòng)布局打亂。第三步用Auto Layout重排主要模塊間距。Make生成的間距經(jīng)常是奇怪的值例如17、23、31這類非8倍數(shù)。我習(xí)慣選中模塊后套Auto Layout再統(tǒng)一改成8的倍數(shù)間距體系。處理完之后初稿就變成了可以繼續(xù)往上疊設(shè)計(jì)細(xì)節(jié)的“半成品”。整個(gè)流程下來(lái)從需求拆解到最終可交付的初稿我大約花一個(gè)晚上。相比從空白畫布逐步搭建省下來(lái)的主要是排版和布局時(shí)間而設(shè)計(jì)判斷還在我自己手里。4. Figma Make的真實(shí)理解邊界哪些描述有效哪些是白費(fèi)4.1 把它當(dāng)成會(huì)畫圖的初級(jí)需求分析師用了這么久我給Make的最終定位是一個(gè)會(huì)畫圖的初級(jí)需求分析師。它懂頁(yè)面結(jié)構(gòu)能分辨模塊主次能照葫蘆畫瓢但它不具備真正的產(chǎn)品判斷力也不理解像素級(jí)控制。舉幾個(gè)我實(shí)際測(cè)試過(guò)的說(shuō)法“首頁(yè)頂部是Hero區(qū)用大標(biāo)題加搜索框”——它能做對(duì)因?yàn)樗繦ero區(qū)是什么。 “圖標(biāo)的線條粗細(xì)盡量保持一致”——它完全不在意因?yàn)樯蓵r(shí)它是用圖層拼出來(lái)的不是按設(shè)計(jì)規(guī)范畫的。 “這里的間距要精確到12px”——它給不了精確值經(jīng)常是11、14、16之間浮動(dòng)。 “整體調(diào)到用戶感覺(jué)更專業(yè)”——這句話等于沒(méi)說(shuō)它只能按自己的默認(rèn)偏好去美化。理解了這些邊界之后寫Prompt的心態(tài)會(huì)變不要再試圖用Prompt微調(diào)像素而是用Prompt把信息架構(gòu)說(shuō)清楚像素級(jí)別的細(xì)節(jié)留到生成后用Figma自己的功能去改。4.2 有效與無(wú)效描述對(duì)照表我整理了一張常用描述對(duì)照表基本可以代表我在不同訴求上的使用策略你想控制什么正確說(shuō)法示例Make的實(shí)際響應(yīng)使用建議頁(yè)面結(jié)構(gòu)“課程列表頁(yè)日期篩選器 課程卡片列表”響應(yīng)較好能按順序搭出模塊核心負(fù)載必須寫清楚模塊優(yōu)先級(jí)“第一屏必須包含……”響應(yīng)較好會(huì)優(yōu)先排布首屏每個(gè)頁(yè)面都寫首屏約束風(fēng)格參考提供參考圖 / 選中已有模塊再生成響應(yīng)很好強(qiáng)于任何文字描述有參考圖就優(yōu)先用參考圖具體顏色“主色用#0A84FF”只會(huì)給出相近色不完全精確生成后手動(dòng)改色板間距體系“所有間距保持8的倍數(shù)”響應(yīng)差會(huì)隨機(jī)生成用Auto Layout統(tǒng)一調(diào)整字體控制“用思源黑體”響應(yīng)不穩(wěn)定自由度較大生成后全選文本統(tǒng)一字體形容詞“高級(jí)、精致、通透”只增加自由度不收斂結(jié)果盡量少用或不用組件化邏輯“把課程卡做成組件”不理解不會(huì)生成組件關(guān)系生成后手動(dòng)轉(zhuǎn)Component這張表寫的是我的長(zhǎng)期觀察不一定所有版本都完全一致但大方向不會(huì)變。你們可以在自己的項(xiàng)目里驗(yàn)證一下基本都能對(duì)上。4.3 內(nèi)容審核類報(bào)錯(cuò)invalid prompt的定位方法網(wǎng)上經(jīng)常能看到一類報(bào)錯(cuò)大意是“invalid prompt: your prompt was flagged as potentially violating our usage policy”。我第一次遇到時(shí)也慌因?yàn)檎蜳rompt看起來(lái)就是普通的產(chǎn)品需求文檔沒(méi)有任何違規(guī)意圖。后來(lái)我總結(jié)出了一套定位方法。先說(shuō)明一點(diǎn)所有自然語(yǔ)言生成工具都會(huì)有內(nèi)容安全機(jī)制這屬于通用保護(hù)策略不是針對(duì)某家公司的特殊行為。遇到這種報(bào)錯(cuò)先不要急著質(zhì)疑按下面幾步來(lái)第一步把Prompt拆成前后兩半分別單獨(dú)提交。哪一半報(bào)錯(cuò)觸發(fā)段落就在哪一半。第二步觸發(fā)段里通常有某些敏感行業(yè)詞或領(lǐng)域術(shù)語(yǔ)。把這類名詞換成能表達(dá)相同業(yè)務(wù)含義的功能性描述比如把具體產(chǎn)品類別改成“預(yù)約服務(wù)類工具”把效果類詞匯改成“信息展示模塊”。第三步還不行就換一種句式。安全機(jī)制往往對(duì)名詞詞組更敏感對(duì)“用戶在這個(gè)頁(yè)面能看到什么”這種行為描述相對(duì)寬松。你可以把“XX類App”改成“一款面向用戶提供預(yù)約服務(wù)的工具”。把長(zhǎng)Prompt拆短還有另一個(gè)好處能順便避開(kāi)輸入長(zhǎng)度限制。安全機(jī)制通過(guò)后再分兩次提交先提交結(jié)構(gòu)再提交風(fēng)格生成結(jié)果通常會(huì)更穩(wěn)定。4.4 token長(zhǎng)度與截?cái)鄦?wèn)題Make的Prompt輸入長(zhǎng)度不是無(wú)限的。我在超長(zhǎng)Prompt上吃過(guò)幾次虧最典型的表現(xiàn)是提交之后過(guò)了很久不出圖或者生成的頁(yè)面里少了你寫在后面的模塊。這其實(shí)就是后半段約束被截?cái)嗔薃I根本沒(méi)讀到。解決這個(gè)問(wèn)題有兩個(gè)原則。第一個(gè)原則是核心信息前置。頁(yè)面清單、每頁(yè)結(jié)構(gòu)、首屏要求這些內(nèi)容必須放在Prompt前段風(fēng)格參數(shù)其次排除項(xiàng)放在最后。因?yàn)橐坏┙財(cái)鄵p失的是尾部信息——寧可丟掉幾條“不要”也不能丟掉“要什么”。第二個(gè)原則是控制單次Prompt體量。完整模板經(jīng)過(guò)精簡(jiǎn)后大約在300到500個(gè)詞以內(nèi)如果產(chǎn)品復(fù)雜到要寫更多內(nèi)容我寧可分成兩次生成第一次先給ROLE加PAGES生成頁(yè)面結(jié)構(gòu)框架第二次選中框架里的某個(gè)frame單獨(dú)把STRUCTURE細(xì)節(jié)和STYLE補(bǔ)進(jìn)去這樣不會(huì)讓單次輸入超載。還有一個(gè)非常容易踩的坑是對(duì)話歷史也會(huì)占用上下文。你在同一個(gè)Figma Make對(duì)話里連續(xù)改了七次Prompt每一次歷史都會(huì)累積。到第八次時(shí)你以為自己發(fā)過(guò)去的Prompt是那個(gè)新版模板實(shí)際上模型還在同時(shí)參考前七次的內(nèi)容生成結(jié)果自然會(huì)被歷史污染。所以生成階段用完就開(kāi)新對(duì)話是個(gè)便宜又好用的習(xí)慣。4.5 生成中途中斷與閃退的環(huán)境因素Make在生成過(guò)程中如果你的瀏覽器標(biāo)簽頁(yè)內(nèi)存占用高、畫布里塞了大量高清位圖或者你自己忍不住點(diǎn)了畫布其他位置導(dǎo)致選區(qū)變化都有可能出現(xiàn)生成中斷或閃退。這類問(wèn)題不用重新想Prompt先把環(huán)境理干凈。我的做法是準(zhǔn)備一個(gè)專門用來(lái)出圖的空白文件文件里不放任何大圖素材生成前關(guān)掉其他高占用的瀏覽器標(biāo)簽頁(yè)發(fā)起生成后不再碰畫布和頁(yè)面結(jié)構(gòu)直到結(jié)果出來(lái)。如果問(wèn)題還是出現(xiàn)清理瀏覽器緩存或者換個(gè)無(wú)痕窗口就好。很多時(shí)候所謂的“閃退”并不是工具本身壞了而是頁(yè)面狀態(tài)太雜模型引擎處理不過(guò)來(lái)。5. 實(shí)戰(zhàn)踩坑清單五類高頻問(wèn)題的完整排查鏈路5.1 報(bào)錯(cuò)型問(wèn)題invalid prompt被安全機(jī)制攔截這類問(wèn)題最讓人頭疼因?yàn)槟忝髅鲗懙氖钦Ｐ枨髤s被判定為違規(guī)。按我之前說(shuō)的拆半定位法一步步往下查。有一次我遇到報(bào)錯(cuò)把Prompt從中間切成兩段。第一段只有產(chǎn)品背景和頁(yè)面清單順利通過(guò)第二段里包含內(nèi)容數(shù)據(jù)和排除項(xiàng)直接報(bào)錯(cuò)。于是我知道問(wèn)題出在后半段。我把后半段里的一些行業(yè)術(shù)語(yǔ)換成更通用的描述再提交通過(guò)了。整個(gè)過(guò)程不超過(guò)五分鐘。關(guān)鍵心態(tài)是別把所有內(nèi)容綁在一起反復(fù)試錯(cuò)那樣既慢又容易把正常內(nèi)容誤改成偏離需求的話。記住安全機(jī)制識(shí)別的是字符片段你只需要?jiǎng)幽莻€(gè)片段不要因?yàn)閳?bào)錯(cuò)就把整段Prompt推倒重寫。5.2 生成跑偏型問(wèn)題頁(yè)面數(shù)量不對(duì)、模塊缺失跑偏問(wèn)題的排查思路比報(bào)錯(cuò)更清晰。先檢查一個(gè)東西去掉Prompt里所有形容詞和多余修飾只保留ROLE、PAGES、STRUCTURE、OUTPUT看生成結(jié)果是否恢復(fù)正常。如果恢復(fù)正常說(shuō)明是無(wú)關(guān)信息稀釋了約束如果還是跑偏那再往深一層想是不是某個(gè)字段的“權(quán)重”給低了。我遇到過(guò)一種情況首頁(yè)生成結(jié)果總是少了分類標(biāo)簽。單獨(dú)看Prompt分類標(biāo)簽寫在“分類標(biāo)簽”四個(gè)字里信息量沒(méi)問(wèn)題。問(wèn)題是我把它和別的模塊寫在了同一行AI默認(rèn)這一行是一個(gè)整體只優(yōu)先實(shí)現(xiàn)了前面的內(nèi)容。把“分類標(biāo)簽”單獨(dú)拆成一行強(qiáng)調(diào)它是獨(dú)立模塊之后問(wèn)題馬上解決了。5.3 模塊重復(fù)型問(wèn)題底部導(dǎo)航、全局元素被重復(fù)生成全局元素重復(fù)是最常見(jiàn)的跑偏類型之一。核心原因是AI不理解“全局組件”的概念它只看得到“這個(gè)頁(yè)面應(yīng)該有哪些模塊”。排查方向有兩個(gè)一是檢查RULES里有沒(méi)有對(duì)應(yīng)的“不要重復(fù)出現(xiàn)”條目二是檢查是否用了局部生成。局部生成是我很推薦的修法。全局元素重復(fù)通常只發(fā)生在個(gè)別頁(yè)面你不需要重新生成整個(gè)畫布選中那個(gè)頁(yè)面frame重新觸發(fā)Make在Prompt里把對(duì)應(yīng)RULES單獨(dú)帶上就能把問(wèn)題控制在單頁(yè)范圍內(nèi)。如果全局重復(fù)問(wèn)題反復(fù)出現(xiàn)我建議直接在模板的RULES里長(zhǎng)期保留一條“除首頁(yè)外所有頁(yè)面不出現(xiàn)底部導(dǎo)航”一勞永逸。5.4 字體亂碼與中英文混雜問(wèn)題Make生成的圖層里中文內(nèi)容有時(shí)會(huì)落到默認(rèn)字體上導(dǎo)致顯示粗細(xì)不均勻甚至出現(xiàn)中英文字體混排的違和感。排查時(shí)不要想著靠Prompt解決因?yàn)镸ake的字庫(kù)選擇邏輯我試過(guò)多次不太受Prompt控制。我的做法是生成完成后選中所有文本圖層在右側(cè)字體面板統(tǒng)一替換成項(xiàng)目的中文字體。要做細(xì)節(jié)一點(diǎn)的話可以按字號(hào)層級(jí)分批選中替換大標(biāo)題一批、正文一批、輔助文字一批快速而準(zhǔn)確。這是生成后整理流程里的一環(huán)不是問(wèn)題修復(fù)而是必須做的工作。5.5 生成中斷、Make按鈕不可用、對(duì)話變慢最后常用的一部是環(huán)境層排查。我按這個(gè)順序來(lái)先確認(rèn)當(dāng)前是否選中了一個(gè)有效的頂層frame。Make按鈕灰著不能點(diǎn)八成是沒(méi)有選中有效畫布或者選中的圖層被鎖定、處于不可編輯狀態(tài)。再確認(rèn)瀏覽器和系統(tǒng)狀態(tài)。如果生成中途卡住我先看內(nèi)存占用情況把其他占用高的頁(yè)面關(guān)掉再試著重新生成。注意重新生成最好開(kāi)新對(duì)話不要讓已經(jīng)累積的上下文繼續(xù)干擾。最后確認(rèn)是不是該換干凈的實(shí)驗(yàn)文件了。有時(shí)候同一個(gè)文件改了幾十版圖層疊加太多畫布本身就很重。新建一個(gè)文件只把需要做生成測(cè)試的模塊內(nèi)容復(fù)制過(guò)去問(wèn)題往往就消失了。這套流程我平時(shí)叫四層定位法Prompt層想內(nèi)容、選區(qū)層查狀態(tài)、對(duì)話層查歷史、環(huán)境層查資源。遇到問(wèn)題順序排查基本都能在幾分鐘內(nèi)定位到根因而不是盯著報(bào)錯(cuò)彈窗干瞪眼。我現(xiàn)在的固定工作流已經(jīng)變成這樣模板存在一個(gè)隨手能打開(kāi)的地方接到新需求就復(fù)制一份、改變量先出四頁(yè)初稿再人工精修細(xì)節(jié)。最后分享一個(gè)操作小習(xí)慣——每次遇到Prompt寫得特別順、生成結(jié)果特別穩(wěn)的情況我會(huì)把這一段沉淀成一個(gè)新版本模板遇到加了新約束反而變差的就立刻刪掉。這樣模板會(huì)隨著項(xiàng)目越用越準(zhǔn)最終變成屬于你自己的私有語(yǔ)言。