The Missing Layer: Design Taste in AI Agents

Talk transcript

1. 0:00

   [upbeat music] All right.

2. 0:17

   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.

3. 0:32

   Um, I'm especially passionate about this project 'cause, uh, a big part of my job and just my personal life, I, I just love building a lot of these AI apps.

4. 0:42

   And, uh, I'll go to the next slide. Uh, I've been building about ten 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.

5. 0:52

   And I think the number one reason for that is honestly just design and UX. And so that's what I wanna talk to you about today is how I approach design and UX in my apps as someone who's not a designer.

6. 1:02

   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, uh, open source AI models, uh, chat models like GLM 5.2, image models like NanoBanana, audio models, vision models.

7. 1:16

   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.

8. 1: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. So, uh, getting into some demos, I just wanna start with a couple apps that, that I've built so you get a sense of like the, the type of stuff that I

9. 1:39

   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 it got about eighty-five thousand people, uh, that, that used it.

10. 1:52

    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, um, where you can go and there's a little iPad, and you can take a picture and, and get

11. 2:07

    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.

12. 2:18

    And, uh, I, I looked into just like generating subtitles with, with open source models. This one had about eight thousand people that, that checked it out. Uh, you know, AI chat app for open source models.

13. 2:28

    This one's fairly straightforward. Um, this one is, uh, uh, is a website that I built to help you build five or six different variations of whatever landing page you wanna build, and then you can kinda choose one of them.

14. 2: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, um, uh, create a PR for you from scratch.

15. 2:52

    And so this is just, uh, an example of like some of the stuff that, that, that I build and I put-- 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.

16. 3:06

    You know, you can kinda look at it and within a second or two you can kinda tell that like, uh, this, this kinda looks AI-generated. And so I think just doing a little bit of extra effort, like a little ten to twenty percent after just focused on the UI, uh, is, is a really, really big competitive advantage

17. 3:20

    for these things. Um, so like I said, vibe-coded apps kinda all look the same. They have the same tells. Um, they have the same kinda purple gradient background in every single one.

18. 3:30

    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, uh, spaced out, um, uh, letter spacing.

19. 3:43

    They have these gradient logos. They use a bunch of emojis. And so it's, it's the same kind of stuff, sometimes some, some, uh, spacing and padding issues. Um, but the point is it's, it's actually just like, uh, uh, if you really think about it and you look at all of these AI-generated websites, you can come down and

20. 3:57

    you can make a list of like twenty or thirty different things that are like, okay, this is, this is what AI slop is, right? All these like random graphics.

21. 4:04

    Um, and, and so I'm gonna talk about two different ways that I've tried to overcome this. Um, and, and the first one I'm gonna start with is this design skill that I built called Hallmark.

22. 4: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.

23. 4: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. Uh, so that's one thing it does.

24. 4: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. And so I, I built a bunch of these different themes.

25. 4:46

    We feed them into Hallmark. And so, like, when you ask Hallmark to create a, a, a website for you, it'll use these as context. And then, and that's gonna, that's gonna be a theme throughout this talk as well as of like if you give AI models really, really good inspiration, they tend to perform, uh, very, very well.

26. 5:03

    Um, and so I launched this about, uh, a month and a half. I have about-- a month and a half ago. I've a little over ten thousand people that have, uh, tried it out so far.

27. 5:11

    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.

28. 5:19

    Uh, and there's different skills and stuff that I'm not gonna get too deep into. Uh, but the main things I just wanna, uh, I, I just wanted to cover are the AI slop gates and the themes.

29. 5:26

    And, and those two things really, uh, they do a lot. Um, and so this is the announcement tweet, and, and I got a, a bunch of really great feedback, and we're still iterating a lot to, to try to make it really, really good.

30. 5:37

    Um, but I found this to be a, a, a 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.

31. 5:48

    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.

32. 5:55

    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 also is in kind of iterating on these things over and over and over again.

33. 6:04

    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.

34. 6:12

    And on the left is, like, without Hallmark, and on the right is with Hallmark. You can see it, like, you know, it, it's just a little bit cleaner. It's a little bit nicer.

35. 6:19

    Uh, it has more, like, animations, which I didn't record a video to show it. But, um, it, it just looks a little bit nicer in general. This is another one as well.

36. 6:26

    On the left, kinda like the, the classic AI-generated page with the, with the gradients and, 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."

37. 6:38

    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.

38. 6:45

    Um, and, uh, you know, I've been indexing on this thing, but app iteration is also very important. And I think specifically, uh, a, a lot of people, I think, undervalue the importance of using, uh, smaller, faster models for these app iteration, uh, cycles.

39. 7:00

    A lot of the apps that I build now I'll kind of start in, like, Codex or Claude Code to build a base. And then for iterating, I'll use usually smaller open source model like GLM 5.2.

40. 7:09

    GLM 5.2 is amazing. Uh, who, who here has used it, uh, in the 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.

41. 7:22

    And actually we're gonna 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.

42. 7:32

    Um, raise your hand if you think GLM 5.2 is A.

43. 7:37

    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, um, uh, as well 'cause it's just, it, it's a smaller model, so it's just inherently a lot faster.

44. 7:52

    And the one on the right, you know, cost five times as much, uh, and, and was a lot slower as well. Um, so anyway, this is another one where the, the left and the right, the left one, uh, arguably is even more AI-generated, uh, and, and that's the one, uh, that, that,

45. 8:08

    that Opus actually created, right? So, uh, 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.

46. 8:21

    So this is another example where, uh, it's very hard to tell the difference. Uh, and, and for iteration, so this is, like, a, a, a really simple website I one-shot with just that one prompt.

47. 8:30

    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.

48. 8:38

    Um, but just with a little bit of iteration on the left, I'm not gonna go through all of it, um, you get to a website that looks... It ki- 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

49. 8:54

    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.

50. 9: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.

51. 9: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. My, my objective is not necessarily to make the best designed app in the world.

52. 9: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. Um, so, so my, my main takeaways for this, one is, like, getting familiar with a lot of these AI tells, right?

53. 9:37

    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?

54. 9:44

    In two seconds. But they can't tell me why, right? They're like, "Yeah, that just looks AI-generated. 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.

55. 9: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."

56. 10:07

    Um, so, so that's, that's one tip I have. Uh, another one that's kinda tangential is, like, saving your preferences in some sort of skill or markdown file. You can do it in AGENTS.md.

57. 10:16

    You can do kinda 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.

58. 10:25

    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.

59. 10:35

    For the logo, do them this way. For this, do it that way. Uh, and, and as I've gone, I've kind of built up, like, a substantial AGENTS.md that helps me do this.

60. 10:43

    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.

61. 10:51

    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.

62. 11:02

    And I kinda 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.

63. 11:11

    Uh, I'll just save it somewhere. Now I have a, a, a really large collection of them. And so when I'm building a new app, I usually will, will, will be like, "Well, like, actually I kinda, I think I want this look like a, a mix of Duolingo and a mix of this app and a mix of this

64. 11:22

    app." And, uh, 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.

65. 11:33

    Um, and- 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 wanna build an app that looks like this, and here's how, uh, you, you should use it,

66. 11:49

    and here's the type of user that's gonna 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, here's some inspiration," right?

67. 11:56

    And so it's usually, like, all my prompts now are, like, two or, two to three paragraphs. Um, so they're, they're, uh, a lot longer prompts and, and they usually do a lot better.

68. 12:04

    Like, this is, like, a, an example of a much longer prompt. I'm not gonna go through all of it, but, uh, it, it just produces something that's just a little bit better.

69. 12:11

    Like, uh, the, uh, the, the thing on the bottom was, was kinda produced with, with, with this prompt. Um,

70. 12:18

    break things down into steps. I think, like-- So I just talked about make your prompts longer. Um, but also if you're building seven different features, you probably don't wanna put them all in the same prompt, right?

71. 12:28

    You probably want, um... You, 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

72. 12:44

    of other messages of, like, "Oh, we'll do this feature and do this feature and this, do this feature," and I'll kind of, uh, uh, let it go. So that's something that I, that I've seen helps.

73. 12:52

    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've, I've found they're a lot better.

74. 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 post-trained. Um, and, uh, it, it kinda feels magical using it for iteration 'cause it's so, so, so fast.

75. 13:14

    And so you'll see that in, in, uh, uh, some of these, uh, o-open source models.

76. 13:19

    Cool. And then the last thing is, um, 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 gonna post this as is."

77. 13:28

    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, but keep them simple, uh, and, and, uh, kind of iterate

78. 13:46

    that way. Cool. That's all I got. Thank you so much for coming. [audience applauding] [upbeat music]