AI Web设计实测

Gemini 3发布了，有关于它在UI设计方面非常棒的炒作。别误会，我尝试了提示，它给了很棒的设计。

但是

我想尝试这个，看看能否将其集成到我的工作流程中。我的通常流程如下，总结起来：

• 与客户交谈，找到他们的目标，理解他们的品牌，并找到与品牌匹配的灵感
• 然后我创建一个情绪板并呈现给客户。他们对它提出意见，我决定设计方向
• 接下来，我为每个页面创建网站地图+信息架构。
• 此信息架构的内容通常来自客户，但在那之前，我会使用AI来完成它
• 线框图+设计。它们是两个不同的步骤，但为了保持简短，它将是一个步骤

你可以看到，好的设计不是塞入大量文本并得到一个设计。客户希望设计是他们的。匹配他们的品牌并反映他们的意见。

但是

AI将无处不在；如果你不适应，它将在你自己的游戏中击败你。所以我开始了我的实验，看看AI能在多大程度上做我的工作。

我不是世界级设计师，但我对自己创建的东西非常挑剔。我需要AI创建我想要的确切东西。

免责声明——Gemini没有保存我的任何提示，这实际上是我实验的快速案例研究。我从一种设计转向另一种类型的设计，主要是因为我需要测试图像生成对应用程序有多好

1、使用Claude技能

Claude非常擅长编码，但它仍然不擅长设计。然后出现了能够引导Claude生成好的UI设计的Claude技能。我尝试了这个，并能够为AI服务提供商生成一个着陆页。

请注意，这只是一个单一的提示；没有给出其他细节

你可以看到，这仍然有AI糟糕的颜色；这不够

2、使用Claude技能和Gemini，但带有图像示例

我使用了Claude代码和Gemini（使用Cursor）为一家名为Sentido的酒店创建着陆页。我只给了它图像示例+我需要内容的部分。这是它给我的

你可以看到，两者相似，但Gemini给我的更加精致和简单。Claude有更多的细节/元素，而Gemini选择了极简主义路线。Gemini实际上在这里完美地达到了品牌。

3、使用Claude技能，但有更多上下文和很棒的提示

现在我提升了一点。我得到了一些我喜欢网站的例子，并写了每个部分的结构应该是什么样子的。

然后我将这些输入到一个名为Gemini UI设计的GPT，它给了我一个详细的提示，从设计方向到应该使用的颜色和排版（我没有定义它们）

最后，我使用Claude代码与GPT给我的提示以及图像参考一起构建着陆页

你可以看到，Claude实际上遵循了指令并给出了预期的设计（这不是世界级的，但它做了我期望的），而Gemini在bug和整体设计方向上有点失败

但这仍然不是我想要的。如果我有这些设计的Figma文件，我会改变它们。这是我第三次尝试，但我不能放弃。

经验教训

• 你必须确保你解释例子。你不能只是一堆扔进例子并期望Claude或Gemini构建某种东西
• 你必须在颜色、字体、图标和动画使用方面具体说明

4、使用Gemini和Claude技能一起

我看到了Meng To的LinkedIn帖子。他发布了一种用Gemini获得很棒设计的方法。那就是尽可能具体。我使用了他的提示，然后要求Claude（使用前端设计技能）为着陆页创建一个主提示。

这个提示有以下部分

• 英雄部分——设置颜色、排版和间距的基础
• 图标和排版——Iconify集和自定义字体配置
• 入场动画——淡入、滑动、模糊效果，具有适当的填充模式
• 社交证明——标志跑马灯和评级显示
• CTA按钮——边框光束和微交互等高级效果
• 其他部分——功能、定价、推荐、常见问题解答、页脚
• 完善——最终一致性检查和增强

但我只想尝试一下带有动画的英雄部分

所以我要求Gemini给我一个带有GSAP揭示动画的英雄部分。我使用了一个例子作为参考。点击这里查看示例网站

这是它给我的

你可以看到，对于一个单一的提示来说，这很棒

我添加了动画，还从React bits复制了一个背景动画

下一步是获取代码文件，将它们放入Claude代码中，并要求它基于英雄部分设计生成一个全面的style.md文件。我使用前端设计技能实现了这一点。

一旦样式指南完成，我要求它生成页面的其余部分。我定义了我需要的部分，没有其他。

这是它给的

你可以看到比以前的例子更精致。

但是，我想做更多。我还不能放弃。所以这里是第五步

经验教训

• 给AI自由探索可以产生一些很棒的设计
• 提供的例子应该限制为1个，或者在设计方面彼此相似

5、使用标准UI设计流程与AI

仍然，我不想放弃。我需要作为设计师拥有的控制来创建我需要的设计。

所以我从创建设计时通常采取的第一步开始。这是获取项目简报并从中创建情绪板。

这个情绪板包括

• 关于参考的详细信息以及模型应该从参考中取什么
• 颜色
• 排版
• 任何动画模式

与此同时，我还创建了一个文档，包括页面每个部分的内容

然后我开始用例子描述每个部分，我添加了尽可能多的上下文。这些包括

• 部分灵感的截图
• 可以放在这个部分的视觉效果
• 这个部分的动画
• 文本设计
• 部分中将使用的组件

构建的文件夹结构

现在，这是我通常会开始设计页面的点，但现在是LLM的工作来做它了。

所以

• 我创建了一个文件夹来添加所有图像，包括截图，另一个文件夹来添加关于情绪板和部分的详细信息
• 一旦完成，我要求cursor生成一个包含所有所需信息的样式指南。然后我创建了一个PRD以及与PRD中列出的任务匹配的任务列表

结果不是我预期的。所以我再次分析，意识到我有冲突的指令，并且提供的灵感（深色和浅色模式混合）与我想的不一致

这是我知道AI需要一个非常具体的路径以便能够按照指示完成工作的地方。所以我切换到Claude并要求它根据我的灵感和想法重新制作vibe情绪板。

它给了所有部分的markdown和vibe情绪板。我再次运行项目，这是我得到的

同样，这比以前好，但仍然有一些bug。

6、使用Gemini和Claude生成英雄部分和样式指南

所以我尝试了另一种方式。这次，我使用了vibe情绪板和截图来要求Gemini 3创建英雄部分。它给了我一个干净的设计，所以我再次提示它添加一些背景交互。这是它给的

然后我切换到Claude代码，使用前端设计技能，并要求它创建一个全面的样式指南。

使用这个样式指南，我设法创建了以下设计

同样，这很棒，但不是我认为它能做到的。也许我在沟通我想要的东西上失败了。

7、仅使用Gemini

我再次尝试，这次使用googles AI Studio用我拥有的内容创建着陆页。这是它给出的设计

这又比Claude做的更好，但仍然，这不是我预期的（哈哈，我可能有高标准）

我尝试了最后一次，这次给Gemini我想要的设计带有例子，然后要求它使用自己的创造力构建着陆页。

这是它给我的

终于，我真正喜欢的东西，我希望我可以调整一些但仍然，这比我们以前有的有重大改进。

经过所有我的努力，我肯定觉得Gemini会是一个更好的选择

8、自己做

现在我花了一些时间自己做这个设计。我花了大约4-5小时，但如果我得到了资产，我可以做得更快。"它是如何工作的"部分中的资产花了一些时间，因为我不得不使用Claude提示并找到最好的方法来做它。

我给Claude一个我想要的插图例子，可以说它很好地解释了风格。

对于英雄图像，我想可视化从不同角度来的线形成一个流线（焦点），所以我再次要求Claude帮助我，它给了我一个相当好的英雄图像。

此外，我使用了微妙的黄色灯光（带有模糊效果）和噪声背景。

结论

• AI设计肯定将成为大多数设计师的设计方式。目前，没有方法在Figma中用这种质量提示设计（我尝试了，失败了）
• 一旦完成，我们将看到更多AI用于设计，因为，现实地讲，客户项目通常从figma开始，并在wordpress或webflow中结束
• 但是，我将其视为获取更多布局/设计灵感的工具，而不是成为唯一的设计大师

记住，AI可以产生看起来经过设计的东西——干净的排版、时髦的渐变、适当的间距。但设计作为一个学科是为特定人解决特定问题。一个看起来很棒但不转化，或者感觉不像品牌，或者混淆用户的着陆页——不管它看起来多么精致，那都不是好的设计。

原文链接: AI Web design is overhyped (IMO)

汇智网翻译整理，转载请标明出处