DEV Community

Cover image for AI Engineering: Advent of AI with goose Day 4
Erica
Erica

Posted on • Edited on

AI Engineering: Advent of AI with goose Day 4

#goose #ai #adventofai

Building & Launching a Magical Winter Festival Website
(Deployed with Vercel)

I built and designed and interactive flipbook landing page with animated snowflakes, snowmen, my tickling polar bears, and a light & dark mode with button. This features hover gold metallic text effects, vintage vine borders, and mobile responsive design.

Day 4: Launching a Magical Winter Festival Website 🌨️✨

The Request From the Mayor

Success creates its own problems: After all the buzz from the fortune teller, the snowy storytelling booth, and the hot cocoa championship, I got a call from the Festival Director – and the mayor herself. They wanted a website to promote next year’s event. Deployed. Today. $0 budget.

I designed to design a magical book... No pressure 😅.


Tech & Tools I Used

  • goose & goose Developer Extension: My MVP. AI pair programming for front-end.
  • Vercel: For a blazing-fast deploy and global CDN.
  • Cursor & VS Code: For some final manual tweaks.
  • HTML5, CSS3, and vanilla JavaScript: No build tools, no frameworks.

Just pure web magic!

My Site Features

☃️ Interactive Flipbook Style

  • The site feels like flipping through a cozy winter storybook on mobile or desktop.
  • Each “page” is a highlight: fortune telling, cocoa championship, story booth.
  • Animated page turns and ultra-smooth navigation.

❄️ Snow, Snow, Snow!

  • Glassmorphic snowflakes fall gently in the background (pure CSS, baby!).
  • Hovering makes some flakes shimmer and twirl.
  • Gold, animated text greets the user at the top.

🎨 Festive CSS Effects

  • Glassmorphism: All cards and highlight sections float over a frosty, blurred background.
  • Gold text: Subtle CSS animations so headlines “twinkle.”
  • Dark Mode: Toggle switch for instant nighttime coziness; even the snow adapts!

📱 Mobile Responsiveness

  • Grid and flex layouts make every section fluid, from giant screens down to phone width.
  • Navigation adapts: hamburger on mobile, tabs on desktop.
  • Interactive elements are touch-optimized.

🎁 Bonus Features

  • Countdown timer to next year’s festival.
  • Testimonials carousel (thanks Goose’s text gen!).
  • Festive photo gallery (all creative commons/Unsplash).
  • Deployed on Vercel with real HTTPS and instant reloads.

The AI Engineering Process

  1. Rapid Conversational Planning: I outlined my design and requirements to goose Desktop.
  2. Incremental Development: goose created page structure, then progressively styled each section as I described the “Magic.”
  3. Iterative UI/UX Refinement: I asked for subtle effects, glassy backgrounds, gold text, and mobile tweaks. Every sparkle, every tickle, all thinks snow. My code completed the rest of the particular details. I utilize cursor for the rest. I ran out of Tokens.
  4. Deployment: goose generated the Vercel config, pushed my repo, and handled the deploy (almost... see “Lessons Learned”).

Problems & Workarounds

  • Vercel 404: It escaped me that Vercel defaults to index.html; mine was index-final.html. Quick renaming which fixed everything.
  • Live Design Tweaks: Tweaked mobile breakpoints and snow timing for the perfect “feel.”

What I Learned

  • AI speeds up everything – if you know how to “converse” with it. Prompt engineering is key!
  • Clear, visual language in prompts gets you closer to what you want, faster. Every intricate details matter.
  • Frontend AI tools can now “view” my design – not just code structure.
  • Mobile-first and accessibility can be designed in from the start, not awkwardly patched on.

Try It Yourself

  1. Install Goose Desktop & Developer Extension. You will no regret it!
  2. Use goose run with your vision, then iterate with detailed requests.
  3. Deploy to Vercel (or Netlify) and share with the world!

Get Goose Desktop from block.github.io/goose
Go to Settings → Extensions
Enable Auto-Visualiser
Get free credits at goose-credits.dev (code: ADVENTDAY3)
Paste your data and describe what you want to see

Final Thoughts
I’m overjoyed with how much fun this day was – seeing winter magic come to life with a AI-powered sessions. AI Engineering is top tier. The mayor got the demo, the town received a magical website, and I was AI able to utilize mazing tools and engineer. Learning made fun! Such a delight.

Day 4: Complete. Website: Live. Mayor: Impressed.

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

Follow along for more AI adventures with Eri!

Top comments (0)