August 13, 2025
Building This Site with AI: From Static Prototype to Hugo
Every website has a story. This one’s story happens to involve a fair amount of AI and a lot of struggles with logo design.
The Beginning: A Style Safari with Gemini
The journey began with a simple but ambitious prompt to Gemini:
I want to explore different styles for a personal site / blog. Could you create an example web app where I can change the styles with a tab switch? I work in data and analytics, and blog a lot about leadership and AI. Be really creative, but here are some inpsirations:
- Terminal themed
- 80s tech themed
- Steam punk
- Italian
- Spanish / Barcelona
- Retro Futurism
- Tomorrowland (disney) or EPCOT
What came back was remarkable—a fully interactive React app that let me instantly switch between completely different visual themes for the same content.
Each tab transformed the entire aesthetic: fonts, colors, layouts, everything. I could see my hypothetical blog posts about “The Art of Data Storytelling” and “Leadership in the AI Era” rendered in terminal green text, steampunk brass and copper, or the clean lines of Italian design.
They were simple, some of them just color swaps, but as I’ve discovered with AI these are just the base you build off of. I was drawn to the idea of a site design that evoked the hope of the future represented by Disney’s Tomorrowland and the EPCOT Center of the 1980s. We’d call this retrofuturism now, though I imagine at the time it was just the future. I kept iterating, trying to capture something special—that optimistic, space-age aesthetic that felt both nostalgic and forward-looking. Through the process I landed on cards that took inspiration from the Googie style. The color palettes, the typography choices, the sense of wonder about the future… it all resonated with childhood memories of walking through EPCOT Center. Once I had that direction, I pivoted to building it.
From Theme Explorer to Static Prototype
With the retro-futuristic direction locked in, I needed to move beyond Gemini’s theme explorer to something I could actually use. The interactive React app was perfect for exploration, but I wanted to refine the aesthetic and build something real. I continued to work with Gemini, asking it to generate a static HTML prototype that captured the essence of my theme.
That Sample Page.html was a simple static HTML prototype that became my testing ground. The prototype served its purpose perfectly. It let me experiment with the visual design, test the animated background effect, and fine-tune the Googie-inspired aesthetic without worrying about content management or build systems. The glass card components—architectural shapes with backdrop blur effects that feel like they’re floating in space—really brought the vision to life.
But static HTML has its limits. Hard-coded blog posts, repeated navigation markup, and no content management system meant the site would be a pain to maintain as it grew.
The Hugo Transformation
Enter Claude Code. This is where agentic AI collaboration became central to the story. Using Claude Code, I tackled the transformation from static prototype to a proper Hugo site (a stack I settled on after talking with AI about it and wanting the benefits of a static site). I didn’t jump right in, I iterated upon a project plan that would be the basis of Claude Code’s instruction. The ProjectPlan.md file documents this transformation process step-by-step:
The result is a site that maintains the exact visual design of the original prototype while gaining all the benefits of a static site generator: easy content management, automatic RSS feeds, and a clean separation between content and presentation. It was way faster than I could have coded by hand, but it was an iterative process of test, refine, and repeat.
Multiple AIs, Multiple Perspectives
What made this project particularly interesting was the collaborative nature of working with multiple AI systems. Rather than simply asking for code to be written, the process involved different AIs contributing their unique strengths.
The background gradient, for instance, came from a conversation with Gemini about Spaceship Earth at Epcot. I showed it a photo of the iconic geodesic sphere lit up at night and asked: “If the colors on Spaceship Earth in this photo were used for a Tailwind color gradient, what would the code look like?”
Gemini analyzed the photo and identified the color progression: “The gradient moves from a warm orange/amber at the bottom, through a vibrant fuchsia/pink in the middle, to a deep indigo/purple at the top.” This became the foundation for the site’s animated background—a perfect marriage of Disney’s optimistic futurism and modern CSS gradients.
Meanwhile, Claude handled the architectural heavy lifting:
- Architectural Planning: Discussing the best approaches for converting static HTML to Hugo templates
- Code Review: Iterative refinement of templates and layouts
- Problem Solving: Working through Hugo-specific challenges like asset handling and content organization
The multi-AI partnership was especially valuable for maintaining design consistency during the transformation. Every visual element—from the Gemini-inspired gradient animations to the glass card components—needed to be preserved exactly while the underlying structure was completely rebuilt.
The Technology Stack
The final stack reflects both the design goals and practical considerations:
- Hugo: Static site generator for fast, maintainable content management
- Tailwind CSS: Utility-first CSS framework for responsive design
- Custom CSS: For the Googie-inspired animations and glass effects
- Google Fonts: Exo 2 and Montserrat for the retro-futuristic typography
- Netlify: Deployment and hosting
The build process is intentionally simple—Hugo handles the heavy lifting, while custom CSS preserves the unique aesthetic elements that make the site distinctive.
The Logo Saga: When AI Art Goes Wrong
But not every part of the AI collaboration went smoothly. Late in the project, I decided I wanted a logo for the site—though I didn’t decide if it was for the site or just the blog. This is where I discovered that AI still has a long way to go before it’s truly good with art and design.
The process was... educational. I bounced between ChatGPT, Gemini, and Claude, trying to communicate what I wanted. Each had their own interpretation, and every request seemed to produce wildly different results, even with nearly identical prompts. Some logos were fine, maybe even good (if a bit generic), but giving them clear direction proved surprisingly difficult.
After multiple iterations, Gemini captured how we both felt when it generated a logo featuring a prominent “BS”. BS indeed.
Frustrated, I eventually resorted to sketching out with my finger on the Apple Notes app what I wanted by hand—geometric shapes that could represent data intersections, with a progression from simple forms to more complex arrangements. I literally had to draw it out with pen and paper to communicate the concept clearly.
After much coaxing and breaking down the process into smaller, more specific requests, I finally arrived at something I was content with. But the experience highlighted an important limitation: while AI excels at certain types of creative work (like analyzing photos for color gradients or architecting code), visual design—especially logo design—requires a level of nuanced creative direction that current AI systems struggle with.
The Real Takeaway: Deep Collaboration, Deep Thinking
Here’s what I learned from building this site with AI: it’s not about magic or replacing human creativity. AI allows you to bring your vision to life, if you’re willing to have a deep, collaborative process.
The key is knowing what you want and being able to communicate it clearly in text. That’s harder than it sounds. You need to be specific about aesthetics, technical requirements, and creative direction. You need to iterate, refine, and sometimes start over when things go sideways. A different AI perspective can also be invaluable, as each system has its own strengths and weaknesses.
And yes, there are bumps along the way. Hello, Claude Code, changing my gradients or altering text unexpectedly when I’m not looking. Sometimes AI tools have their own ideas about what you “really” meant to do. But that’s part of the process—learning to work with these systems, understanding their quirks, and knowing when to push back.
The magic happens in the iteration. Start with a rough idea, see what the AI produces, refine your prompt, try again. Build on what works, discard what doesn’t. It’s like having a conversation with a really capable collaborator who occasionally misunderstands you but brings skills you don’t have (or turns into a toddler). Thankfully, Claude Code is also good at using Git if you instruct it, so you can roll back changes whenever you need.
Can you bring your vision to life, step by step? Absolutely. Is it a lot of fun? Absolutely. Would I do it again? 10/10 - definitely.