如何利用人工智能根據(jù)現(xiàn)有設(shè)計(jì)生成設(shè)計(jì)選項(xiàng)？

這是一個(gè)常見(jiàn)的用例：

• 也許您認(rèn)為當(dāng)前的登錄頁(yè)面太混亂并想改進(jìn)它。
• 也許您正在進(jìn)行設(shè)計(jì)，但感覺(jué)只有一個(gè)想法，并且希望有更多的設(shè)計(jì)選擇來(lái)獲得靈感。

然而，我在網(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è)步驟：

• 步驟1：讓AI分析設(shè)計(jì)并提出改進(jìn)建議。
• 第 2 步：要求 AI 根據(jù)其建議生成設(shè)計(jì)變體。

（如果您清楚自己想要進(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ì)它以不同的方式？

第一個(gè)提示

這是我放入 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

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)：

• 設(shè)計(jì)1：增強(qiáng)核心體驗(yàn)
• 設(shè)計(jì)二：沉浸式英雄體驗(yàn)
• 設(shè)計(jì)3：以目的地為中心的體驗(yàn)

設(shè)計(jì)方案1：增強(qiáng)核心體驗(yàn)

V0 描述的快照：

將顯示縮放圖像

它生成的設(shè)計(jì)：

將顯示縮放圖像

設(shè)計(jì)方案二：沉浸式英雄體驗(yàn)

V0 描述的快照：

將顯示縮放圖像

它生成的設(shè)計(jì)：

將顯示縮放圖像

設(shè)計(jì)方案3：以目的地為中心的體驗(yàn)

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ì)：

設(shè)計(jì)方案1：增強(qiáng)價(jià)值主張

將顯示縮放圖像

設(shè)計(jì)選項(xiàng) 2：搜索優(yōu)先設(shè)計(jì)

將顯示縮放圖像

設(shè)計(jì)選項(xiàng)3：社會(huì)認(rèn)同焦點(diǎn)

將顯示縮放圖像

印象

與 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ì)它的功能非常期待。

蘭亭妙微(www.bjlzjm.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan