Vibecoding a Pizza Gallery in Just a Few Prompts

I just built a complete pizza gallery website—with EXIF metadata extraction, image optimization, automatic deployments, and a responsive lightbox—in roughly 4-5 prompts using Claude 4.5 Sonnet.

Check it out at pizza.laursen.dev 🍕

Here’s what made it work.

The Project

A minimalist Astro site where I can upload pizza photos from my iPhone to GitHub, and they automatically appear on my website with:

• Extracted EXIF dates (showing when photos were taken)
• Optimized images via Astro
• Responsive grid layout + fullscreen lightbox
• Auto-deployment to Coolify via GitHub Actions

Tech stack: Astro, TypeScript, vanilla JavaScript, exifreader

What Made This Possible

1. Plan First, Code Second

My first prompt wasn’t “build me a site.” It was: “Make a plan and ask me any questions.”

Claude created a comprehensive PLAN.md outlining architecture decisions, tech stack, file structure, and implementation steps. This gave us a shared roadmap and caught potential issues early.

Lesson: Let AI do the planning. It’s free, fast, and forces you to think through requirements before writing code.

2. Reference Official Documentation

I used the @ syntax to point Claude at documentation:

• @https://docs.astro.build/en/getting-started/ for Astro
• @https://coolify.io/docs/builds/packs/static for deployment

This ensured accurate, up-to-date code rather than hallucinated APIs.

Lesson: Always point AI to official docs. It eliminates guesswork and reduces debugging.

3. Keep Scope Simple

No frameworks, no database, no authentication. Just:

• Static site generation
• Image files in public/pizza/
• GitHub as the “CMS”
• Build happens in CI

Simplicity = fewer prompts needed.

Lesson: Start minimal. You can always add complexity later.

4. Let AI Make Decisions

When Claude asked where to store images, I said: “You decide.”

AI is great at weighing tradeoffs (e.g., public/ vs src/assets/ for EXIF access). Trust it for non-critical decisions.

Lesson: Don’t micromanage. Give AI autonomy on implementation details.

The Power of Claude 4.5 Sonnet

Released September 29, 2025, Claude 4.5 Sonnet excels at:

• Coding tasks (can operate autonomously for 30+ hours)
• Long context (up to 1M tokens—it read entire docs in one go)
• Architectural thinking (created cursor rules, deployment plans, etc.)

It’s not just a code generator—it’s a pair programmer that thinks ahead.

The Full Prompt Flow

1. “We are making a pizza gallery site… here are my requirements… Ask me any questions you might have” → Got a plan
2. “Write the plan to PLAN.md” → Documented architecture
3. “Follow the plan step by step” → Built all components
4. “Set up deployment to Coolify” → Created GitHub Actions
5. Edge case tweaks (favicon, static vs dynamic builds)

That’s it. ~1 hour from idea to deployed site.

Key Takeaways

✅ Start with planning – Write a spec/plan before coding
✅ Link to docs – Use @URL to ground AI in reality
✅ Keep it simple – Fewer dependencies = faster development
✅ Trust AI decisions – Let it handle boilerplate choices
✅ Use the latest models – Claude 4.5 Sonnet is significantly better at coding

“Vibecoding” isn’t about being vague—it’s about setting clear goals, providing great context, and letting AI handle the tedious details while you focus on the vision.