AI Slop and the Evolution of Design Tools
打开互动全文版(中英对照 + 朗读 + 问答)→Mang 讨论了追逐潮流如何导致 AI 垃圾,并分享了他从 Cursor 转向 Codeex 来构建应用和设计的经历,强调需要领先于基准线。
Mang discusses how chasing trends leads to AI slop, and shares his shift from Cursor to Codeex for building apps and designs, emphasizing the need to stay ahead of the baseline.
如果你总是追逐潮流,你很快就会变成 AI 垃圾。现在的基线是 Inter 字体、紫色渐变。这在五年前会很惊艳。比如有人用紫色渐变,大家都会疯狂。但如今,因为 AI 垃圾,对吧?很快,你知道,就会变成衬线字体和 AI 一直用的那些动画。你必须始终领先基线一步。
If you always chase the trends, you will become AI slop very soon. Right now, the baseline is the inter fonts, the purple gradients. That would have been amazing 5 years ago. Like if someone were using purple gradients, everyone was going nuts over that. But nowadays, because AI slop, right? Very soon, you know, it's going to be the serif fonts and the same animations that AI use all the time. You have to be always a step ahead of what is the baseline.
欢迎来到 Dive Club。我是 Rid,这里是设计师永不停歇学习的地方。本周的嘉宾是 Meng To,他是我喜欢关注的人之一,看他如何随着用 AI 构建想法而不断演进自己的流程。所以,我们会做大量的屏幕共享,深入探讨他所有的提示设计 MD 文件的策略,以及他用来从模型获得更好输出的小技巧。那么,首先,我问 Meng 分享一下自从我们上次谈话以来,他为什么全力投入 Codex。
Welcome to Dive Club. My name is Rid and this is where designers never stop learning. This week's episode is with Meng To, who's one of those people I like to keep tabs on to see how he's evolving his process as he continues to build his ideas with AI. So, we're going to do a ton of screen sharing and go deep into all of his strategies for prompting design MD files and little tactics that he uses to get better outputs from the models. So, to start, I asked Meng to share more about why he's gone all in on Codex since the last time we talked.
我以前一直用 Cursor,但现在 Codex 正在改变很多设计师和很多从未做过设计或编程的人的思维方式。这有点像从 ChatGPT 进化成更强大的东西。你的大脑就在你的电脑上。所有文件都在那里。你可以构建应用,但也可以聊天。你还可以规划事情。你可以设计。你可以生成图表、创建 HTML、创建 Markdown 文件,并且它连接到所有插件和集成,比如 Slack、Telegram,你知道,Discord。最近,你现在可以用手机打开并继续电脑上的 Codex,我认为这意义重大。
I used to use Cursor all the time, but now Codex is shifting the mindset for a lot of designers and a lot of people who've never done design before or coding before. It's kind of like an evolution from ChatGPT into something far more powerful. Your brain is on your computer. All the files are there. You can build apps, but you can also chat. You can also plan things. You can design. You can generate charts, create HTML, create markdown files, and it connects to all of the plugins and integrations such as Slack, Telegram, you know, Discord. Most recently, you can now open and continue Codex on your computer using your phone, which I think is a huge deal.
我们第一次见面时,你知道,我们做了这个播客,大概是 16、18 个月前。我构建了我的第一个应用,Dream Cut。用的是 Cursor,用的是 Sonnet 3.5。我从未发布那个应用。应用中有一些关键部分没有达到质量标准。所以尽管我内心认为我最终会解决这些问题,但我从未解决,因为当时技术太不成熟了。能在一周或一个月内重写一个应用感觉很好。但现在用 Codex,我们一天就能完成所有这些。但你需要知识。
The first time we met, you know, we did this podcast, which was about 16, 18 months ago. I built my very first app, you know, Dream Cut. It was using Cursor. It was using Sonnet 3.5. I never released that app. There were very key parts of the app that didn't pass the bar of quality. So even though I thought in my mind that I would eventually solve those issues, I never got to solve them because the technology was too young at the time. It felt great to be able to wipe code an app in a week or in a month. But nowadays with Codex, we can do all of that in a day. But you need the knowledge.
最近,你知道,我看了 Mr. Beast。他基本上说,因为知识,他能够启动一个新的 YouTube 频道,无脸频道,并在 6 个月内获得 2000 万订阅者。他说他完全可以用他所拥有的知识做到这一点。所以我相信同样的事情也适用于 Codex 或任何其他工具,比如新的 Cursor 与 Composer 2.5 或新的 Claude。但我喜欢 Codex 的是,我相信他们是第一个。他们从二月开始,是第一个引入这种用线程构建一切的方式的,这完全改变了思维方式,因为它太强大了,如果你现在看 Cursor,那正是他们现在的 UI。对吧。你打开 Cursor,就像,有时我甚至分不清 Cursor 和 Codex,因为它们太相似了,区别只是模型。但我认为 Codex 的成熟度目前要高得多。尽管我真的很喜欢 Composer 2.5。我做了很多非常快速的迭代。在速度方面,没有对手。所以这是每个人必须知道的一个知识:你用什么模型?你应该用什么应用?Composer 2.5 和 GPT 5.5 medium 或 extra high 有什么区别?如果你在构建应用,你需要知道工具是什么,对吧?
And recently, you know, I watched Mr. Beast. He was saying basically because of knowledge, he's able to start a new YouTube channel, faceless one, and get 20 million subscribers in 6 months. And he said he can totally do that with the knowledge that he has. So I believe the same way with Codex or with any other tools such as the new Cursor with Composer 2.5 or the new Claude. But what I like about Codex is that I believe they were the first one. They started in February and they were the first one to introduce this sort of way of building everything with threads, and that completely changed the mindset because it was so powerful that if you look at Cursor now, that's exactly their UI nowadays. Right. You open Cursor, it's like, I can't sometimes I can't even tell between Cursor and Codex anymore because they're so familiar and the difference is just the model. But I think the maturity of Codex is just far greater at this point. Even though I really love Composer 2.5. I've been doing a lot of really quick iterations. In terms of speed, there's no equal. So this is one knowledge that everyone must know: what model do you use? What app should you use and what is the difference between Composer 2.5 and GPT 5.5 medium or extra high? If you're building apps, you need to know what the tools are, right?
以前是 Figma,顺便说一句,我不再打开 Figma 了。我有时会打开它查看过去工作的历史,比如 logo 之类的东西,但我不再打开 Figma 来构建设计或从头创建设计了。我所有的工作都在 Codex 中完成。我所有的项目都在这里,包括播客的准备。所以,我会去找我的智能体,比如,嘿,我有一个新播客要来了。这些是我想要谈论的要点。你能生成图片吗?或者每当我发现一篇很酷的文章或 YouTube 上一个很棒的视频,我就会去,好的,你能写一篇关于这个刚被创建的酷库的文章吗?或者你能写一篇关于写作规则的文章吗?比如我看了一个 YouTube 上关于写作简洁性和文案写作等内容的很酷的播客视频。我就说,你能看这个视频,然后创建并列出所有要点吗?你能同时插入 Paul Graham 的文章吗?你能记住它的哲学,并在我们与智能体一起写作时将其整合到写作中吗?
It used to be Figma, which by the way, I don't open Figma anymore. I sometimes open it for a history of the work that I've done in the past like the logo and all that stuff, but I don't open Figma anymore to build designs or to create design from scratch anymore. I do all of that work in Codex. All of my projects are here, including the preparation for a podcast. So, I would just go to my agents like, hey, I have a new podcast coming. These are my talking points that I want to talk about. Can you generate the images? Or anytime that I find an article that is super cool or a video on YouTube that is amazing, I would go and, okay, can you create an article on this amazing library that someone just created? Or can you create an article about the writing rules? Like I watched a really cool podcast video on YouTube about the simplicity of writing and copywriting and stuff like that. I was like, can you watch the video and then can you create and put all the main points about it? Can you also insert Paul Graham's essays at the same time? And can you also remember the philosophy of it and can you integrate that into the writing when we do it together with the agents?
快速插播一条消息,然后我们继续。我期待 Desen 最近发布的产品已经整整一年了。它叫 Surfaces,让你可以直接在现有生产界面上进行设计和原型制作。所有你需要的页面和流程都已预加载到 Desen 中作为起点,所以你可以轻松做出更改、探索想法,然后准备好后,一键分享你的原型。Desen 是唯一允许你在直接从生产环境拉取的现有页面和流程上进行设计的设计工具,这对团队来说意义重大,你今天就可以开始使用。只需前往 dive.club/desen。就是 dsn。如果你还没有尝试过 Paper,尽管感觉这个播客上每个人最近都在谈论它,但他们刚刚让入门变得更容易了,因为你现在可以直接从 Figma 复制粘贴到 Paper 的画布上。所有图层及其属性,包括图片和 SVG,都会瞬间导入。这很重要,你今天就可以试试。只需前往 dive.club/paper 开始。现在,回到节目。
Real quick message and then we can jump back into it. I've anticipated Desen's recent release for a full year. It's called Surfaces, and it enables you to design and prototype directly on top of an existing production interface. All of the pages and flows that you need are preloaded inside of Desen as starting points, so you can easily make changes, explore ideas, and then when you're ready, you can share your prototype in a single click. Desen is the only design tool that allows you to design on existing pages and flows pulled directly from prod, which is a pretty big deal for teams, and you can get started today. Just head to dive.club/desen. That's dsn. If you still haven't tried Paper, even though it kind of feels like everybody on this podcast is talking about it lately, they just made it way easier to get started because you can now copy and paste from Figma directly into Paper's canvas. All of the layers and their properties, including images and SVGs, are imported in an instant. It's a pretty big deal, and you can try it out today. Just head to dive.club/paper to get started. Now, on to the episode.
所以你不仅仅用它来创作。它实际上也像是你存储资源的地方。
So you're not even just using it just to create. It's actually like where you are storing resources almost too.
当然。而这只是第一步,对吧?第二步是,我认为设计师必须构建自己的工具,因为我们现有的工具永远不够好。那么,我给你举个例子。所以,这是我自己的 Notion 版本。你知道,得到这个……是的,我自己的 Notion 版本。我会告诉你我为什么创建这个。比如在 Notion 上,一切都必须在线上进行。AI 有点像,它不能本地工作。所以我在 Codex 这里做的是处理我电脑上的 Markdown 文件,每次我们在这里创建一个文件,它就会出现在这里。
Absolutely. And that is just step one, right? Step two is I think designers have to build their own tools because the tools that we have are never good enough. So, let me give you an example. So, this is my own version of Notion. And so, you know, getting this... Yeah, my own version of Notion. I will tell you why I created this. So for example on Notion, everything has to happen online. The AI is kind of like, it doesn't work locally. So what I'm doing here with Codex is working with my files that are on my computer in markdown and every time we create a file here, it appears here.
所以我在准备时,让我的 AI 为每个标题生成一张图片。我还有一个完美的图片提示词,并为它创建了一个 UI,里面有一堆我多年来收集的预设提示词,比如把设计转换成透视图,因为这样看起来好多了。你看这个,第一个版本看起来像这样——AI 垃圾——但转换成透视图后,突然就好多了。这只是一个提示词,一个用 AI 能做什么的例子。除此之外,你还有工具,比如你在做演示时,可以在上面画图。你还可以看笔记,因为这都是你文件的一部分。所以如果我在做演讲,我这里有笔记、版本历史,可以看到我做的所有修改,以及设计的历史——不管是不是从零开始。所有这些都是用我的智能体本地创建的,这些智能体始于 Codex。我几乎建过很多次了,因为我看到了把所有内容放在本地的价值。我不想让它被困在某个云端产品里。我不喜欢 Obsidian。我试过很多次想让它变得好用,但就是不喜欢。我只把它做成了 Mac 应用,但你在本地用网页构建——我之前没考虑过。这很吸引人。当你构建自己的应用时,你会发现:我这里有这么多信息。如果我能让 AI 用每个部分作为上下文来创建我的图片呢?所以你可以直接创建一个新块,然后用一堆预设提示词生成图片,不需要任何提示词。比如,我需要一个 YouTube 封面或文章封面,我就即时生成。我不需要上下文,因为上下文就在这里。当我生成这个时,它会谈论 Codex 实际做了什么。这就是构建自己工具的美妙之处:你不仅是因为缺少某些东西而沮丧才这么做,不仅是因为这是本地实现的唯一方式——Codex 在本地运行得很好,智能体比云端的任何私有围墙花园都强大得多——而且当你创建这些工具时,你会突然发现许多新的设计方式。比如,我是那种在工作中发现的设计师。我不做计划;我没有一个巨大的蓝图来提前规划所有想法。当你独自工作时,这是你的超能力——这样你才能比任何人都快得多。所以当你这样生成时,你可以把它变成不同的版本。现在我可以把它转换成透视图,还可以转换视频——所以这就变成了一个视频。哇。这都是同一个工作流程的一部分,都是你正在制作的工具的一部分,而这一切又始于 Codex。
So when I did the prep, I asked my AI: for every title, generate an image. I also have a perfect prompt for the image, and I created a UI for it with a bunch of preset prompts I've gathered over the years, including turning a design into a perspective mockup because it looks way better. If you look at this one, the first version looks like this—AI slop—but then you turn it into a perspective mockup and suddenly it looks so much better. This is just one prompt, one example of what you can do with AI. On top of that, you have tools like, okay, you're doing a presentation now, you can draw on it. You can also watch the notes because this is all part of your file. So if I'm doing a talk, I have my notes here, my version history here, and I can see a history of the changes I've made, a history of the design if I started from scratch or not. All of this is created locally using my agents, which started from Codex. I've almost built this so many times because I see the value in having all of my content locally. I don't want it trapped in some cloud-based product. I don't love Obsidian. I've tried so many times to have it be sticky, and I just don't love it. I've only built it as a Mac app, but you building this locally in the web—I hadn't considered before. It's pretty compelling. What's cool when you build your own app is that you figure out: okay, I have all this information here. What if I can just ask AI to use each section as context to create my image? So you can literally create a new block like this and generate an image without any prompt, with a bunch of your presets. For example, I need a YouTube cover or an article cover, and I just generate on the fly. I don't need any context because the context is here. When I'm generating this, it's going to talk about what Codex actually did. That's the beauty of building your own tool: you're not only doing it out of frustration because something is missing, not only because it's the only way to do it locally—Codex works really well locally and agents can do it far more powerfully than any private walled garden in the cloud—but also as you create those tools, you suddenly discover so many new ways to design. For example, I'm one of those designers who discovers as I work. I don't plan things; I don't have a giant blueprint where I plan all ideas in advance. When you work solo, this is your superpower—this is how you move way faster than anyone else. So when you generate like this, you can turn it into a different version. Now I can turn this into perspective, and I can turn the video now—so this becomes a video. Wow. It's all part of the same workflow, all part of the tool you're making, which again starts from Codex.
我想谈谈构建工具和实际编写代码的过程,因为我完全忘了——上次我们聊的时候你当然在用 Sonnet 3.5,现在我对它充满敬意。当时感觉像魔法,现在回头看,你会觉得,天哪,太原始了。所以我向你致敬,你用 Sonnet 3.5 走到了那么远。那么我的问题是:Codex 如何塑造你现在实际构建软件的方式?你的工作流程因此发生了怎样的变化?
I want to talk about the process of building the tools and actually writing code, because I totally forgot—of course you're using Sonnet 3.5 last time we talked, which now I have so much respect for. At the time that felt like magic, and now you look back and you're like, oh my gosh, it's so rudimentary. So I salute thee for getting as far as you did with Sonnet 3.5. My question then is: how does Codex shape the way that you approach actually building software now? How has your workflow there changed as a result?
假设你从零开始。这时你要做的是进入插件,找到你工作流程中的工具,因为每个人都不一样。每台电脑都不一样。你要下载主要的那个,比如计算机使用,但还有很多东西——我相信如果你用 Granola、Canva 或 Figma 的话——你可以安装。如果你想做视频,你会用 Reotion。如果你想再用视频,你有 Hyperframe。如果你喜欢用 AI 语音或 AI 头像,那会非常强大。插件集成就像 Figma 里的插件一样——由初创公司或个人创建的强大插件,他们花了大量时间进行集成。而技能则有点像提示词。技能基本上就是一个提示词,有时是一个很大的提示词。你可以思考什么是最佳实践。它更像一个风格指南。品味的最佳实践是什么?用哪种字体?如何让 AI 不产生 AI 垃圾?所以技能在这方面会很棒。问题是,如果你总是追逐潮流,你很快就会变成 AI 垃圾。所以我建议你永远领先一步。这就像下棋。你必须始终领先于基线。现在的基线是 AI 垃圾——那些 inter 字体、紫色渐变——这在 5 年前会很棒。如果有人用紫色渐变,每个人都会为之疯狂。但如今,AI 垃圾。很快它就会变成衬线字体和 AI 一直使用的相同动画。所以你必须始终领先,而领先的唯一方法就是花那最后的 10%。我喜欢的方式,尤其是作为一个设计师或一个多年来培养了品味的人,就是利用我的记忆。我的记忆是我电脑上存在的所有东西,是我职业生涯多年来收集的:我知道的字体、我创建的文件、我做的 Figma 设计、我写的代码。因为它们存在于我的电脑上,我可以直接引用它们,并把它们作为起点给 AI。当你有了起点,你的 AI 就不会再制造 AI 垃圾,因为你的起点是你自己,而你绝对不是 AI 垃圾,因为作为人类你是独一无二的。对于那些刚起步、不是设计师的人来说,截屏吧。如果你看看我的 Codex 或我的 Cursor——我做了很多迭代——它总是从截屏开始,截屏,截屏。每次我都从截屏开始。原因很简单:截屏是构建最快、最简单的方式,不需要说出来或打出来。比如,假设我想修复这里的一个问题。我怎么做?在 Codex 中,我们有一个快捷键:Command Command。砰。它立刻把截屏发送给 Codex,就这样。
Let's say you start from scratch. What you want to do at this point is to go to the plugins and find the tools that are part of your workflow, because everyone is different. Every computer is different. You want to download the main one like computer use, but then you have a lot of things—I'm sure you know Granola if you work with that, or Canva, or Figma—that you can install. If you want to make videos, you want to use Reotion. If you want to use video again, you have Hyperframe. And if you like to use AI voices or AI avatars, that can be really powerful. Plugins integrations are like the same as plugins in Figma—the powerful ones created by startups or individuals that have spent a lot of time integrating it. Skills, on the other hand, are kind of like prompts. A skill is basically a prompt, sometimes a large prompt. You can think about what is the best practice. It's more like a style guide. What is the best practice for taste? Which font to use? How do you get AI to not create AI slop? So the skill would be great for that. The thing is that if you always chase the trends, you will become AI slop very soon. So my suggestion to you is always be a step ahead. It's like playing chess. You have to be always a step ahead of what is the baseline. Right now the baseline is the AI slop—the inter fonts, the purple gradients—that would have been amazing 5 years ago. If someone were using purple gradients, everyone was going nuts over that. But nowadays, AI slop. Very soon it's going to be the serif fonts and the same animations that AI uses all the time. So you have to always be ahead, and the only way you can be ahead is to spend that last 10%. The way I like to do it, especially as a designer or someone who has developed taste over so many years, is that I use my memory. My memory is all of the things that exist on my computer that I have gathered over so many years of my career: the fonts that I know, the files that I have created, the Figma designs that I have done, the code that I have done. Because it exists on my computer, I can just reference it and give it to AI as a starting point. When you have a starting point, your AI will stop making AI slop because your starting point is you, and you are definitely not AI slop because you are unique as a human. For those who are not designers just getting started, take screenshots. If you look at my Codex or my Cursor—I've been doing a lot of iterations—it always starts with a screenshot, screenshot, screenshot. Every single time I start with a screenshot. The reason is very simple: the screenshot is the fastest, easiest way to build without having to voice it or type it. For example, let's say I want to fix an issue here. What do I do? In Codex, we have a shortcut: Command Command. Boom. It sends a screenshot right away to Codex just like that.
这让整件事变得简单多了。它截取了你的浏览器或你当前活动窗口的截图。然后你就可以开始打字了。你可以说,好的,我想修复左上角这部分,我想修复视频时间轴。所以问题在于:你对你的产品有多了解?因为如果你不了解你的产品,那就别想了。你做不出任何有意义的东西,三个月后别人用一个提示词就能做到你正在做的事。但我可以保证,没有人能用一个提示词做出 Dream Cut,因为我经历了那么多迭代和那么多功能。还有一个问题:你觉得我每个项目用了多少个提示词?
And so it makes the whole thing so much easier. It took a screenshot of your browser or whatever window that you have active. And then from here you can just start typing. You can just say, okay, I want to fix the top left part of this. I want to fix the video timeline. So the question is how knowledgeable are you of your product? Because if you're not knowledgeable about your product, forget it. You're not going to do anything meaningful and someone else in 3 months time will do exactly what you're doing in one prompt. But I can guarantee you that nobody can make Dream Cut in one prompt just because I went through so many iterations and so many features. And here's another question. How many prompts do you think I use for every project for any of these projects that I launched?
我肯定有几千个。
I'm sure it is thousands.
对,每个至少一万个。
Yeah, at least 10,000 each.
是的,我相信。我完全相信。
Yeah, I believe it. I totally believe it.
没错。我重做这个视频编辑器时用了一个秘诀,而且我一天就做完了。虽然很丑,但确实一天就搞定了。秘诀是:我搜索了那些视频编辑器库,我想要那些具备视频录制、视频编辑、屏幕录制、缩放、调整大小等功能的库。然后你花最后 10% 的时间去实现所有之前不存在的额外功能。比如拖放、重新定位,还有那些悬浮的小圆点。
Right. The one secret I used when I redid this video editor, I did it in a day, by the way. It was ugly, but I did it in a day. And the secret was I searched the libraries that were video editors and I wanted the ones that had video recording, video editing, but also screen recording, zooms, and to be able to resize and all that stuff. And then you spend the last 10% to do all of these extra features that didn't exist before. So for example, drag and drop, or to be able to reposition it, you know, and these little dots that grow over.
小圆点。对,那是……
Dots. Yeah, that's...
对。这是受 Apple 启发的,但你在现有库中永远找不到类似的东西。为什么?因为它不属于那种个性或体验——那种你通过观察 Apple 的工作方式或你最好的设计师朋友的工作方式而获得的体验,然后他们给了你这个想法,而你知道如何用提示词把它实现出来。
Right. And this is inspired by Apple, but you will never find something like this in an existing library. Why? Because it's not part of that personality or that experience that you yourself have by watching Apple work or by watching your best friend designer work and then giving you that idea, and then knowing how to prompt it into existence.
当你质疑的时候——因为我知道你有工程背景,对吧?你不怕代码。所以如果你在做网页版,在那 10% 里,你还会写任何代码吗,还是说我们完全用提示词来处理那些更精细的细节?
When you're questioning, because I know that you have an engineering background, right? Like you're not intimidated by code. So like if you're working on the web app version, within that 10%, are you writing any code at all, or are we prompting everything for the finer details?
对吧?记得当时我说 95% 的代码是我自己写的。现在 0% 的代码。0%。对,我们已经走到这一步了。所以,你看,我刚刚注意到这里有个小问题——它重叠了。所以我只需要截个图,然后根据我视频编辑器的分辨率,这些边缘情况 AI 永远无法修复。我花了很多时间测试所有东西,报告 bug,但不仅仅是报告 bug,而是用最准确的方式表达,让 AI 能理解我。所以现在的技能之一就是能够以最高效的方式与 AI 对话。其中一种方法就是截个图,用你的声音,因为用声音解释事情要清晰得多,而不是说“去这里、去那里”——因为你懒得打字,就不会添加那些细节,而用声音你可以快三到五倍。
Right? So remember at the time I was saying 95% of my code was written by me. Now 0% of the code. 0%. Yeah, we have gone that far. And so yeah, see I just noticed like a little problem here. It's overlaying. So I could just take a screenshot and then, you know, based on the resolution of my video editor, we have these edge cases that AI will never be able to fix. I spend so much of my time testing everything and just reporting bugs, but not just reporting bugs, but saying exactly the right thing so that AI understands me. So part of the skills nowadays is to be able to talk to AI in the most efficient way possible. And one of the ways is just, yeah, take a screenshot, use your voice, because when you use your voice, you can explain things much clearer instead of saying go here and there because you're lazy to type all of that stuff, you don't add all of those details that you can speak three or five times faster.
有一个我总在问自己的问题:如果公司主动申请与你交谈,而不是反过来呢?这个问题正是全新 Dive Talent Network 的基础。而且它奏效了。比如现在,我正在帮助许多我认识的最令人兴奋的初创公司,招聘收听这档节目的设计师和构建者。所以如果你好奇外面有什么机会,也许你想加入我的名单,或者你正在寻找你的下一位设计人才,请访问 dive.club/talent 立即加入。
There's one question that I can't stop asking myself. What if companies apply to talk to you rather than the other way around? And that question is the foundation for the all-new Dive Talent Network. And it's working. Like right now, I'm helping many of the most exciting startups that I know to hire the designers and builders who listen to this show. So if you're curious what might be out there, and maybe you want to get on my list, or maybe you're even looking for your next design hire, head to dive.club/talent to join today.
你的 0% 回答让我很受鼓舞,因为我确实认为有一大群人——实际上我节目里就有——他们觉得描述“你应该改一下这个内边距”比直接进去改更慢。我完全同意。但我觉得这又回到你之前说的:这些工具对我来说最大的转变也是,我同时在并行做更多事情。比如我不在乎 AI 改内边距是否比我手动写更耗时,因为我不再坐在那里等加载状态了。我现在对加载状态过敏。如果我看到加载状态,就意味着我需要再启动一个智能体。所以只要我能同时做很多不同的打磨改进,我就愿意采用类似的工作流程。
I'm encouraged by your 0% answer because I do think there's like a whole group of people that I have on the show actually where you know it's slower to describe that you should change the padding on something than to just go in and change it. And I'm like yes, I totally agree. But I think it goes back to something that you said earlier where the big shift with these tools for me too is I'm just doing way more things in parallel. Like I don't care if it takes more time for AI to change the padding than if I wrote it manually because I'm not sitting there waiting for a loading state. Like I'm allergic to loading states now. If I'm looking at a loading state, it means that I need to spin up another agent, you know, and so I'm okay with kind of doing a similar workflow as long as I'm able to be making many different polish improvements simultaneously.
是的,完全正确。关键在于你有多精确。你知道,过去——我说过去,其实很多人现在还在这么做——用 Figma 移动矩形、创建组件、创建变量、导出代码,手动做所有事情。这项技能仍然非常有用。我给你举个例子。现在你还可以做标注。你可以直接指向你想修复的东西,然后说“修复这个,修复内边距”等等。不用截一整张图然后解释“哦,我想修复的部分在功能模板里”,你标注一下,然后 boom,就能搞定。最优秀的人是编辑,对吧?因为我也认为自己更像一个编辑,而不是喜欢从头开始的人。而且你完全可以说,比如“你能用 GPT 图像工具生成一个简单的设计吗?”比如如果你在做一个 3D 设计,你会从截图开始,然后把它变成设计。如果你在创建品牌或幻灯片,你也从那里开始。然后你慢慢地、稳步地走向你需要的东西,收集你需要的灵感,最终得到最终结果。
Yes, exactly. It's how precise you are. You know, back in the day, when I say back in the day, I mean a lot of people still do it, using Figma and moving rectangles and sort of like creating components, creating variables and exporting code and doing everything manually. That skill is still super useful. So let me give you an example. Nowadays, you can also annotate. So now you can just point something that you want to fix and then you can say, fix this, fix the padding, etc. Instead of taking a whole screenshot and explaining that oh this part that I want to fix is in feature templates, you annotate and then boom, you can do that. The best people are the editors, right? Because I also think of myself more as an editor than as someone who likes to start from scratch. And also you can totally say something like, okay, can you create a simple design generated in GPT image tool nowadays, right? Like for example, if you're creating a 3D design, you would start with this. You would start with a screenshot and then you turn it into a design. If you're creating a brand or a slide, then you start with that. And then you sort of like slowly and surely walk into the things that you need, the inspiration that you need to gather, and eventually get into the final result.
问一下:你会在界面设计中这么做吗?比如你会用它来探索想法吗?好的。那稍微聊聊这个,因为我经常快速搭建 HTML 网站来快速可视化想法,但我没用 GPT 做任何事。不过每次我玩它来创建界面,哪怕只是作为网站的模拟素材,我总会被惊艳到,但我还没把它当作探索机制来用。所以我很好奇这对你来说是怎么用的。
Question: do you ever do that for interface design? Like are you ever exploring ideas? Okay. So talk about that for a little bit because I'm doing a lot with like spinning up quick HTML websites just to visualize ideas quickly, but I'm not doing anything with GPT, but every time I play with it to create an interface, even if it's just as like a mock asset for a website, I'm always really impressed, but I haven't used it as like this exploration mechanism yet. So I'd be curious how that fits in for you.
GPT Image 2 已经变得非常好了。如果你看看我们做的模板——顺便说,我们可能是最大的模板库,有 5000 个模板——但现在,这些模板大部分都是从 GPT 图像到截图再到 HTML 创建的。
GPT Image 2 has become so good. If you look at the templates that we make, by the way, we're probably the largest library of templates. We have 5,000 templates, but nowadays, most of these templates are created from GPT image to screenshot to HTML.
这太疯狂了。和我在这里做的一样。
This is insane. The same way that I'm doing that here.
所以我会从内容开始,比如先写 PRD 或文章,列出要点,然后把它变成落地页或英雄区。举个例子,假设我有一个应用。我会插入一张图片,然后因为我已经有了要构建的应用的上下文,我会去这里选择落地页,或者选择网页设计英雄区,然后使用 taste skill。对于不了解的人来说,taste skill 能让 AI 挑选合适的字体、颜色、设计系统等。我不需要参考,直接这样操作。我可以说,我的应用叫 Aura,它是一个聊天应用等等,然后它就会为你生成设计。你可以说,‘哦,我想要推荐区,我想要英雄区。’所以有很多生成方式。比如,我需要 Codex 标志的 3D 版本,我给出平面版,然后问,‘嘿,你能把它变成玻璃质感吗?能变成 3D 透视吗?’所以你可以探索很多东西。插画非常好。幻灯片、室内设计、线框图。我特别喜欢线框图。
So I would start, let's say, the content. I would start maybe the PRD or the article, and get the bullet points going, and then turn that into a landing page or a hero section. For example, let's say I have this one. Let's assume that this is an app. So I would go insert an image and I would be like, okay, because I already have the context of the app that I want to build. I'm going to go here and select landing page, or I want to select maybe the web design hero, and I'm going to use the taste skill. For those who don't know, taste skill is what allows the AI to pick the right fonts, the right colors, design system, and so on. I don't need the reference here, but just go with this. I could have said, okay, my app is called Aura, and it's a chat app, etc. And then it's just going to create the design for you. You can say, 'Oh, I want the testimonial section. I want the hero section.' So there are so many ways to generate. For example, I need a 3D version of the Codex logo, and I give the flat one and then ask, 'Hey, can you turn that into glass? Can you turn that into a 3D perspective?' So you can explore a lot of things. Illustration is so good. Slides, interior design, wireframe. I love wireframe.
好的。我还有一个问题,因为你已经点击了足够多的这些弹窗,它们出现的方式比我看过的几乎任何弹窗都更缓慢优雅。跟我聊聊这个吧。你是如何用 AI 打磨出这种交互和动画水平的?
Okay. I have another question because you've clicked on enough of these pop-ups now where the way that popup enters is more drawn out and elegant than almost any I've ever seen. So talk to me a little bit about that. How do you finesse that level of interaction and animation with AI?
我要再给你一个今天就能用的秘诀。过去你需要学习所有这些库和动画术语。现在,你知道我们团队用什么吗?他们用视频。他们把视频给 AI,然后问 AI,‘我应该如何提示这个动画?’
I'm going to give you another secret sauce that you can do today. This used to require you to learn all about these libraries, these animation terms. Now, you know what our team uses? They use a video. They give the AI a video and ask the AI, 'How should I prompt this animation?'
这难道不不可思议吗?这是一个非常重要的策略,因为归根结底一切都归结于语言。我最近在处理着色器时就是这样。我没有任何着色器的语言。我几乎不得不把 Claude 当作中介,说,‘给我一些……我想实现 X。我找不到词来描述。也许问我一些问题,但最终我需要你写出这个提示。我自己写不出来。’我喜欢这种用于交互设计的策略。这非常有道理。
Isn't that incredible? It's such an important tactic because it's like everything comes down to language at the end of the day. I was working on that with shaders recently. I don't have any of the language for shaders. I almost had to use Claude as an intermediary to be like, 'Give me some... I'm trying to achieve X. I have no words for it. Maybe ask me some questions, but ultimately I need you to write this prompt. I'm not going to be able to write this prompt.' And I love that tactic for something like interaction design. It makes a ton of sense.
不仅如此,如果你看看 AI 的工作方式,它并没有变得更聪明。以 Fable 5 为例,你在这里用 Fable 5,让它创建一个漂亮的落地页。那个落地页和 Opus 4.8 或 Sonnet 4.6 或 4.5 创建的落地页之间没有任何区别。原因是你用了一个过于强大的模型来做简单任务。利用这些超级智能模型的唯一方法就是给它一个巨大的提示。所以你会选择所有这些上下文、你想要的所有部分、我模板中已有的所有预提示,然后你把所有这些巨大的提示连同设计系统、design.md、参考的 HTML 预览或截图一起放进去,或者你可以导入 URL,然后你才能充分利用像 Fable 5 这样的模型。否则就没有意义了。你白花钱了。
More than that, if you look at the way AI works, it's not getting any smarter. Let's take an example of Fable 5, right? You use Fable 5 right here and you ask it, can you create a beautiful landing page. There is zero difference between that landing page and one created by Opus 4.8 or Sonnet 4.6 or 4.5. The reason why is because you're using someone far too powerful for a simple task. The only way you can utilize these super intelligent models is by giving a giant piece of prompt literally. So you would select all of this context, all of the sections that you want, all of these pre-prompts that I already have in my template, and then you put all of these giant prompts with the design system, design.md, and the preview of the HTML of the reference or the screenshot, or you can import the URL, and then you can fully utilize a model like Fable 5. Otherwise, there's no point. You're paying for nothing.
我们能聊聊 design.md 这部分吗?我觉得很有趣,你在 Aura 中把它完全产品化了。对于听说它的人,也许他们在 Twitter 上看到过。你能凭直觉知道它是什么,对吧?但制作一个有效的 design.md 文件到底需要多少策略?
Can we talk about the design.md piece for a second? I think it's interesting that you've fully productized that in Aura. For people who hear it, maybe they see it on Twitter. You can intuit what it is, right? But how much strategy actually goes into making an effective design.md file?
10 年前、20 年前,所有设计师都有风格指南。这有点像他们作为设计师精通程度的指导原则,对吧?你去上学,你做过 10,000 个设计,那种设计语言、那种风格指南已经融入你的血液。design.md 基本上就是把所有这些汗水、泪水和心血浓缩成一个 AI 可以读取的 markdown 文件。这就是 design.md 的本质。那么它为什么强大呢?就像我之前提到的,如果你使用像 Mythas Fable 5 这样的模型,你给它 design.md,它会理解并把它提升到下一个层次。如果你使用基础模型,它不会理解。这就是区别。design.md 是设计语言、设计系统,它包含了所有关于颜色、排版、间距指南、圆角半径、表面材质等精彩信息,并且非常详细。Google 开始做这件事是因为它需要标准化语言,以便每个人都遵循可访问性和构图,它需要包含所有这些我们设计师多年来学到的片段和令牌。但如果你是一个新设计师,你基本上失去了所有这些上下文。所以 design.md 包含了所有这些信息,这样你就不必自己记住了。
10 years ago, 20 years ago, all the designers have a style guide. It's kind of like their guiding principle of their mastery of a designer, right? You go to school, you work on 10,000 designs, you have embedded in your blood that design language, that style guide. The design.md is basically all of that sweat, tears, and blood into one markdown file that the AI can read. So that's what design.md is. So why is it powerful? Like I mentioned before, if you're using a model like Mythas Fable 5, then you give something like design.md, it will understand it and it will be able to take it to the next level. If you use a base model, it won't understand it. So that's the difference. Design.md is the design language, the design system that holds all of that beautiful information about the colors, the typography, the spacing guide, the corner radiuses, and what surface, and it goes into great details. Google started this thing because it needed to standardize the language so that everyone follows accessibility and composition, and it needs to include all of these segments and all of these tokens that we designers have learned over the years. But if you're a new designer, you kind of lost all of that context. So design.md holds all of that information so that you don't have to.
是的,我认为我可能应该在工作中更认真地对待这件事,老实说,因为我依赖 Claude 每次需要时拼凑起来。如果我在 Paper 中工作,我经常在 Paper 中可视化想法,我总是说,‘使用设计系统,使用我们的排版’,我几乎不得不列出所有东西。我可能应该把所有这些都打包成一个技能,比如,使用 design.md,然后做我要求的事情。这是我挂断电话后要给自己添加的待办事项。
Yeah, this is something that I think I could probably take more seriously in my own work, honestly, because I rely on Claude to almost piece it together each time I need it. If I'm working in Paper, like I do a lot of visualizing ideas in Paper, and I'm always like, 'Use the design system, use our typography,' and I almost have to list things out. I should probably just wrap this all into a skill, say, use the design.md, and then do the thing that I've asked. This is my to-do list that I'm adding for myself after we hang up here.
我提到过,作为设计师,我总是使用过去做过的作品。无论是收集的字体,还是过去做过的颜色和 Figma 文件,或者 HTML 和项目,我对 Codex 也做同样的事情——我大约 50% 的提示是引用另一个聊天或另一个页面。我之前提到过,如果我开始一个新项目,比如一个新的 iOS 应用,我会引用整个文件夹,对吧?顺便说一下,这些都是你电脑中的文件夹。当你开始一个新项目时,你引用整个文件夹。你可以说,‘好的,我想要一个基于我在这文件夹中做过的 Mac 应用的 iOS 应用。’但当你进行迭代时,你就开始引用另一个页面。所以我喜欢说的一句话是,‘以我在这个页面中创建的另一个按钮的风格创建这个页面、这个模态框或这个按钮。’它会完全照做。或者你也可以引入 design.md。
I mentioned as a designer, I always work with previous work that I've done in the past. So whether it's the fonts that I've gathered, whether it's the colors and the Figma files that I have done in the past or the HTML and project, I do exactly the same with Codex, which is that I would say about 50% of my prompt is me referencing another chat or another page that I do. So I mentioned before that if I start a new project like a new iOS app, I would reference an entire folder, right? All of these, by the way, are folders in your computer. When you start a new project, you reference an entire folder. You can say something like, 'Okay, I want an iOS app based on my Mac app that I already done in this folder.' But when you do iterations, this is where you start to reference another page. So one thing that I love to say is, 'Create this page or this modal or this button in the style of another button that I created in this page.' And it will do exactly that. Or you can also bring the design.md.
但话说回来,设计在开始时很强大,但当你快速进行大量迭代时,你并不想每次都去参考它。你可以完全把它保存到你的 agents.md 中。对于那些不知道的人来说,agents.md 是一个文件,AI 在每次提示或每次创建新线程或新任务时都会读取它。所以这是一个项目,这是一个线程,然后线程中有多个任务。我不是一个喜欢在 agents.md 中放太多东西的人。因此,我的工作方式是大量截图并引用大量文件。比如,这是我的文件所在,这是页面所在,这是我创建的按钮。然后只记住最重要的设计术语和细节。你知道,你最终会问到模态框。如果你不想每次提示时都提供视频,你就必须记住它。我喜欢的另一件事是,我可以说:从现在开始,我希望你在记忆中记住这个工作流,或者这个设计系统。他们可以在项目内部有一个 agents.md,这挺酷的。有时我称之为 runbook.md。runbook 更像是一个工作流。有时我称之为 workflow.md,但通常来说就是 agents.md。你有一个主 agents.md 用于所有事情。所以你可以完全进入设置,进入你的配置,然后把它放进去。这有点危险,因为它会在每次提示或每个新项目时被读取。所以相反,我做的事情是让 AI 记住我们刚才做的事情,对吧?假设我们刚刚创建了这个模态框或这个按钮。我可以说:我希望你记住这个,并保存到你的记忆中。然后通常它会把它保存到这个特定项目的 agents.md 中,这样下次它创建模态框时,就会记得完全按照这种风格来做。
But then again, design is powerful at the beginning, but when you're doing a lot of iterations really quickly, you don't want to always reference that. You can totally save that into your agents.md. For those who don't know, agents.md is the file that is always read by the AI for every single prompt or anytime that you create a new thread or a new task. So this is a project, this is a thread and then you have multiple tasks within a thread. I'm not a person who likes to put too much stuff in agents.md. Therefore, the way that I work is just taking a lot of screenshots and then referencing a lot of files. You know, like this is where my file is, this is where the page is, this is the button that I created. And then just remembering the most important design terms and details. You know, you ask about the modal eventually. If you want to stop having to feed a video every single time you prompt, you have to remember that. Another thing that I love to do is I can say something like: from now on I want you to remember this workflow in memory, or this design system in memory. They could have an agents.md inside a project which is kind of cool. Sometimes I call it a runbook.md. A runbook is more like a workflow. Sometimes I call it workflow.md, but generally speaking it's agents.md. You have a main agents.md for all of the things. So you can totally go to settings and go to your configuration and then put that into that. It's a bit dangerous because it's read for every single prompt or every single new project. So instead, what I do is I ask the AI to remember in memory about what we just did, right? So let's say we just created this modal or this button. I can say: I want you to remember this and save it to your memory. And then usually what it would do is it would save that in the agents.md for this specific project, so that the next time that it's creating a modal, it will remember to do exactly in this style.
我们已经涵盖了很多内容,大量的策略。我想确保我们基本上没有遗漏任何东西。那么,当你想到设计师可以采用的小工具、策略或工作流来更有效地与 AI 协作和构建时,在我们继续之前,你还有什么想确保我们讨论的吗?
We've covered a lot of ground, a ton of tactics. I want to make sure that we're not missing anything basically. So when you think about the little tools or tactics or workflows that designers can adopt to more effectively collaborate with and build with AI, is there anything else that you want to make sure that we talk about before we move on?
我正在使用 GPT 5.5 extra high。所以我们还没有太多讨论这个,比如模型之间的区别。显然,当你刚开始时,你可能想从 medium 开始,因为它不太贵,不会达到你的限制。不是每个人都会有 200 美元或 100 美元的计划。所以我建议从 medium 开始,因为它消耗不大,而且相当不错。它能完成大部分事情,而且速度也快得多。另一件你可以做的事情是去 Cursor 使用 Composer 2.5,它超级快,而且因为它很快,我可以一次只专注于一个项目。但当我使用 extra high 时,顺便说一句,对我来说,GPT 5.5 可能是我今年用过的最好的模型,不算新的 Mythos 之类的东西,但它们无论如何都很贵。所以我可能暂时不会使用它们。但我一直在用 Extra High,它非常非常好。它能够构建你今天能想象到的任何东西。但最重要的是,对你正在发生的事情以及如何完善自己的工作流保持无尽的好奇心,因为它一直在进化。而且因为它一直在进化,它总是需要你的关注。我这辈子从未如此努力过。我从未在一个项目上投入这么多时间。我从未同时构建过这么多项目。我从未独自完成过如此规模的事情。通常,你知道,当我刚开始做 Design Code 时,我旅行了两年,把所有时间都花在制作小块内容上,创建我的第一个视频。我记得花了很长时间。最终,它赚了足够的钱。我建立了一个团队。我们有一个编辑团队、视频编辑团队,来节省我的时间。但今天,你可以自己做所有事情,因为你的编辑就是你的智能体。你的设计师就是你的智能体。你的程序员就是你的智能体。你的个人助理当然也是,但任何你能想到的事情,你的智能体都能做到。唯一阻止你的是你是否愿意打开这个充满应用、插件、库、提示和 design.md 的世界。如果你拥有它,那就是你最强大的武器。
I'm using GPT 5.5 extra high. So we haven't talked about this too much, like what is the difference between the models. So obviously when you first start, you might want to start with medium because it's not too costly, it's not going to hit your limits. Not everyone is going to have the $200 or $100 plan. So what I would do is I would start with medium because it doesn't eat a lot and it's reasonably good. It's going to be able to do most of the things but much faster as well. Another thing you can do is to go to Cursor and use Composer 2.5 which is super fast, and because it's so fast I can just focus on one project at a time. But when I use extra high, by the way, to me, GPT 5.5 is probably the best model I've used this year, without counting the new Mythos and all that stuff, but they're very expensive anyway. So I would probably not use them at this time. But I've been using Extra High and it's so good. It's able to build anything you can dream of today. But most importantly, have an endless amount of curiosity about what's going on and how you can perfect your own workflow because it keeps evolving. And because it keeps evolving, it always requires your attention. I've never worked so hard in my life. I've never put so many hours into a project. I've never built so many projects at the same time. I've never done anything of this magnitude solo. Usually, you know, when I first started Design Code, right, I was traveling for two years and I would spend all my time working on small pockets of the content, creating my first video. And I remember it took so long. Eventually, it made enough money. I built a team. We had a team of editors, video editors, to save me time. But today, you can do everything yourself because your editors are your agents. Your designer is your agent. Your coder is your agent. Your personal assistant, of course, but anything that you can think of, your agent can do it. And the only thing that's stopping you is you opening to this world of apps and plugins and libraries and prompts and design.md. And if you have that, it's your greatest weapon.
我想不出比这更鼓舞人心的方式来结束这次对话了。而且,老兄,即使只是我感谢你滚动浏览你的 Twitter 动态这件事。我的意思是,有很多人痴迷于工作流,然后你会有这样的问题:好吧,但你实际上交付了什么?而你恰恰相反,你就是一个交付机器。你不断地推出非常有趣和有价值的东西。我非常欣赏和尊重你所做的事情,你不仅充满好奇心,而且直接冲破障碍,让事情发生。你对我来说超级鼓舞人心,我知道很多听众也有同感。所以感谢你来做客,分享一些你思考问题的方式、你的工作流如何演变以及你正在做什么。我认为我们应该把它变成一个年度检查点,因为总是能从你身上学到很多东西。这是我的荣幸,我很想明年再回来,给你更新一下 AI 的进展,并分享我当时的新工作流,因为你知道,16 个月前我们用的是 3.5,现在我们用的是 Codex 中的 GPT 5.5,但我们不知道 12 个月后会发生什么。
I can't think of a more inspiring way to wrap this up. And man, even just something that I appreciate you like scrolling through your Twitter feed. I mean there's a lot of people who are obsessing over the workflow and then you kind of have this question about like well okay but what have you actually shipped, you know? And man, you are the complete opposite where you're just a shipping machine. You're just putting really interesting and valuable things out left and right. And I have so much appreciation and respect for what you're doing as somebody who's not only curious but just goes and runs through walls and makes things happen. You're super inspiring to me and I know that a lot of people listening feel the same way. So I appreciate you coming on and sharing a little bit about how you're thinking about things, how your workflow is evolving, what you're working on. I think we should make it a maybe like an annual checkpoint because there's always so much to learn from you. This is such an honor and I would love to come back like next year and give you an update on what's going on with AI and sharing my new workflow then, because you know, 16 months ago we used 3.5, now we're using GPT 5.5 in Codex, but we don't know what's going to happen in 12 months.