How I AI - “Farm-to-table software”: How I built a Thanksgiving party hub using Lovable for managing invites, dishes, shared recipes, and photos

Episode Date: November 19, 2025

In today’s pre-Thanksgiving episode, I walk you through how I vibe coded my very own “Thanksgiving party hub” using Lovable—and how I transformed it from AI-generated slop into something warm, personal, and genuinely useful. I show you exactly how I upleveled the typography, visuals, and structure using Google Fonts and Midjourney style references, and then I share one of my favorite real-life AI hacks: how to turn any messy online recipe into a clean, step-by-step, kid-friendly version that’s actually usable while you’re cooking. This is a cozy, practical walkthrough of my real design process—the little tricks I use to make AI-built apps feel handcrafted instead of generic.What you’ll learn:How to build a fully functional Thanksgiving party hub in Lovable—guests, dishes, recipes, and photosHow I uplevel AI-generated designs using Google Fonts and TailwindHow to use Midjourney style references to create custom images that match your aestheticHow to add custom features to vibe-coded apps, like dietary preferences and allergen tagsHow to iterate on layouts inside Lovable using screenshots and small, targeted promptsHow I use ChatGPT to restructure recipes so the measurements are embedded directly in each stepHow to make recipes kid-friendly and easier to follow using a simple formatting prompt—Brought to you by:WorkOS—Make your app enterprise-ready today—Where to find Claire Vo:ChatPRD: https://www.chatprd.ai/Website: https://clairevo.com/LinkedIn: https://www.linkedin.com/in/clairevo/X: https://x.com/clairevo—In this episode, we cover:(00:00) Introduction to the Thanksgiving party hub concept(02:20) Starting a project in Lovable and initial design assessment(04:59) Upleveling typography with Google Font combinations(08:36) Creating custom header images with Midjourney(11:39) Adjusting aspect ratios for Midjourney images(14:22) Fixing design issues incrementally(18:52) Adding dietary-restriction functionality(23:36) AI recipe reformatting for easier cooking(26:02) Thoughts on ChatGPT 5.1(30:51) Final implementation and recipe sharing—Tools referenced:• Lovable: https://lovable.dev/• Midjourney: https://www.midjourney.com/• Google Fonts: https://fonts.google.com/• ChatGPT: https://chat.openai.com/• Canva Font Combinations: https://www.canva.com/font-combinations/—Other references:• Polenta and Sausage Stuffing Recipe: https://www.epicurious.com/recipes/food/views/polenta-and-sausage-stuffing-233030 • Runaway Pancakes (kid-friendly recipe site): https://runawaypancakes.com/—Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email [e-mail].

Welcome back to How IAI. I'm Clarevow, 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 IAI, 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 vibe coded app using Google fonts and mid-journey. and then I share my personal favorite trick for using ChatGPT to make recipes easier to make. Let's get to it. This episode is brought to you by WorkOS. AI has already changed how we work. Tools are helping teams write better code, analyze customer data, and even handle support tickets automatically.

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 code base. 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 WorkOS comes in. WorkOS gives you drop-in APIs for enterprise features, so your app can become Enterprise Ready and scale upmarket faster. Think of it like Stripe for Enterprise features. Open AI, perplexity, and cursor are already using Work OS to move faster and meet enterprise demands. Join them and hundreds of other industry leaders at WorkOS.com. Start building today. With Thanksgiving just a week away, I thought I would use the idea of a Thanksgiving party

hub vibe-coded in lovable as a way to show you a couple of and tricks on how to uplevel your prototypes and vibe coded 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 love? 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. 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, discoordination, 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 up level 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. It's got a pretty boring stock photo in the background. You can't really read it. There's some layout issues in the navigation here. You can see this is budding 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 up-level 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, V-0, replet, et cetera, 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-level 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 resources 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 SaaS app to more fun 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. It would go back to lovable and say, okay, let's uplevel the design starting with typography. I want, I can't type today. I want to use. I want to use Google fonts, homemade apple for the headlines and railway for the body font. So Loveable 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

using those two fonts that we identified. So I'm excited to see what it comes up with. 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 default in the tailwind, which is our CSS kind of, a framework, 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 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 mid-Journey. So I don't love this stock photo at the top of leaves and a plate, or maybe it's not a stock photo, maybe it's an AI generated photo, but I still don't, I still don't like it. And I want to generate something more fun. And when I am working in

Mid-Journey, which is an AI photo-generating 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 mid-jurney 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 while researching this episode was this one by Michael Roboam, which is this like whimsy textured storybook paint, kind of like

paper cut out 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 a couple other parameters like aspect ratio stylized parameter and what version of the mid journey 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 copied the prompt almost exactly, except I changed it to say geometric paper autumnal 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 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. hard-coded aspect ratio 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.

Mid Journey has gotten super fast. 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 Mid Journey to generate images for specific instances is you can really tune the 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 tuscan a little tuscan 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 Mid Journey. 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 beautiful, something much much more well-designed, something that really feels like, you know, artisanally 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, 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 than what we had before. It's so pretty. It feels much more cozy. It feels like honestly just, well, much better design. But we have this image problem 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, and take a screenshot and say the headline text is being clipped. 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 a bumpkin, 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 tip for the ladies out there and I realize I'm not on my paid lovable plan, 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 this. a text clipping and replace the icon with pumpkin and leaf emot-oh. Look at that. It's a little, it's a little Halloween, so we might remove that pumpkin. But hopefully it'll fix the text clipping on the image and add proper spacing, which is what we want. And what I like about this is, is I thought the pumpkin emoji. I forgot that the pumpkin emoji is by default a jack-o lantern. We are past Halloween. Now, if you haven't missed it, go back to our Hawaii AI episode on a Halloween

Fortune Teller app that was generated. But, you know, this is a little silly. So I am going to 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.

for right now but the last thing I do want to fix is this headline header nav I think it's just a little funky looking and so again I'm just going here I took a screenshot of it I'm going to say the spacing at the bottom of the snap bar is a bit broken please fix and 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 you 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 little custom features that might not be in your standard invitation app here

and lovable. So I'm going to ask one more thing. Functionality-wise, 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 plight. 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 multi-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 people, I want lovable to come up with a list for me. So if I go to guest list, now I can select my dietary restrictions and select multiple ones here. Love it. Let's see if I can cover my husband. So we got gluten-free, dairy-free. Perfect. And then my mother-in-law's

vegan. So we got 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 their dish or 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 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 dairy-free and an ingredient saying this contains dairy. so it's not good for dairy-free or it is safe for dairy-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 dairy free, market dairy free. If it's vegan, market vegan. If it's gluten free, market 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 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 can 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 hungry when he's at at Thanksgiving. Thanksgiving this year. But again, we're not going to show that. Is this 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 narrative structure, the kind of novel that goes before any online recipe. Let's say we get past that. It usually has a list of ingredients and measurement. 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 eight tablespoons of butter and one cup of chocolate chips, et cetera, et cetera. 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 polenta and sausage stuffing.

It's made of polenta, so it's corn, it's gluten-free. you put sausage in it you blend half of it it's like chunky creamy crispy on the top it is so delicious it's my favorite thing to make 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 ingredient measurements are 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 ChatGBT the link. I'm going to use 5-1, which came out last week. We didn't do an episode specifically on 5-1. Here's my general vibe on 5-1. It's got a better personality

than 5, for sure. It's got a little bit more of that 4-0 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 quote unquote personality of it a little bit. But like it brings a little bit of a personality to test 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 5-1 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 five one 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 if you have a 7-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 teapoon salt to boil. Not water and salt.

the exact amount. Bring in two cups of polenta. 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 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 chat GPT, 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 polenta and sausage stuffing recipe with instructions, formatting these 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 helpers. We basically productized this flow. And we put a bunch of kid-friendly recipes up here, including his favorites.

So if you're looking for a step-by-step, very kid-friendly recipes and instructions with pretty creepy but high-quality mid-journey generated images. No, we did not actually cook this. salmon, then you can go to runaway pancakes.com. And 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 IAI episode on vibe coding your own personal party hub using lovable, where I shared my personal tips and tricks for up leveling the design of your sites using things like free Google fonts and mid-jurney 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 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 six 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 how iaiiipod.com see you next time