AI Engineering: Advent of AI with goose Day 2

Building a Magical Choose-Your-Own-Adventure with AI (Goose Desktop)

How I used Goose's Developer Extension to build an interactive winter wonderland story with glassmorphic snowflakes, neumorphism cards, and a baby polar bear with candy cane designs.

Day 2: The Storyteller's Booth 📖✨

The Challenge Escalates

The Winter Festival's storyteller got laryngitis (classic winter timing), and they needed an interactive choose-your-own-adventure web app. Not just any app - it needed branching paths, multiple endings, and that magical winter aesthetic.

Level Up: Goose Desktop + Developer Extension

While Day 1 was all about CLI prompts, Day 2 introduced me to Goose Desktop with the Developer Extension. This is where things got REALLY interesting.

The Developer Extension gives Goose superpowers:

• 📝 text_editor - Create, view, and edit files
• 🖥️ shell - Execute terminal commands
• 🔍 analyze - Understand code structure
• 📸 screen_capture - Visual debugging
• 🖼️ image_processor - Work with images

Basically, Goose can now actually build things for you.

What I Built

A fully interactive Snowy Wonderland Adventure featuring:

🏠 The Gingerbread House

• CSS-drawn architecture with snow-topped roof
• Glowing windows showing a fireplace inside
• Animated floating effect
• Click interactions with sparkle effects

🐻‍❄️ Snowball the Baby Polar Bear

• Completely CSS-drawn (no images!)
• Round fluffy body, cute ears, and nose
• Waving arm animation
• Loves chocolate chip cookies and hot cocoa
• Click to play - creates hearts and sparkles

🎀 Bow-Shaped Candy Canes

• Fuchsia and light pink gradient flowers
• Scattered in the snow around the house
• Pure CSS magic

❄️ Glassmorphic Snowflakes

• Continuously falling animation
• Different sizes and speeds
• Semi-transparent with glow effects
• Theme-adaptive colors

🎴 Neumorphism Cards

• Soft shadows creating depth
• Hover effects that lift the cards
• Theme-adaptive styling
• Smooth transitions

📖 The Interactive Story

• 8 interactive scenes with branching paths
• 3+ choice points throughout
• 2 different endings:
  • 💖 Stay forever in the wonderland
  • 🌟 Promise to visit with a magical bow
• Progress tracker
• Restart functionality

🎨 Three Theme Modes

• Light Mode ☀️ - Bright winter wonderland
• Dark Mode 🌙 - Mystical night scene
• Mixed Mode 🌓 - Twilight gradient
• Keyboard shortcuts (1, 2, 3) to switch

My Tech Stack

• Javascript
• Single HTML file with embedded:
• HTML5 structure
• CSS3 (animations, gradients, neumorphism, glassmorphism)
• Vanilla JavaScript (no frameworks!)
• Google Fonts (Pacifico, Dancing Script ** The AI Engineering Process**

Here's where it gets fascinating. I could easily go into the file and code manually for any adjustments when tokens ran out.

Iteration 1: The Vision

"Create a choose-your-own-adventure web app set in a snowy wonderland.
I want a gingerbread house, a baby polar bear named Snowball who loves
cookies and cocoa, bow-shaped candy canes, and glassmorphic snowflakes."

Goose created the base structure with all visual elements.

Iteration 2: The Design System

"Make the cards neumorphism style with soft shadows. Use a dark slate
blue gradient background. Add fuchsia and light pink gradients to the
candy canes. Make them bow-shaped flowers."

This cost me my Token I'm sure. lol

Goose refined the entire design system.

Iteration 3: The Interactivity
"Add three theme modes - light, dark, and mixed. Make the polar bear
clickable with heart animations. Add keyboard shortcuts."

This too! lol

Goose implemented all the interactive features.

What I Learned

• AI Pair Programming is Real
  This wasn't just code generation - it was collaborative development. I described what I wanted, Goose built it, I gave feedback, Goose refined it. When needed I want in to code. Natural iteration.

• Specificity Unlocks Quality
  The more specific my visual descriptions (glassmorphic, neumorphism, fuchsia gradients), the better the output. AI understands design terminology! I've Since learned to be as detailed as possible in initial prompts.

• Single-File Apps are Underrated
  No build process, no dependencies, no deployment complexity. Just one HTML file that works everywhere. Sometimes simple is powerful.

• CSS Art is Incredible
  The polar bear, gingerbread house, and candy canes are all pure CSS. No images. This keeps the file tiny and infinitely scalable.

• The Developer Extension is a Game-Changer
  Watching goose use tools transparently (text_editor, shell) reinforced my knowledge of how AI agents actually work. It's amazing structured tool use.

The Technical Deep Dive

Neumorphism Implementation
Soft shadows create that "extruded from background" effect.

Glassmorphism Snowflakes
The backdrop-filter creates that frosted glass effect.

CSS Polar Bear
Clever use of border-radius percentages creates organic shapes.

Branching Story Logic

Simple DOM manipulation - no framework needed!

Real-World Applications

This challenge taught skills that apply to:

• Interactive marketing campaigns (branded experiences)
• Educational content (gamified learning)
• Onboarding flows (user journeys)
• Prototyping (test ideas before full development)
• Portfolio pieces (showcase creativity + tech)

The Results

The final app is:

• Fully functional with branching paths
• Beautiful winter aesthetic
• Mobile-responsive
• Interactive and engaging... magical
• Single file (easy to share/deploy)
• Built in with my UI Design and AI

What's Next?

Day 3 is coming: Data visualization for a Hot Cocoa Championship. The complexity keeps climbing, and I'm learning so much about AI-assisted development.

Try It Yourself

Want to build your own interactive story?

1. Get Goose Desktop from block.github.io/goose
2. Enable the Developer Extension (Settings → Extensions)
3. Get free credits at goose-credits.dev (code: ADVENTDAY2)
4. Start with: "Create a choose-your-own-adventure story about..."
5. Iterate and refine through conversation

Three Approaches You Can Take

1. One-shot prompt - Describe everything at once (fast but less control) Be detailed with initial prompt.
2. Iterative - Start simple, refine through conversation (recommended!)
3. Plan first - Have Goose create a plan before executing (best for complex projects)

Final Thoughts

AI-assisted development isn't about replacing developers - it's about amplifying creativity. I spent my time on design decisions, user experience, and storytelling. Goose handled the implementation details.

The result? A magical winter wonderland that would've taken me days to code manually delivered.

Day 2: Complete. Storyteller: Saved. Polar bear: Adorable. 🐻‍❄️✨

What story would YOU build with AI? Share your ideas below! 👇

This post is part of my Advent of AI journey - AI Engineering: Advent of AI with goose Day 2 of AI engineering challenges.

Follow along for more AI adventures with Eri!