How this site was built with its own lifecycle
This consulting site was built using the AI-native Product Development Lifecycle. Six stages. Every principle practiced, not just preached.
Claude Code · 28 HTML pages · 1 Next.js app · 0 build dependencies
Most consultants talk about methodologies. This site was built with one. What started as five HTML pages has grown to twenty-eight pages, a full AI-powered scoring product, an investor section, and an MCP server, all driven by the same six-stage lifecycle across eight iteration cycles. Each cycle compounded on the last. The evidence is on every page.
Specify & Constrain
Before a single line of HTML was generated, the site's boundaries were defined. Dark mode only. Static HTML with CSS custom properties and zero JS frameworks. No React, no build system, no dependencies. What started as five pages grew to twenty-eight through deliberate iteration. When the product needed dynamic scoring, the constraint wasn't abandoned, it was scoped: the marketing site keeps its zero-dependency constraint while a separate Next.js scorer app handles dynamic features. The constraint layer established on day one shaped everything that followed.
Static HTML, no build step
No bundler, no framework, no server-side rendering. Started as self-contained single-file HTML, later extracted shared.css (1,638 lines) and shared.js (407 lines) as the site grew to twenty-eight pages. When the product needed dynamic features, Next.js was introduced in a separate /scorer/ directory. The marketing site stayed pure.
Dark mode only
One mode, executed well. No theme toggle complexity. The dark aesthetic signals technical depth to the target audience: product leaders and engineering executives.
Content-first scope
Three original frameworks (Maturity, Lifecycle, Operations) and the 20-question assessment were fully authored before any design decisions. All exist as structured JSON datasets feeding the marketing site, the scorer app, and the MCP server. The intellectual property shapes the product, not the other way around.
Build the System of Context
Context engineering replaced architecture docs. The design system was encoded as CSS custom properties in shared.css, creating a single source of truth across all pages. Framework JSON files were authored before any HTML existed. A full context stack emerged: CLAUDE.md for project instructions, MEMORY.md for accumulated decisions, llms.txt as an AI-readable site profile, and an MCP server with eight tools making all three frameworks accessible to any AI assistant. Each session starts with the full knowledge of every prior session.
Design system as constraint
CSS custom properties in shared.css (1,638 lines) define every color, radius, and font across twenty-eight pages. Signal bars, nav components, footer components, and responsive patterns are all encoded as reusable variables and classes. Agents can't deviate because the system is code, not verbal instructions.
Structured IP as context
Three framework JSON datasets (maturity, lifecycle, operations) were authored before their HTML pages existed. The same data now feeds the marketing site, the scorer app, the MCP server, and llms.txt. Structured data feeding agent generation across every distribution surface.
Persistent memory across sessions
Claude Code's memory system (MEMORY.md) grew with each cycle. It now tracks the full site structure (28 pages), design system rules (dark emerald button text at 7.47:1 AAA, signal bar specifications, writing style conventions), and three framework details. Early sessions required re-explaining the architecture. Now each session starts with accumulated knowledge from all prior sessions.
Orchestrate & Generate
Claude Code generated each page, with human decisions reserved for architecture and strategy. As the site grew, orchestration evolved from single-page generation to batch operations across nineteen pages simultaneously. Then it evolved again: shared.js now dynamically injects nav and footer components, so structural changes happen in one file instead of nineteen. Plan mode for complex restructures, parallel agent tasks for independent work, sequential edits for dependent changes. The human role shifted from writing to directing.
From batch edits to shared injection
Early cycles applied nav, footer, and design changes across every page in parallel agent batches. Later, nav and footer were extracted into shared.js as dynamically injected components, eliminating ~110 lines of duplicated HTML per page across nineteen pages. Orchestration evolved from "change all files" to "change one file, all pages update."
Human architectural calls
The palette choice (#3ECF8E). The wifi-style signal bars as ✦ DAC-Score identity. The decision to build a password-gated investor section. The decision to add Stripe billing and WorkOS auth to the scorer. Agents execute at remarkable speed, but humans set direction.
Plan mode for complexity
Complex multi-file restructures use plan mode: explore the codebase, design the approach, get human approval, then execute. The resources hub page and nav restructure were planned before a single edit was made.
Validate, Eval & Craft
Every page went through WCAG compliance checks, visual QA, and design review. Automated verification workflows catch regressions: screenshots, DOM inspection, computed style checks, and responsive testing at mobile, tablet, and desktop breakpoints. The most revealing validation story: when nav and footer were extracted into shared.js, the script silently failed on pages with inline JavaScript. No console error. No visible crash. The browser simply skipped shared.js entirely because of a const variable name collision across script tags. Automated DOM verification (checking whether the injected nav element existed after page load) caught what visual QA never would have.
WCAG AA compliance
Contrast ratios verified for every text-on-background combination. Button text switched from white to dark emerald (#052E16) for 7.47:1 AAA. Every iteration cycle re-verifies accessibility.
Silent failure detection
Shared.js declared const observer at the top level. Pages with inline scripts declared the same variable. In browsers, const redeclaration across script tags silently prevents the entire second script from executing. No error, no warning. The nav and footer simply never rendered. Automated DOM verification caught it. Fix: wrap all shared.js code in IIFEs. Lesson: AI-generated code needs automated verification, not just visual inspection.
Assessment boundary testing
The 20-question assessment tested with boundary values at every tier transition across both product maturity (10-40) and operations maturity (10-40). Recommendations verified per tier. Edge cases caught before launch.
Ship & Manage Economics
Two deployment surfaces, two economic models. The marketing site: twenty-eight HTML pages, one shared CSS file, one shared JS file, static hosting, zero runtime cost. The scorer app: Next.js 14 on Vercel, Claude API integration, SQLite database, WorkOS authentication, Stripe billing across four pricing tiers. Development cost measured in API tokens, not developer-weeks. Runtime costs managed through pricing tiers, not absorbed as overhead.
Static file deployment
The marketing site: twenty-eight HTML pages and two shared assets served from any static host. No server-side rendering, no database, no API calls. The scorer app runs separately on Vercel with its own deployment pipeline. Separation of concerns at the infrastructure level.
Token economics
Twenty-eight pages of marketing site plus a full Next.js scoring app with 73 TypeScript files, built across multiple Claude Code sessions. The scorer introduces runtime token costs (Claude API calls per score), managed through Stripe billing tiers: Free, Pro ($49/mo), Team ($299/mo), Enterprise (custom). Token budgets are real operating costs now, not just development costs.
Dual economic models
The marketing site still costs pennies per month. Zero runtime inference, zero database, zero serverless functions. The scorer app introduces managed economics: Claude API costs per score, SQLite storage, Vercel compute. Two surfaces, two cost models, both deliberate.
Learn & Compound
Each iteration cycle made the next one faster. Inline CSS became shared.css. Duplicated nav HTML became dynamically injected components. A static assessment became an AI-powered scoring product. Three frameworks grew from one. Navigation evolved from simple links to flyout mega-menus with keyboard navigation. The assessment expanded from 10 to 20 questions. A Resources hub, blog section with six articles, investor section, signal bars visual identity, and MCP server were all added across eight cycles. The evidence is quantifiable: adding a new page went from copying 150+ lines of boilerplate to adding two script tags.
Inline everything to shared components
The design system evolved from duplicated inline styles to shared.css (1,638 lines). Then nav and footer HTML (~110 lines per page) were extracted into shared.js as dynamically injected components across nineteen pages. A structural change to nav or footer now happens in one file. Each extraction was itself a lifecycle iteration: specify the scope, build context, orchestrate the refactor, validate across all pages.
Three frameworks from one
Started with the Maturity Framework (10 dimensions). Added the Development Lifecycle (6 stages). Then the Operations Framework (10 dimensions across 6 team functions). Each framework built on the patterns and data structures established by the previous one.
Resources hub and nav simplification
Navigation evolved from five links to four as the site grew. A Resources hub page was created to house frameworks, services, and future content. Services were de-emphasized from top-level nav. The logo bar was reframed to tie brands to personal experience, not company clients.
From site to IP distribution
The compounding chain: framework JSON datasets fed the scorecard, which validated the frameworks, which fed the scorer app (73 TypeScript files, Claude API, shareable results), which proved the product thesis, which fed the investor section (4 password-gated pages), which validated the business model. Plus llms.txt, an MCP server (8 tools), CSV exports, and Markdown for Notion. Each artifact enables the next.
Context compounds too
The persistent memory system (MEMORY.md) grew with each cycle. Early sessions required re-explaining the architecture. Now each session starts with full knowledge of twenty-eight pages, the design system, three frameworks, the scorer architecture, and coding conventions. The context investment compounds: more knowledge per session means faster cycles means more knowledge.
Ship & compound, on repeat
Each major iteration cycle documented below. Most recent first.
Shared component extraction
Nav and footer extracted from duplicated HTML in 19 pages into dynamically injected components in shared.js. Discovered and fixed a silent const variable collision. ~2,090 lines of duplicated HTML eliminated. Adding a page went from copying 150+ lines to adding two script tags.
Signal bars visual identity
Replaced score ring with a wifi-style 5-bar system as the ✦ DAC-Score visual identity. Four size variants (hero, md, sm, xs). Amber color treatment for Legacy and AI-Curious tiers. Standalone prototype page for iteration before deployment across marketing pages.
Investor section
Four password-gated pages: gate, pitch memo, investor deck, and product vision. Custom CSS/JS with noindex/nofollow for SEO isolation. Full pitch memo and deck rendered as HTML, not PDFs. The investment thesis itself went through the lifecycle.
Scorer app launch
Full Next.js 14 application: Claude API for URL scoring, SQLite persistence, WorkOS auth, Stripe billing (4 tiers), shareable results at /r/[id], OG image generation. 73 TypeScript files. The product evolved from a static 20-question assessment to an AI-powered scoring platform.
Blog launch & assessment expansion
Six stealth thought leadership articles on operational measurement and AI-native strategy. Assessment expanded from 10 to 20 questions with operations maturity scoring. Blog listing page, article templates, category system. 11 pages became 17.
Flyout mega-menu navigation
Desktop flyout menus with grouped links, promo cards, and keyboard navigation. Mobile accordion with single-open behavior. Replaced simple nav links across all pages. Resources and Platform each got structured sub-navigation.
Platform page & site restructure
Added Platform, Pricing, and Resources hub pages. Extracted shared.css and shared.js from inline styles. Restructured information architecture from expertise-led to product-led. 8 pages grew to 11.
Eight iteration cycles across one continuous sprint. The site went from 5 self-contained HTML pages to 28 pages with shared infrastructure, a full scoring product with AI integration, an investor section, and a custom visual identity system. Each cycle compounded on the last: shared.css made the blog possible, the blog validated the nav system, the nav system proved the architecture could scale, the scorer validated the frameworks, and the frameworks fed the investor thesis. From static pages to AI-native platform in a single methodology.
See the lifecycle in detail
Read the full AI-native Product Development Lifecycle. Six stages, grounded in research from Sequoia, a16z, Bessemer, and Anthropic.
Free. 3 minutes. No sign-up required.