The Missing Layer: Design Taste in AI Agents — Hassan El Mghari, Together AI
https://www.youtube.com/watch?v=7GMKdpLsxwU
AI Engineer · 14 min · 174 sentences · sentence-level transcript from YouTube's caption track; each line begins at the time shown

[00:01] [music]
[00:16] All right.
[00:17] Hello everybody.
[00:18] Welcome.
[00:18] Uh my name is Hassan.
[00:20] 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
[00:29] stop letting your agents ship ugly UIs.
[00:32] 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.
[00:43] 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
[00:57] talk to you about today is how I approach design and UX in my apps as someone who's not a designer.
[01:02] Um but before we move on really quick I work at together AI we're an AI native cloud platform.
[01:07] We help you do three things.
[01:08] We help you run uh open source AI models.
[01:11] Uh chat models like GLM 5.2, image models like nanobanana, audio models, vision models.
[01:16] We have kind of all the different modalities and all the big open source models on our platform through our inference API.
[01:21] We let you fine-tune models on your own data.
[01:24] 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.
[01:33] So, uh, getting into some demos.
[01:35] 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.
[01:40] 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.
[01:46] So, this is like a logo creator app that I built that got about 85,000 people uh, that that used it.
[01:52] This is one called Make Comics where it'll create a comic book from scratch starring you as as the superhero.
[01:57] Um, and uh, this one actually we actually have in person at our at the Together AI booth at this conference.
[02:03] 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.
[02:10] Um, other stuff like uh, this is generating subtitles from from videos.
[02:14] 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.
[02:23] This one had about 8,000 people that that checked it out.
[02:26] uh you know AI chat app for open source models.
[02:28] This one's fairly straightforward.
[02:30] 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.
[02:40] 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
[02:50] u create a PR for you from scratch.
[02:52] 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
[03:00] uh you know we live in a world now where more and more AI apps are kind of slop.
[03:06] 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
[03:18] uh is a really really big competitive advantage for these things.
[03:20] Um, so like I said, vibe coded apps kind of all look the same.
[03:24] They have the same tells.
[03:25] Um, they have the same kind of purple gradient background in every single one.
[03:30] Uh, they have italics in in headers.
[03:33] Um, they always have the scroll to explore for some reason.
[03:36] Uh, they have these pills that are all like all caps and with with spaced out um uh letter spacing.
[03:43] They have these gradient logos.
[03:45] They use a bunch of emojis.
[03:46] And so it's it's the same kind of stuff.
[03:48] sometimes some some spacing and padding issues.
[03:51] 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?
[04:02] All these like random graphics.
[04:04] Um, and so I'm going to talk about two different ways that I've tried to overcome this.
[04:09] Um, and and the first one I'm going to start with is this design skill that I built called Hallmark.
[04:14] 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
[04:27] 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.
[04:34] Uh so that's one thing it does.
[04:36] 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.
[04:43] And so I I built a bunch of these different themes.
[04:46] We feed them into Hallmark.
[04:47] And so like when you ask Hallmark to create a a website for you, it'll use these as context.
[04:52] And then and that's kind of that's going to be a theme throughout this talk as well is of like if you give AI models really really good inspiration, they tend to perform
[05:01] uh very very well.
[05:03] Um and so I launched this about uh a month and a half.
[05:06] I have about a month and a half ago.
[05:08] I have a little over 10,000 people that have tried it out so far.
[05:11] These are some examples of of uh I've mostly indexed it on landing pages, but uh landing pages using Hallmark.
[05:17] 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.
[05:22] 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.
[05:30] 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.
[05:37] Um, but I found this to be a uh one way that I try to avoid slop AI slop websites.
[05:44] Uh, and so this is uh some some more examples of hallmark generated pages.
[05:48] This one's build a landing page for like an invoicing uh app.
[05:51] 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.
[05:55] And these also are just one shot.
[05:57] Uh right, this is one single prompt and you get this whole website.
[06:00] And really a lot of the magic also is in kind of iterating on these things over and over and over again.
[06:04] Um, so this is uh this is another one.
[06:06] Uh, and then like a before and after.
[06:08] This is a a pretty good example.
[06:09] This is like build a page for like a learning app for kids.
[06:12] And on the left is like without Hallmark and on the right is with Hallmark.
[06:15] You can see it like, you know, it's just a little bit cleaner.
[06:17] It's a little bit nicer.
[06:19] 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.
[06:24] This is another one as well.
[06:25] On the left, kind of like the the classic AI generated page with the with the gradients and and everything like that.
[06:32] And on the right is is with Hallmark.
[06:33] 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
[06:45] [snorts]
[06:46] 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
[06:56] 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 iterating I'll use usually smaller open source model like GLM 5.2. GLM 5.2 is amazing.
[07:10] Uh who who here has used it?
[07:12] Uh show of hands.
[07:14] Okay, a few people.
[07:15] 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.
[07:22] 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.
[07:32] Um, raise your hand if you think GLM 5.2 is a. Okay, four hands.
[07:39] That was the GLM 5.2 one, right?
[07:41] 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.
[07:52] And the one on the right, you know, cost five times as much and and was a lot slower as well.
[07:57] Um, so anyway, this is another one where the left and the right, the left one arguably is even more AI generated.
[08:04] Uh, and that's the one uh that that that Opus actually created, right?
[08:09] 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.
[08:21] So this is another example where it's very hard to tell the difference.
[08:24] uh and and for iteration.
[08:26] So this is like a uh a really simple website I on one shot with just that one prompt.
[08:30] This is using GLM 5.2. And you can see this does have a lot of AI tells.
[08:34] It's impressive that it actually works.
[08:35] It's an image playground where you send it a prompt and you get an image.
[08:38] Um but just with a little bit of iteration on the left.
[08:41] I'm not going to go through all of it.
[08:42] 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
[08:52] and uh just better spacing overall uh with with just a sing one or two follow-up prompts.
[08:57] So I I think like uh iteration is is extremely extremely important.
[09:02] 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.
[09:12] 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.
[09:19] My my objective is not necessarily to make the best designed app in the world.
[09:23] 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.
[09:32] 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.
[09:40] 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.
[09:49] I have no idea what it is.
[09:50] 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.
[09:56] 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.
[10:07] Um so so that's that's one tip I have.
[10:09] Uh another one that's kind of tangential is like saving your preferences in some sort of skill or markdown file.
[10:15] You can do an agent.mmd.
[10:16] You can do kind of whatever you want.
[10:18] 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.
[10:25] Like you generate a website and every single time the logo looks like crap and you have to regenerate the logo.
[10:30] Um, you can start to build out an agent.mmd that has a bunch of this stuff like avoid this for the logo.
[10:36] Do them this way.
[10:36] For this, do it that way.
[10:38] Uh, and and as I've gone, I've kind of built up like a substantial agents.mmd that helps me do this.
[10:43] And and to a degree, this is kind of what Hallmark is as well, right?
[10:46] If you don't have your own, you can use something like like Hallmark.
[10:48] Um, this is maybe the most important one.
[10:51] If you take one thing away from this talk, please give your agents references and screenshots.
[10:56] I don't build anything uh nowadays without uh giving AI models a lot of inspiration.
[11:02] 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."
[11:10] I'll just save it.
[11:11] Uh I'll just save it somewhere.
[11:12] And now I have a a really large collection of them.
[11:14] 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."
[11:22] 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.
[11:28] So um always try to use references and and uh uh screenshots.
[11:33] Um longer and more specific prompts are always better.
[11:37] Um these days I I will just record voice notes.
[11:41] 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
[11:52] we have an image upload thing and here's how it should look and here's and here's some inspiration, right?
[11:56] And so it's usually like all my prompts now are like two two to three paragraphs.
[12:00] Um, so they're they're a lot longer prompt and and they usually do a lot better.
[12:04] Like this is like an example of a much longer prompt.
[12:07] 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.
[12:16] Um break things down into steps.
[12:20] I think like so I just talked about make your prompt longer.
[12:23] Um but also if you're building seven different features, you probably don't want to put them all in the same prompt, right?
[12:28] 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
[12:38] 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.
[12:49] So that's something that I that I've seen helps.
[12:52] Cool.
[12:53] 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.
[12:59] Um for iteration tasks I I' I've found they're a lot better.
[13:02] 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.
[13:09] Um and uh it kind of feels magical using it for iteration because it's so so so fast.
[13:14] And so you'll see that in in uh some of these uh open source models.
[13:19] Cool.
[13:19] Cool.
[13:19] And then the last thing is um I see people kind of trying to oneshot apps and then being like, well, that's it.
[13:26] I'm done.
[13:26] You know, I'm going to post this as is.
[13:27] And it's really really important to understand that like whatever your agent creates is just the base, right?
[13:33] 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,
[13:44] uh and and uh kind of iterate that way.
[13:48] Cool.
[13:48] That's all I got.
[13:49] Thank you so much for coming.
[13:51] [applause]