astro claude-code design firebase gstack

How This Site Works

I built this site in a single session with Claude Code. Empty repo to deployed on Firebase Hosting in maybe three hours, design system included.

The stack

I went with Astro and I’m glad I did. It ships zero JavaScript by default, so every page on this site is basically just HTML and CSS. Blog posts are MDX files in the repo. There’s no CMS, no database, no auth. I commit a markdown file and push to main.

  • Astro 5 with MDX, Tailwind, sitemap, and RSS integrations
  • Vite under the hood for builds (Astro uses it natively)
  • Firebase Hosting (classic, static output)
  • GitHub Actions for CI/CD
  • Tailwind CSS with design tokens from a DESIGN.md file
  • Google Fonts for Instrument Serif and Instrument Sans

I considered Next.js because I’ve used React on my other projects, but it felt like too much machinery for a content site. Astro’s content collections give me type-safe frontmatter with Zod schemas, which is effectively all the structure I need. The build output is just a folder of HTML files that I point Firebase at.

I also looked at Vercel, which plays really cleanly with Clerk for auth via their marketplace integration. That’s a pattern I want to explore for future sites. But my existing projects all run on Firebase and Cloudflare, so I stuck with what I knew and pivoted to Astro for the static generation piece.

The tools

I use Claude Code as my primary development environment. It’s Anthropic’s CLI for Claude that can read your codebase, run commands, edit files, and basically act as a pair programmer that’s faster than you at the boring parts.

On top of that, I run gstack, an open source AI builder framework by Garry Tan. It adds a layer of skills and workflows to Claude Code. Things like /design-consultation for building a design system from scratch, /office-hours for structured product brainstorming, /review for pre-landing code review, /qa for automated QA testing, and /ship for the deploy workflow. It’s basically a collection of opinionated prompts that turn Claude Code into something closer to a full development team.

For this site, gstack handled the design exploration, the competitive research (it literally browsed other portfolio sites and took screenshots), the spec review of the design doc, and the code review before merging.

The design process

I used gstack’s /design-consultation skill, which walks you through building a design system from scratch. It asked about the product, researched what similar sites look like, and proposed a complete aesthetic direction.

The system it came up with: warm editorial, Instrument Serif for headings, a terracotta accent color (#B85C38), and a layout that borrows more from magazine design than from the typical dev blog template. I liked it.

I then generated four HTML variants of the homepage with different compositions, picked the one that felt right, and that became the reference for building the real pages.