2025-7-22 杰睿
如何利用人工智能根據(jù)現(xiàn)有設(shè)計(jì)生成設(shè)計(jì)選項(xiàng)？
這是一個(gè)常見(jiàn)的用例：
然而，我在網(wǎng)上并沒(méi)有看到太多關(guān)于如何使用人工智能來(lái)解決此類用例的討論。
所以今天，我將逐步向您介紹一些示例，包括我使用的提示、工作流程和結(jié)果。
讓我們開(kāi)始吧！
由于我只需要專注于前端設(shè)計(jì)，因此我使用了V0和Magic Patterns進(jìn)行演示。我特意選擇它們是因?yàn)樗鼈兌际轻槍?duì)前端優(yōu)化的 AI 原型設(shè)計(jì)工具。
兩種工具都可以完成這項(xiàng)工作，但我在兩種工具中都運(yùn)行了同一組提示，以便您可以更好地了解它們可以實(shí)現(xiàn)的功能。
如果您有興趣，您也可以在其他工具（如Cursor、Windsurf或Bolt ）中運(yùn)行相同的工作流程，然后告訴我進(jìn)展如何。
工作流程分為兩個(gè)步驟：
（如果您清楚自己想要進(jìn)行哪些設(shè)計(jì)改進(jìn)，您當(dāng)然可以將步驟 1 和 2 合并為一個(gè)簡(jiǎn)單的步驟——只需上傳設(shè)計(jì)、提供您的建議，然后要求 AI 生成新的設(shè)計(jì)選項(xiàng)。）
我使用 Kayak.com 的頂部部分作為演示的現(xiàn)有設(shè)計(jì)。
問(wèn)：仔細(xì)看看。你會(huì)如何設(shè)計(jì)它以不同的方式？
這是我放入 V0 和 Magic Patterns 的第一個(gè)提示，以及 Kayak 主頁(yè)頂部部分的快照。
提供 Kayak 登陸頁(yè)面的設(shè)計(jì)評(píng)論（見(jiàn)附件快照）。擔(dān)任具有深厚 UX/UI 專業(yè)知識(shí)的經(jīng)驗(yàn)豐富的產(chǎn)品設(shè)計(jì)師。KAYAK 的主要業(yè)務(wù)目標(biāo)是通過(guò)為旅行者提供旅行規(guī)劃工具來(lái)賦能他們。其搜索引擎會(huì)掃描各種旅游網(wǎng)站，提供豐富的機(jī)票、酒店、租車和度假套餐選擇和價(jià)格。其主要用戶是希望搜索和比較旅行選擇的日常旅行者。請(qǐng)使用以下視角評(píng)估桌面主頁(yè)：- 核心價(jià)值主張清晰
- 信息架構(gòu)和易于查找關(guān)鍵操作
- 視覺(jué)層次、布局和空間使用還包括 3-5 條具體的、高影響力的建議，以改善主頁(yè)上的用戶體驗(yàn)或轉(zhuǎn)化率。
正如您所見(jiàn)，我還包括了主要的業(yè)務(wù)和用戶目標(biāo)——這是一個(gè)小提示，可以為 AI 提供更多設(shè)計(jì)分析的背景。
V0的設(shè)計(jì)分析：
一長(zhǎng)串的分析，啟發(fā)性十足。我大概也能從 ChatGPT 或 Claude 得到類似的結(jié)果。
（下一步是根據(jù)這些建議生成設(shè)計(jì)方案。但正如我之前提到的，實(shí)際上我也可以提供自己的設(shè)計(jì)建議，例如“當(dāng)前設(shè)計(jì)缺乏清晰的視覺(jué)層次，并且留白過(guò)多。您能否生成三個(gè)設(shè)計(jì)方案來(lái)解決這個(gè)問(wèn)題？”）
接下來(lái)，我要求 V0 生成設(shè)計(jì)選項(xiàng)：
根據(jù)以上建議，您能否為 Kayak 主頁(yè)快照生成 8 種備選設(shè)計(jì)方案？Kayak 主頁(yè)快照的8種 替代設(shè)計(jì)選項(xiàng)？
正如我所料，它運(yùn)行了很長(zhǎng)時(shí)間，每個(gè)設(shè)計(jì)選項(xiàng)大約一分鐘。因此，我點(diǎn)擊了“停止”，并在提示中將數(shù)量從 8 減少到 3：
根據(jù)以上建議，您能否為 Kayak 主頁(yè)快照生成 3 個(gè)備選設(shè)計(jì)方案？Kayak 主頁(yè)快照有3種 備選設(shè)計(jì)方案嗎？
V0 在大約 1.5 分鐘內(nèi)生成了 3 個(gè)設(shè)計(jì)選項(xiàng)：
V0 描述的快照：
它生成的設(shè)計(jì)：
V0 描述的快照：
它生成的設(shè)計(jì)：
V0 描述的快照：
它生成的設(shè)計(jì)：
總體而言，效果令人印象深刻。我喜歡這些精致的細(xì)節(jié)。它保留了我提供的快照中的必要信息（顏色、樣式、CTA）。
所有生成的設(shè)計(jì)都由具有基本交互效果的代碼支持，例如輸入字段交互和懸停效果。
我希望設(shè)計(jì)選項(xiàng)之間能有更清晰的區(qū)分。不過(guò)我也可以嘗試后續(xù)的提示來(lái)解決這個(gè)問(wèn)題。
Magic Patterns 的設(shè)計(jì)分析：
有些我同意，有些我不同意。為了演示，我簡(jiǎn)單地讓它生成相應(yīng)的設(shè)計(jì)選項(xiàng)：
根據(jù)以上建議，您能否為 Kayak 主頁(yè)快照生成 8 種備選設(shè)計(jì)方案？Kayak 主頁(yè)快照的8種 替代設(shè)計(jì)選項(xiàng)？
Magic Patterns 在 1.5 分鐘內(nèi)生成了 8 個(gè)設(shè)計(jì)選項(xiàng)，比我預(yù)期的要快。
由于新聞稿的篇幅限制，我在這里僅展示三種設(shè)計(jì)：
與 V0 相比，設(shè)計(jì)更加簡(jiǎn)單。
它在更短的時(shí)間內(nèi)生成了更多的設(shè)計(jì)，這很棒。
我很喜歡它的“導(dǎo)入 Figma”功能。我可以將生成的設(shè)計(jì)導(dǎo)入 Figma 進(jìn)行進(jìn)一步編輯。
此外，它還有一個(gè)Chrome 擴(kuò)展程序，可以讓我把網(wǎng)頁(yè)轉(zhuǎn)換成 React 組件或 Figma。雖然不完美，但我對(duì)它的功能非常期待。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.ocunn.cn