国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

在 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)站首頁案例：

因此，本文將分享4個(gè)實(shí)戰(zhàn)技巧和對(duì)應(yīng)的案例模板，讓AI生成的原型更優(yōu)雅，有令人眼前一亮的“高級(jí)感”。

話不多說，我們直接開始！

技巧一：活用行業(yè)黑話

過去我對(duì)“行業(yè)黑話”不以為然，但在與AI協(xié)作的過程中，會(huì)發(fā)現(xiàn)許多行業(yè)術(shù)語是高度濃縮的精華，一個(gè)詞往往能替代外行半天的描述，一語勝千言。

以設(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ù)語，好比為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è)頁面尺寸為 375x812PX，帶有描邊，模擬手機(jī)邊框

2.圖標(biāo):引用在線矢量圖標(biāo)庫內(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文件放入所有頁面。

現(xiàn)在請(qǐng)生成前2個(gè)頁面。

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ā)布頁面，使用 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īng)能適應(yīng)不同屏幕尺寸，在移動(dòng)設(shè)備上保持良好的可讀性設(shè)計(jì)風(fēng)格參考：

-整體設(shè)計(jì)風(fēng)格類似蘋果官網(wǎng)產(chǎn)品規(guī)格頁面-使用大量留白和簡(jiǎn)潔的視覺元素

-強(qiáng)調(diào)數(shù)字和關(guān)鍵特性，減少冗長文字-使用漸變色突出重要數(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ì)和微妙的陰影效果，營造高級(jí)感和舒適感。

2.用戶體驗(yàn)：

優(yōu)先考慮信息的清晰度、操作的層級(jí)感和流暢沉穩(wěn)的用戶體驗(yàn)，可參考Linear或Superhuman等工具的設(shè)計(jì)理念。整體追求具有蘋果（Apple）設(shè)計(jì)風(fēng)格的高級(jí)感與獨(dú)特布局。

3.語言：

系統(tǒng)界面語言為簡(jiǎn)體中文。

4. 小結(jié)

篇幅有限，不勝枚舉，關(guān)鍵在于日常積累與實(shí)踐。

• 主動(dòng)收集優(yōu)秀案例：（way to AGI社區(qū)，twitter中有大量優(yōu)秀案例）
• 利用大模型進(jìn)行“逆向工程”：上傳優(yōu)秀的設(shè)計(jì)截圖，讓AI嘗試復(fù)刻或生成對(duì)應(yīng)的Prompt。

目前我正在制作一個(gè)產(chǎn)品經(jīng)理AI知識(shí)庫，后續(xù)會(huì)把我所積累的好的各類提示詞整理進(jìn)去。

技巧三：巧選UI框架

如果你在設(shè)計(jì)一個(gè)完整的原型，需要各個(gè)頁面/模塊風(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)目，如博客、營銷頁面、輕量級(jí)應(yīng)用等

3. Ant Design

網(wǎng)址：https://ant.design/index-cn

類比：企業(yè)統(tǒng)一制服

觀感：螞蟻集團(tuán)出品，企業(yè)級(jí) UI 設(shè)計(jì)語言，風(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框架/組件庫，感興趣的自行探索吧~

技巧四：借鑒開源模板，贏在起跑線

如果我們想要一個(gè)幾乎100%精美的界面，直接采用高質(zhì)量開源模板是高效之選。

從哪里找模板？我推薦以下2個(gè)：

1. HtmlRev

網(wǎng)址：https://htmlrev.com/

優(yōu)勢(shì)：完全免費(fèi)，模板種類超多（網(wǎng)站首頁儀表盤/應(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ā)靈感。可將圖片交由Lovable/Cursor等工具復(fù)刻，或在GitHub搜索現(xiàn)成模板，搜索方法可咨詢AI：）

總結(jié)

OK，本文分享了4個(gè)讓原型更優(yōu)雅的實(shí)用技巧：

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

希望這些技巧能幫助大家更好地與AI協(xié)作，真正為自己的工作進(jìn)行提質(zhì)提效！

感謝閱讀，我們下期再見！