# How we built this site with Claude Code by John Morabito · April 18, 2026 · updated April 19, 2026 · 14 min read **TL;DR** - Pass one: 28 production pages from empty directory to launch-ready in under 8 hours wall-clock. 39 minutes of actual Claude Code execution time across the first four implementation phases. - Pass two: another ~34 hours over the next day kept stacking scope. Whitepaper, 10 vertical Playbooks, 11 case studies with real metrics, full entity-graph schema, NeXT-yellow rebrand, GSC redirect map. - End-to-end: 66 pages, 107 commits, 2 days. What would have been a 6-week traditional agency engagement, shipped in 2 days. - Stack: Claude Code with the superpowers plugin, vanilla HTML/CSS/JS, and Cloudflare Pages. ## Why we built it ourselves Outsourcing this rebuild would have contradicted the pitch. Winston Digital Marketing sells AI-native marketing. The practice of running agency work with agent stacks instead of human-hour shops. A three-month timeline from a traditional web agency would have been the opposite of the proof we need. That argument is the whole case for why an agentic workforce beats a dev shop (https://www.winstondigitalmarketing.com/playbooks/why-agentic-workforce-beats-dev-shops/), and this build is it in practice. The honest answer is that the site is the demo. Every link, every page, every FAQ schema block is evidence that a small team can ship production marketing assets in a working day when the stack is right. ## The stack - **Model.** Claude Opus 4 inside Claude Code. Subagents dispatched with the Task tool. - **Plugin.** superpowers. Brainstorming, writing-plans, subagent-driven-development, verification-before-completion. - **Runtime.** Vanilla HTML5, CSS custom properties, one small JS partial loader. No build step. - **Fonts.** Inter Variable and JetBrains Mono Variable, self-hosted as woff2. - **Hosting.** Cloudflare Pages. Cloudflare Workers planned for AI-bot markdown middleware. - **Local dev.** `python3 -m http.server` on port 8087. ## Phase 0-1: Scaffolding and design system Phase 0 was a single commit at 00:05 local time: scaffold the repo with a spec doc, an implementation plan, and the empty directory tree. Phase 1 began at 11:30 and closed at 11:32. Five commits: design tokens, base styles, components, partial loader, nav, footer, motion script, and self-hosted fonts. ``` Task tool (general-purpose, opus): description: "Phase 1: design system + shell" prompt: | You are implementing Phase 1 of the Winston Digital Marketing site rebuild: design tokens, base CSS, shared components, nav and footer partials, partial loader JS, and self-hosted Inter + JetBrains Mono fonts. Read /docs/spec.md and /docs/plan.md first. ``` ## Phase 2: Homepage and the "demo is the proof" frame The homepage shipped at 11:37:49. Five minutes after the design system closed. One commit. Direct claim, service grid, manifesto, and three high-intent routes (GEO, Agentic Web Transformation, Contact). No hero carousel. No "trusted by" logo wall. ## Phase 3: Twelve service pages in one dispatch Twelve service pages committed between 11:46:12 and 11:59:47. Thirteen minutes of wall clock. Parallel subagents under the subagent-driven-development skill. Each subagent owned one page and used the GEO page as the canonical template. ## Phase 4-5: Core content and launch playbooks Phase 4 shipped About, Our Work index, Playbooks index, Contact, 404, Privacy, and Terms between 12:09:26 and 12:09:28. Phase 5 is the post you are reading now, plus the sibling playbooks and Our Work receipts. Total code execution from phase 1 first commit to phase 4 last commit: 39 minutes, 21 seconds. ## Phase 6-8: SEO layer, bot middleware, deployment Still to ship at time of writing. Phase 6: sitemap.xml, robots.txt, RSS. Phase 7: Cloudflare Worker that serves markdown versions of each page to AI user agents. Phase 8: Cloudflare Pages deployment and post-launch citation monitoring. ## What went well, what we would do differently **Went well** 1. Parallel dispatch on Phase 3. One subagent per page means zero file conflicts. 2. Spec-and-plan gate before touching code. 3. One canonical template page for structure. 4. Shared voice rules inside the plan so subagents did not need re-prompting. **Would do differently** 1. Ship the AI-bot markdown middleware in Phase 2, not Phase 7. 2. Start the Receipts layer sooner. Writing them reveals gaps in service copy. 3. Add a dedicated verification subagent per phase. 4. Budget time for per-page OG images. ## Full prompt snippets ### Brainstorming ``` Skill: superpowers:brainstorming I am rebuilding winstondigitalmarketing.com as the proof that an AI-native agency can ship production marketing in one day. Constrain me. What am I missing? ``` ### Writing the plan ``` Skill: superpowers:writing-plans Spec: /docs/spec.md Brainstorm: /docs/brainstorm.md Produce /docs/plan.md with Phase 0-8, acceptance criteria, and a verification gate at the end of each phase. ``` ### Phase 3 dispatch ``` Skill: superpowers:subagent-driven-development Dispatch twelve subagents in parallel. Each owns one page. Each reads /services/generative-engine-optimization/index.html as the canonical template. Commit independently. ``` ## FAQ **Could Claude Code actually build a production site?** Yes. The page you are reading is the proof. Every file is viewable by View Source. **What's the difference between Claude Code and just using ChatGPT?** Claude Code reads and writes files, runs shell commands, dispatches subagents, and uses Skills. ChatGPT's browser gives you text output you still have to paste into files. **How much did this cost in API fees?** $30 to $100 for a build of this shape. Content-heaviest phases dominate. **Do you do this for clients?** Yes. See /services/ai-marketing/agentic-web-transformation/. **Can we see the repo?** We plan to publish a sanitized version on GitHub. Until then, every file is viewable by View Source.