用Figma Make出圖三個(gè)月我最大的一個(gè)感受是大部分人說它“畫不準(zhǔn)”其實(shí)不是AI沒聽懂而是Prompt根本沒搭好。這個(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é)果。聽起來(lái)很靈活實(shí)際上慘不忍睹。我統(tǒng)計(jì)過自己前兩周的生成記錄平均每個(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里沒有明確數(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)住了。第二天新開對(duì)話我忘了把之前積累的風(fēng)格約束復(fù)制過去只寫了“和昨天一樣”。結(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)翻譯成圖層樹。這帶來(lái)的直接結(jié)果是它對(duì)“目標(biāo)描述”的理解遠(yuǎn)好于“像素描述”。你說“這是一個(gè)咖啡店點(diǎn)單頁(yè)第一屏是品牌區(qū)第二屏是飲品分類第三屏是熱門推薦”它能給你搭出合理的結(jié)構(gòu)。但你說“高級(jí)一點(diǎn)、精致一點(diǎn)、有質(zhì)感一點(diǎn)”它只會(huì)自由發(fā)揮因?yàn)樗鼘?duì)“高級(jí)”這個(gè)詞沒有統(tǒng)一的解碼表。另一個(gè)關(guān)鍵點(diǎn)在于Make不是從零開始閉門造車它會(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)我給自己定過一個(gè)判斷標(biāo)準(zhǔn)同一個(gè)Prompt灌進(jìn)同一個(gè)產(chǎn)品需求里不同對(duì)話生成的結(jié)果方差如果大于三成說明模板的有效信息不足需要繼續(xù)補(bǔ)充約束。注意我不是說每次要生成一模一樣的頁(yè)面——那也不現(xiàn)實(shí)因?yàn)槟Ｐ捅旧碛须S機(jī)采樣。但如果連“頁(yè)面數(shù)量”“模塊順序”“整體色系”這種宏觀的東西都每次變那這個(gè)模板就是廢的。后來(lái)我總結(jié)出判斷Prompt是否合格只看三個(gè)問題把Prompt里所有形容詞刪掉頁(yè)面結(jié)構(gòu)還能保持嗎把業(yè)務(wù)背景刪掉生成結(jié)果還像這個(gè)行業(yè)的頁(yè)面嗎把套話刪掉AI還能知道要輸出幾個(gè)頁(yè)面、每頁(yè)放什么模塊嗎如果三個(gè)問題里有一個(gè)答案是否模板就要改。這套排查邏輯在我后面講具體案例時(shí)會(huì)反復(fù)用到。2. 一套可直接抄走的可復(fù)用Prompt模板結(jié)構(gòu)、參數(shù)與作用原理2.1 模板設(shè)計(jì)思路管理兩個(gè)自由度做可復(fù)用Prompt核心是管理兩個(gè)自由度結(jié)構(gòu)自由度和視覺自由度。結(jié)構(gòu)自由度指的是頁(yè)面的清單、模塊順序、頁(yè)面之間的關(guān)系視覺自由度指的是色彩、字體、圓角、卡片形式這類表層樣式。兩個(gè)自由度都不能靠形容詞管理要靠“變量加邊界”。變量就是明確告訴AI“這個(gè)位置有具體值”邊界就是告訴AI“這個(gè)維度你只有這些可選范圍”。比如“主色是深綠輔助色是暖灰背景色是米白”這就是三個(gè)變量加一個(gè)范圍而“配色看起來(lái)舒服”就沒有任何約束力。這里有個(gè)反直覺的點(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)但骨架始終沒變。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ì)問這模板看起來(lái)平淡哪來(lái)的效果關(guān)鍵在于每個(gè)字段都在縮小生成結(jié)果的取值空間。我逐條說ROLE字段決定的是行業(yè)氣質(zhì)。你寫“健身約課App”AI會(huì)朝運(yùn)動(dòng)類產(chǎn)品靠配色會(huì)默認(rèn)偏深色或熒光色你寫“線上問診平臺(tái)”它會(huì)朝偏藍(lán)、偏白的醫(yī)療感靠。這個(gè)字段管的是整體氣場(chǎng)代價(jià)是必須寫準(zhǔn)寫含糊了等于沒寫。PAGES字段決定的是產(chǎn)出邊界。AI生成的時(shí)候是按頁(yè)面走的每一頁(yè)都是獨(dú)立的frame。你明確說4頁(yè)它就是4頁(yè)你寫“幾個(gè)頁(yè)面”它就會(huì)按自己的理解給你3到7頁(yè)。對(duì)設(shè)計(jì)師來(lái)說頁(yè)面數(shù)量本身就是需求約束AI無(wú)權(quán)替你做主。STRUCTURE字段是模板里最長(zhǎng)的部分也是信息量最大的部分。它本質(zhì)上在寫每個(gè)頁(yè)面的信息架構(gòu)。我用“第一屏必須包含”這個(gè)說法是因?yàn)镸ake對(duì)首屏的處理經(jīng)常失控——它喜歡把最漂亮的模塊放在首屏哪怕那個(gè)模塊業(yè)務(wù)優(yōu)先級(jí)最低。有了這句話它才會(huì)先把首屏塞滿你指定內(nèi)容再考慮其他模塊。STYLE字段里我特意寫了“圓角范圍8px到16px”。單一數(shù)字反而容易出問題因?yàn)槟憬o8px它會(huì)全用8px所有卡片邊緣都顯得生硬給“小圓角”它又可能理解為4px或24px。給一個(gè)范圍讓它在合理區(qū)間內(nèi)自己選出來(lái)的統(tǒng)一感會(huì)好很多。ASSETS字段里“使用灰色占位塊、不生成攝影圖”是我踩過幾次坑后加的。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)目里最常見的三類跑偏你們可以根據(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從需求到初稿的生成全過程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è)拆解過程不要跳步。很多人用AI出圖不理想是因?yàn)樽约憾紱]想清楚頁(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)景打開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ì)的展開——注意這里不是挑最漂亮的而是挑結(jié)構(gòu)最接近我要求的。顏色和風(fēng)格后期都能改結(jié)構(gòu)錯(cuò)了基本等于重做。第一輪生成通常不會(huì)完美。我這次生成后的結(jié)果有三處跑偏每一處都有自己的原因和修法。第一處跑偏在首頁(yè)。我要求“今日熱門課程橫向列表”它確實(shí)做了橫滑卡片但把卡片高拉到了差不多四分之一屏導(dǎo)致整個(gè)第一屏只有這一個(gè)模塊品牌區(qū)被擠上去分類標(biāo)簽列被擠到了首屏以下。簡(jiǎn)單說AI把“熱門課程”理解成了首屏唯一主角而不是首屏的一個(gè)組成部分。修法很簡(jiǎn)單不用重新寫整個(gè)Prompt。我選中首頁(yè)這個(gè)frame重新觸發(fā)Make把原來(lái)“第一屏必須包含品牌區(qū)、課程分類標(biāo)簽、今日熱門課程橫向列表”這句話改成“第一屏垂直順序固定為品牌區(qū)占一行課程分類標(biāo)簽占一行然后才是今日熱門課程橫向列表卡片高度不超過160px”。第二次生成結(jié)果就正常了。這也驗(yàn)證了一件事與其重做不如針對(duì)跑偏的頁(yè)面做局部重新生成Prompt只改對(duì)應(yīng)模塊的約束別的都不要?jiǎng)?。第二處跑偏在預(yù)約詳情頁(yè)。AI給我生成的課程信息卡里只有課程名稱、教練頭像和時(shí)間卻沒有我要求的“倒計(jì)時(shí)與剩余名額”。這不是它沒聽懂而是我在STRUCTURE里把這幾個(gè)模塊放在了同一行描述里它判斷“預(yù)約表單”才是本頁(yè)的核心就把這種緊迫感信息當(dāng)作輔助內(nèi)容省略了。修正方式是直接在該頁(yè)重新生成單獨(dú)補(bǔ)一個(gè)H3層級(jí)的內(nè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è)面但沒有告訴它“底部導(dǎo)航是全局元素只在首頁(yè)出現(xiàn)一次”。它在生成個(gè)人中心時(shí)默認(rèn)每個(gè)頁(yè)面都適合放底部導(dǎo)航于是復(fù)制了一份。這個(gè)問題的修法比前兩個(gè)簡(jiǎn)單。我回到個(gè)人中心頁(yè)重新生成在RULES里把“不要讓個(gè)人中心重復(fù)出現(xiàn)底部導(dǎo)航”這一條保留然后只生成該頁(yè)。第二次結(jié)果沒有底部導(dǎo)航了。如果你們遇到更頑固的重復(fù)問題可以在模板規(guī)則里加一條“所有內(nèi)頁(yè)都不允許出現(xiàn)底部導(dǎo)航”效果會(huì)更好。3.3 從生成稿到工程稿組件化整理流程生成稿確認(rèn)結(jié)構(gòu)沒問題之后距離真正能用的設(shè)計(jì)稿還有一段路。Make生成的圖層樹命名普遍比較亂很多是系統(tǒng)默認(rèn)的隨機(jī)名稱也沒有組件概念。這種稿子如果直接交出去后續(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è)試過的說法“首頁(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)到用戶感覺更專業(yè)”——這句話等于沒說它只能按自己的默認(rèn)偏好去美化。理解了這些邊界之后寫Prompt的心態(tài)會(huì)變不要再試圖用Prompt微調(diào)像素而是用Prompt把信息架構(gòu)說清楚像素級(jí)別的細(xì)節(jié)留到生成后用Figma自己的功能去改。4.2 有效與無(wú)效描述對(duì)照表我整理了一張常用描述對(duì)照表基本可以代表我在不同訴求上的使用策略你想控制什么正確說法示例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)品需求文檔沒有任何違規(guī)意圖。后來(lái)我總結(jié)出了一套定位方法。先說明一點(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è)好處能順便避開輸入長(zhǎng)度限制。安全機(jī)制通過后再分兩次提交先提交結(jié)構(gòu)再提交風(fēng)格生成結(jié)果通常會(huì)更穩(wěn)定。4.4 token長(zhǎng)度與截?cái)鄦栴}Make的Prompt輸入長(zhǎng)度不是無(wú)限的。我在超長(zhǎng)Prompt上吃過幾次虧最典型的表現(xiàn)是提交之后過了很久不出圖或者生成的頁(yè)面里少了你寫在后面的模塊。這其實(shí)就是后半段約束被截?cái)嗔薃I根本沒讀到。解決這個(gè)問題有兩個(gè)原則。第一個(gè)原則是核心信息前置。頁(yè)面清單、每頁(yè)結(jié)構(gòu)、首屏要求這些內(nèi)容必須放在Prompt前段風(fēng)格參數(shù)其次排除項(xiàng)放在最后。因?yàn)橐坏┙財(cái)鄵p失的是尾部信息——寧可丟掉幾條“不要”也不能丟掉“要什么”。第二個(gè)原則是控制單次Prompt體量。完整模板經(jīng)過精簡(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ā)過去的Prompt是那個(gè)新版模板實(shí)際上模型還在同時(shí)參考前七次的內(nèi)容生成結(jié)果自然會(huì)被歷史污染。所以生成階段用完就開新對(duì)話是個(gè)便宜又好用的習(xí)慣。4.5 生成中途中斷與閃退的環(huán)境因素Make在生成過程中如果你的瀏覽器標(biāo)簽頁(yè)內(nèi)存占用高、畫布里塞了大量高清位圖或者你自己忍不住點(diǎn)了畫布其他位置導(dǎo)致選區(qū)變化都有可能出現(xiàn)生成中斷或閃退。這類問題不用重新想Prompt先把環(huán)境理干凈。我的做法是準(zhǔn)備一個(gè)專門用來(lái)出圖的空白文件文件里不放任何大圖素材生成前關(guān)掉其他高占用的瀏覽器標(biāo)簽頁(yè)發(fā)起生成后不再碰畫布和頁(yè)面結(jié)構(gòu)直到結(jié)果出來(lái)。如果問題還是出現(xiàn)清理瀏覽器緩存或者換個(gè)無(wú)痕窗口就好。很多時(shí)候所謂的“閃退”并不是工具本身壞了而是頁(yè)面狀態(tài)太雜模型引擎處理不過來(lái)。5. 實(shí)戰(zhàn)踩坑清單五類高頻問題的完整排查鏈路5.1 報(bào)錯(cuò)型問題invalid prompt被安全機(jī)制攔截這類問題最讓人頭疼因?yàn)槟忝髅鲗懙氖钦Ｐ枨髤s被判定為違規(guī)。按我之前說的拆半定位法一步步往下查。有一次我遇到報(bào)錯(cuò)把Prompt從中間切成兩段。第一段只有產(chǎn)品背景和頁(yè)面清單順利通過第二段里包含內(nèi)容數(shù)據(jù)和排除項(xiàng)直接報(bào)錯(cuò)。于是我知道問題出在后半段。我把后半段里的一些行業(yè)術(shù)語(yǔ)換成更通用的描述再提交通過了。整個(gè)過程不超過五分鐘。關(guān)鍵心態(tài)是別把所有內(nèi)容綁在一起反復(fù)試錯(cuò)那樣既慢又容易把正常內(nèi)容誤改成偏離需求的話。記住安全機(jī)制識(shí)別的是字符片段你只需要?jiǎng)幽莻€(gè)片段不要因?yàn)閳?bào)錯(cuò)就把整段Prompt推倒重寫。5.2 生成跑偏型問題頁(yè)面數(shù)量不對(duì)、模塊缺失跑偏問題的排查思路比報(bào)錯(cuò)更清晰。先檢查一個(gè)東西去掉Prompt里所有形容詞和多余修飾只保留ROLE、PAGES、STRUCTURE、OUTPUT看生成結(jié)果是否恢復(fù)正常。如果恢復(fù)正常說明是無(wú)關(guān)信息稀釋了約束如果還是跑偏那再往深一層想是不是某個(gè)字段的“權(quán)重”給低了。我遇到過一種情況首頁(yè)生成結(jié)果總是少了分類標(biāo)簽。單獨(dú)看Prompt分類標(biāo)簽寫在“分類標(biāo)簽”四個(gè)字里信息量沒問題。問題是我把它和別的模塊寫在了同一行AI默認(rèn)這一行是一個(gè)整體只優(yōu)先實(shí)現(xiàn)了前面的內(nèi)容。把“分類標(biāo)簽”單獨(dú)拆成一行強(qiáng)調(diào)它是獨(dú)立模塊之后問題馬上解決了。5.3 模塊重復(fù)型問題底部導(dǎo)航、全局元素被重復(fù)生成全局元素重復(fù)是最常見的跑偏類型之一。核心原因是AI不理解“全局組件”的概念它只看得到“這個(gè)頁(yè)面應(yīng)該有哪些模塊”。排查方向有兩個(gè)一是檢查RULES里有沒有對(duì)應(yīng)的“不要重復(fù)出現(xiàn)”條目二是檢查是否用了局部生成。局部生成是我很推薦的修法。全局元素重復(fù)通常只發(fā)生在個(gè)別頁(yè)面你不需要重新生成整個(gè)畫布選中那個(gè)頁(yè)面frame重新觸發(fā)Make在Prompt里把對(duì)應(yīng)RULES單獨(dú)帶上就能把問題控制在單頁(yè)范圍內(nèi)。如果全局重復(fù)問題反復(fù)出現(xiàn)我建議直接在模板的RULES里長(zhǎng)期保留一條“除首頁(yè)外所有頁(yè)面不出現(xiàn)底部導(dǎo)航”一勞永逸。5.4 字體亂碼與中英文混雜問題Make生成的圖層里中文內(nèi)容有時(shí)會(huì)落到默認(rèn)字體上導(dǎo)致顯示粗細(xì)不均勻甚至出現(xiàn)中英文字體混排的違和感。排查時(shí)不要想著靠Prompt解決因?yàn)镸ake的字庫(kù)選擇邏輯我試過多次不太受Prompt控制。我的做法是生成完成后選中所有文本圖層在右側(cè)字體面板統(tǒng)一替換成項(xiàng)目的中文字體。要做細(xì)節(jié)一點(diǎn)的話可以按字號(hào)層級(jí)分批選中替換大標(biāo)題一批、正文一批、輔助文字一批快速而準(zhǔn)確。這是生成后整理流程里的一環(huán)不是問題修復(fù)而是必須做的工作。5.5 生成中斷、Make按鈕不可用、對(duì)話變慢最后常用的一部是環(huán)境層排查。我按這個(gè)順序來(lái)先確認(rèn)當(dāng)前是否選中了一個(gè)有效的頂層frame。Make按鈕灰著不能點(diǎn)八成是沒有選中有效畫布或者選中的圖層被鎖定、處于不可編輯狀態(tài)。再確認(rèn)瀏覽器和系統(tǒng)狀態(tài)。如果生成中途卡住我先看內(nèi)存占用情況把其他占用高的頁(yè)面關(guān)掉再試著重新生成。注意重新生成最好開新對(duì)話不要讓已經(jīng)累積的上下文繼續(xù)干擾。最后確認(rèn)是不是該換干凈的實(shí)驗(yàn)文件了。有時(shí)候同一個(gè)文件改了幾十版圖層疊加太多畫布本身就很重。新建一個(gè)文件只把需要做生成測(cè)試的模塊內(nèi)容復(fù)制過去問題往往就消失了。這套流程我平時(shí)叫四層定位法Prompt層想內(nèi)容、選區(qū)層查狀態(tài)、對(duì)話層查歷史、環(huán)境層查資源。遇到問題順序排查基本都能在幾分鐘內(nèi)定位到根因而不是盯著報(bào)錯(cuò)彈窗干瞪眼。我現(xiàn)在的固定工作流已經(jīng)變成這樣模板存在一個(gè)隨手能打開的地方接到新需求就復(fù)制一份、改變量先出四頁(yè)初稿再人工精修細(xì)節(jié)。最后分享一個(gè)操作小習(xí)慣——每次遇到Prompt寫得特別順、生成結(jié)果特別穩(wěn)的情況我會(huì)把這一段沉淀成一個(gè)新版本模板遇到加了新約束反而變差的就立刻刪掉。這樣模板會(huì)隨著項(xiàng)目越用越準(zhǔn)最終變成屬于你自己的私有語(yǔ)言。