4個(gè)技巧,讓AI產(chǎn)出的原型更有高級(jí)感!——產(chǎn)品經(jīng)理AI工作流實(shí)戰(zhàn)(2)

3 評(píng)論 1798 瀏覽 19 收藏 16 分鐘

在 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í)用技巧:

  1. 技巧一:活用設(shè)計(jì)風(fēng)格行業(yè)黑話,一語(yǔ)勝千言
  2. 技巧二:積累高分提示詞,點(diǎn)石成金
  3. 技巧三:巧選UI框架,統(tǒng)一風(fēng)格
  4. 技巧四:借鑒開源模板,贏在起跑線

希望這些技巧能幫助大家更好地與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ù)

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 應(yīng)屆生剛開始做產(chǎn)品經(jīng)理,想知道沒有編程基礎(chǔ)是否也可以使用cursor?可以在Axure里面編輯生成原型文件嗎?

    來自廣東 回復(fù)
    1. 回復(fù)汪仔5201:1. 我自己就完全沒有編程經(jīng)驗(yàn),完全可以使用Cursor。而且Cursor也并不是只能拿來編程,可以干很多事

      2. Cursor是一個(gè)獨(dú)立軟件,并不能在其他軟件里使用

      來自浙江 回復(fù)