Engineering @ Webflow Webflow Ex-Upwork, OpenTable, eBay. Side projects at thearea42.com πŸš€

Marshmallow

Voice-first game creation for kids

TL;DR: Marshmallow is an iPad app where kids (ages 5-10) describe a game idea via voice and watch AI generate a playable HTML5 game. β†’ Sign up for early TestFlight access


I wanted to build something our daughter could actually use. As she grows up, she’s getting more curious and is learning to articulate her thoughts clearly. The goal was to help her practice that. The app ended up being about games, which is kind of funβ€”though sometimes she spends more time playing than articulating, and that’s okay. She’s a kid ;)

The fun part is the no-keyboard input, which is also becoming a common pattern for me where I’m typing less and speaking more to my laptop or phone. While that’s a constraint while building an app, it’s also a big enabler and makes it very easy to use for kids. Kids in this age range can’t really type, so everything had to be voice-first. Turns out that forces you to think differently about the whole UXβ€”big tap targets, simple flows, and an AI that can handle messy transcriptions. I still don’t think it’s perfect, but getting it out there was an important goal.

Watching our 6-year-old describe “a game where dinosaurs eat pizza” and then play it 30 seconds later was pretty magical.

That’s Marshmallow.

Marshmallow mascot

#How It Works

Kid opens the app, describes a game idea via voice, and watches it come to life. You will notice in the third step, the sentence is perfectly formed. That’s not how a 6-year-old articulates. They can articulate in their own way. And there is a step in the agent workflow which improves the prompt. Think of it as a plan stage in Claude code.

Getting started
Getting started
Voice input
Describe your idea
Planning phase
AI plans
Build phase
Code streams in
Playing the game
Play!
Game over
Game over

If something breaks, there’s a fix button on top right, that auto-repairs the game.

#The Stack

  • SwiftUI for the iPad shell
  • Claude Sonnet 4.5 for code generation: I should probably switch to Opus.
  • LangGraph-Swift for an agentic workflow (analyze β†’ build β†’ validate β†’ fix)
  • WKWebView to render the generated games
  • Speech Framework for voice input

#The Agent Workflow

The agentic part was fun to build. It’s not just “prompt β†’ code.” I used LangGraph-Swift to create a multi-step workflow that mirrors how you’d manually iterate on generated code:

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”     β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”     β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”     β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  analyze  β”‚ ──► β”‚  build  β”‚ ──► β”‚ validate β”‚ ──► β”‚ metadata β”‚ ──► END
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜     β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜     β””β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”˜     β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                                       β”‚                 β–²
                                       β”‚ failed          β”‚ valid OR
                                       β–Ό                 β”‚ attempts >= 2
                                   β”Œβ”€β”€β”€β”€β”€β”€β”€β”             β”‚
                                   β”‚  fix  β”‚β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                                   β””β”€β”€β”€β”€β”€β”€β”€β”˜

Each node does one thing:

NodeWhat it does
analyzeDetermines game vs utility, extracts features, refines the messy voice transcription into something coherent
buildCalls Claude to generate the HTML/CSS/JS code (streaming, so kids see "magic characters" appearing)
validateChecks HTML structure, script tags, event handlers, closing tagsβ€”basic sanity checks
fixIf validation fails badly (confidence < 0.3), regenerates simpler. Otherwise patches the existing code
metadataGenerates title, summary, and emoji for the saved app

What kids say at age 5-6 is not always coherent. “Make a game with dinosaurs and pizza and they fly and also there’s a rainbow” needs cleanup before hitting the code generation prompt. The analyze step handles thatβ€”similar to Claude Code’s plan mode.

Also, the conditional edge after validation handles retries, which was an interesting addition I had to do after some broken generations. This might be less relevant with newer models like Opus. There are two fix attempts max, then we proceed anyway. Most games work on the first try, but the retry loop catches edge cases where Claude generates malformed HTML or forgets to close a script tag.

try workflow.addConditionalEdge(
    sourceId: "validate",
    condition: { state in
        if state.validationResult?.isValid == true {
            return "metadata"  // success path
        }
        return state.attemptCount < 2 ? "fix" : "metadata"  // retry or give up
    },
    edgeMapping: ["metadata": "generate_metadata", "fix": "fix"]
)

The agent uses a system prompt to guide Claude toward generating kid-friendly games. Some key directives:

Design Philosophy:
- Calm, beautiful interface for children ages 5-10
- Soft pastels preferred (#806699 purple, #f3d9e6 pink)
- System fonts only (no web fonts needed)
- No neon colors, no harsh contrasts

This way, the AI knows to keep things visually gentle and technically simple.




Not open source yet, but maybe someday. For now, it’s just a fun side project that actually gets used at home. If you are interested, feel free to share your email here.