Stop Shipping AI Slop. Design with Weavy AI, Claude etc.

I'll let you in to a little secret. There's a tool called Weev AAI that is the secret to creating absolutely jaw-dropping beautiful mobile apps, software, etc. So, if you're anything like me, you vibe coded using tools like Google AI Studio, Claude Code, Lovable, and the results don't look that beautiful. Like, they look fine, but they don't look beautiful. And why beautiful matters is you want people to fall in love with your product. So, how do you actually do that? Well, I brought on my friend Sarah, who's an incredible designer. She sold her last company to Snap, and she walks us through her entire AI workflow, including how to use Weebi AI, the secret tool that is so, so powerful that could help you create beautiful jawdropping designs. In this episode, we do a live build. We actually show you how we can live build using Google AI Studio, using Claude, using Weevai, using Figma, and going back to Google AI Studio. So, this is the entire workflow. People who stick around to the end of this episode are going to be weapons. This is a tutorial that doesn't exist anywhere on the internet. So, give a like, comment, and subscribe for more in this in your feed. Let's get going. all this time, baby. — I begged her to come on to the pod. Sariah, a dear friend of mine, probably one of the most talented designers and you, 99% of people haven't heard of her. She sold her last company to Snap. She's incredible. And I asked her to come on for one sole reason. There's a lot of us who are vibe coding apps, but they look kind of garbage. and Sariah's AI workflow. She uses tools like Weevai, she uses Claude, she uses Flux, she uses a lot and she's able to create apps and websites and SAS products that really resonate with people. So Sariah, thank you for coming on and I'm hoping that you can teach us how to do how to create gorgeous vibecoded apps. — Thank you for having me. Very kind intro. Um, yeah, I think this will be fun. — Okay, so if people stick around to the end of the episode, tactically like what are people going to learn? — Okay, you will learn how to design something that looks like an agency designed it. — Okay. And not just any agency. — No, like a real brand designer. And maybe more importantly, you'll learn how to make something that someone actually wants to download. Um, and you can use yourself as an example. you'll see an ad for it yourself and be like, "Oh, I would actually use that. " — Yeah. And to be honest, like, as much as I wanted to do this for the pod, myself. Um, because I wanted to learn, I think there's so much opportunity right now to be vibe coding products that people love using, you know, IG reels and Tik Tok ads to get it to market. But, you know, a lot of times when I'm vibe coding stuff, it just looks kind of lame. So, what you're showing me today, before we get into it, I'll be able to to basically design products this beautiful. — Yes. — Okay, cool. Well, show us how. — Okay, amazing. Um, okay. Yeah, by the

end of this episode, we should have something like this designed and walk through how we do it. So, let's get started. Um, we already introed this, but we should build something that doesn't look like a robot made it. Um, anyone can build an app now. It's amazing. So much has changed, but now everything looks the same. And so, if you're going to make something that looks like everything else, it's just really tough to actually expect anyone to download it. Um, I am obsessed with branding. I love branding. We should think of it as the same thing as the product, same thing as engineering, like everything is branding. But to actually prove why um okay, let's make an app. We thought we would use a voice journal app as an example. I feel like it's a right of passage to want to make a journaling app. — That's right. — I'm always like, I should journal. And then I'm like, why don't I just make a journaling app instead? Um, okay. So

for this demo, we're going to use Google AI Studio. It's definitely one of my favorite vibe coding apps. It's really good at oneshotting interfaces, but we're more so focusing on design here. But, let's just use this kind of basic prompt like build a mobileiz voice journaling app. Users can see a home screen, record voice entries, see the transcript, browse past entries, and have it build it. Let's see how long this takes. It's pretty quick. I would say like two minutes or under. — Yeah, it's honestly so quick. It's amazing. It's kind of become my favorite oneshot um tool for vibe coding. — Yeah, I'm s I like Have you used any other tools? Like why you why suggest Google AI Studio? — I use AI So AI Studio is my favorite for like a oneshot prototype. So if you just want to see something, you're not working in an existing codebase, you're just like, what would this look like? Google AI Studio is really good because it'll do it end to end. When I'm actually working day-to-day in an existing codebase, um like in my current startup, we typically focus on using cloud code just because it's really good at working within a codebase. Um, and then sometimes if I do want the capabilities of Gemini, but I still want to work in um an existing codebase, I'll use Gemini's model and cursor. And then I found that Gemini is really good at UI and shader work and like more complex animations, — which is key, right? Cuz we're going to take this one shot and then we're just going to trying to paint it beautifully, right? — Exactly. we're going to take this one shot and be like, "Okay, we have the functionality. Now, how do we make it something that a human would actually use? " — And I think the problem is what a lot of people do is they go back and forth uh you know, pingpong so to speak with the AI models when they need to kind of take a step back and then figure out the branding and then apply that branding to the app. Right. — 100%. Like you can think of it as like what do you want to outsource and what do you not want to outsource. Like you could say this focuses on like what it should do but you want to keep as much like how it should do it to your own brain so that it like actually feels distinct and looks different. Otherwise like it makes sense that everything would look the same if you're outsourcing like all of the thinking. Um but what's amazing is we can now outsource stuff that are solved problems. like it's a solved problem to build a lot of this, but your unique take is pretty important. — And I'm actually really interested to see how you use Weebi AI to do it. I know we're going to get there, but that's a tool that I've been meaning to try for a very long time. I just it's a bit o it feels like a bit overwhelming to be honest. Uh — I think actually even as a designer like I used to not like nodebased tools even though like origami and stuff was really popular, I never personally liked it. Um, but I think with like AI models are the unlock for it for making them like actually super useful. Okay, let's see what this generated. Okay, this generated. Good morning. You can record. Hello. Hello. It's going to record something. Stop recording it. Pretty cool. I mean, it's still obviously really epic to see that this could get generated in like 20 seconds or 2 minutes or however long it took. Okay, cool. You can see the home and journal. Let's take screenshots of this and see what it looks like in our Figma. So, this is the app that got generated via Google. And I mean, honestly, like if the app store was just invented, it wouldn't be that bad cuz it was a novel thing to be able to record back then, but now that we're so used to software, like if we were to see this on Instagram or Tik Tok, um we would not download it ourselves to use. It's true, you know, and I don't think a lot of people are saying that, right? So, yeah. So, how do we this is really cool and it's got a good foundation. How do we take this foundation and build something beautiful? — Okay, so the helpful part about this is we know what it needs to do. So, let's just like quickly write down what it needs to record audio. It needs to Let's see what else. It needs to have a history. — Yeah. what you record and it needs to have like a button to actually start recording or let's we already have that with record audio. It needs to have timer while you're recording. — So basically you just outline what the screens need to do at this stage. — And most people stop here, right? Like vibe coding focuses a lot on like what does the thing do? It records, it shows your history, and there's a timer. Um but that's like not what a product is. is like you don't really think of your favorite products in the world and think, "Oh, it does this. " You think, "Oh, it makes my life easier and I just feel so good using it and like blah

blah blah. " So that's what we're going to focus on now. An equally important thing to what it does is like how should it do it? So I literally always start here. Like I define how something should make you feel. And even though that sounds like a little designer hippie-dippy, it's like really not. Um, and so, okay, I kind of wrote out this prompt beforehand. Um, and this is exactly something that I would paste in Claude, and we're going to paste it in Claude and see what it thinks. But let's just talk about how the audio journal app should make someone feel. I think it should make someone feel, or let me rephrase, um, who are we making this for? We're making an audio journal app for someone who wants to get their thoughts out. It's too long to write them out on pen and paper, but there might there may be tired of just like using tech all the time and like being on their phone all the time. And so that tells us that we don't want people to feel like they're just in any other app. So that means that our original design already failed because this like 100% feels like every other app on the planet. And so it kind of goes against like why someone would download an AI journal in the first place, which is like to feel calmer and just get your thoughts out. So now we know, okay, we want someone to feel maybe like they're in something analog. We want to be able to think out loud, but not feel like they're on their phones. Um, and they shouldn't feel like we're trying to steal their attention and like force a bunch of ads and random stuff down their throat, like a lot of apps. Let's go

ahead and paste this into Claude so that it can help us along the way. I'm designing a voice journaling app. Let's have it help us define how it feels, blah blah, and see what it says. — And what's your advice for people who like I feel like your insights there were really bang on. Like any advice for people to come up with insights like that? — Good question. Um, I think an example is I I actually use movies and TV shows as a reference a lot. Like movies and TV shows have a beginning, middle, end. And if we think of a product like that, it becomes a lot easier. Like if we're building like a health tracking app, we don't really care about the middle and end yet. We care about the beginning and that's like how someone feels. So we might say like, okay, we want someone to feel not anxious by like having some annoying coach telling them what to do every 5 seconds. Like that might not get the girl who I want to download it to download it. — And so if you just think really like as a human, I think that's why people say like build stuff for yourself cuz it's like you naturally know how you feel and how you want to feel. Um, I don't think you have to build for yourself. Like I But you also have to think about like, okay, then how would that person want to feel? And then you work backward backwards like, okay, I want this girl to feel calm. Therefore, it probably can't have like 75 timers saying like track these 5,000 things and like work backwards of those like key words. But also like Claude helps with it a lot. So, even if we said something like, "I'm designing a voice journal app. I want people to feel calm or they're tired of their phones. " Like, you could kind of see, okay, what does it say? How should it feel? Like, do I actually like what it's saying or do I not? And like you keep I think Claude is like the perfect brainstorming tool. — Cool. That's helpful. — So, here, let's see what it says. It says this is for the overinker that needs to exhale. Mind's constantly running. Sure. Whatever. Over stimulated. Yep. Like this all sounds like pretty spot-on. They crave permission to be unpolished. They suspicious of apps that um want too much of them. Analog warmth. That's cool because it's highly visual. So I think like the things to take from this are like what are things that are like very visual. And then also what's equally helpful is like what is it not? It's not productivity tool. That's important because that's really the opposite of like a private space to rant. It's not social. um not needy. Okay, this is really helpful. And I don't tend to use the questions it asks for this branding process cuz it's more about like what do we want from this? And then let's go back to the Figma. So now Claude knows enough to kind of help us create brand guidelines. I feel like a lot of people think of brand guidelines as this like corporate like afterpaint structure, but it's really not. Brand guidelines are really just like um a prompt in it of itself and it's a prompt we're going to bring into Weevi. So let's call our app cassette. So we can say Based on that, write me brand guidelines. And we'll just kind of use this throughout. I'm happy you said, by the way, that you think brand guidelines sounds corporaty cuz I sort of know that people are thinking that in their heads. — Like a different phrase. Oh gosh, it's going really extra. It's making like literal brand guidelines. No, no. Just write them out, please. What people don't realize is the brand guidelines is what's going to get people to download your app. — It's the opposite of corporate jargon and corporate stuff, right? — 100%. Like if a brand is successful, you won't notice it in the final app. It'll just feel good. — And that's really the goal of like all these complexities and processes. Like you don't do processes. Like sometimes you could literally just sketch something and that's it and you've got it. It's just about knowing like what you want. But I think these tools are nice because they help you get to know what you want. Like we can look at this and see, do we like it or not? Like cassette. Deliberate misspelling of cassette. That was not deliberate. That was my bad. That's really not important. Cassette is a voice journal for people who think out loud but are tired of being on their phones. Totally spot on. Let's put that in the Figma. We like that. That seems like a good thing to put into Weevie. And that's kind of just what you do. Like you just take stuff from here that you like. Um, and like let's see where it talks about cassette is the satisfying click of a record button. That feels really nice because we can kind of feel that like, okay, maybe we just build our whole visual style around like analog cassette um, designs. And so I usually will just like talk back and forth with Claude. Um, it could take one chat like this or a few more until you kind of end up with guidelines that you like. So, I think parts of this are relevant and then a bunch of it we don't really need. But for now, let's just take like these two things. Voice journal, people who think out loud. It's focused on analog and like a record button. And then the next

tool I use is Cosmos. Cosmos is my it's honestly one of my favorite apps just in general. Um, it's an alternative to Pinterest and it's beautiful and it's usually where I make mood boards. So, I prepared a mood board for this voice app, but I'm going to show you just like very easily how um you could add to it or do the same. It's super simple. Like you could literally just type vintage cassette. Oh, there's this like cassette and you can kind of go down all these clusters. Um, and Cosmos is really nice because you kind of just end up in this like endless loop. And so if you really like the colors in this, I'm going to add this to our voice app mood board. And then you can just keep going until you stop. I usually end up on this site just without even trying. Um, so if we go back to the mood board, you can kind of feel the vibe that like all of these are matching the stuff we just talked about. like they're all really analog. We can lean into the analog vibe to make something feel how we said in the beginning, which is like not very techy, not overwhelming, and like personal.

And so the next step is the main part we're going to talk about, which is Weebi. So Weevie, super cool app. Um, like Greg mentioned earlier, it's nodebased and yeah, kind of like you said, it looks complex. Like if you zoom out, it has like this beautiful complex thing, but it's actually really not. I found that it's just the best way to try any model um visually and like really quickly for honestly any project. Um, so let's get back to branding. I went ahead and I saved all the images from this mood board to my desktop. So, you just like go into it, click save. Um, then it saves and then you just paste them all into Weevi so that we can use them for branding and then they load really quickly. Um, let's put them all together. And now the question, this is what's not really, this is what you couldn't do in the past. Like in the past, you'd have a mood board and then it's like, okay, then what? It's all this work and you have to like contact a designer and have them like look at the mood board, create custom assets from it and like all this stuff. But now, literally anyone can do it. Um, let's go back to the Figma. Okay, so we did the mood board. Cool. And now we're going to start a weebi. And so the way you use Weevie and the way I use it is I kind of switch between Claude and Weevie and I have Claude create the prompts that I want to put into Weevie. And so okay, we're going to

start with colors. Colors is like a mood board kind of the most primitive easy thing to start with and then it's going to be like building blocks like colors and then backgrounds and then buttons and images. And you could think of it as like a literal painting and we're kind of starting with the background. So, we have this image in Weevi, one of the mood board references. You're going to take it as an input and let's use an image model. We're going to use Flex 2 Pro. It's a very good just like general model to use for a bunch of stuff. And so, then in the prompt, we can write something like, I need a color palette. Extract colors from this reference image. And let's see what it does. And usually when I run these models, I run a bunch of different ones. Like, let's do the same thing on this one cuz this is kind of nice. And let's just say give give me a color palette based on this image, but make it textured and vintage. — And you're doing that cuz you're you want to see like what's going to get you the best result. Yes. So, you want to see what's going to get you the best result and what's going to get you I mean part of this is developing your own taste in general and in the product you're making. So, like if we go back to okay, I want this person to feel retro, calm, cool. Um what else? Like not too techy. Like what matches that? So that's another reason I start with like how do you want the end person to feel is like any step of the way you just kind of go back to that and are like is this true or not true? So, like I kind of like thought I would love this more, but I kind of love this more personally. Like it just feels really cohesive and there's like a really nice textural element to it. — And so maybe that tells us like, oh, we should lean into like the textures of cassette tapes and um stuff like that. Like actually earlier when I kind of was thinking through this demo, um I did some other variations and kind of ended up with like a similar metaphor of like, okay, how can we lean into this like analog cassette tape? Um so maybe we kind of run with that. So now we have like a couple color palettes. Um but I don't know about you, but I personally also am like obsessed with this image, honestly. Like this could literally be the app. But and honestly sometimes I do that like I'll find one image I like and then make a whole company based off that image. — Like my last startup I worked on literally I just found like one image and then the whole branding came from that one image. So I wouldn't be afraid of doing that. Like you could literally just love this image so much and be like this is the whole app the whole product like every — I mean didn't Johnny I do that with Dita Rams and Apple like that's basically what he did I think you know Johnny Ives who used to run design at Apple was a huge Dita Rams fan. I think Dita Rams was you know creating stuff in the 50s and 60s and just saw some of his stuff and then that inspired a whole set of Apple products from that. So, we're not reinventing the wheel here. We're just doing it using different tools. — 100%. It's all the same exact thing. And even for the new product I'm working on right now, like I literally just found one image that I really liked and now the entire product is based on this like one shadow image. — So, this one I feel like it's kind of nice to find that image. So, like we have these two color palettes, but I also just personally like this image. And I think why do we like it? like we have to think about like, okay, well, we're using the colors that feel analog, but we still have like maybe a background that feels calm and like versatile. So, now we kind of know like, okay, we have a bunch of colors to play with. We're experimenting with colors and you can kind of go back and forth between like what do you need help with from Claude and what do you just want to put into Weebi. Like sometimes if something isn't coming out in Weebi how you like it, just tell Claude, say to Claude like, "I want a better prompt for getting a color palette from an image. " Or you can just go directly into Weebi. Um, and so one idea that actually came up when I was looking at this image is like we really like texture, which we saw here. We also really like this just like pretty analog hybrid machine thing. So, what if the anchor of our visual system, if you will, is like as you use the product more, this becomes more used visually. Like, what do you think? — I love that. I mean, like digital products, think about it. They're kind of like cartoons. It's like The Simpsons never got older, you know, but time went on. So, I like this con. That's a huge That's a winning concept. I'm in. — Okay. I love that. True. And I feel like sometimes if you overuse analog things digitally, but there's no purpose to them, it feels kind of gimmicky. And so you got to think about too like what's the purpose of your brand element? Like it's not for the sake of it. Like we're not just putting this to be pretty. But if you're making it more like used like you would in the real world, then it's also just like a reason for someone to actually use it every day. So then we might say to Claude, "I have a product idea. that the app should age with use. Um, new users get a nice interface, blah blah, but we want to extract that loved and used feeling. And then let's say like, write me a prompt. Oh, I have that here. Write me a prompt that shows a progression on a vintage audio equipment image. Let's see what it says. Let's see what that does. It might be a little too detailed, but who knows? It's good to experiment. And maybe we use it with this cassette tape because I'm going to do it on a cassette tape. — And so Flux 2, you basically are exclusively using Flux 2 Pro — right now. Yes. For image to for any image generation, it's like you don't have to be too deep about which model you use. like you just want to see it visually. And I found that Flux is quick and just good at like text prompts and it feels like very generically good. Um, and then I'll get into like a couple other models down the line when it becomes more important to like grab actual assets. Okay, this kind of shows us what it would look like to like have a more used cassette tape. And I do love the vibe actually. I'm obsessed. So now maybe we take this image we love and say um okay let's put that into flux again and the prompt is like show a more used version of this audio system. Um and again like there's always a more detailed in-depth prompt like you can always paste your prompt into claude and be like make this a better prompt and just kind of like experiment it with it like you would vibe coding. Let's see what it does. And then while it's generating, let's go back to Figma. Now

we kind of have a visual anchor of the whole product. Like it should all kind of get more used as we use it, as the user uses it. Um, and like if we're going to go back to what the functionality is, we need to be able to record audio, see what you record, and have a timer. And now let's say that we have a color palette and we have a visual anchor. So, we sh we're probably ready to like actually work on the actual like assets and buttons now that we kind of have honestly like all the pieces put together. Like I actually love this so much. Oh my god, this is so pretty. Um, okay, cool. So, we could start with the buttons. Um, this is another prompt I kind of wrote out beforehand is like we need a record button. Um, and something I do a lot is I say to Claude like, "Okay, write different prompts of different types of record buttons. " Like, we might want to try like a minimal version that's similar to this. We might want to try like a more intense version um that might be similar to some of these versions I did earlier. And you kind of just want to see what different buttons look like. So, I'm going to show you how these were generated over here because it's the same exact process we just used. So, you might take input as a color palette. You might want to take input as an as a um cassette tape. Any image again can always be your input. And then let's see what the prompts are. So, this is for example like generate a record button inspired by this cassette recorder. It should be like an analog button from the 80s. use this color palette. Um, and I've actually just like a quick I found that like a lot of talk online about AI is like how do you get consistent characters with like AI images, which is important and like challenging. But the nice part about product design is you don't need like a face to look the same. You just need colors, shadows, lighting to look the same, which is a lot easier. So, it's like a lot easier in app design and web design to make something like visually consistent with AI than like images you're generating of a person. Anyway, okay. So, we have a bunch of buttons. This one I really liked, but it makes the background hard, I think, cuz it's not like on its own. Um, so my personal favorite ended up being just isolating this red one from our favorite image right here. What do we think? — I couldn't agree more. — Okay. — Simple. It makes It's like, you know, you go into like a Staples or whatever and they sell those like big red buttons that people want to press. Like that's what this feels like. — Yes. Completely. I love it. It's so adorable. And I kind of like how it's like modern but not modern and analog but not like completely analog. Um, okay. So, we can kind of just go with this button. Normally from here, um, I would just download this image like straight from Weevi. Let's download it. They make it so easy. Um, and then into Figma, I would just paste it. And we're literally just starting to like save assets that we like. And so now we know that we like this button. Um, and we can deal with like typography and text and like all of that stuff after. And so if we're going to go back to like, okay, what do we need to build? We now have a record button. Um, we can deal with typography and text after. And we have kind of this like recording um speaker system. Clearly, I'm not like an audio person. Okay. Now, the big

element we're missing visually, I guess, is the like history of after you record something, what does it look like? In our AI generated app, it's like a little list. But if we want to lean into this like analog whatever vintage cool system, we probably want like a metaphor for that. And luckily, we already have a metaphor for it, which is in the name. It's a cassette tape. So, we could just go back to one of these images. I actually really liked one that got generated here. And I'll show you how this was made from this color scheme, which was created the same way we did earlier. You could say, "Generate a set of cassette tapes using this color palette. Show the tapes from the spine view like they're stacked on a shelf. " Actually, I'm kind of curious if we did that from this color palette. What would it do? Let's take this image. I love this image. It looks like it'd be like a cafe in Brooklyn. Um, and let's do flex again. And then let's do that same prompt I just pasted. Generate a set of cassette tapes. Let's see what it does. And then let's do the same thing from this one. I'm just curious. And I just kind of copy paste the same prompt over and over. And I also just love how we kind of tools are like meant to be really messy. Like it's meant to be I think really just a bunch of things everywhere. Um, and what's we haven't really talked about like the price of something like this. Like how much is it expensive? Is it cheap? Weebi. — Good question. It's pretty well priced. I think it's like 200 credits that are free every month. And okay, wait. I'm on the paid one, which is like $10 a month, I think. 15. And you get 1,500 credits cuz I use it a lot for work. — But this you could do for free. Like you get like — I mean this has taken us so far probably like 30 40 credits. So, it's kind of amazing, honestly. — And see how good this is. Like, it literally just created all the cassette tapes based on the two color palettes. I think it did a pretty decent job. And then an idea is like, okay, we want to use these cassette tapes as the history of like each recording. So maybe we take this image, we do another flux prompt and we go um give me this same image but change the text on the binding to be a date like January 19th, 2026 because then we can kind of keep this metaphor going and be like, "Okay, every time you do a recording, we have like a new cassette tape. show up on the screen. I did one earlier that I also liked. I'll show you guys in a sec once this generates. Actually, wait, I'll just show you now. Like this one, for example, the one I showed earlier, we took this image and it has like random text that it generated. And then I said, okay, replace the text with different dates. And it did it pretty nicely. So, you could kind of imagine like you'd give this to a vibe coding platform and then it would just like do it automatically. Let's see if it did it. Oh my god, it's so cute. Okay, I love it. See, you can kind of see the dates and then I mean some of them are a little off, but that's okay. These don't need to be perfect. So, now let's download this image. I'm going to download the one from here because it has a bit of a background color I like. So, let's download this image and let's paste that into Figma. Okay, we have these two visual references. So, now we pretty much have even though it's kind of hard to see, if you squint your eyes, you can see that we have like all the functionality visually. Like we have a record button, we have a speaker, and we have the history. It's just not in an app yet, which is fine. Let's do the

logo, and then let's come back to the last step, which is putting the app together. Okay, this logo stuff still blows my mind as someone who has been designing logos their whole life. Um, where am I? Okay, let's go back to Weebi. So, now we're going to switch models. We're not doing ide. We're not doing flux anymore. We're going to do ideoggram. Super cool model. It's really good at typography, honestly. It's like amazing. So, okay, we're going to put this into Claude. And it basically says, "Write me four logo prompts. " one that's like this, whatever. And let's see what it does. — So, it says a technical word mark version A, handwritten, B, tape label, C, minimal word mark, D. Okay. — Do you like these? Maybe this one. — Yeah. I mean, I feel like that's the coolest. Like a version C, like a tape brand. — Yes. Like I haven't even heard the names TD Key or Max Cell and Bass F — but like I it's actually probably like deep in my brain somewhere, you know? — But like I I do like I think that's like what we're trying to evoke. — Okay, let's go with this one. And then let's see. Oh, and another cool thing Logo does that Claude is good at is giving a negative prompt, which is basically what you don't want. — Um, and so we don't want something 3D render glossy gradient mesh. Unfortunately, AI is ruining gradients. Um, sparkles like the you could just list a thousand things you don't want. So, that's kind of helpful, too. So, let's try it. You type idiogram v3 and you're going to add the prompt which you picked which is like a really good one I think. Get rid of the version thing. And then the negative prompt. Let's just take clouds. I feel like it's pretty good. Cold, vinimal, corporate. True. Definitely don't want that. Negative prompt. Okay, let's run it and see what he thinks. — Let's run it. — I just do ide for fun cuz it's so wild. Okay. So, flux for most things. Ideogram. Okay. — I love it. — That is really nice. — Isn't it so nice? I — I can't even tell how to spell cassette anymore to be honest, but it doesn't — I think it's two S's, right? — I think so, but it doesn't matter. — Oh my god, I love it. Um, let's do a few more. They're so fun. Like, you could do pretty much any. Um, and then sometimes if you only like one prompt from Claude, you could be like, "I like this prompt. Make another one, but maybe we have a different style, but black and white only, cuz sometimes you might need a black and white logo. " — Yeah. And like the gasp that you just had like oh my god is because you have been a designer your whole life and have spent so many hours, days, nights, sleepless nights, you know, thinking about all this. So the fact that it can get done for like the cost of like three pennies or whatever is just like mind in like one second is mind-blowing. — No, it's so true. It's mind-blowing. Like really the only benefit of being a designer at this point is knowing maybe a little bit about what to react to, but that's really minuscule. Like I think it's so insane. Like I'm not as obsessed with this, but still cool. — Yeah. — Cool. And then the other ones that got made earlier were also really cute. Like all of the I mean this one was bad, but this one's really cute. And you can kind of just feel out like what fits and what doesn't. And I mean the benefit of making a mood board and all the like earlier stuff of like how should it feel is it can let us look at this and then this and kind of decide okay this feels more the vibe. — Yeah. Cool. — Okay. — So we have a logo. — Okay. We have logo. We're good. Um let me download this logo. Now we're pretty

much ready for the final situation which is making the screens in Figma. Um, so in Figma, if you press F, you can get the frames. Let's just click iPhone and make a few iPhone screens. Add some border radius to be pretty. And I'm going to paste in a little top bar. Let's call it cassette. Just spell it differently everywhere. And then — how did you paste the top bar for people who don't know how to do that? — That's a good question. I have a really bad answer which is I have it in a that I used forever. But you can also Figma community search iOS and like every iOS component on the planet shows up that you can copy paste. — Exactly. — Yeah. And it's honestly more for it's like you don't need to do it here, but it just makes it feel so much more legit. Um and then let's bring these down so that we have like a bit of a side by side. Okay, what do we need to do? Record audio history of what you record timer. Okay, these don't need to be perfect. Let's first do record. Actually, let's just like add our logo in. Cute. The problem is that it's a black background and we don't want that. You can very easily in Weebi. Here's another tip in Weebi. You take the result, you type in background remove. — Oh wow. And it just does it right there. And we can redownload that. — That's handy, — right? — Yeah. — So cute. Logo background remove. So, let's use that one instead. Very cute. And then we're going to want to color. Let's just use something like this for now. and we can change it cuz that doesn't quite fit. Something another tip that's Figma that I like to do a lot is anytime you have an image and you're trying to figure out your color, go here to appearance and if you go down and type overlay or hard light, you can kind of play with these blend modes and you see like it changes the color based on the background. So like even this for example feels a little better than that. Um but we can change our color after based on our color scheme. Let's just get the functionality down. So we have this like splash screen. Now let's do the record audio button screen. Let's just go ahead and paste this directly for now. And we can fix it later in terms of spacing and whatnot. Let's change the background. And now we need the history of what you record. Let's just paste this in and see how it looks. We kind of have the basics, but it looks like we need to change a couple of the backgrounds. There is actually one more cassette tape I liked better in our weevi that might work better. And now you only see it once you're in Figma. And it's this more simplified cassette tape here. This one I ran into the same thing earlier. Simplified cassette tape. And just for reference, I made that by just saying like generate a new row of cassette tapes. And so you really just like iterate on your exact weebi um the more you go cuz in this one it's like a little hard to see the spacing and stuff. So let's make another one with simplified cuz that tape's adorable. — Yeah, — right. — Yeah, that looks really good. — It's so cute. Okay. And maybe they can like horizontal scroll it. But we also need to unfortunately remove the background. And we're also going to remove the background of our favorite one, which is this one. Um, and that's kind of like a thing you should do all the time is make your favorite asset and then remove the background at the end once you're putting everything together. um to make it all cohesive. But while that's running, let's download this. Call it clean. Go back to Figma. Paste in clean. Paste in our logo at the top. Cool. So, this is our new version of history. This is our current little splash screen. And then let's get the one that we removed the background of down here. Oh wow, it removed everything. That's okay. I'll show you how to fix that cuz that happens really often. Now we have this little button. Sometimes when that happens, I actually just take this into Figma and remove the background. Background removal, it's like so common that you just kind of mess with it until it comes out right. Like honestly, if we just did it in Wavy again, it' probably work too. Um, now let's get the color scheme we want. We already have the color scheme from Weevi. Let's go back up to our color scheme. Just kind of copy rain shot, paste it here, and kind of eyeball a better color scheme that fits the vibe. Like something like that is nice to feel a little more warm. And now I guess we need text. — We'll literally just look at the vibe coded one to kind of copy what text we need. Um, or we can just look at what we need to do. So, you need to record audio, history, and timer. So, record audio. Oh, well, we're missing a record button. Now, we know from the history screen. Let's go ahead and add a cute little record button here. Maybe some T type. Some a helpful tip for mobile apps is like I would just keep the typography very simple and the same oops 20 same tip as earlier. A helpful thing for typography is for colors use blend overlay and then it automatically is the color that fits well or that screen. See, like this automatically looks like it fits really well. And I just duplicated it. Something like that. — Do you ever think we'll get to the step where like the step before this, like the pre-Figma step where you'll just be able to put into Google AI Studio and it'll just like figure it out for you? — Honestly, you could do that now. Like I think part of me likes compositing in Figma so that when I am going back and forth with Google Studio, I have a north star. — Yeah. But like you could very much just literally get to this step, paste in these reference images to Google Studio and kind of see what it does. It might take a lot more similar to vibe coding like back and forth. — Yeah, — I think it's similar to like how much back and forth do you want to have? How much of a vision do you have for it? Like this isn't a necessary step by any means. At the end of this, what I want to do is just compare what — output versus Google AI Studios output. — Yes, I think that's a great idea cuz I'm kind of curious like if we paste this in and like the logo, there is a logo I kind of liked better that was generated here that I do think we should use. Um, it's this little I think it's just that we need like a black and white one honestly for it to be really simple. But honestly, either would work. It's really just personal preference sometimes, but just so we have some less colors going on. Let's remove that background. And then the last text we'll add is library. And then paste it at the top. And there you go. Your app is done. — Download it at the app store right now. — Rate it. Fun stars. — Yeah. — But I like that idea. Should we paste it

it's this little I think it's just that we need like a black and white one honestly for it to be really simple. But honestly, either would work. It's really just personal preference sometimes, but just so we have some less colors going on. Let's remove that background. And then the last text we'll add is library. And then paste it at the top. And there you go. Your app is done. — Download it at the app store right now. — Rate it. Fun stars. — Yeah. — But I like that idea. Should we paste it into Google? — Let's paste it into Google. And then at the after that, let's tell people if they actually wanted to make this fully functioning app, like how would they actually do that? — Okay, let's do it. Remember you design the interface based on the logo color image of cassettes as history objects and record button attached. There's probably a much better in-depth prompt we could use and make this work really well to be honest. — Right. And we would go to a code or another LLM to go and optimize that for us. — Exactly. Like you could finesse it to the point where you have pretty much everything. Or you could honestly just like upload the Figma files too, but you really don't need to. And then you kind of see what it does. — Yeah. And then we wait. — I wonder what it'll do. I mean, if it could do that, it would make a, you know, the lives easier for a lot of people. Um, the way I see it is it's kind of like, you know, do you want to There's like you can drive a manual car, you can drive an automatic car, or you can drive a self-driving car, aka you're not driving out at all, full self-driving. — Um, and you're just like managing the wheel. And like now it's kind of pick your poison based on like your level of comfort and all the and all these different tools. — Totally. And sometimes it's just like whatever comes up with the best output. Like you could design the whole thing in Figma and then suddenly like you get a one shot that's just better or vice versa. — Yeah. Like I found that shaders especially in Google AI Studio, it's like the one thing where I found that it just oneshots it so well that I'll almost never start with an existing thing. — And then have you played or have you seen you know any of these mobile vibe coding app platforms like vibe code app or there's anything. com. Have you seen these? — Yes, it's a good point. I have seen them. I haven't played around with them in extreme depth. I've like tried a prompt or two. — Yeah. — And I know they're getting better at backends and stuff like that, but that's usually always my um hold up with them is they'll feel like a little almost like the old version of no code sometimes. But honestly, they're getting so much better that I'm sure it'll evolve a lot. — Yeah. It's on my to-do list to like try it out. But I have seen like some of them are built on cloud on Opus 4. 5. So it's like you got to think it's pretty good, right? — Yeah. No, they're probably really good. And I feel like in the past 6 months like Claude has gotten so I mean I guess all the models but at least from what I use Cloud's gotten so much better at Swift and iOS whereas I feel like web used to really be like substantially better. Um, and now it's like really good at iOS, too. — So, the for the mobile apps that you're building now, you're using cursor. — I'm using Claude Code is my number one love of my life. My number two love of my life, cursor with Gemini model and plan mode. And then for oneoff shots, one-off prototypes, I'll use like Google AI Studio directly. — You can only have one love of your life. You can't have two. That's blasphemy. — No, you can't. But yeah, it's Claude. It'll always be Claude. Okay. What do we got? What am I looking at here? — Let's see. I mean, it got the logo. It got the orange. — Okay. Honestly, it's like much cuter. — Yeah. Oh, 100%. — Wow. Oh my god. Life is so crazy. I can't believe it does this. — I mean, it's not perfect. And I still I think the Figma version is a lot better, but I think that you probably can pingpong this to get to a point where it's almost if not Figma level — 100%. Also, like our prompt was so short. — Yeah. And we're doing this live, so you could point is people listening, you if you want to go back to AI Studio, feel free. You don't need to be in Figma. — Yes, 100%. Like if you spent one more minute than we did on the prompt, I would have done it. — Amazing. Um, Teria, anything else you

want to leave people with? Anything else that you didn't cover that you wish you did? — Um, good question. No, I would just say that spend lots of time on Cosmos. gathering your own inspiration. Um, that's like actually just a lot of it. And then — yeah, — you can pretty much make anything you want. Yeah, it sounds like it feels like what I've learned is it's a game of kind of like collecting the right inspiration and then using like maybe sleeping on it and being like, okay, this photo, this picture, this and then getting the insights from there and then just bringing it back to AI Studio or Figma and that's what it is — 100%. It's so simple. It's like really you can take one visual reference and then just like make everything based on that. — Well, thank you so much for for coming and showing us all this. I think it's going to make a huge difference in people's products lives and uh and I'll include links for where to follow you on your journey in the show notes in the description. highly encourage people go and follow Sariah and her journey. She's criminally underfollowed, criminally unknown, and but people who know you know that you're an incredible designer. Uh, and I'm just honored that you came on the show, that you shared a lot of sauce, and that I've gotten to know you over the last five or six years. — Nice. Thank you. You, too. I'm so happy on. I hope you come on back on again and uh people listening, I hope you go and build something beautiful and I know you will now. So, thank you so much. — Thank you. There you go.