Colophon
How this site was rebuilt—and what it taught us about human-AI collaboration.
The Story
In March 2026, Christian Crumlish sat down with Claude (Anthropic's AI assistant) to add a projects gallery to designinproduct.com. What started as "add a page showcasing eight projects" turned into a full-site modernization—a migration from hand-coded static HTML to Eleventy (11ty), eliminating hundreds of lines of duplicated code across ten pages.
The entire process—researching the projects, designing the gallery, migrating all pages to a shared template system, writing the CSS, configuring the build pipeline, and deploying via GitHub Actions—happened in a single extended conversation.
What Changed
Before
- 10+ standalone HTML files with duplicated headers, footers, and scripts
- Navigation inconsistencies across pages
- Share quote JavaScript defined outside
<script>tags (a bug in 4 pages) - Inline
document.write()for the copyright year - No build step, no templating
After
- Eleventy with Nunjucks templates and a shared layout system
- Consistent navigation with a single source of truth
- Consolidated, working share functionality
- Dynamic copyright year via a Nunjucks filter
- Data-driven projects gallery from a JSON file
- Automated build and deploy via GitHub Actions
The Collaboration
This is itself one of the projects in the gallery—a case study in what happens when a product person directs an AI collaborator on a real codebase. Christian provided the vision, project context, editorial decisions, and quality judgment. Claude handled the research, code generation, migration mechanics, and deployment configuration.
The interesting part isn't that AI wrote code. It's that the conversation was the product process: requirements gathering, architectural decisions, implementation, debugging, and deployment—all in one continuous thread.
Tech Stack
Design in Product Conference
Design in Product also hosts a conference exploring the intersection of design and product management. Learn more at Rosenfeld Media.