The guide · No secrets

How this site
was built

The honest version: one person, one prompt, one AI coding agent, zero frameworks. Here's exactly how it came together so you can build the same thing for your own race, your own client, or your own countdown.

The short version

This entire site was generated by Claude Code — Anthropic's AI coding agent that runs in a terminal — from a single prompt. The prompt described the vibe (dark, cinematic, fight-camp energy), pointed at a JSON file containing the real 19-week HYROX training plan, and listed the requirements: a live countdown, the full phased plan, the 8 stations, a localStorage progress tracker, and this guide page.

Claude Code read the training data, wrote the HTML/CSS/JavaScript, previewed the result, and iterated on its own output several times — checking mobile layout, countdown math, and storage edge cases. No designer, no framework, no build pipeline.

The stack (all of it)

  • HTML / CSS / JSTwo static pages, styles and scripts inline. That's the whole codebase.
  • Google FontsAnton for the shouting, Archivo for the talking, JetBrains Mono for the numbers.
  • localStorageWeek completions and notes live on the device. No accounts, no server, no database.
  • Cloudflare PagesFree static hosting. Push the folder, get a URL on a global CDN.
  • FrameworksNone. No React, no build step, no npm install. View source — it's all there.

Do it yourself in five steps

  1. Put your real data in a file

    Ours was plan.json — phases, weekly schedules, station loads, heart-rate zones. Real data is what makes a site feel personal; the design is just the delivery vehicle.

  2. Install Claude Code

    Runs in your terminal. npm install -g @anthropic-ai/claude-code, then claude in your project folder.

  3. Write one honest prompt

    Describe the feeling you want, point at the data file, and list the must-haves. Ask the agent to review its own work — that instruction matters more than any other.

  4. Let it iterate

    The first draft is rarely the best one. This site went through multiple self-review passes for mobile layout, contrast, countdown math and storage edge cases before it shipped.

  5. Deploy on Cloudflare Pages

    Create a Pages project, point it at the folder (or drag-and-drop it), no build command needed. Free tier is more than enough for a site like this.

The prompt, roughly

# the shape of the prompt that produced this site
Build a static site for an athlete's first HYROX race.
Vibe: dark, cinematic, fight-camp announcement.
Data: read data/plan.json — use ALL of it, no lorem ipsum.
Must have: live countdown to 2026-11-22, the 19-week plan,
the 8 stations with doubles splits, a localStorage week tracker
with notes, and a /guide page explaining how it was built.
Constraints: vanilla HTML/CSS/JS, no build step,
mobile-first, respect prefers-reduced-motion.
Then review your own work three times and fix what you find.

What it costs

Hosting: free (Cloudflare Pages). Fonts: free (Google Fonts). Domain: optional, ~$10/year. Claude Code: a paid tool — a site like this consumes a modest amount of usage on a standard plan.

Time from prompt to deployed site: an afternoon, most of it spent on iteration passes rather than the first draft. The training plan itself — the actual coaching — took far longer than the website, which is how it should be.