4個(gè)技巧,讓AI產(chǎn)出的原型更有高級(jí)感!——產(chǎn)品經(jīng)理AI工作流實(shí)戰(zhàn)(2)
在 AI 設(shè)計(jì)工具的加持下,原型的生成速度大幅提升,但如何讓 AI 產(chǎn)出的原型更具高級(jí)感?本篇文章將分享 4 個(gè)實(shí)戰(zhàn)技巧,幫助產(chǎn)品經(jīng)理優(yōu)化 AI 生成的 UI 設(shè)計(jì),讓原型不僅高效,更能展現(xiàn)專業(yè)與美感。
在上一篇關(guān)于“需求->原型”工作流的文章中,我分享了如何利用AI原型工具,將腦海中的需求快速轉(zhuǎn)化為初步可見可交互的原型。
然而,如果嘗試過就會(huì)發(fā)現(xiàn):若不特別指定UI風(fēng)格,AI生成的原型往往風(fēng)格趨同,不夠優(yōu)雅。
比如下方的網(wǎng)站首頁(yè)案例:
因此,本文將分享4個(gè)實(shí)戰(zhàn)技巧和對(duì)應(yīng)的案例模板,讓AI生成的原型更優(yōu)雅,有令人眼前一亮的“高級(jí)感”。
話不多說,我們直接開始!
技巧一:活用行業(yè)黑話
過去我對(duì)“行業(yè)黑話”不以為然,但在與AI協(xié)作的過程中,會(huì)發(fā)現(xiàn)許多行業(yè)術(shù)語(yǔ)是高度濃縮的精華,一個(gè)詞往往能替代外行半天的描述,一語(yǔ)勝千言。
以設(shè)計(jì)風(fēng)格為例,有:
- 粗獷主義風(fēng)格(Brutalist)
- 孟菲斯風(fēng)格(Memphis)
- 黏土擬態(tài)風(fēng)格(Claymorphism)
- 復(fù)古紙張風(fēng)格(Vintage Paper)
- 扁平化風(fēng)格(Flat Design)
……
下面通過創(chuàng)建愛因斯坦個(gè)人簡(jiǎn)介網(wǎng)站的示例,展示不同設(shè)計(jì)風(fēng)格的效果。
工具建議選用Lovable、Gemini 2.5、Cursor(模型選Claude 3.7)等,選用其他的模型效果不一定好。
我的提示詞統(tǒng)一為:
請(qǐng)你使用{具體風(fēng)格(如粗獷主義)}創(chuàng)建一個(gè)愛因斯坦的個(gè)人介紹中文網(wǎng)站
1. 粗獷主義風(fēng)格(Brutalist)
預(yù)覽鏈接:https://reurl.cc/nmXMon
創(chuàng)建工具:Lovable
2. 孟菲斯風(fēng)格(Memphis)
預(yù)覽鏈接:https://aiben.cc/memphis.html
創(chuàng)建工具:Gemini 2.5
3. 黏土擬態(tài)風(fēng)格(Claymorphism)
預(yù)覽鏈接:https://reurl.cc/rEX2N4
創(chuàng)建工具:Lovable
4. 復(fù)古紙張風(fēng)格(Vintage Pape)
預(yù)覽鏈接:https://aiben.cc/vintagepape.html
創(chuàng)建工具:Gemini 2.5
5. 扁平化風(fēng)格(Flat)
預(yù)覽鏈接:https://reurl.cc/9Dy9Vj
創(chuàng)建工具:Lovable
6. 小結(jié)
風(fēng)格其實(shí)非常多,上述只是一些示例。怎么獲取更多的【行業(yè)黑話】?
這里貼一段提示詞大神李繼剛老師的觀點(diǎn):
大模型越來越強(qiáng),所知越來越多,第一象限的「AI 知 x 我知」越來越大,Prompt 趨向于「簡(jiǎn)單說」。
簡(jiǎn)單說「什么」呢?核心關(guān)鍵詞。
「吉卜力風(fēng)格」「Bento Grid 」「Knolling」…
未來能第一個(gè)說出來這些「Magic Words」的人,就率先打開了一個(gè)新的參數(shù)空間。
怎么才能知道「這些詞」呢?
兩個(gè)思路:
1. 老生常談的「多讀多看多學(xué)」
2. 在你自己從事的領(lǐng)域中挖掘,畢竟沒人比你更懂你自己
技巧二:積累高分提示詞
技巧一提及的設(shè)計(jì)風(fēng)格術(shù)語(yǔ),好比為AI選定了“畫筆型號(hào)”與“畫布材質(zhì)”。
有些時(shí)候確實(shí)無法準(zhǔn)確說出自己想要的風(fēng)格怎么辦?那就需要高質(zhì)量的提示詞來參考了!
以下列舉3個(gè)原型及對(duì)應(yīng)prompt,均為個(gè)人構(gòu)思與社區(qū)高分UI Prompt框架的融合,供參考。
1. 優(yōu)雅簡(jiǎn)潔APP
創(chuàng)建工具:Cursor+Claude 3.7
角色:你是一位資深前端開發(fā)工程師設(shè)計(jì)
風(fēng)格:
1.優(yōu)雅的極簡(jiǎn)主義美學(xué)與功能的完美平衡;
2.清新柔和的漸變配色與品牌色系渾然一體;
3.恰到好處的留白設(shè)計(jì);
4.輕盈通透的沉浸式體驗(yàn);
5.信息層級(jí)通過微妙的陰影過渡與模塊化卡片布局清晰呈現(xiàn);
6.用戶視線能自然聚焦核心功能;
7.精心打磨的圓角;
8.細(xì)膩的微交互;
9.舒適的視覺比例;
10.強(qiáng)調(diào)色:按APP類型選擇;
技術(shù)規(guī)格:
1.單個(gè)頁(yè)面尺寸為 375x812PX,帶有描邊,模擬手機(jī)邊框
2.圖標(biāo):引用在線矢量圖標(biāo)庫(kù)內(nèi)的圖標(biāo)(任何圖標(biāo)都不要帶有背景色塊、底板、外框)
3.圖片: 使用開源圖片網(wǎng)站鏈接的形式引入
4.樣式必須引入 tailwindcss CDN來完成
5.不要顯示狀態(tài)欄以及時(shí)間、信號(hào)等信息
6.不要顯示非移動(dòng)端元素,如滾動(dòng)條
7.所有文字只可以使用黑色或白色
任務(wù):
這是一個(gè){XX(輸入你要?jiǎng)?chuàng)建的內(nèi)容)}APP。
模擬產(chǎn)品經(jīng)理輸出詳細(xì)功能設(shè)計(jì)、信息架構(gòu)設(shè)計(jì),結(jié)合{設(shè)計(jì)風(fēng)格}和{技術(shù)規(guī)格}輸出一套UI設(shè)計(jì)方案。
生成一個(gè)UI.html文件放入所有頁(yè)面。
現(xiàn)在請(qǐng)生成前2個(gè)頁(yè)面。
2. 便當(dāng)風(fēng)格卡片(Bento Grid)
在線預(yù)覽地址:https://aiben.cc/bentogrid.html
創(chuàng)建工具:Cursor+Claude 3.7,輸出的代碼可保存為.html文件后用瀏覽器打開。
設(shè)計(jì)一個(gè)現(xiàn)代、簡(jiǎn)約、高端的產(chǎn)品/服務(wù)發(fā)布頁(yè)面,使用 Bento Grid 風(fēng)格布局,將所有關(guān)鍵信息緊湊地呈現(xiàn)在一個(gè)屏幕內(nèi)。
內(nèi)容要點(diǎn):{小米Su7 Ultra}
設(shè)計(jì)要求:
1.使用 Bento Grid 布局:創(chuàng)建一個(gè)由不同大小卡片組成的網(wǎng)格,每個(gè)卡片包含特定類別的信息,整體布局要緊湊但不擁擠
2.卡片設(shè)計(jì):所有卡片應(yīng)有明顯圓角(20px 邊框半徑),細(xì)微的陰影效果,懸停時(shí)有輕微上浮動(dòng)效果
3.色彩方案:使用暗黑科技方案,搭配漸變色作為強(qiáng)調(diào)色
4.排版層次:
-大號(hào)粗體數(shù)字/標(biāo)題:使用漸變色強(qiáng)調(diào)關(guān)鍵數(shù)據(jù)點(diǎn)和主要標(biāo)題
-中等大小標(biāo)題:用于卡片標(biāo)題,清晰表明內(nèi)容類別
-小號(hào)文本:用灰色呈現(xiàn)支持性描述文字
5.內(nèi)容組織:
-頂部行:主要公告、產(chǎn)品特色、性能指標(biāo)或主要賣點(diǎn)
-中間行:產(chǎn)品規(guī)格、技術(shù)細(xì)節(jié)、功能特性
-底部行:使用指南和結(jié)論/行動(dòng)號(hào)召
6.視覺元素:
-使用簡(jiǎn)單圖標(biāo)表示各項(xiàng)特性
-進(jìn)度條或圖表展示比較數(shù)據(jù)
-網(wǎng)格和卡片布局創(chuàng)造視覺節(jié)奏
-標(biāo)簽以小膠囊形式展示分類信息
7.響應(yīng)式設(shè)計(jì):頁(yè)面應(yīng)能適應(yīng)不同屏幕尺寸,在移動(dòng)設(shè)備上保持良好的可讀性設(shè)計(jì)風(fēng)格參考:
-整體設(shè)計(jì)風(fēng)格類似蘋果官網(wǎng)產(chǎn)品規(guī)格頁(yè)面-使用大量留白和簡(jiǎn)潔的視覺元素
-強(qiáng)調(diào)數(shù)字和關(guān)鍵特性,減少冗長(zhǎng)文字-使用漸變色突出重要數(shù)據(jù)
-卡片間有適當(dāng)間距,創(chuàng)造清晰的視覺分隔
輸出格式:html代碼
3. 精美CRM系統(tǒng)
在線預(yù)覽地址:https://reurl.cc/lzXKoE
創(chuàng)建工具:Lovable
請(qǐng)?jiān)O(shè)計(jì)一個(gè)現(xiàn)代、專業(yè)的【中文客戶關(guān)系管理(CRM)系統(tǒng)】,旨在幫助企業(yè)高效管理客戶信息、追蹤銷售機(jī)會(huì)并提升客戶互動(dòng)。系統(tǒng)需具備簡(jiǎn)潔的用戶體驗(yàn)(UX)、最小化的界面干擾、優(yōu)雅的間距布局以及高級(jí)感的UI細(xì)節(jié)。
核心設(shè)計(jì)要求:
1.視覺風(fēng)格:
采用冷靜且專業(yè)的色調(diào),搭配現(xiàn)代無襯線字體(如:Inter、思源黑體、蘋方或類似S?hne的現(xiàn)代字體)。界面元素多采用圓角設(shè)計(jì)和微妙的陰影效果,營(yíng)造高級(jí)感和舒適感。
2.用戶體驗(yàn):
優(yōu)先考慮信息的清晰度、操作的層級(jí)感和流暢沉穩(wěn)的用戶體驗(yàn),可參考Linear或Superhuman等工具的設(shè)計(jì)理念。整體追求具有蘋果(Apple)設(shè)計(jì)風(fēng)格的高級(jí)感與獨(dú)特布局。
3.語(yǔ)言:
系統(tǒng)界面語(yǔ)言為簡(jiǎn)體中文。
4. 小結(jié)
篇幅有限,不勝枚舉,關(guān)鍵在于日常積累與實(shí)踐。
- 主動(dòng)收集優(yōu)秀案例:(way to AGI社區(qū),twitter中有大量?jī)?yōu)秀案例)
- 利用大模型進(jìn)行“逆向工程”:上傳優(yōu)秀的設(shè)計(jì)截圖,讓AI嘗試復(fù)刻或生成對(duì)應(yīng)的Prompt。
目前我正在制作一個(gè)產(chǎn)品經(jīng)理AI知識(shí)庫(kù),后續(xù)會(huì)把我所積累的好的各類提示詞整理進(jìn)去。
技巧三:巧選UI框架
如果你在設(shè)計(jì)一個(gè)完整的原型,需要各個(gè)頁(yè)面/模塊風(fēng)格一致,那我建議你使用UI框架。
UI框架能夠明確的設(shè)計(jì)規(guī)范與組件集,進(jìn)而確保原型風(fēng)格的統(tǒng)一性與專業(yè)性。
因此在給AI的Prompt中聲明所選UI框架即可,如:
請(qǐng)使用{UI框架(如shadcn/ui)}構(gòu)建一個(gè)后臺(tái)管理系統(tǒng)的數(shù)據(jù)看板。
業(yè)界優(yōu)秀UI框架很多,這里分享3個(gè)用得順手的。
1. shadcn/ui
網(wǎng)址:https://ui.shadcn.com/themes
類比:設(shè)計(jì)師定制款觀感: 以極簡(jiǎn)、現(xiàn)代的設(shè)計(jì)風(fēng)格著稱,尤其是其默認(rèn)基礎(chǔ)款的黑白配色,簡(jiǎn)約而不簡(jiǎn)單!
適用場(chǎng)景:適合需要高度定制化界面、追求極簡(jiǎn)現(xiàn)代設(shè)計(jì)風(fēng)格的項(xiàng)目,如個(gè)人作品集、初創(chuàng)產(chǎn)品等。我自己的個(gè)人網(wǎng)站就是基于此UI構(gòu)建的,有興趣可以點(diǎn)擊查看(www.aiben.cc)
2. Daisy UI
網(wǎng)址:https://daisyui.com/theme-generator
類比:時(shí)尚快消主題款
觀感:提供多種預(yù)設(shè)主題,風(fēng)格多樣,涵蓋從簡(jiǎn)約到復(fù)古的多種設(shè)計(jì)。你可以在其官網(wǎng)的主題生成器中嘗試,找到心儀主題后,將主題名稱告知AI,AI便會(huì)遵循此風(fēng)格進(jìn)行設(shè)計(jì)。
使用場(chǎng)景:適合需要快速開發(fā),主題多樣化的項(xiàng)目,如博客、營(yíng)銷頁(yè)面、輕量級(jí)應(yīng)用等
3. Ant Design
網(wǎng)址:https://ant.design/index-cn
類比:企業(yè)統(tǒng)一制服
觀感:螞蟻集團(tuán)出品,企業(yè)級(jí) UI 設(shè)計(jì)語(yǔ)言,風(fēng)格穩(wěn)重、專業(yè),強(qiáng)調(diào)一致性和可用性
使用場(chǎng)景:適合構(gòu)建企業(yè)級(jí)應(yīng)用,如后臺(tái)管理系統(tǒng)、ERP 系統(tǒng)等2B/2G項(xiàng)目
4. 小結(jié)
“希望產(chǎn)品界面優(yōu)雅且獨(dú)一無二,完全體現(xiàn)自己的個(gè)人/品牌調(diào)性”-> 考慮 shadcn UI
“我們需要快速上線一個(gè)看起來不錯(cuò)的版本,之后再迭代”-> 考慮 daisyUI
“我們正在做一個(gè)復(fù)雜的后臺(tái)管理系統(tǒng),需要專業(yè)、穩(wěn)定、功能全面的界面”-> 考慮 Ant Design
除上述3個(gè),還有很多優(yōu)秀的UI框架/組件庫(kù),感興趣的自行探索吧~
技巧四:借鑒開源模板,贏在起跑線
如果我們想要一個(gè)幾乎100%精美的界面,直接采用高質(zhì)量開源模板是高效之選。
從哪里找模板?我推薦以下2個(gè):
1. HtmlRev
網(wǎng)址:https://htmlrev.com/
優(yōu)勢(shì):完全免費(fèi),模板種類超多(網(wǎng)站首頁(yè)儀表盤/應(yīng)用系統(tǒng)/個(gè)人網(wǎng)站等),質(zhì)量很高,開箱即用。
用法:找到自己中意的,下載后利用Cursor打開,就可以開始定制修改!具體修改技巧會(huì)在后續(xù)Cursor的分享中介紹。
2. GitHub
網(wǎng)址:https://reurl.cc/1KzDqp
優(yōu)勢(shì):上述網(wǎng)址對(duì)應(yīng)的是移動(dòng)端app的UI合集,質(zhì)量都超高,非常優(yōu)雅!
用法:該項(xiàng)目提供UI圖片,旨在提升審美、啟發(fā)靈感??蓪D片交由Lovable/Cursor等工具復(fù)刻,或在GitHub搜索現(xiàn)成模板,搜索方法可咨詢AI:)
總結(jié)
OK,本文分享了4個(gè)讓原型更優(yōu)雅的實(shí)用技巧:
- 技巧一:活用設(shè)計(jì)風(fēng)格行業(yè)黑話,一語(yǔ)勝千言
- 技巧二:積累高分提示詞,點(diǎn)石成金
- 技巧三:巧選UI框架,統(tǒng)一風(fēng)格
- 技巧四:借鑒開源模板,贏在起跑線
希望這些技巧能幫助大家更好地與AI協(xié)作,真正為自己的工作進(jìn)行提質(zhì)提效!
感謝閱讀,我們下期再見!
作者:Ben的AI實(shí)驗(yàn)室 公眾號(hào):Ben的AI實(shí)驗(yàn)室
本文由 @Ben的AI實(shí)驗(yàn)室 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
應(yīng)屆生剛開始做產(chǎn)品經(jīng)理,想知道沒有編程基礎(chǔ)是否也可以使用cursor?可以在Axure里面編輯生成原型文件嗎?
回復(fù)汪仔5201:1. 我自己就完全沒有編程經(jīng)驗(yàn),完全可以使用Cursor。而且Cursor也并不是只能拿來編程,可以干很多事
2. Cursor是一個(gè)獨(dú)立軟件,并不能在其他軟件里使用