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