Vibe-coding a kid-friendly AI fortune teller for your Halloween festivities | Marco Casalaina (Microsoft VP)

In this impromptu Halloween special, Marco Casalaina (VP of Products for Core AI at Microsoft) demonstrates how he uses GitHub Spark to quickly build a mobile app that generates kid-friendly fortunes for trick-or-treaters. — Where to find Marco Casalaina: LinkedIn: https://www.linkedin.com/in/marcocasalaina/ X: https://x.com/amrcn_werewolf?lang=en — 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) Intro (00:40) Marco’s Halloween fortune teller tradition (02:54) Using GitHub Spark to create a fortune teller app (04:32) Using Spec Kit for scoping out complex feature specs (06:53) Making fortunes more concrete and kid-friendly (10:20) Closing thoughts — Tools referenced: • GitHub Spark: https://github.com/features/spark • SpecKit: https://github.com/github/spec-kit • GitHub Copilot: https://github.com/features/copilot • Cursor: https://cursor.com/ • Claude Code: https://www.claude.com/product/claude-code — Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email [email protected].

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Claire Vo?

  Welcome to a spooky and unplanned Halloween edition of How I AI. I'm Clairvo, product leader and AI obsessive. Here on a mission to help you use LLMs to do spooky stuff for your kids. Today, we had a haunted episode recording that we couldn't get to work. So instead of our regular scheduled programming, we did a quick Halloween vibe code that I think some of you parents out there will be inspired by. If you have other Halloween vibe codes, please share them with us in the comments and enjoy this very short episode of How I AI Halloween Edition.

• 0:40Claire Vo?

  Marco, we may, we may not be able to do our podcast today. We are haunted by expired, expired corporate credit cards, but you have a Halloween-based AI use case we're going to talk about instead, just for a few minutes before we reschedule.

• 0:57Speaker 01

  I do, and maybe I'll kind of do it live on the fly here. And so why don't we, why don't we not just talk about it? Why don't we actually do it? So I'm dressed as Captain Picard right now, as I do every year, dressed as Captain Picard. I mean, it naturally fits with my, you know, brand and stuff like that. Of course, I am a huge Star Trek fan. I'm in the middle of Strange New Worlds right now, season four.

• 1:20Speaker 01

  But by night, at least for Halloween, I do something a little bit different. I am the block fortune teller. So this is the Halloween party block that I live on here in Piedmont, California. And so we will block off the street and all of our neighbors do crazy stuff. And so, you know, my neighbor across the street is going to have all this projection stuff going on. And they have like fire coming out of something. And but what I do, well, I am a fortune teller. So traditionally,

• 1:51Speaker 01

  What I have done for the past few years is that I have pre-created fortunes. So I set up this table and on this table, I have a crystal ball. And the crystal ball glows and stuff like that. It's not a high-tech crystal ball. It has nothing but a couple of LED lights in it. But the kids come up and there's lots of kids in town, you know, hundreds of them really, come up and they will get their fortunes from this thing. Now, in reality, what I did was I, in the past, had pre-created these fortunes. So I make a list of them with GPT-3 and then GPT-4. And I store them in a note on my phone and I kind of keep it between my legs under the table. And I'll kind of pick one at random. So when a kid comes up, I'll pick this one and I make that kind of kid-friendly fortunes.

• 2:32Speaker 01

  Now, this year, I was thinking about doing this and since we're talking, I'm going to do this live now. I'm going to actually do this live. I'm going to let me give you.

• 2:40Claire Vo?

  Are you going to read my fortune?

• 2:43Speaker 01

  We're going to, we're going to make a fortune for you, yeah. So I think that for this, now, there's lots of tools that I can use to do this. I can use Lovable, I can use Bolt, I can use B0. I'm going to use GitHub Spark for this one.

• 2:54Claire Vo?

  Was not expecting a GitHub Spark today on Halloween, so this is exciting for me.

• 2:59Speaker 01

  How about that? Okay, so I'm going to say, "Make a mobile app which, when I click a button, generates a new fortune in the context of a fortune teller." Okay, I don't think I need to tell it much more than that. It's probably going to kind of work on the first try. Well, we'll see. Let's see what this does. Now, you know, in other circumstances, I have sometimes given it like a list of things to scroll between. You might have seen on the screen that earlier I had a chemistry ion flashcards app. My daughter is in honors chemistry and she was at the time studying polyatomic ions,

• 3:43Speaker 01

  chlorate, perchlorate, you know, sulfate, stuff like that. And she needed to memorize the name to the, the formula of these polyatomic ions. And so I made a flashcards app with this thing, which actually worked really well. I mean, I just gave it basically the list of the polyatomic ions and it totally fricking did it in this kind of flashcard interface that worked on the phone. And so that was pretty nice. That's kind of one of the reasons why I decided to go with GitHub Spark for this one is because I know that kind of worked for me before. And in a way, you could look at this as kind of being a flashcard app too. It's going to kind of make these flashcards the fortunes, I guess.

• 4:19Claire Vo?

  Oh my gosh. Well, I have a block party tomorrow, so I might steal your idea.

• 4:26Speaker 01

  You could do this.

• 4:27Claire Vo?

  Excited about it.

• 4:28Speaker 01

  You pass for a fortune teller as well, you know?

• 4:31Claire Vo?

  Yeah. Oh, my gosh. Okay, so this is gonna, oh, it made a PRD. That's, you know, I love to see it.

• 4:37Speaker 01

  Let's see, can we see it? Let's see if we can see what it's doing while it's doing it. Oh, it does. Okay. So wow, it's really, it's going fast and furious over here. So it's, it's totally writing this PRD over here and now it's, it's made a page. Index, so it's starting to make the actual HTML. So it's, it's gonna write this in HTML. And, you know, this is, this is common and now it's got some CSS, so it's gonna style the page. But I mean, this is, this is vibe coding or anyway, front end vibe coding as we do it today. Now, in reality, though, I mean, when I'm doing real vibe coding projects, and while this thing is working, since I actually already have this on my screen, I'm gonna bust this out over here. Now, if I'm doing a real project, like a serious project, not just a little fortune teller app,

• 5:21Speaker 01

  nowadays, I will 100% use SpecKit. I absolutely do use SpecKit. In fact, it so happens, I was earlier today working on just such a project. So I am, by the way, I'm VP of Products of Core AI at Microsoft. However, I do come from an engineering background and I still code pretty much every day something. So I'm working on this project and in this project, where I did use SpecKit. So here, like, this is a full feature specification that I'm working on. I have this whole agent thing that I'm, I'm working on. And I am adding this ability to give user feedback. So this agent will like, fill out a questionnaire for me. And that's cool, but I want to be able to pick a, a cell, a question and be like, no, no, you did that wrong, fix it.

• 6:03Speaker 01

  And then the agent should just wake up and do it. When you use SpecKit, and so like, this is the proper way to write a spec. When you use SpecKit, it does this stuff over here. So you see what it's gonna do. It throws these questions at me. So it's like, wait a minute, how long should the feedback be? What if the user gives you like a ton of feedback, then what do I do? And it, it'll lob all of these questions at me while it does this. So SpecKit is cool. It's totally free. It works with like, I'm, in this case, I'm using it with GitHub Copilot, but it works with ThoughtCode and it works with Cursor and all these other things. So that is super cool. I love it. It helps you write a better spec.

• 6:39Claire Vo?

  Oh, look at this.

• 6:41Speaker 01

  My app is here. Okay, tap to reveal your fortune, the cosmos.

• 6:45Claire Vo?

  Okay, I'm very excited about this.

• 6:49Speaker 01

  Wow, okay, that's a little bit too.

• 6:53Claire Vo?

  Let me, let me read this for people that are not on video. In the tapestry of the cosmos, the stars weave a path illuminated by your dreams. Trust in their guiding light. Now, what I like about this is it is completely ambiguous and means nothing. Excellent, excellent fortune, but I bet you want it to be a little more fun and kid friendly for your case.

• 7:14Speaker 01

  And so over here on the left hand side, you can see that I'm saying make each fortune only one sentence and make it kid friendly. So now I'm going to kind of prompt my way towards doing something and it's starting to generate again. So. I mean, I mean, you gotta admit though, I mean, it's pretty freaking good on the first try.

• 7:29Claire Vo?

  Really good. You know what? I haven't seen this GitHub spark. Uh, done live, but the design is actually really cute. So, so often in these vibe coding tools, you get these incredibly boring. Designs, but that is actually quite, quite lovely. Okay.

• 7:48Speaker 01

  All right, let's see. It's done. It says it's done. So here we go. Let's see what happens.

• 7:53Claire Vo?

  Oracle, what is my fortune?

• 7:55Speaker 01

  When you sprinkle kindness like fairy dust, the whole world transforms into a playground of magical adventures and shimmering smiles.

• 8:03Claire Vo?

  That's it is. That is lovely and kid friendly.

• 8:06Speaker 01

  Still maybe a little bit on the big words there. I mean.

• 8:09Claire Vo?

  And on the abstract side.

• 8:11Speaker 01

  Yeah, on the abstract side. I mean, uh, let's see. Make the fortunes a little more concrete.

• 8:17Claire Vo?

  And, and let's make them a little more fun.

• 8:20Speaker 01

  And maybe a little more humorous.

• 8:23Claire Vo?

  Yeah.

• 8:25Speaker 01

  Try not to use such big words. I mean, a lot of times like the kids that'll come up to my fortune telling booth, they'll be like, you know, two or three years old, you know?

• 8:34Claire Vo?

  Yeah.

• 8:35Speaker 01

  And for them, sometimes I'll like not even use my little app thing and I'll be like. You're gonna try a new food today and it's gonna be yummy.

• 8:46Speaker 01

  And their parents will be like, thank you.

• 8:49Claire Vo?

  Your candy in your Halloween bag will multiply.

• 8:52Speaker 01

  But I mean, you know, Piedmont is a small town and I actually know a lot of these parents and stuff like that. It's like they come back at me later and they're like, you told my kid this fortune. Like I told one kid a fortune once and it was like, you're gonna make a new friend today. Which actually did come from my, my, the previous version of this generation. And she said, he was talking about it for the whole next day. She was like, the fortune teller said, I'm gonna make a friend today. Like, this is gonna be cool.

• 9:17Claire Vo?

  Well, your kid's 15. Should I tell her she's gonna get a car in her future?

• 9:23Speaker 01

  Now, okay, now, now we're going off the rails here. Okay, here we go. You ready? Here's your, this is, this one's for you, Claire. Okay, ready? This week, you will find a shiny rock that looks like a slice of pizza and makes everyone giggle when you.

• 9:35Claire Vo?

  I do like that. That would entertain my six-year-old.

• 9:38Speaker 01

  I mean, that is very concrete, for sure. And now, you know, your six-year-old, yeah, would totally be looking for, oh, where's that rock that looks like the slice of pizza? I'm gonna find it.

• 9:46Claire Vo?

  Exactly right. Okay, I, one more, let's see.

• 9:50Speaker 01

  One more. This week, we, okay, again with the rock. And maybe it's going a little over much on the rocks here. You know, Trevor, a rock that looks like a cupcake. Sprinkles of that. I mean, this is why you gotta like integration test these things. Are these all rocks? Oh, no. Today, a fluffy squirrel will steal your snack, but then share a secret about the best hiding spots in the park. Okay.

• 10:12Claire Vo?

  I'm surprised the squirrel is not sharing the secret about the best rocks in the park.

• 10:17Speaker 01

  So, I mean, that maybe.

• 10:21Claire Vo?

  You got it. Okay, I, um, you know, it's, it's Halloween. It's almost 11 a.m. I've got, my block party's tomorrow, so we're blocking off the street. We're doing a post Halloween. Everybody bring your candy so you can give it all more away, party. And I'm gonna do this. I'm gonna hook it up to voice.

• 10:40Speaker 01

  Sweet.

• 10:42Claire Vo?

  Give it like a spooky fortune teller voice and, uh, set it up out front. Well, Marco, despite our haunted.

• 10:51Claire Vo?

  Podcast episode, we will get you back on to actually talk about Spectrum and Development, but thank you for doing our first and maybe an annual tradition of our Halloween AI, how I AI episode. Thank you for showing this off.

• 11:07Speaker 01

  Every year we'll have like different elements to Halloween every year.

• 11:11Claire Vo?

  Well, we'll get you back on on the pod soon. And I think I'm gonna, I'm gonna go cut this and share it.

• 11:18Claire Vo?

  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 I A I pod.com. See you next time.