如何利用人工智能根据现有设计生成设计选项？
这是一个常见的用例：
然而，我在网上并没有看到太多关于如何使用人工智能来解决此类用例的讨论。
所以今天，我将逐步向您介绍一些示例，包括我使用的提示、工作流程和结果。
让我们开始吧！
由于我只需要专注于前端设计，因此我使用了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。虽然不完美，但我对它的功能非常期待。