Welcome back to How I AI. I'm Clarvo, product leader and AI obsessive here on a mission to help you build better with these new tools.

Today we have a very special pre-Thanksgiving episode of How I AI, where I show you how to use Lovable to Vibe Code a personalized party hub for your upcoming dinner party.

I share some of my own personal tips and tricks on how to uplevel the designs of any vibecoded app using Google fonts and midjourney.

And then I share my personal favorite trick for using chat GPT to make recipes easier to make.

Let's get to it.

This episode is brought to you by work OS.

AI has already changed how we work.

But there's a catch. These tools only work well when they have deep access to company systems.

Your co-pilot needs to see your entire codebase.

Your chatbot needs to search across internal docs.

And for enterprise buyers, that raises serious security concerns.

That's why these apps face intense IT scrutiny from day one.

To pass, they need secure authentication, access controls, audit logs, the whole suite of enterprise features.

Building all that from scratch, it's a massive lift.

That's where work OS comes in.

Work OS gives you drop-in APIs for enterprise features so your app can become enterprise ready and scale up market faster.

Think of it like Stripe for enterprise features.

OpenAI, Perplexity, and Cursor are already using WorkOS to move faster and meet enterprise demands.

Join them and hundreds of other industry leaders at works.com.

Start building today.

With Thanksgiving just a week away, I thought I would use the idea of a Thanksgiving party hub vibecoded in lovable as a way to show you a couple tips and tricks on how to uplevel your prototypes and vibecoded software.

Use some tools that are a little bit more fun than the ones we get to show every day and show off some of my personal tips and tricks when it comes to hosting, cooking, and building websites.

Maybe my favorite things.

So to get started, I thought about creating a Thanksgiving party hub.

And I started this project with a very simple prompt in Lovable.

Why did I pick Lovable?

Well, I picked Lovable because usually, although unfortunately not in this exact instance, usually Lovable has a little bit nicer of a design component to it than other vibe coding tools.

It'll bring in a little bit more color. And generally, I just think for personal projects, it has a little bit more humanity and personality to it.

So, I prompted Lovable to give me a Thanksgiving party hub for managing invites, dishes shared, recipes, and photos.

So, if you're responsible for hosting a big holiday meal at your house, you know that you got to do a couple things.

You got to figure out who's coming and honestly what they can eat at this point.

You usually do something potluck, so you want to coordinate the dishes across your guests.

Um, I have a tip on recipes I really want to share that I think is really fun.

And then, of course, you want to have a photo gallery, which could be really cool.

And so, I got this up before we started the show.

And you can see here that lovable, thought through modern event management apps and kind of brought some cozy holiday gathering to it with a warm autumn palette with orange, golden browns, rich browns.

And it had the features for V1 that I listed in my original prompt, which was a welcome dashboard, a guest list, disc coordination, recipe sharing, photo gallery, and a warm inviting autumn aesthetic.

Now, I don't think this is that great.

So, one of the highlights of today's episode is going to be showing you a couple tips and tricks that I might use to really uplevel the design of a vibe coding or prototyping project that I might do.

And I'm going to do this a little aside of what you might use in a company, which is bring your own design system to something. This is going to be a little bit more like how can you personally develop your design and taste as you develop these applications and what are some additional tools, tricks, etc. that you might not think of that would help you make your web designs or your application designs better.

So, just looking at this, we don't love it. It's not the prettiest.

Um, it's got a pretty pretty boring stock photo in the background. You can't really read it.

Um, there's some layout issues in the navigation here.

You can see this is butdding up against the border of the image.

You know, it's just kind of boring.

And one of the things that I think you can do to uplevel any design is get a really nice typography combination in your application.

And something you might not know about these vibe coding tools like Lovable, Bolt, V0, Replet, etc. is they're all pretty well integrated with Google Fonts.

So, one of the things that I really like to do when thinking about how to bring up typography into my apps is Google Google Font combinations.

This will give you a combination of headline and body fonts that can be used. Licenses are free on the web or in an app that really already look great and have been designed and inspired by great designers.

And so Canva has this awesome resource, this page that I go to a lot which just lists, you know, combo after combo of Google font combinations.

So everything from sort of standard ones that might like look good on a SAS app to more fun um or media oriented ones to ones that might fit a personal application a lot better.

And I want this to feel super super cozy.

So I'm going to go with this homemade apple, which is a font, not a recipe yet. and railway font combination.

I think it's really cute. It gives me sort of this like grandmother writing a recipe feeling.

and I know for a fact that lovable can access Google fonts.

So what I would do in this instance is I would actually copy and paste these two font names.

I would go back to lovable and say okay let's uplevel the design starting with typography.

I want I can't type today. Um I want to use Google Fonts homemade apple for the headlines and railway for the body font.

I want to use Google Fonts homemade apple for the headlines and railway for the body font.

So, Laville should be able to interpret this and go ahead and embed the right fonts, the right scripts, the right structure to then uplevel the CSS and the typography for this design um using those two fonts that we identified.

So, I'm excited to see what it comes up with.

H so cute.

Now, not as readable, but you know, honestly, I don't care. I think it's really, really, really adorable.

And if you're curious about how this actually works, again, you can go into your fonts or you can go into your files.

You can see it's pulled in the Google API's fonts.

It's pulled in homemade apple and railway as a font.

It's added those fonts as defaults in the Tailwind, which is our CSS kind of framework. Um, the Tailwind config and it's updated.

I think if I find headlines, yep, headlines are going to now be that font homemade and body is going to be font railway.

So again, what I like about this is it not only is a process for you to update your design and make it look great, but just by reading these three files, you can understand this is how I pull in Google fonts. This is how I configure them in Tailwind, which is very popular right now with um some of these apps. And then here's how I would set those default fonts in my CSS.

So again, it's a combination of learning the design system and the code system through these vibe coding tools.

And I think it looks pretty good.

I think this just looks really cute and it makes me very happy.

Now, one problem we have is that the Thanksgiving Party Hub header does not look great. It's really hard to read.

Also, I definitely wouldn't call it the Thanksgiving Party Hub.

So, I want to make two changes here.

And in making those two changes, I want to go over to one of my favorite other tools, which is MidJourney.

So, I don't love this stock photo at the top of leaves in a plate.

Or maybe it's not a stock photo, maybe it's an AI generated photo, but I still I still don't like it.

And I want to generate something more fun.

And when I am working in midjourney, which is an AI photogenerating application, that honestly was the first thing that made me really excited about generative AI.

It was one of the most inspirational tools I've ever seen.

I like to use and look up style references on X.

So, style references are little codes that you can append to the end of your midjourney prompts to generate a really cool aesthetic or image style.

And there are so many people out on X that are sharing these really interesting, super cool looking style references and parameter strings that you can use to generate an image in a specific style.

And one that I found um while researching this episode was this one by Michael Rabone, which is this like whimsy textured storybook paint kind of like paper cutout aesthetic.

I thought it was super cute, very organic, gave me like cozy vibes, felt very kid-friendly.

and so I wanted to generate an image like this.

And you can see here it has this style reference, which is this long code that gets the image generation into a specific kind of stylistic or aesthetic space.

And then he's also gone on and added um a couple other parameters like aspect ratio stylize parameter um what version of the midjourney model you might use.

And so I just really love this and wanted to generate something like this.

And so I actually created these before so we didn't have to wait.

And I I copied the um the prompt almost exactly except I changed it to say geometric paper autoutuminal harvest table.

And so I got this, I think, really really adorable image of like wheat in a vase and pumpkins and fruits and it just feels exactly like I wanted for my website and my image, but it's a square.

And if we go back to my image, I really need this long this long thing.

And this is real talk. I struggled.

So, one of the things you can do if you have an image you like and you know the prompt generated it is you can go down here and I'll zoom in a little.

You can go down here and say use prompt.

So, I can actually reuse the prompt.

And one of the things that I missed is that it had this hard-coded aspect ratio um parameter in here.

So, I'm going to go ahead and delete that and then go into the settings and actually do a 2:1, which is a pretty wide aspect ratio image.

but I'm going to use the exact same prompt because I thought it generated a really good result.

And I'm going to go ahead and submit that.

My journey has gotten super fast.

Um, you can see below I've done a couple other ideas, but you'll see here now that same image style and prompt is going to be generated but in that wider aspect ratio.

So, I think this is a really fun tip or trick for folks that are using MidJourney to generate images for specific instances is you can really tune the um metadata and the parameters of the image to make it fit for your design.

Now looking at Oh my gosh, this is totally giving me California Thanksgiving vibes, which is like a pumpkin and the ocean and this beautiful it looks a little tuskcen, a little tuskcen hill.

Um, and I really love this. I think it's super cute.

So, I'm going to save this image and I want to replace my header image on this Thanksgiving party hub with this image.

So, I'm going to say, okay, the header needs to be improved. Here is the image I want for the background.

I also want the title of the page to be Claire's Thanksgiving feast and all the copy to be more personalized around Claire hosting Thanksgiving at home.

And then I'm going to drag that image over and we're going to see if it takes it in and updates the image.

So, I've uploaded that photo generated by Midjourney.

It should be nice and wide for this.

And I'm going to submit it and have it update that header.

And again, these are just a couple really simple tips and tricks that are going to get you from what feels like a little bit like vibe coding slop to something much more beautiful, something much more well-designed, something that really feels like, you know, artisally crafted farm-to-table software, which is what we want all of our vibe coding apps to look like.

So, it's going to take that image, it's going to personalize everything for Claire's Thanksgiving feast.

It should be pretty fast.

Again, once you have the framework for your application, I think it's really good to just little bit by little bit iterate on the components of your design to improve them over time.

I think if you gave a big list of I don't like the typography and I don't like the header and I don't like this and I don't like that, um, it can get lost in actually generating what you want.

But I think this incremental step by step is really helpful.

Now again, I think this looks already so much better um than what we had before.

It's so pretty. It's feels much more cozy. It feels like honestly just well much better designed.

But we have this image problem [snorts] here that the text is clipped.

And so I'm going to go ahead and take a screenshot, which is another trick I really like.

Um and take a screenshot and say the headline text is being clicked.

So, we're going to type that in. Text is being clipped. Please fix. Also, replace the star above the headline text with a pumpkin, not pumpkin, a pumpkin and leaf emojis.

Pumpkin and leaf emojis.

Now, I can't again my nails look very nice for the holidays. Cannot type.

One of the benefits of AI is you can typo, you can misspell things, you can have really beautiful nails and it will not matter.

So, this little how I AI uh tip for the ladies out there.

And I realize I'm not on my paid lovable plan um which is on my other profile, but we're just going to do what we can do right now.

So, it's going to fix the text clipping and replace the icon with pumpkin and leaf emote.

H look at that. It's a little [laughter] It's a little Halloweeny.

So, we might remove that pumpkin.

Um, but hopefully it'll fix the text clipping um on the image and add proper spacing, which is what we want.

And what I like about this is I thought the pumpkin would be really cute.

I forgot that the pumpkin emoji um is by default a jacko'lantern.

We are past Halloween now.

If you haven't missed it, go back to our How I AI episode on a Halloween fortune teller app that was generated.

Um but you know this is a little silly.

So I am um go to what files were changed and I am actually just going to get rid of this little pumpkin.

And then I'm going to come back in here and actually fix the line height to get the clipping issue fixed.

So hopefully this hero headline will be fixed.

It really doesn't want to work.

And honestly, we're just going to let it let it be.

So, we're going to go back to latest.

We're going to accept that this is a little funky looking.

We'll fix it later.

But again, you can tweak this.

This is just proof that sometimes vibe coding is not perfect, and I don't want to spend time today on optimizing this headline height.

Okay, we're going to ignore that header for right now.

But the last thing I do want to fix is this uh headline header nav.

I think it's just a little funky looking.

And so again, I'm going to just go in here.

I took a screenshot of it.

And I'm going to say the spacing at the bottom of the snap bar is a bit broken. Please fix.

And then I feel like the buttons are just like a little light.

So I'm going to ask them to make the buttons just a little bit darker.

And I'm going to submit that.

Hopefully that fix goes through.

And we've gone from a pretty boring first design, which we can flash up, to a really beautiful, fully customized party hub with a bunch of features in here that we're going to expand on.

And look at that. It didn't fix it at all.

So again, with our vibe coding, something that I would probably do if I cared a lot more is I would go in and actually optimize the code here.

I would read the code.

I won't make you all watch me do this, but I would figure out what is going on with the images.

Why is this not actually changing?

And I would make those changes myself.

But for now, I think it looks really cute.

Again, we have a guest list, a dish coordinator, recipe collection, and photo gallery.

The last idea I have for you before we go into recipes, which I think is really important, is adding dietary restrictions to your party hub.

So, I don't know if you all are like me, but I have relatives that are vegan.

I have a husband who is gluten-free, dairy free.

I have a me that wants to eat everything on Thanksgiving.

And so it's really great to be able to add these like little custom features that might not be in your standard invitation app here in Lovable.

So I'm going to ask one more thing functionalitywise.

I'm going to say, okay, we'll come back to design later. I don't know why I'm saying this. I just feel like I'm being polite.

Um, let's add dietary preferences restrictions to the guest list. Let's start with a multi select of the most common ones.

So, what this is going to do, in addition to adding guests with their name and email address, which is something that the app based off of its own knowledge of how other event apps work, it's actually going to add dietary preferences and restrictions to the guest list.

And now one thing I call out for people is it is useful to have a language around user experience design and coding when explaining this.

For example, if I just said add dietary preferences, it could add like a text field where you're typing it in or it might ask me what dietary preferences do I care about.

instead here with this prompting I was pretty specific that I said let's start with a multi select of the most common ones and multis select means people can have more than one dietary preference which they do.

and I want to not come up with a list I want pe I want lovable to come up with a list for me.

so if I go to guest list um now I can select my dietary restrictions and select multiple ones here love it.

love it.

let's see if I can cover my husband so we got gluten free, dairyf free.

Perfect.

And then um my mother-in-law is vegan, so we got vegan vegan and then no restrictions as an option, which is great.

And the last thing I might ask it to do is take these restrictions and add tags to the dishes so people can call out common allergens in in their dish or um ingredients this list might care about.

Okay.

So again, I'm taking one part of the data model from a form and I'm adding it to another part of the data model of the form.

And the reason why I love vibe coding something like this so much is I don't really have to think about how those might interact.

This app is going to be a lot smarter than I would be in the 30 seconds it's going to take to generate.

to add that in kind of think about the interplay between a preference which would be something like dairyf free and an ingredient saying this contains dairy so it's not good for dairyf free or it is safe for dairyf free.

and so I think this is just a really nice way to again not just improve the design of an app but think about what aspects of a data model you could add to something to really customize it to make it useful to you personally.

so it's going to add these allergen tags to the dish manager.

It's probably going to take a second for it to refresh and we will see what that looks like once it's live.

Here we go.

So, add dietary tags and allergens.

Look, it just gave the exact answer we needed, which is let's just map it one to one to the dietary information.

If it's dairyfree, mark it dairy free.

If it's vegan, mark it vegan.

If it's gluten-free, mark it gluten-free.

And we can see here that now you can add things like mashed potatoes that are vegetarian and gluten-free.

Thank you, Sarah.

My husband will be very happy um here in the list.

And so we can now start to see what kind of dishes are coming, who can eat them, will they meet our guest needs.

We could do all sorts of interesting things here like list the names of people that could eat these dishes or even build a report on do we have enough coverage across all of our kind of categories of foods main sides and desserts or do we have enough coverage across our dietary restrictions so that my husband won't be hangry when he's at at Thanksgiving this year.

But again, we're not going to show that.

This is to really inspire you to take something a little bit further.

The last piece I want to show you is one of my favorite flows for recipes.

So, this is a bonus bow on the end of this Thanksgiving themed episode where I'm going to show you one trick to use using AI that I think is really great for recipes, especially if you're cooking with kids.

So, Thanksgiving again is one of my favorite holidays.

I love cooking for my family and I love cooking with kids.

But one of the challenges I've always found using online recipes for kids is they're typically formatted like this.

They typically have a list.

Well, let's talk about like the the narrative structure, the kind of novel that goes before any online recipe.

But let's say we get past that.

It usually has a list of ingredients and measurements and then it has instructions.

So let's say you're making chocolate chip cookies.

It will say, you know, you need two cups of flour and 8 tablespoons of butter and 1 cup of chocolate chips, etc., etc.

And then the recipe will say, mix the flour and the chocolate chips.

This is a terrible cookie recipe, but just go with me.

And if you have kids, you know, you're scrolling up and down with dirty like dirty hands trying to figure out, well, how many chocolate chips, how much butter, how much flour, because the measurements and the instructions are split up separately.

And this has been one of my personal favorite AI use cases, which is to bring those two things together and put them in an order that you can actually follow with your kids.

So, I'm going to show you all Claire's favorite Thanksgiving recipe.

It is this palenta and sausage stuffing.

It's made of palenta, so it's corn, it's gluten-free.

Um, you put sausage in it, you blend half of it, it's like chunky, creamy, crispy on the top.

It is so delish.

It's my favorite thing to make.

Um, and I love having my kids help me make it.

But again, you can see this recipe has the exact problem we talked about.

It's got all these ingredients and numbers up top, but then when you're talking about exactly how to cook it, the the the um ingredient measurements are not in the same order.

And so what I like to do, it's super simple.

I really just copy and paste this recipe.

You could also give chatbt the link.

I'm gonna use 51, which came out last week.

We didn't do an episode specifically on 51.

Here's my general vibe on 51. It's got a better personality than five for sure.

It's got a little bit more of that cute energy.

Not so many bullet points, which I love.

It's a little too cute sometimes.

So, I've noticed sometimes it brings sort of a sassy attitude.

You can tune the quoteunquote personality of it a little bit, but like it brings a little bit of a personality to tasks that you might not want it to bring a personality to.

So, I think that's problem one.

Problem two, call it a problem or not a problem, is it is actually pretty quick to call a tool.

And so what I found is especially 51 um auto or instant where it's like thinking right or it's not doing thinking or it's thinking very fast, it will just go right into the task.

And usually I like a loop or two of questions or feedback.

So that can be a matter of tuning both the model and the reasoning effort in these models.

But right now we're just going to do auto.

I don't think this needs to think very hard about rearranging this text.

and we're going to paste in this recipe.

So, I'm going to say here is a recipe. Please format it into a different structure.

And then I'm actually going to go back to my app and remind myself of what I need.

I need a title, description, prep time, servings, ingredients, and instructions.

But I want the instructions to follow a specific format.

So, I'm going to say title, description, cook time, ingredients, servings, and instructions. For instructions, I want them clearly in steps. Step one, step two, etc. And I want to make sure both the ingredients and the measurements are in line. So I do not have to go back and reference the ingredients list ingredients list.

Okay.

So I pasted that recipe in.

I gave a very specific format that I wanted to do.

If I was being really clever, I would probably create a custom GPT with these instructions for translating ingredients.

If I was being very, very clever, I would go into my Lovable app and I would make an open AI call to auto translate and update these ingredients.

So again, you can just imagine how this would kind of evolve over time if you really wanted to spend a lot of serious time on recipe generation or improving things.

And again, this is just like quality of life that I think is so fabulous.

So, let it it's decided it needs to think a little bit.

We have the blinking dot.

So, we'll come back as soon as this recipe is generated.

While we're sitting here, I will make one comment about 51 that I've heard from a couple people that have spent a little bit of time comparing this to other models, which it thinks longer.

It is a little bit maybe a lot bit slower than five.

So again, think about your use case.

I kind of feel like this is frozen.

It's stressing me out.

So I'm going to go ahead and stop.

I'm going to see if I can try this again in a faster model.

So let's just paste the same prompt.

Let's change it to instant right away.

Let's submit it again.

One of my favorite prompting tricks, which is just bail and restart.

All right, here you go.

fully reformatted, clean structured with measurements embedded directly into each step so you never have to jump back to the ingredients.

So, it got my user story perfectly.

And look at this.

So, for if you have a seven-year-old and you need to tell them to follow a recipe step by step, this is what we need.

Bring six cups of water and two teaspoons salt to boil.

Not water and salt, the exact amount.

Bring in two cups of palenta.

So again, this is just such a nice flow for reorganizing information for your brain that will allow you to be a little bit more efficient when cooking a giant meal on Thanksgiving.

And let me just give you a couple ideas.

I copied and pasted from a online um website recipe.

You could pull out your recipe book, take a picture of the recipe, kind of like snap the few pages, upload those to ChatGpt. really reorder reorder this.

And what I'm going to do is I'm actually just going to add this over in our app.

So, I'm going to go side by side.

We'll go over to our app.

We'll add it in and we will get you out of here to enjoy and prep your own Thanksgiving app and your own Thanksgiving meal.

So, let's see how easy this is to pull over.

I'm going to put my title.

It gave me a nice description.

Prep time is about an hour.

Servings 8 to 10.

Ingredients.

Here it goes. Look at this lovely thing.

And my instructions, which are these beautiful steps, which I love.

And again, I will share this recipe. It is so good.

And so now I have this beautiful palenta and sausage stuffing recipe with instructions.

formatting needs to get a little bit better.

And I can take this and share this with friends.

We can all share our favorite recipes with friends.

We can all share what the ingredients are.

So, if somebody has a dietary restriction, they can know exactly what it is.

And my kid can follow the instructions directly.

I do have to promote one thing, not a paid sponsor, but um my kid actually two years ago and I made this website, Runaway Pancakes.

It is easy recipes for their kid and adult helper helpers.

We basically productized this flow and we put a bunch of kidfriendly recipes up here, including his favorites.

So, if you're looking for step-by-step, very kid-friendly recipes and instructions with pretty creepy but high quality midjourney generated images, no, we did not actually cook this salmon. Then you can go to runaway pancakes.com.

and uh we also have some great coloring pages.

So, please let me know if you want me to add any of your favorite recipes to that site.

So that was our very special pre-Thanksgiving how I AI episode on vibe coding your own personal party hub using lovable.

where I shared my personal tips and tricks for upleveling the design of your sites using things like free Google fonts and midjourney style references.

We went through how you can add custom features that would never exist in an invite or party app directly to your app in Lovable.

I showed how it's actually sometimes not perfect a debugging style issues.

We'll go and fix these after afterwards and I'll publish the site.

And then I shared my personal favorite way to translate recipes to make them easier to cook, especially when you're cooking for a big group.

I am so thankful for all of our viewers and listeners.

In case you missed it, we have just recently hit 50,000 subscribers on YouTube in just our first 6 months.

This has been such a fun journey and I am looking forward to more holiday ending in AI how I AI episodes where I can share more tips and tricks like this for you.

Thanks everyone.

Thanks so much for watching.

If you enjoyed this show, please like and subscribe here on YouTube or even better, leave us a comment with your thoughts.

You can also find this podcast on Apple Podcasts, Spotify, or your favorite podcast app.

Please consider leaving us a rating and review which will help others find the show.

You can see all our episodes and learn more about the show at howiipod.com.

See you next time.