Intro0:00
Alright, hello everybody, welcome. Uh, my name is Hassan, I lead the developer experience team over at Together AI, 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.
Ten apps0:33
Um, I'm especially passionate about this project because a big part of my job, and just my personal life, I just love building a lot of these AI apps. And, uh, I'll go to the next slide. I've been building about 10 apps a year for the last, uh, 5 years, and I've been lucky enough that some of these apps 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.
Together AI0:53
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: we help you run open source AI models, chat models like GLM 5.2, image models like Nano Banana, audio models, vision models.
We hit 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 have a GPU cluster product where you can reserve H100s and B200s to train your own models or do your own inference.
App demos1:33
So, uh, getting into some demos, I just want to start with a couple apps that I've built so you get a sense of, like, the type of stuff that I build. They're usually very simple one-page apps 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 that used it. This is one called Make Comics, where it'll create a comic book from scratch, starring you as the superhero. And this one actually, we actually have in person at our at the Together AI booth at this conference, where you can go and there's a little iPad and you can take a picture and get a real comic book printed out that you can take home.
Um, other stuff like, uh, this is generating subtitles from videos. I upload a lot of videos to YouTube and to Twitter, and so I needed something like this, and I looked into just, like, generating subtitles with open source models.
This one had about 8,000 people that checked it out. You know, AI chat app for open source models. This one's fairly straightforward. Um, this one 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 last one I'll show off really quickly is, uh, like an AI cloud agent where you can ask it to do things and give it a GitHub repo and it'll spin up a sandbox and actually create a PR for you from scratch.
And so this is just an example of, like, some of the stuff that I build and that I put out. And I think really the big takeaway here is, you know, we live in a world now where more and more AI apps are kind of slop.
AI slop2:53
You know, you can kind of look at it and within a second or two you can kind of tell that, like, uh, this kind of looks AI generated. And so I think just doing a little bit of extra effort, like a little 10 to 20 percent after, just focused on the UI, 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. They have the same kind of purple gradient background in every single one. They have italics in headers. They always have the scroll to explore for some reason.
They have these pills that are all, like, all caps and with spaced out letter spacing. They have these gradient logos. They use a bunch of emojis. And so it's the same kind of stuff, sometimes some spacing and padding issues.
But the point is, it's actually just like, uh, 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 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. And the first one I'm going to start with is this design skill that I built called Hallmark.
Hallmark4:14
And Hallmark basically takes all of these AI slop patterns and codifies them and tells AI models like, hey, like, don't use these, you know, don't do a purple gradient, don't use italics in the title, and all of these AI slop gates is what I call them, or slop patterns.
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 built a bunch of these different themes.
We feed them into Hallmark. And so, like, when you ask Hallmark to create a website for you, it'll use these as contacts. And that's kind of, that's going to be a theme throughout this talk as well as of, like, if you give AI models really, really good inspiration, they tend to perform very, very well.
Um, and so I launched this about 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, I've mostly indexed it on landing pages, but landing pages using Hallmark.
And so this is build a landing page for an indie podcast and it gives you that. And there's different skills and stuff that I'm not going to get too deep into, but the main things I just want to, I just wanted to cover are the AI slop gates and the themes.
And those two things really, they do a lot. And so this is the announcement tweet and I got a bunch of really great feedback and we're still iterating a lot to try to make it really, really good. But I found this to be one way that I try to avoid slop, AI slop websites.
And so this is some more examples of Hallmark generated pages. This one's build a landing page for, like, an invoicing app. 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,right? This is one single prompt and you get this whole website. And really a lot of the magic also is in kind of iterating on these things over and over and over again.
So this is another one. And then, like, before and after, this is 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 theright is with Hallmark.
You can see it, like, you know, it's just a little bit cleaner, it's a little bit nicer. It has more, like, animations, which I didn't record a video to show it, but it just looks a little bit nicer in general.
This is another one as well. On the left, kind of like the classic AI generated page with the gradients and everything like that. And on theright is with Hallmark. You know, you can look at the one on theright and still say, like, oh, well, that's not a perfect landing page.
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. Um, and then, you know, I've been indexing on this thing, but app iteration is also very important.
And I think specifically, a lot of people, I think, undervalue the importance of using smaller, faster models for these app iteration cycles. A lot of the apps that I build now will kind of start in, like, Codex or Claude Code to build a base.
Iteration6:51
And then for iterating, I'll use usually smaller open source model like GLM 5.2. GLM 5.2 is amazing. Who here has used it? Show of hands. Okay, a few people. So this is a model that came out two weeks ago that, in my opinion, was like the first open source model 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. Raise your hand if you think GLM 5.2 is A.
Model match7:30
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 GLM 5.2. It was created way faster as well because it's just, it's a smaller model, so it's inherently a lot faster.
And the one on theright, you know, cost five times as much and was a lot slower as well. So anyway, this is another one where the left and theright, the left one arguably is even more AI generated, and that's the one
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 GLM 5.2 is one of those models I feel is really, really incredible for this kind of stuff.
So this is another example where it's very hard to tell the difference. And for iteration, so this is like a really simple website I one shot with just that one prompt. This is using GLM 5.2. And you can see this does have a lot of the 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, you get to a website that looks, 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 just better spacing overall with just one or two follow-up prompts.
So I think, like, iteration is extremely, extremely important. Um, so the final part of my talk is just takeaways for, like, how I approach building apps that look good as someone who's not really a designer as well. Um, a lot of other people speaking on this track are incredibly talented designers and you should take a look at their thing.
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 my main takeaways for this, one is, like, getting familiar with a lot of these AI tells,right?
Takeaways9:20
We went through some of the, like, patterns of AI slop. 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, eh, it just looks AI generated. I have no idea what it is. And so I think it's worth understanding that, like, well, yeah, it's purple gradient and it's this logo and it's this thing. And when you understand that stuff, I think it becomes a lot easier to
bake that into the apps that you build or ask the AI models to, hey, like, hey, don't do this or don't do that. Um, so that's one tip I have. Another one that's kind of tangential is, like, saving your preferences in some sort of skill or Markdown file.
You can do it in AGENTS.md, you can do kind of whatever you want. 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 AGENTS.md that has a bunch of this stuff, like, avoid this.
For the logo, do them this way. For this, do it that way. And as I've gone, I've kind of built up, like, a substantial AGENTS.md that helps me do this. 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 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 nowadays without giving AI models a lot of inspiration.
References10:46
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 looks amazing. I'll just save it. I'll just save it somewhere.
Now I have a really large collection of them. And so when I'm building a new app, I usually will be like, well, actually, I kind of, I think I want this to look like a mix of Duolingo 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 the output will always be way, way, way better. So always try to use references and screenshots. Um, longer and more specific prompts are always better.
Prompts11:37
Um, these days I will just record voice notes. 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 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 some inspiration,right?
And so it's usually, like, all my prompts now are like two to three paragraphs. So they're a lot longer prompts and they usually do a lot better. Like, this is like an example of a much longer prompt. I'm not going to go through all of it, but it just produces something that's just a little bit better.
Like, the thing on the bottom was kind of produced with this prompt. Um, break things down into steps. I think, like, so I just talked about make your prompts longer. But also, if you're building seven different features, you probably don't want to put them all in the same prompt,right?
You probably want, you can do one or two features per prompt where you talk about them extensively. And usually I'll send off, like, the start of the app will be like 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 let it go. So that's something that I've seen helps.
Cool. This is the one I talked about. Iterating with a cheaper open source model can be using closed source models for everything. For iteration tasks, I've found they're a lot better. I think Cursor did a great job proving this with, like, Composer 2.5, which is like an open source model that they post-trained.
And it kind of feels magical using it for iteration because it's so, so, so fast. And so you'll see that in some of these open source models. Cool. And then the last thing is I see people kind of trying to one shot 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 contact, give it additional inspiration, and go back and forth and make the apps look and feel really good, keep them simple, and kind of iterate that way.
Agent base13:27
Cool. That's all I got. Thank you so much for coming.





