WEBVTT NOTE Sentence-level transcript of https://www.youtube.com/watch?v=7GMKdpLsxwU NOTE One cue per sentence. Cue ids are the line anchors on /transcripts/7GMKdpLsxwU.html. A cue ends where the next begins, or 2 s after its last word. s1 00:00:01.309 --> 00:00:03.309 [music] s2 00:00:16.880 --> 00:00:17.600 All right. s3 00:00:17.600 --> 00:00:18.400 Hello everybody. s4 00:00:18.400 --> 00:00:18.960 Welcome. s5 00:00:18.960 --> 00:00:20.400 Uh my name is Hassan. s6 00:00:20.400 --> 00:00:29.760 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 s7 00:00:29.760 --> 00:00:32.800 stop letting your agents ship ugly UIs. s8 00:00:32.800 --> 00:00:43.920 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. s9 00:00:43.920 --> 00:00:57.680 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 s10 00:00:57.680 --> 00:01:02.640 talk to you about today is how I approach design and UX in my apps as someone who's not a designer. s11 00:01:02.640 --> 00:01:07.600 Um but before we move on really quick I work at together AI we're an AI native cloud platform. s12 00:01:07.600 --> 00:01:08.720 We help you do three things. s13 00:01:08.720 --> 00:01:11.600 We help you run uh open source AI models. s14 00:01:11.600 --> 00:01:16.640 Uh chat models like GLM 5.2, image models like nanobanana, audio models, vision models. s15 00:01:16.640 --> 00:01:21.920 We have kind of all the different modalities and all the big open source models on our platform through our inference API. s16 00:01:21.920 --> 00:01:24.240 We let you fine-tune models on your own data. s17 00:01:24.240 --> 00:01:33.520 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. s18 00:01:33.520 --> 00:01:35.360 So, uh, getting into some demos. s19 00:01:35.360 --> 00:01:40.159 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. s20 00:01:40.159 --> 00:01:46.799 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. s21 00:01:46.799 --> 00:01:52.000 So, this is like a logo creator app that I built that got about 85,000 people uh, that that used it. s22 00:01:52.000 --> 00:01:57.680 This is one called Make Comics where it'll create a comic book from scratch starring you as as the superhero. s23 00:01:57.680 --> 00:02:03.439 Um, and uh, this one actually we actually have in person at our at the Together AI booth at this conference. s24 00:02:03.439 --> 00:02:10.000 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. s25 00:02:10.000 --> 00:02:14.879 Um, other stuff like uh, this is generating subtitles from from videos. s26 00:02:14.879 --> 00:02:23.200 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. s27 00:02:23.200 --> 00:02:26.000 This one had about 8,000 people that that checked it out. s28 00:02:26.000 --> 00:02:28.480 uh you know AI chat app for open source models. s29 00:02:28.480 --> 00:02:30.160 This one's fairly straightforward. s30 00:02:30.160 --> 00:02:40.400 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. s31 00:02:40.400 --> 00:02:50.640 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 s32 00:02:50.640 --> 00:02:52.640 u create a PR for you from scratch. s33 00:02:52.640 --> 00:03:00.480 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 s34 00:03:00.480 --> 00:03:06.319 uh you know we live in a world now where more and more AI apps are kind of slop. s35 00:03:06.319 --> 00:03:18.000 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 s36 00:03:18.000 --> 00:03:20.800 uh is a really really big competitive advantage for these things. s37 00:03:20.800 --> 00:03:24.159 Um, so like I said, vibe coded apps kind of all look the same. s38 00:03:24.159 --> 00:03:25.680 They have the same tells. s39 00:03:25.680 --> 00:03:30.720 Um, they have the same kind of purple gradient background in every single one. s40 00:03:30.720 --> 00:03:33.280 Uh, they have italics in in headers. s41 00:03:33.280 --> 00:03:36.879 Um, they always have the scroll to explore for some reason. s42 00:03:36.879 --> 00:03:43.599 Uh, they have these pills that are all like all caps and with with spaced out um uh letter spacing. s43 00:03:43.599 --> 00:03:45.120 They have these gradient logos. s44 00:03:45.120 --> 00:03:46.560 They use a bunch of emojis. s45 00:03:46.560 --> 00:03:48.480 And so it's it's the same kind of stuff. s46 00:03:48.480 --> 00:03:51.200 sometimes some some spacing and padding issues. s47 00:03:51.200 --> 00:04:02.720 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? s48 00:04:02.720 --> 00:04:04.319 All these like random graphics. s49 00:04:04.319 --> 00:04:09.519 Um, and so I'm going to talk about two different ways that I've tried to overcome this. s50 00:04:09.519 --> 00:04:14.319 Um, and and the first one I'm going to start with is this design skill that I built called Hallmark. s51 00:04:14.319 --> 00:04:27.440 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 s52 00:04:27.440 --> 00:04:34.800 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. s53 00:04:34.800 --> 00:04:36.080 Uh so that's one thing it does. s54 00:04:36.080 --> 00:04:43.280 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. s55 00:04:43.280 --> 00:04:46.400 And so I I built a bunch of these different themes. s56 00:04:46.400 --> 00:04:47.600 We feed them into Hallmark. s57 00:04:47.600 --> 00:04:52.639 And so like when you ask Hallmark to create a a website for you, it'll use these as context. s58 00:04:52.639 --> 00:05:01.360 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 s59 00:05:01.360 --> 00:05:03.199 uh very very well. s60 00:05:03.199 --> 00:05:06.639 Um and so I launched this about uh a month and a half. s61 00:05:06.639 --> 00:05:08.400 I have about a month and a half ago. s62 00:05:08.400 --> 00:05:11.840 I have a little over 10,000 people that have tried it out so far. s63 00:05:11.840 --> 00:05:17.120 These are some examples of of uh I've mostly indexed it on landing pages, but uh landing pages using Hallmark. s64 00:05:17.120 --> 00:05:22.720 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. s65 00:05:22.720 --> 00:05:30.639 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. s66 00:05:30.639 --> 00:05:37.520 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. s67 00:05:37.520 --> 00:05:44.560 Um, but I found this to be a uh one way that I try to avoid slop AI slop websites. s68 00:05:44.560 --> 00:05:48.479 Uh, and so this is uh some some more examples of hallmark generated pages. s69 00:05:48.479 --> 00:05:51.759 This one's build a landing page for like an invoicing uh app. s70 00:05:51.759 --> 00:05:55.600 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. s71 00:05:55.600 --> 00:05:57.600 And these also are just one shot. s72 00:05:57.600 --> 00:06:00.400 Uh right, this is one single prompt and you get this whole website. s73 00:06:00.400 --> 00:06:04.800 And really a lot of the magic also is in kind of iterating on these things over and over and over again. s74 00:06:04.800 --> 00:06:06.880 Um, so this is uh this is another one. s75 00:06:06.880 --> 00:06:08.560 Uh, and then like a before and after. s76 00:06:08.560 --> 00:06:09.919 This is a a pretty good example. s77 00:06:09.919 --> 00:06:12.560 This is like build a page for like a learning app for kids. s78 00:06:12.560 --> 00:06:15.280 And on the left is like without Hallmark and on the right is with Hallmark. s79 00:06:15.280 --> 00:06:17.919 You can see it like, you know, it's just a little bit cleaner. s80 00:06:17.919 --> 00:06:19.120 It's a little bit nicer. s81 00:06:19.120 --> 00:06:24.960 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. s82 00:06:24.960 --> 00:06:25.919 This is another one as well. s83 00:06:25.919 --> 00:06:32.000 On the left, kind of like the the classic AI generated page with the with the gradients and and everything like that. s84 00:06:32.000 --> 00:06:33.840 And on the right is is with Hallmark. s85 00:06:33.840 --> 00:06:45.449 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 s86 00:06:45.449 --> 00:06:46.000 [snorts] s87 00:06:46.000 --> 00:06:56.720 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 s88 00:06:56.720 --> 00:07:10.479 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. s89 00:07:10.479 --> 00:07:12.000 Uh who who here has used it? s90 00:07:12.000 --> 00:07:14.160 Uh show of hands. s91 00:07:14.160 --> 00:07:15.520 Okay, a few people. s92 00:07:15.520 --> 00:07:22.560 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. s93 00:07:22.560 --> 00:07:32.319 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. s94 00:07:32.319 --> 00:07:39.680 Um, raise your hand if you think GLM 5.2 is a. Okay, four hands. s95 00:07:39.680 --> 00:07:41.440 That was the GLM 5.2 one, right? s96 00:07:41.440 --> 00:07:52.319 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. s97 00:07:52.319 --> 00:07:57.440 And the one on the right, you know, cost five times as much and and was a lot slower as well. s98 00:07:57.440 --> 00:08:04.400 Um, so anyway, this is another one where the left and the right, the left one arguably is even more AI generated. s99 00:08:04.400 --> 00:08:09.840 Uh, and that's the one uh that that that Opus actually created, right? s100 00:08:09.840 --> 00:08:21.759 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. s101 00:08:21.759 --> 00:08:24.960 So this is another example where it's very hard to tell the difference. s102 00:08:24.960 --> 00:08:26.160 uh and and for iteration. s103 00:08:26.160 --> 00:08:30.479 So this is like a uh a really simple website I on one shot with just that one prompt. s104 00:08:30.479 --> 00:08:34.159 This is using GLM 5.2. And you can see this does have a lot of AI tells. s105 00:08:34.159 --> 00:08:35.279 It's impressive that it actually works. s106 00:08:35.279 --> 00:08:38.240 It's an image playground where you send it a prompt and you get an image. s107 00:08:38.240 --> 00:08:41.279 Um but just with a little bit of iteration on the left. s108 00:08:41.279 --> 00:08:42.880 I'm not going to go through all of it. s109 00:08:42.880 --> 00:08:52.399 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 s110 00:08:52.399 --> 00:08:57.760 and uh just better spacing overall uh with with just a sing one or two follow-up prompts. s111 00:08:57.760 --> 00:09:02.880 So I I think like uh iteration is is extremely extremely important. s112 00:09:02.880 --> 00:09:12.720 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. s113 00:09:12.720 --> 00:09:19.200 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. s114 00:09:19.200 --> 00:09:23.680 My my objective is not necessarily to make the best designed app in the world. s115 00:09:23.680 --> 00:09:32.240 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. s116 00:09:32.240 --> 00:09:40.320 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. s117 00:09:40.320 --> 00:09:49.040 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. s118 00:09:49.040 --> 00:09:50.080 I have no idea what it is. s119 00:09:50.080 --> 00:09:56.800 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. s120 00:09:56.800 --> 00:10:07.279 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. s121 00:10:07.279 --> 00:10:09.600 Um so so that's that's one tip I have. s122 00:10:09.600 --> 00:10:15.839 Uh another one that's kind of tangential is like saving your preferences in some sort of skill or markdown file. s123 00:10:15.839 --> 00:10:16.959 You can do an agent.mmd. s124 00:10:16.959 --> 00:10:18.480 You can do kind of whatever you want. s125 00:10:18.480 --> 00:10:25.440 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. s126 00:10:25.440 --> 00:10:30.640 Like you generate a website and every single time the logo looks like crap and you have to regenerate the logo. s127 00:10:30.640 --> 00:10:36.000 Um, you can start to build out an agent.mmd that has a bunch of this stuff like avoid this for the logo. s128 00:10:36.000 --> 00:10:36.720 Do them this way. s129 00:10:36.720 --> 00:10:38.000 For this, do it that way. s130 00:10:38.000 --> 00:10:43.279 Uh, and and as I've gone, I've kind of built up like a substantial agents.mmd that helps me do this. s131 00:10:43.279 --> 00:10:46.000 And and to a degree, this is kind of what Hallmark is as well, right? s132 00:10:46.000 --> 00:10:48.880 If you don't have your own, you can use something like like Hallmark. s133 00:10:48.880 --> 00:10:51.760 Um, this is maybe the most important one. s134 00:10:51.760 --> 00:10:56.320 If you take one thing away from this talk, please give your agents references and screenshots. s135 00:10:56.320 --> 00:11:02.480 I don't build anything uh nowadays without uh giving AI models a lot of inspiration. s136 00:11:02.480 --> 00:11:10.720 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." s137 00:11:10.720 --> 00:11:11.600 I'll just save it. s138 00:11:11.600 --> 00:11:12.800 Uh I'll just save it somewhere. s139 00:11:12.800 --> 00:11:14.880 And now I have a a really large collection of them. s140 00:11:14.880 --> 00:11:22.880 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." s141 00:11:22.880 --> 00:11:28.560 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. s142 00:11:28.560 --> 00:11:33.120 So um always try to use references and and uh uh screenshots. s143 00:11:33.120 --> 00:11:37.279 Um longer and more specific prompts are always better. s144 00:11:37.279 --> 00:11:41.440 Um these days I I will just record voice notes. s145 00:11:41.440 --> 00:11:52.480 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 s146 00:11:52.480 --> 00:11:56.560 we have an image upload thing and here's how it should look and here's and here's some inspiration, right? s147 00:11:56.560 --> 00:12:00.160 And so it's usually like all my prompts now are like two two to three paragraphs. s148 00:12:00.160 --> 00:12:04.560 Um, so they're they're a lot longer prompt and and they usually do a lot better. s149 00:12:04.560 --> 00:12:07.120 Like this is like an example of a much longer prompt. s150 00:12:07.120 --> 00:12:16.480 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. s151 00:12:16.480 --> 00:12:20.240 Um break things down into steps. s152 00:12:20.240 --> 00:12:23.440 I think like so I just talked about make your prompt longer. s153 00:12:23.440 --> 00:12:28.880 Um but also if you're building seven different features, you probably don't want to put them all in the same prompt, right? s154 00:12:28.880 --> 00:12:38.720 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 s155 00:12:38.720 --> 00:12:49.839 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. s156 00:12:49.839 --> 00:12:52.720 So that's something that I that I've seen helps. s157 00:12:52.720 --> 00:12:53.040 Cool. s158 00:12:53.040 --> 00:12:59.200 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. s159 00:12:59.200 --> 00:13:02.560 Um for iteration tasks I I' I've found they're a lot better. s160 00:13:02.560 --> 00:13:09.279 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. s161 00:13:09.279 --> 00:13:14.399 Um and uh it kind of feels magical using it for iteration because it's so so so fast. s162 00:13:14.399 --> 00:13:19.279 And so you'll see that in in uh some of these uh open source models. s163 00:13:19.279 --> 00:13:19.440 Cool. s164 00:13:19.440 --> 00:13:19.600 Cool. s165 00:13:19.600 --> 00:13:26.160 And then the last thing is um I see people kind of trying to oneshot apps and then being like, well, that's it. s166 00:13:26.160 --> 00:13:26.560 I'm done. s167 00:13:26.560 --> 00:13:27.920 You know, I'm going to post this as is. s168 00:13:27.920 --> 00:13:33.680 And it's really really important to understand that like whatever your agent creates is just the base, right? s169 00:13:33.680 --> 00:13:44.480 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, s170 00:13:44.480 --> 00:13:48.320 uh and and uh kind of iterate that way. s171 00:13:48.320 --> 00:13:48.880 Cool. s172 00:13:48.880 --> 00:13:49.680 That's all I got. s173 00:13:49.680 --> 00:13:51.859 Thank you so much for coming. s174 00:13:51.859 --> 00:13:53.859 [applause]