如何把你的 AI 变成世界级设计师

👋 你好,我是Lenny。每周我都会分享经过深入研究的产品、成长和职业建议。更多内容:伦尼的职业|伦尼的播客|伦尼机器人|我如何 AI|成为一名AI原生建造者还有我另一个最喜欢的人工智能/项目管理课程

附言:免费获得一整年Cursor、Notion、Replit、Lovable、Wispr Flow、Linear、ElevenLabs、Factory、PostHog、Granola,Brain.fm《觉醒》等,通过成为Insider订阅者(送完即止)。了解更多.

我一直觉得AI设计很差。但读了这篇令人震惊的帖子后安舒·奇马拉我意识到我之前做错了。Anshu在苹果领导软件工程和设计团队长达12年,专注于未来AI产品的研究和原型设计。他经常分享设计教程和演示X(他是我最喜欢的关注者之一。)想深入了解如何用AI打造独特的体验,可以看看他的作品子堆栈并与他联系LinkedIn.

我们开始吧。

一个对话式卡路里追踪器,基于Claude Fable 5的三个提示:

一款太空探索游戏,基于Claude Opus 5的两个提示构建:

一个动态着陆页,由Claude Opus 5 + GPT-5.6 Sol构建,包含三个提示:

我经常在X上发布类似的AI设计演示。每次我发,总有人会问:“为什么模型能为你创造这么多惊人的东西,而我尝试时得到的却是普通的杂物?感觉就像你用的是完全不同的模型。”

我没有用别的型号,但我收到了更多在我合作的模型中。大多数人只看到AI创造潜力的1%。我想教你如何挖掘剩下的99%。

AI模型拥有惊人的创造力,但这种创造力被训练方式所扼杀。大型语言模型是下一个标记的预测器:每一步,它们会根据数百万个示例观察一系列文本,预测下一步。结果可能由人类评分,这些评分反馈给模型。这教会模型做出符合每个人偏好的一致且安全的选择。

这使得典型的大型语言模型在大多数任务上表现出色,但设计能力却很差。为了创建设计,LLM必须逐个代币构建它。每当需要做出设计决策——使用什么颜色,或者如何排列元素——模型都会填充它认为最可能让所有人满意的标记。结果是,设计通常会变得重复且乏味。这就像是委员会设计的终极案例。

而优秀的设计则从感受出发,旨在激发情感反应。它打破规则,用令人难忘、出人意料的选择取悦用户。优秀的设计恰恰与大型语言模型自然所做的相反,后者在每个环节都做出最可预测的选择。

然而,如果我们能让模型超越最可预测的选择,就能接触到大多数人错过的广阔创意景观。

这是我在管理人类设计师时学到的教训,后来我还没开始管理人工智能设计师。在苹果的大部分职业生涯中,我带领研发团队设计探索性的未来人工智能产品。早期,我们对用户界面应如何运作的先入为主的观念限制了我们的创造力,让我们不断回到老一套想法。通过严谨和新流程,我们学会了不再重复创造舒适的东西,而是关注可能性的边缘,创造出新的东西。我们成为了将细节打磨到苹果水平的专家。

自从我在苹果工作以来,我一直在努力将同样的流程应用到我的人工智能工作中。在过去几年里,人工智能代理变得非常强大。他们能在数小时内完成过去我团队需要数周才能完成的事。有了正确的指导,他们还能创造出完全不同的设计。

松散地受到双钻设计流程,我重新构想了一组AI代理而非人类设计师的设计流程:

  1. 发现通过探索多种方向,创造大胆且雄心勃勃的设计简报,带来超越普通粗糙的新想法。
  2. 定义通过推动人工智能超越其熟悉的模式,将模型串联起来,充分发挥设计潜力,从而塑造个人设计身份。
  3. 送货通过抛光粗糙的棱角,聚焦关键元素,呈现出令人惊艳的最终成果。

通过遵循这些阶段并应用每个阶段中的技术,你可以极快地创造出令人难以置信的设计——并让人质疑:“为什么人工智能为你创造魔法(而不是为我)?”

发现:探索无限可能的空间

设计过程中最难的部分是面对一个充满无限可能性的空白屏幕。应对这一时刻的最佳方式是先从广阔的方向开始,再深入挖掘。人工智能是一个极佳的工具,可以探索各种潜在方向。

不过,正如我们所知,模型往往过度依赖熟悉的模式,并做出保守的选择。为了探索设计空间的全部潜力,我们希望引导模型做相反的事:大胆、多样并敢于冒险。以下是两种将其推离舒适区的方法。

技巧一:使用种子串注入多样性

这里的理念是让模型找到新的设计灵感来源,而不是依赖它从训练中学到的默认设置。如果你尝试过让模型设计网站或应用,你可能已经见过那个默认设置是什么样子。

举个简单的例子,我给了四个Claude Code实例,提出了相同的提示:

提示:

帮我做一个生产力应用的登陆页面。

克劳德作品5:

几乎每次,我们看到的都是紫色渐变,左边是文字,右边是图形,结构完全一样。看起来就像所有AI设计的网站。

我们没有要求模型做任何独特或变化的事,所以它不断重复熟悉的模式是合理的。但仅仅要求多样性是行不通的:

提示:

帮我做一个生产力应用的落地页。给我一个完全独特的东西。每个设计决策都完全随机。

克劳德作品5:

结果与之前不同,但仍然没有变化。模型总是使用相同的配色方案、结构,甚至同样尴尬的陶艺隐喻。它预测的是符号音效随机但并非其实随机。

问题在于模型本身无法随机行动。它只能预测最可能的标记。如果我们想要多样性,就必须从模型外部引入。一种技术是思维字符串种子,由Sakana AI出版.我们让AI生成一个随机字符串,并以此作为设计灵感。这样模型每次都做出不同的决策。

提示:

我想让你帮我做一个生产力应用的落地页。按照以下程序操作:
  1. 用shell脚本生成一个长的随机字母数字字符串。
  2. 根据字符串定义创意方向(配色方案、版面、字体设计等)。超越表面寻找子图案、特殊数字,任何能激发你灵感的东西。
  3. 用你的判断力让这个方向活起来,让它看起来很棒。
设计里别透露绳子。这只是给你灵感的。

克劳德作品5:

结果突然变得更加多样化!现在我们看到了不同的配色方案、字体和新创意。之前的设计是任何Claude用户都能获得的。这些设计是独一无二的;没有两次运行能产生相同的效果。

技巧二:对提示要更有野心

另一种强力推动模型的方法是让提示更具体、更狂野。这为模型提供了清晰的愿景,作为决策依据,而不是让它临时决定。找到独特创意的最佳方式是将自己的品味纳入其中。你首先想象灵感来源——电子游戏、室内设计潮流、艺术装置——并描述你希望这些灵感如何影响AI的输出。以下是一些例子:

“帮我做一个生产力应用的登陆页,带有大胆的像素艺术主题和惊艳的图形。每个部分都应该像电子游戏的静态画面,但又要以某种方式作为登陆页发挥作用。”
“帮我做一个生产力应用的登陆页,背景设定在一个等距的3D生活城市里,不同特征以社区或建筑物的方式代表。”
“帮我做一个生产力应用的落地页,布局极度不对称,颜色和字体不协调,还有让人不舒服的负空间。打破所有规则,但依然看起来好看。”

当然,难点是想出原创的点子去请求。AI也能帮忙,但如果你只是问它点子,得到的和别人一样平均。这是我用来找独特提示点子的系统:

1. 让AI列出一堆想法,故意不写细节。目标只是激发你的想象力。

我想为我的产品设计一种大胆、独特的设计语言。你能列出尽可能多的想法,并用简短、高层次的描述吗?要广泛而非深入。

2. 想象你喜欢的方向,并记录你对不同方向的反应。然后让AI对它们进行细化。

工业控制面板:
  • 我想象的是触感。点击感强、令人满足的按钮,悦耳的声音。
  • 起初我想象的是卡通化或拟物化的东西,但这感觉很俗气。避免那样。
  • 相反,要有一致的组件和细节,既能让整体造型又不过度。
  • 灰色渐变会显得无聊。需要更多质感。也许我们可以加入一些色彩,同时保留控制面板的感觉?
你能根据我的口味把这把磨利吗?

3. 反复迭代直到满意,然后让AI写出提示来构建它。

你能写一个简明的提示词,让AI代理用来构建初始的POC页面吗?

如果你只是把AI生成的想法粘贴回去,很难做出独特的东西。毕竟,任何人都可以做到同样的事。然而,当你主动引导设计方向时,最终会得到只有你能创造的东西。

不要害怕尝试听起来很糟糕的想法。如果你发现自己在想,“这绝对行不通”,那你就走在正确的路上。很多时候,你的经纪人会让你惊讶,你会意识到自己低估了他。如果没有,就把那些结果扔掉,换个方法试试。但请把提示留着别这样多工作,等新型号上市时再测试。这样你就能知道自己充分利用了最新型号的优势。

定义:深化你的设计方向

到目前为止,我们已经研究了如何探索广泛的想法,并希望能找到一个有前景的初始设计。不过,无论我们如何提示,最初的AI生成设计通常仍然显得很普通。

例如,看看我们用种子字符串设计的方案:

这些游戏有潜力,但仍然严重依赖那些陈旧的模式:左侧是文字,下面是CTA按钮,顶部是导航栏,右侧是图形。

我们的下一个目标是通过独特的设计选择赋予每个设计独特的个性。以下是我最喜欢的实现这一目标的技巧。

技巧三:与亚代理建立正反馈循环

我们需要不断迭代设计以改进它们。但仅仅让代理审视设计并改进是行不通的,因为代理本身并不客观:它会审查自己的代码、过去的决策和之前的理由。人工智能无法轻易地拉远视角,看到大局,然后“用不同的思维方式”。

解决这个问题的方法,不要让编码代理决定设计是否足够好,而是让它去询问另一个代理人——“设计评论家”。评论员的工作是查看当前设计的截图并提供反馈。它不在乎当前设计如何实现或投入了多少努力,只关心是否达到了质量标准。

这种方法还有额外好处:我们可以用一个大型、昂贵的模型来做批评者,而不至于花大钱,因为我们只会用它做高管决策。一个便宜、快速的模型可以做繁重的工作,而强有力的批评者模型则提供品味。

让我们试试这个方法,用Claude Fable 5作为评测:

提示:

我希望你改进这个设计。要确定重点,可以用一个《寓言5》的子代理作为设计评论员。每次迭代时请遵循以下步骤:
  • 截取当前设计的截图
  • 在一个全新的语境下调用批评者,只用截图,不要涉及代码、实现细节或早期的迭代/批评
  • 让它评估设计所追求的美学,想象顶级设计工作室如何执行这种美学,然后勾勒出最大的漏洞
  • 最后,它应该给出一个10分满分的评分,说明当前设计与工作室级别质量的标准有多接近
请在提示中向批评者提供以下指导:
  • 它应从整体结构和构成的层次上思考,同时关注细节
  • 它应当警惕那些感觉过度、过度或明显由AI生成的模式,并予以惩罚
  • 它应该提供紧凑、具体的反馈,而不是模糊的文字
  • 它应该大胆且有主见,而不是依赖安全或简单的方法
只有当评论家独立认为你的作品得分9分或更高时,你的作品才算完成。不要把这个标准写进批评题;在评分时保持客观。每次都用同一个批评人提示。

克劳德作品5:

不再是一成不变的布局,而是每个设计都有自己的身份——但依然保持着其原始的高水平美学。

值得注意的是,在每种情况下,Fable的产出代币都不到10%。让Fable直接重新设计页面的成本会翻倍,耗时也会更长。

你如何设置这些环非常重要。以下是一些建议:

  • 确保批评标准尽可能清晰客观。
    • 坏评判:“评判我们的设计是否漂亮,而不是AI生成的。”这太主观了,每次游戏结果差异很大。
    • OK:“审视我们想要的美学,想象顶级设计工作室会如何执行,然后根据这个标准来评判我们的设计质量。”提示依然模糊,但它提供了一个统一的框架和质量标准。
    • 很棒:“这里有5个设计:4个专业示例和1个产品截图。按精致度和口味水平进行排名。”这条说明具体且客观,为判断提供了视觉基准。
  • 提供示例图片以展示目标质量条。你可以使用类似的截图、你喜欢的设计,甚至AI生成的概念艺术。指示评论家把这些视为基线或情绪板,而不是目标。你不希望它完全复制其他设计。
  • 请仔细设定停止标准。否则,批评者可能永远不会认为设计足够好,你的代理人会无助地烧掉代币来取悦它。先让它做一两次迭代,看看是否收敛再添加更多。
  • 为每项工作选择合适的型号。考虑使用更大的模型作为批评者角色,因为更多参数通常意味着更好的设计感和更广泛的思想分布。小模型作为实施者可以有效,但不要做得太小。你仍然需要一个能够很好地执行设计方向的模型。

技巧四:利用图像生成丰富设计

编码代理喜欢写代码,但他们通常不包含图像。相反,他们倾向于使用简单的代码替代方案:渐变、形状和基本图案。这些都是AI生成设计的明显特征。

有些代理内置了图像工具,但利用率低。还有些没有开箱即用的图像工具,但可以轻松使用 OpenAI 或 Gemini API 生成带有 API 密钥的图像。

让我们试试上一步的设计:

提示:

设计相当简单。通过图像生成增加更多个性。考虑将着色器或3D效果与图片结合,创造更有趣的视觉效果。生成图片时,使用这个OpenAI API密钥(仅本地使用,不要存储在代码或产品中):sk-a1b2c3d4...在浏览器中逐帧验证你的作品是否正确。

克劳德作品5(前后):

这些图像和特效能迅速赋予更多个性,使设计不那么明显地带有AI生成的特征,因为它们展示了不仅仅是表面的努力。

根据你的设置,有多种方式可以将代理连接到图像生成工具:

  • 如果你用Codex、Antigravity或Grok Build:
    • 告诉你的代理使用其内置的图像生成功能。代理已经知道如何操作,但很少在被指示前使用。
  • 如果你使用Claude Code或其他代理,同时又订阅了ChatGPT:
    • 告诉你的客服:“用Codex的CLI生成图片。如果还没有,帮我安装。确保它在计费我的订阅费,而不是API密钥。”这样你就可以用ChatGPT订阅生成图片,无需额外费用。
  • 如果你只用Claude或其他工具:
    • 最简单的方法是给你的代理一个OpenAI或Gemini API密钥来生成图片。我建议为你的代理创建一个单独的API密钥,设定严格的支出上限。这样即使密钥泄露或代理滥用,成本也能被控制,而且你可以轻松撤销密钥而不会影响其他工作。
    • 如果你经常把密钥粘贴到聊天里,就把它们放进文件里,并在项目里指向你的代理。告诉你的代理:“创建一个名为 .env.agents 的 gitignored 文件,把这个 API 密钥存进去,然后记下自己AGENTS.md/CLAUDE.md这些密钥供你在开发过程中使用(但不得随产品出厂)。”

技巧五:如果要进行更高级的动作,可以使用视频生成

如今视频生成模型非常强大,但大多数人认为它们只是生成UGC广告或威尔·史密斯吃意大利面片段的工具。它们对日常设计工作也有奇效。

市面上有很多视频模型,最好的经常更换,所以我喜欢用聚合平台,比如fal.ai.这样,我们可以给代理一个单一的API密钥,让它评估不同选项并选择最佳方案,而无需多次整合。

以下是我喜欢在设计中使用视频模型的两种方式:

制作惊艳的动画图形

诀窍是生成一个循环片段,背景是纯色,然后用色键(像绿幕一样)去除,或者在更复杂的情况下用视频遮罩模型去除背景。这样你就能在UI的任何地方叠加动画,而不像视频。

例如,我拿了我们之前的一个设计,运行了这个提示:

提示:

你能用一个循环播放的视频片段替代这页的图片,做些更有趣的事情吗?让水晶碎裂,慢慢旋转。它应该会有很棒的玻璃效果,折射页面背景,投射出阴影和光线。要获得逼真的玻璃折射效果,先渲染玻璃覆盖页面背景色的视频(这样折射效果会烘焙进去),然后用视频遮挡模型去除背景。用这个fal.aiAPI key: sk-a1b2c3d4...寻找适合近期视频生成和背景去除的模型。

GPT-5.6 Sol(前后):

这比代码能实现的效果丰富得多:有趣的苛性反射、玻璃状折射效果和复杂的物理运动。

创建状态间的流畅跃迁

这对视频模型来说是一个非常被低估的应用场景。除了从文本生成视频外,许多视频模型还能在关键帧图像之间插值。这让你可以将两张产品静态图片之间生成过渡片段。你可以在用户采取动作时播放该片段(比如切换到应用的另一个屏幕),或者根据手势(如滚动或滑动)逐帧浏览。

这里有一个演示页面,展示了滚动效果。我用 Codex 中的 GPT-5.6 Sol 用一个提示词制作的:

提示:

构建一个手提箱演示页面,利用视频模型在几个屏幕之间创建互动过渡。每个屏幕应显示手提箱处于不同状态,垂直运动适合滚动:
  • 一开始,让手提箱高高地漂浮在空中
  • 然后让它落在地板上,然后弹开
  • 最后,让里面的内容物从顶部整齐地落入
用你的图像生成技能生成初始帧。然后生成一段视频片段,从该帧开始并动画到下一个状态。用该视频的最后一帧来做种下一个过渡,确保无缝衔接。随着用户滚动,逐帧刷刷过渡。用这个fal.aiAPI key: sk-a1b2c3d4...使用物理和一致性强的视频模型,比如Seedance 2.5。

GPT-5.6 Sol:

页面之间的过渡随着用户滚动的动作流畅地刷洗,玩起来很有趣。这样的设计让用户更喜欢想要继续浏览和阅读更多关于你的产品的信息。而且只用了一个提示!

交付:打磨你的设计,使其成为用户喜爱的作品

一旦我们达到独特且出色的设计,最后一步就是清理细节,准备投入生产使用。AI可以打造惊艳且引人注目的视觉效果,但你的判断将是确保设计合理、流畅且符合用户实用目的的关键。

技巧六:剔除那些没有价值的元素

AI喜欢添加更多内容,但很少会削弱。设计被AI生成的最大标志之一,就是它过度解释一切,或者包含了没有实际用途的元素。相比之下,克制的设计立刻看起来高档且有品味。

在打磨AI设计时,我大部分精力都花在去除某些东西上。比如,当我开发我的卡路里追踪应用时,这是我最初用Claude设计的:

我描述了应用的功能,并特别要求“简洁、极简的设计”。结果还不错,作为完全AI生成的系统,确实令人印象深刻。然而,尽管我要求极简,设计中很多内容并没有带来价值:

  • 背景和进度条上出现粉色发光效果
  • 文字上的随机颜色和高亮
  • 当展示一天所有食物时,额外的标签和空白,而图片已经传达了这一点
  • 自定义按钮和文本字段看起来比内置的iOS组件还差

我让克劳德收敛点:

  • 将布局简化为以图像为中心的网格
  • 去除渐变、光晕和不必要的容器
  • 追求真正极简的美学,感觉像苹果本土

结果如下:

在我训练有素的眼光里,结果是非常多更好。它有主见,让视觉本身表达。它使用了原生iOS组件,过度的色彩和渐变被消除。文字更小、更简洁、更紧凑。这是很好的设计。

如今的AI模型绝不会想到自己做出这些选择。记住,AI不喜欢冒险,剥离设计并删除代码是有风险的。模型需要你的推动。审视你的设计,问问自己真正需要什么。通常,屏幕上的放得少会传达信息更多因为你可以在不让用户被杂乱压倒的情况下吸引他们的注意力。

技巧7:移除AI提示

添加评论
点赞收藏
点踩分享查看原文
评论
?
参与讨论