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