CHAPTERS
- 0:04 – 0:34
Building a personalized Thanksgiving party hub in Lovable (goal, features, why Lovable)
Claire introduces the concept: a “party hub” web app to manage a Thanksgiving gathering end-to-end. She explains why she chose Lovable for this demo and outlines the core features she wants: invites/guests, potluck dishes, recipes, and photos.
- •Goal: vibe-code a party hub for an upcoming dinner party
- •Core modules: dashboard, guest list, dish coordination, recipe sharing, photo gallery
- •Why Lovable: tends to produce more human, colorful design than other vibe-coding tools
- •Framing: a practical personal project plus design/taste-building exercise
- 0:34 – 1:35
Sponsor: WorkOS and why enterprise apps need secure access controls
A sponsored segment explaining the enterprise requirements that AI apps quickly run into. Claire summarizes how WorkOS provides drop-in building blocks for authentication, access controls, and audit logs to meet IT scrutiny.
- •AI tools need deep access to internal systems to be useful
- •Enterprise buyers require strong security posture (auth, access controls, audit logs)
- •Building enterprise features from scratch is costly and slow
- •WorkOS offers APIs to accelerate enterprise readiness
- 1:35 – 5:07
Assessing Lovable’s V1 output: what’s working and what looks like “vibe coding slop”
Claire reviews the first generated version of the Thanksgiving hub and calls out shortcomings. She uses the initial critique to motivate a step-by-step approach to improving design instead of trying to fix everything at once.
- •Lovable generates an autumn palette and requested sections/features
- •Issues: boring/unreadable hero image, navigation layout problems, weak visual hierarchy
- •Design strategy: iterate incrementally rather than giving a huge list of complaints
- •Theme: making prototypes feel “artisanally crafted” rather than generic
- 5:07 – 7:09
Upleveling typography with Google Font pairings (Homemade Apple + Raleway)
Typography becomes the first major design upgrade. Claire shows how to pick proven Google Font combinations (using a Canva resource) and prompt Lovable to apply them across headlines and body text.
- •Tip: search “Google Font combinations” to find designer-approved pairings
- •Chooses Homemade Apple for headlines and Raleway for body to create a cozy recipe-card vibe
- •Lovable integrates easily with Google Fonts via prompting
- •Immediate visual improvement even before other layout changes
- 7:09 – 8:41
Peek under the hood: how Lovable wires fonts into Tailwind and CSS
Claire briefly inspects the updated project files to show what changed. The segment emphasizes learning by reading generated code—Google Fonts import, Tailwind config updates, and default CSS settings.
- •Lovable pulls in Google Fonts via API/import
- •Tailwind config updated to include the new font families
- •Headlines/body mapped to the chosen fonts in CSS
- •Learning benefit: understand practical implementation details from generated diffs
- 8:41 – 11:14
Creating a custom hero/header image with Midjourney style references
Claire moves from fonts to imagery, replacing the bland hero with a custom Midjourney aesthetic. She explains how she finds style reference codes on X and uses them to produce a whimsical, textured storybook look.
- •Motivation: current header image is hard to read and feels generic
- •Midjourney workflow: find style references/parameter strings shared by the community
- •Chooses a “whimsy textured storybook/paper cut-out” style reference
- •Generates an autumn harvest-table image aligned with the app’s vibe
- 11:14 – 12:44
Fixing aspect ratio problems in Midjourney (reusing prompts + parameters)
The first Midjourney result is the wrong shape (square), so Claire adjusts generation settings. She demonstrates reusing the prompt and removing hard-coded aspect ratio so the image fits a wide website hero.
- •Common issue: good image, wrong dimensions for the UI
- •Use “Use prompt” to reuse successful prompts quickly
- •Remove conflicting aspect ratio tokens and set a wide ratio (e.g., 2:1)
- •Result: a wide, hero-ready image that matches the desired aesthetic
- 12:44 – 14:46
Personalizing the app header: replacing the image and updating event copy
Claire uploads the selected Midjourney image into Lovable and requests copy changes. The hub becomes “Claire’s Thanksgiving Feast,” shifting from generic template language to a personal host-oriented experience.
- •Upload the wide Midjourney hero as the background
- •Rename and personalize: “Claire’s Thanksgiving Feast”
- •Ask for more personalized header copy for Claire hosting at home
- •Principle: small targeted iterations produce better outcomes than broad refactors
- 14:46 – 17:18
Incremental design debugging: clipped text, emoji mishap, and when to move on
Claire tries to fix a clipped headline and swap icons, then runs into imperfect results. She highlights a realistic limitation of vibe-coding tools: sometimes the fastest path is manual editing or postponing pixel-perfect tweaks.
- •Bug: headline text clipping in the hero area
- •Prompted fix + request for pumpkin/leaf icons leads to an unintended jack-o’-lantern vibe
- •Attempts quick file-level tweak; acknowledges it’s not perfect
- •Takeaway: know when to stop polishing and keep building
- 17:18 – 18:49
Nav spacing still broken: knowing when to edit code directly
Another design issue (navbar spacing and button contrast) doesn’t resolve through prompting. Claire notes that in a real project she’d inspect and adjust the code, but continues since the app is “good enough” for the demo.
- •Prompted: fix nav spacing and darken buttons
- •Result: issue persists—vibe coding isn’t guaranteed to patch layout bugs
- •Practical approach: read/modify code manually if it matters
- •Progress over perfection: keep moving to functional features
- 18:49 – 20:50
Adding dietary restrictions to the guest list (multi-select UX + prompting specificity)
Claire upgrades the guest list to capture dietary needs, using a multi-select of common restrictions. She explains that giving UI/UX-specific instructions (like “multi-select”) leads to better feature implementation from the tool.
- •Feature need: capture guests’ dietary preferences/restrictions (vegan, gluten-free, dairy-free, etc.)
- •Prompting tip: specify UI control type (multi-select) to avoid ambiguous implementations
- •Lovable generates common options and supports multiple selections
- •Real-world value: reduces hosting chaos and accommodates diverse diets
- 20:50 – 23:22
Mapping dietary tags to dishes: allergen labeling and smarter coordination
Claire extends dietary data into the dish coordinator by adding tags/allergen labels. She describes how richer data modeling can unlock more advanced reports (coverage by course or by restriction) without heavy engineering effort.
- •Request: add dietary/allergen tags to dishes, mapping from guest restriction set
- •Lovable creates a simple one-to-one tag mapping (vegan, gluten-free, dairy-free, etc.)
- •Example: label dishes (e.g., vegetarian + gluten-free) for quick scanning
- •Future ideas: who can eat what, coverage dashboards for courses and restrictions
- 23:22 – 25:53
AI recipe reformatting for real cooking: embed measurements into each step
Claire shows her favorite practical AI cooking trick: restructure recipes so each instruction includes the exact quantities, eliminating constant scrolling between ingredients and steps. She demonstrates the workflow using a polenta-and-sausage stuffing recipe.
- •Problem: online recipes separate ingredient list from steps; messy when cooking with kids
- •Solution: use ChatGPT to rewrite steps with measurements embedded inline
- •Demonstrates with a favorite gluten-free stuffing recipe
- •Outcome: kid-friendly, step-by-step instructions that are easier to execute
- 25:53 – 30:58
Thoughts on ChatGPT 5.1 + “bail and restart” prompting for speed
Claire shares practical observations about ChatGPT 5.1’s personality and behavior, including its tendency to jump straight into tasks. When generation feels slow, she switches modes and re-runs the prompt—her simple reliability hack.
- •5.1: improved personality vs. 5, sometimes overly “cute/sassy”
- •Often starts executing immediately; may reduce clarifying question loops
- •Noted: can feel slower/longer-thinking than 5 in some comparisons
- •Tactic: stop, switch to faster/instant mode, and resubmit (“bail and restart”)
- 30:58 – 34:28
Final implementation: adding the reformatted recipe, sharing ideas, and wrap-up
Claire pastes the reformatted recipe into the Lovable app and explains how the hub can be used to share recipes with friends while accommodating dietary needs. She also plugs her kid-friendly recipe site and closes with episode takeaways and audience thanks.
- •Copy structured recipe fields into the app (title, description, prep time, servings, ingredients, steps)
- •App value: share recipes + transparency for dietary restrictions
- •RunawayPancakes.com: productized kid-friendly step-by-step recipe flow
- •Wrap-up: design upgrades (fonts/images), custom features, and realistic tool limitations
