# 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. 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.