The Missing Layer: Design Taste in AI Agents — Hassan El Mghari, Together AI

频道: AI Engineer
视频: https://www.youtube.com/watch?v=7GMKdpLsxwU
原文语言: en
统计: 共 16 轮 · Hassan 16

[0:16] Hassan

All right. Hello everybody. Welcome. Uh my name is Hassan. I lead the developer experience team over at Together AAI and I'm super excited to be here today to talk to you about how to make AI apps look good or stop letting your agents ship ugly UIs. Um, I'm especially passionate about this project because uh a big part of my job and just my personal life I I just love building a lot of these AI apps and uh I'll go to the next slide. Uh I've been building about 10 apps a year for the last uh five years and I've been lucky enough that some of these apps have have gotten you know millions of users that have tried them out and I think the number one reason for that is honestly just design and UX and so that's what I want to talk to you about today is how I approach design and UX in my apps as someone who's not a designer. Um but before we move on really quick I work at together AI we're an AI native cloud platform. We help you do three things.

好的，大家好，欢迎。我叫 Hassan，在 Together AI 负责开发者体验团队。今天特别兴奋能来这里，跟大家聊聊怎么让 AI 应用变好看——或者说，别再让你的 agent 交付丑陋的 UI 了。我对这个话题特别有热情，因为我工作里很大一部分，包括我个人生活里，就是热爱做各种 AI 应用。我翻到下一页。过去五年里我大概每年做 10 个应用，很幸运其中一些应用有几百万用户来试用过。我认为最主要的原因，说实话就是设计和 UX。所以今天我想跟大家聊的，就是作为一个非设计师出身的人，我是怎么在自己的应用里处理设计和 UX 的。在往下讲之前先快速介绍一下：我在 Together AI 工作，我们是一个 AI 原生云平台，帮你做三件事。

[1:08] Hassan

We help you run uh open source AI models. Uh chat models like GLM 5.2, image models like nanobanana, audio models, vision models. We have kind of all the different modalities and all the big open source models on our platform through our inference API. We let you fine-tune models on your own data. And then we also uh have a GPU cluster product where you can reserve H100s and B200s to uh train your own models or do your own inference. So, uh, getting into some demos. I just want to start with a couple apps that that I've built so you get a sense of like the the type of stuff that I build. Uh, they're usually very simple one-page apps, uh, where I try to index on the design and some animations and things like that. So, this is like a logo creator app that I built that got about 85,000 people uh, that that used it. This is one called Make Comics where it'll create a comic book from scratch starring you as as the superhero. Um, and uh, this one actually we actually have in person at our at the Together AI booth at this conference.

我们帮你运行开源 AI 模型——像 GLM 5.2 这样的对话模型、nanobanana 这样的图像模型，还有音频模型、视觉模型。基本上所有模态、所有主流开源模型都在我们平台上，通过推理 API 提供。我们还支持你用自己的数据微调模型。另外我们有 GPU 集群产品，你可以预订 H100 和 B200 来训练自己的模型或者跑自己的推理。那么，进入 demo 环节。我想先展示几个我做过的应用，让大家感受一下我做的东西是什么类型的。它们通常是非常简单的单页应用，我会重点打磨设计和一些动画之类的东西。比如这是我做的一个 logo 生成器，大概有 85,000 人用过。这个叫 Make Comics，它会从零生成一本漫画书，主角就是你自己扮演的超级英雄。而且这个应用其实就在本次大会 Together AI 的展位上现场提供。

[2:03] Hassan

Um, and where you can go and there's a little iPad and you can take a picture and and get a real comic book printed out that that you can take home. Um, other stuff like uh, this is generating subtitles from from videos. I upload a lot of videos uh to YouTube and to Twitter and so I needed something like this and uh, I looked into just like generating subtitles with with open source models. This one had about 8,000 people that that checked it out. uh you know AI chat app for open source models. This one's fairly straightforward. Um this one is a is a website that I built to help you build five or six different variations of whatever landing page you want to build and then you can kind of choose one of them. Um and then the the last one I'll show off really quickly is uh like an AI cloud agent where you can ask it to do things and uh give it a GitHub repo and it'll spin up a sandbox and actually u create a PR for you from scratch. So this is just an example of like some of the stuff that that that I build and I that I put out and and I think really the big takeaway here is uh you know we live in a world now where more and more AI apps are kind of slop.

你可以过去，那里有一台小 iPad，拍张照片，就能拿到一本真正打印出来的漫画书带回家。还有其他的，比如这个是给视频生成字幕的。我经常往 YouTube 和 Twitter 传视频，所以需要这样一个工具，于是我就研究了一下用开源模型来生成字幕。这个大概有 8,000 人试用过。还有面向开源模型的 AI 聊天应用，这个就比较常规了。这个是我做的一个网站，能帮你把想做的落地页生成五六个不同版本，然后你可以从中挑一个。最后快速展示的这个，是一个 AI 云端 agent，你可以让它做事：给它一个 GitHub 仓库，它会启动一个 sandbox，真的从零帮你创建一个 PR。这些就是我做出来并发布的一部分东西的例子。我觉得这里最大的启示是：我们现在生活在一个越来越多 AI 应用都是「slop」（粗制滥造）的世界里。

[3:06] Hassan

You know you can kind of look at it and within a second or two you can kind of tell that like h this this kind of looks AI generated and so I think just doing a little bit of extra effort like a little 10 to 20% after just focused on the UI uh is a really really big competitive advantage for these things. Um, so like I said, vibe coded apps kind of all look the same. They have the same tells. Um, they have the same kind of purple gradient background in every single one. Uh, they have italics in in headers. Um, they always have the scroll to explore for some reason. Uh, they have these pills that are all like all caps and with with spaced out um uh letter spacing. They have these gradient logos.

你看一眼，一两秒之内就能看出来：呃，这个一看就是 AI 生成的。所以我认为，只要多花一点点功夫——就是完成之后再多投入 10% 到 20%，专门打磨 UI——就是这类产品一个非常非常大的竞争优势。就像我说的，vibe coding 出来的应用长得都差不多，都有同样的破绽：每一个都是同款紫色渐变背景；标题用斜体；总有个「scroll to explore」（滚动探索）不知道为什么；还有那种全大写、字距拉得很开的胶囊标签；还有渐变色的 logo。

[3:45] Hassan

They use a bunch of emojis. And so it's it's the same kind of stuff. sometimes some some spacing and padding issues. Um, but the point is it's it's actually just like a if you really think about it and you look at all of these AI generated websites, you can come down, you could make a list of like 20 or 30 different things that are like, okay, this is this is what AI slop is, right? All these like random graphics. Um, and so I'm going to talk about two different ways that I've tried to overcome this. Um, and and the first one I'm going to start with is this design skill that I built called Hallmark. And Hallmark basically takes all of these uh AI slop patterns uh and uh codifies them uh and and tells AI models like hey like don't don't use these you know don't do a purple gradient um uh don't use italics in the title uh and and all of these uh AI slop gates is what I call them or slop patterns. Uh so that's one thing it does. And then the second thing it does which I think is really important when you're building stuff is it gives your AI model a lot of different themes. And so I I built a bunch of these different themes. We feed them into Hallmark. And so like when you ask Hallmark to create a a website for you, it'll use these as context. And then and that's kind of that's going to be a theme throughout

还会用一堆 emoji。都是同一套东西，有时候还有间距和留白的问题。重点是，如果你认真想想，把这些 AI 生成的网站都看一遍，你可以列出一张 20 到 30 项的清单：好，这就是 AI slop 的样子，对吧？各种随机乱放的图形。所以我要讲两种我尝试过的克服方法。第一个是我做的一个设计 skill，叫 Hallmark。Hallmark 做的事情，就是把所有这些 AI slop 套路收集起来、整理成规则，然后告诉 AI 模型：嘿，别用这些——别做紫色渐变、别在标题用斜体——所有这些我称之为「AI slop 闸门」或者说 slop 套路。这是它做的第一件事。第二件事我认为在做产品时非常重要：它会给你的 AI 模型提供很多不同的主题（theme）。我做了一堆不同的主题，喂给 Hallmark。所以当你让 Hallmark 帮你做一个网站时，它会把这些当作上下文来用。这其实也会是贯穿

[4:55] Hassan

this talk as well is of like if you give AI models really really good inspiration, they tend to perform uh very very well. Um and so I launched this about uh a month and a half. I have about a month and a half ago. I have a little over 10,000 people that have tried it out so far. These are some examples of of uh I've mostly indexed it on landing pages, but uh landing pages using Hallmark. And so this is build a landing page for an indie podcast and it gives you that uh and there's different skills and stuff that I'm not going to get too deep into. Uh but the main things I just wanted to uh I just wanted to cover the AI slop gates and the themes and and those two things really uh they do a lot. Um and so this is the announcement tweet and and I got a bunch of really great feedback and we're still iterating a lot to to try to make it really really good. Um, but I found this to be a uh one way that I try to avoid slop AI slop websites. Uh, and so this is uh some some more examples of hallmark generated pages. This one's build a landing page for like an invoicing uh app. And and you can see like they don't have a lot of the same tells that you'd expect from an AI generated website. And these also are just one shot. Uh right, this is one single prompt and you get this whole website. And really a lot of the magic

整场演讲的一个主题：如果你给 AI 模型非常非常好的参考灵感，它们往往表现得非常非常好。我大概一个半月前发布了这个东西，到目前为止有一万多人试用过。这是一些例子——我主要针对落地页做了优化——用 Hallmark 生成的落地页。比如「给一个独立播客做个落地页」，它就给你这个效果。里面还有各种 skill 之类的东西我就不深入了，我主要就想讲 AI slop 闸门和主题这两件事，这两样真的作用很大。这是发布时的推文，我收到了很多特别好的反馈，我们还在大量迭代，想把它做得真正好。总之，这是我用来避免 AI slop 网站的一种方式。这是更多 Hallmark 生成页面的例子，这个是「给一个发票应用做落地页」。你可以看到，它们没有那些你在 AI 生成网站上常见的破绽。而且这些都是一次成型（one shot）的——就一个 prompt，你就得到整个网站。其实很多魔力

[6:01] Hassan

also is in kind of iterating on these things over and over and over again. Um, so this is uh this is another one. Uh, and then like a before and after. This is a a pretty good example. This is like build a page for like a learning app for kids. And on the left is like without Hallmark and on the right is with Hallmark. You can see it like, you know, it's just a little bit cleaner. It's a little bit nicer. Uh, it has more like animations, which I didn't record a video to show it, but um, it just looks a little bit nicer in general. This is another one as well. On the left, kind of like the the classic AI generated page with the with the gradients and and everything like that. And on the right is is with Hallmark. you you know you can look at the one on the right and still say like oh well that's not a perfect landing page um but it does give you a much better base to start out from right and then you can kind of iterate your way to something that you know really really looks incredible [snorts] um and you know I've been indexing on this thing but app iteration is also very important and I think specifically uh a lot of people I think undervalue the importance of using uh smaller faster models for these app iteration uh cycles a lot of the apps that I build now I'll kind of start in like codec or cloud code to build a base and then for

也在于对这些东西反反复复地迭代。这是另一个例子。然后是一组前后对比，这个例子挺好的：「给一个儿童学习应用做个页面」。左边是不用 Hallmark 的，右边是用了 Hallmark 的。你可以看到，就是干净一点、好看一点，还有更多动画——我没录视频没法演示——但整体就是更顺眼一些。这是另一个例子：左边是经典的 AI 生成页面，各种渐变什么的；右边是用了 Hallmark 的。你看右边那个，可能还是会说「嗯，这也算不上完美的落地页」，但它给了你一个好得多的起点，对吧？然后你就可以一步步迭代出真正惊艳的东西。（吸鼻子）我一直在打磨这个工具，但应用的迭代本身也非常重要。我觉得很多人特别低估了一件事：在这些应用迭代循环里使用更小、更快的模型的价值。我现在做的很多应用，会先用 Codex 或者 Claude Code 搭一个基础版，然后

[7:05] Hassan

iterating I'll use usually smaller open source model like GLM 5.2. GLM 5.2 is amazing. Uh who who here has used it? Uh show of hands. Okay, a few people. Um so this is a model that came out two weeks ago that in my opinion was like the first open source model that to actually be very very good at design. And actually we're going to play a little game here where one of these landing pages was generated by GLM 5.2 which is like a cheaper open source model and the other one was generated with Opus 4.8. Um, raise your hand if you think GLM 5.2 is a. Okay, four hands. That was the GLM 5.2 one, right? So, they're almost almost indistinguishable in certain ways where the one on the left is generated with the GLM 5.2. It was created way faster um as well because it's just it's a smaller model, so it's just inherently a lot faster. And the one on the right, you know, cost five times as much and and was a lot slower as well. Um, so anyway, this is another one where the left and the right, the left one arguably is even more AI generated. Uh,

迭代的时候通常用更小的开源模型，比如 GLM 5.2。GLM 5.2 太棒了。在座有谁用过？举个手。好，有几位。这个模型是两周前发布的，在我看来是第一个在设计上真正做得非常非常好的开源模型。我们来玩个小游戏：这两个落地页，一个是 GLM 5.2 生成的——一个便宜的开源模型——另一个是 Opus 4.8 生成的。觉得 GLM 5.2 是 A 的请举手。好，四只手。那个就是 GLM 5.2 做的，对吧？所以它们在某些方面几乎难以区分。左边这个是 GLM 5.2 生成的，而且生成速度快得多，因为模型更小，天然就快很多。而右边那个成本是五倍，速度还慢得多。总之，这是另一组左右对比，左边这个甚至可以说更有 AI 生成的味道，

[8:04] Hassan

and that's the one uh that that that Opus actually created, right? So anyway, like when I say like use a cheaper model to iterate with, it still needs to be sufficiently good and and um GLM 5.2 is one of those models I feel is is really really incredible for for this kind of stuff. So this is another example where it's very hard to tell the difference. uh and and for iteration. So this is like a uh a really simple website I on one shot with just that one prompt. This is using GLM 5.2. And you can see this does have a lot of AI tells. It's impressive that it actually works. It's an image playground where you send it a prompt and you get an image. Um but just with a little bit of iteration on the left. I'm not going to go through all of it. um you get to a website that looks it it looks roughly similar, but it just looks a lot nicer and it has a much better logo and way better loading states and animations and uh just better spacing overall uh with with just a sing one or two follow-up prompts. So I I think like uh iteration is is extremely extremely important.

而那个恰恰是 Opus 生成的，对吧？所以当我说「用更便宜的模型来迭代」时，前提是它得足够好，而 GLM 5.2 就是我觉得在这类事情上真正非常出色的模型之一。这是另一个例子，也很难分辨差别。再说迭代。这是一个非常简单的网站，我用刚才那一个 prompt 一次生成的，用的是 GLM 5.2。你可以看到它确实有很多 AI 破绽，不过它真的能用，这挺厉害的——这是一个图片游乐场，你发一个 prompt，它给你一张图。但只要稍微迭代一下——左边这个，我就不逐项讲了——你就能得到一个整体看起来差不多、但漂亮得多的网站：logo 好得多，加载状态和动画好得多，间距整体也更好。而这只用了一两个后续 prompt。所以我认为迭代是极其极其重要的。

[9:02] Hassan

Um, so the final part of my talk is just takeaways for like how how I approach building apps that look good as someone who's not not really a designer as well. Um, a lot of other people speaking on this track are are incredibly talented designers and and you should take a look at their thing. My my objective is not necessarily to make the best designed app in the world. It's just to make apps that look and feel really good or at least much much better than like purely kind of AI generated slop. Um so so my my main takeaways for this one is like getting familiar with a lot of these AI tells right we went through some of the like patterns of of AI slop. Uh a lot of the time you know I sit down with people and I show them a website and they're like oh that's AI generated right in two seconds but they can't tell me why right they're like it just looks AI generated.

演讲的最后一部分，是一些心得总结：作为一个其实不算设计师的人，我是怎么做出好看的应用的。这个分会场的很多其他讲者都是极有才华的设计师，你们应该去看看他们的内容。我的目标不一定是做出世界上设计最好的应用，而是做出观感和体验都很好的应用——至少要比纯 AI 生成的 slop 好得多得多。我的第一条心得，是熟悉这些 AI 破绽。我们刚才过了一遍 AI slop 的那些套路。很多时候我和别人坐在一起，给他们看一个网站，他们两秒钟就说「哦这是 AI 生成的」，但说不出为什么，就是「它看起来就很 AI」。

[9:49] Hassan

I have no idea what it is. And so I I think it's it's worth understanding that like well yeah it's it's purple gradient and it's this this logo and it's this thing. Uh and when you understand that stuff I think it becomes a lot easier to um to uh bake that into the apps that you build or ask the AI models to hey like hey don't don't do this or don't do that. Um so so that's that's one tip I have. Uh another one that's kind of tangential is like saving your preferences in some sort of skill or markdown file. You can do an agent.mmd. You can do kind of whatever you want. Um, but the big thing here I think is as you build stuff, you start to build an intuition for like what you want, what you don't want. Like you generate a website and every single time the logo looks like crap and you have to regenerate the logo. Um, you can start to build out an agent.mmd that has a bunch of this stuff like avoid this for the logo. Do them this way. For this, do it that way. Uh, and and as I've gone,

「我也说不清是什么。」所以我觉得值得去搞明白：哦对，是紫色渐变、是这种 logo、是这个那个。当你理解了这些之后，我觉得就更容易把这些认知融入你做的应用里，或者直接告诉 AI 模型：嘿，别这么做、别那么做。这是我的第一条建议。另一条相关的建议是：把你的偏好保存到某种 skill 或者 markdown 文件里。可以用 agents.md，随便什么形式都行。这里的关键是，随着你不断做东西，你会逐渐建立起一种直觉：你想要什么、不想要什么。比如你生成网站的时候，每次 logo 都很烂，你都得重新生成 logo。那你就可以开始搭一个 agents.md，把这些都写进去：logo 要避免这样、要那样做；这个要这样处理、那个要那样处理。随着时间推移，

[10:39] Hassan

I've kind of built up like a substantial agents.mmd that helps me do this. And and to a degree, this is kind of what Hallmark is as well, right? If you don't have your own, you can use something like like Hallmark. Um, this is maybe the most important one. If you take one thing away from this talk, please give your agents references and screenshots. I don't build anything uh nowadays without uh giving AI models a lot of inspiration. And I kind of have this like inspiration vault for like anytime I look at like a website or an app that I really like or that I'm like, "Wow, like this this looks amazing." I'll just save it. Uh I'll just save it somewhere.

我已经积累起一份相当可观的 agents.md 来帮我做这些事。某种程度上，Hallmark 其实也是这么回事，对吧？如果你没有自己的，可以用 Hallmark 这样的东西。接下来这条可能是最重要的：如果这场演讲你只带走一件事，那请一定给你的 agent 提供参考和截图。我现在做任何东西，都会给 AI 模型大量的参考灵感。我有一个类似「灵感金库」的东西：任何时候看到一个我特别喜欢的网站或应用，觉得「哇，这个太好看了」，我就会把它存下来，存到某个地方。

[11:12] Hassan

And now I have a a really large collection of them. And so when I'm building a new app, I usually will will be like, "Oh, I actually I kind of I think I want this look like a a mix of Dolingo and a mix of this app and a mix of this app." And I'll paste in a ton of screenshots for the AI model to look at and and the output will always be way way way better. So um always try to use references and and uh uh screenshots. Um longer and more specific prompts are always better. Um these days I I will just record voice notes. Uh, and so I'll start a voice note for like one, two, three minutes and I'll just rant and be like, well, I want to build an app that looks like this and here's how uh you you should use it and here's the type of user that's going to use it and we have a text box here and we have an image upload thing and here's how it should look and here's and here's some inspiration, right? And so it's usually like all my prompts now are like two two to three paragraphs. Um, so they're they're a lot longer prompt and and they usually do a lot better. Like this is like an example of a much longer prompt.

现在我已经攒了一大堆这样的截图。所以当我要做一个新 App 的时候，我通常会想：「哦，其实我想要的效果，是 Duolingo 加这个 App 再加那个 App 的混合体。」然后我会把一大堆截图直接贴给 AI 模型看，输出的结果每次都会好非常非常多。所以，一定要多用参考素材和截图。另外，更长、更具体的 prompt 永远效果更好。我现在干脆直接录语音备忘录——录个一两三分钟，对着它一顿输出：我想做一个长这样的 App，应该这么用，目标用户是这类人，这里放一个文本框，那里放一个图片上传，界面应该长这样，这是一些灵感参考，等等。所以现在我所有的 prompt 基本都是两三段那么长。prompt 长了很多，效果通常也好得多。比如这就是一个长得多的 prompt 的例子。

[12:07] Hassan

I'm not going to go through all of it, but uh it just produces something that's just a little bit better like at the uh the thing on the bottom was was kind of produced with with with this prompt. Um break things down into steps. I think like so I just talked about make your prompt longer. Um but also if you're building seven different features, you probably don't want to put them all in the same prompt, right? probably want um you can do one, you know, one or two features per prompt where you talk about them extensively and uh and uh usually I'll send off like the start of the app will be like a a huge prompt with a bunch of screenshots of inspiration and then immediately I'll queue up like a bunch of other messages of like oh we'll do this feature and do this feature and do this feature and I'll kind of uh uh let it go. So that's something that I that I've seen helps.

我就不逐条讲了，但它产出的东西就是会好那么一截——比如下面那个东西，基本就是用这条 prompt 做出来的。再一条：把事情拆成步骤。我刚才说要把 prompt 写长，但如果你要做七个不同的功能，你大概不会想把它们全塞进同一条 prompt 里，对吧？比较好的做法是每条 prompt 只做一两个功能，把它们讲透。我通常的做法是：App 的起手是一条巨长的 prompt，附上一堆灵感截图，然后立刻排上一串后续消息——「接下来做这个功能、做那个功能、再做那个功能」——然后就让它自己跑。这是我观察下来很管用的一招。

[12:52] Hassan

Cool. Uh this is one this is the one I talked about iterating with a cheaper open source model can be using closed source models for everything. Um for iteration tasks I I' I've found they're a lot better. Um I think uh cursor did a great job proving this with like composer 2.5 which is like an open source model that they postrained. Um and uh it kind of feels magical using it for iteration because it's so so so fast. And so you'll see that in in uh some of these uh open source models. Cool. Cool. And then the last thing is um I see people kind of trying to oneshot apps and then being like, well, that's it. I'm done. You know, I'm going to post this as is. And it's really really important to understand that like whatever your agent creates is just the base, right? And it's on you to kind of like give it additional context, give it additional inspiration, and go back and forth and um make the apps look and feel really good, keep them simple, uh and and uh kind of iterate that way.

好。这条就是我前面提到的：用更便宜的开源模型做迭代，而不是什么都用闭源模型。在迭代类任务上，我发现开源模型好用得多。我觉得 Cursor 用 Composer 2.5 很好地证明了这一点——那是一个他们做了后训练（post-train）的开源模型。用它做迭代的感觉近乎魔法，因为它实在太快了。你在一些开源模型上都能看到这种体验。好。最后一点：我看到有人试图一把梭（one-shot）生成整个 App，然后就说「行了，完工，我就这么发出去了」。但一定要明白：agent 生成的东西只是一个底子，对吧？接下来要靠你自己去补充上下文、补充灵感参考，来回打磨，把 App 的观感和体验做好、保持简洁，就这样一轮轮迭代下去。

[13:48] Hassan

Cool. That's all I got. Thank you so much for coming. [applause]

好，我要讲的就这些。非常感谢大家的到来。（掌声）