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

AI Engineer · 14 min · 174 sentences · from YouTube's caption track

Each timecode opens YouTube at the start of that sentence. Line anchors (#s42) are the cue ids in the WebVTT, and every line carries its start and end seconds. All transcripts has every talk, and the whole corpus as one file.

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