Claude Code Opus 4.6 Deep Dive: Vibe Coding a Website with Google Stitch & Firebase Hosting

Modern Website Development Workflow

• 💡 The process involves building a modern website using Claude Code Opus 4.6, Google Stitch, and Firebase Hosting.
• 🎯 The goal is to create a SaaS-based software called GoalPrise for corporations to track goals, using a specific orange and blue color theme.

Design and AI-Powered Build

• 🎨 Design starts in Google Stitch, where visual concepts are iterated and the final design is exported as a PNG blueprint for the AI.
• 🧠 Claude Code Opus 4.6 acts as the "brains," taking the PNG and instructions to "vibe code" the landing page and sub-pages, maintaining style and color.
• 🛠️ Specific edits, like removing a period from a headline, can be made by providing screenshots and instructions to Claude.

Firebase Hosting and Deployment

• 🚀 Google Firebase serves as the backend-as-a-service, handling deployment and production-grade hosting.
• ✅ Setting up a Firebase project involves initializing the CLI and selecting hosting, with a key step of changing the public directory to 'out' for Next.js projects.
• 🔄 After making changes in Claude, a rebuild and redeploy to Firebase is necessary to update the live site.

Version Control and Performance

• 💾 Firebase offers native version control, demonstrated by the ability to perform instant rollbacks to previous builds.
• ⚠️ An attempt to integrate GitHub for automatic workflows encountered security and permission issues, leading to a decision to use Firebase's native versioning instead.
• 📈 PageSpeed Insights is used to monitor website performance, as faster websites rank higher in Google search results.

Domain Integration and Conclusion

• 🌐 To take the site live, a custom domain is connected by adding A and TXT records to the DNS provider, verifying ownership.
• ✨ This workflow, combining Claude Opus 4.6, Google Stitch, and Firebase Hosting, significantly speeds up website development, allowing a single developer to achieve results rapidly.