Featured build · Design and AI · Enterprise Claude Code

How I built this website with Claude

Designed and built end to end · Static HTML, CSS and JavaScript · About 50 refinement rounds

I designed and built claritycascade.com with Enterprise Claude Code as a human-agent team. I set the direction, supplied the evidence and approved every round; Claude Code turned each brief into HTML, CSS, JavaScript and Python tooling, redacted screenshots from JSON specs and checked its own work before I reviewed it.

The rules live in the repo, not in anyone's memory. CLAUDE.md records the architecture, design system, content rules and release checklist, and the cc-portfolio skill packages the same knowledge with a card scaffold and a health check, so any Claude session on any machine extends the site the same way.

Built with Enterprise Claude Code

Every page, figure and tool here came out of prompted rounds: 76 redaction specs, diagrams drawn as code, eight interactive demos, resume PDFs rendered from the page, three export scripts that write identical pages, and a health check that runs before every release.

Claude CodeCLAUDE.mdAgent skillsPythonTailwind CSS v4

  • 13pages on one design system, with shared chrome and light and dark themes
  • 43projects on one card anatomy: summary, KPIs, AI-approach strip and case study
  • 76redaction specs, so every published screen can be reproduced and reviewed
  • 1Claude skill that carries the rules, a card scaffold and the health check
  • Enterprise Claude Code
  • CLAUDE.md
  • Agent skills
  • HTML
  • CSS
  • ES5 JavaScript
  • Tailwind CSS v4
  • Python
  • Pillow
  • Google Analytics 4

How a change ships

How a request becomes a release

  • Deterministic
  • AI
  • Human
  1. 1 · Brief

    The request and the evidence

    I describe the change in plain words and attach the screens, code or notes it rests on.

  2. 2 · Contract

    CLAUDE.md and the skill first

    Claude Code reads the architecture, rules and recipes, so the change fits the system rather than the moment.

  3. 3 · Build

    HTML, CSS, JavaScript and tools

    Cards come from a JSON spec, figures from diagram scripts and styles from tokens; nothing is hand-copied twice.

  4. 4 · Redact

    Screens made safe

    Originals stay out of the site; specs blur names, figures and IDs, and a review copy is checked at 200%.

  5. 5 · Verify

    Checks before review

    The health check covers the grid, ids, files, SEO, analytics and phone numbers, then the page is rendered and checked.

  6. 6 · Decide and ship

    I approve, then it ships

    I accept or redirect each round; the export stamps versioned assets and the private preview updates.

Information architecture

How the site is organized

Two pages share one design system. The portfolio introduces, proves, invites browsing, builds trust and closes with contact; overlays keep detail one click away without leaving the page. Drawn as code, like the other diagrams on this site.

claritycascade.com information architectureThe portfolio page moves a visitor through five layers: introduce (the hero), prove (featured builds), browse (featured work in seven areas, with the rest on request), trust (practice and credentials) and act (contact). Overlays keep detail one click away: the case-study dialog, the screen viewer, the live-demo modal and the command palette. The RHP Learn page has its own case study. One design system, one script and one set of content rules sit underneath, with a static export for delivery.INDEX.HTML · THE PORTFOLIO1 · Introduce: the heroMPM: Medical Program ManagementSix slides: about me, AI transformation, Asana PMO, MPM Control Tower, analytics andinsights, design and creative2 · Prove: featured buildsMPM: Medical Program ManagementOutcomes and patent, how I work, the MPM Control Tower, the Retina Evidence Hub and thisbuild3 · Browse: the work gridFeatured work in seven areas. Every card: summary, two KPIs, the AI-approach strip and a casestudy4 · Trust: practice and credentialsAI practice, community roles, experience, certifications and awards, toolkit5 · Act: contactEmail and LinkedIn. Analytics measure each step, with no personal dataOVERLAYS · ONE CLICK DEEPERScreen viewerCarousels, shelves anddiagrams, zoomableLive-demo modalSame-origin pages scaled tofit; a new tab elsewhereCase-study dialogCloned from each card, with ashareable #case- linkCommand paletteCtrl or Cmd+K: projects,sections, certificationsLEARNING-PLATFORM.HTMLRHP LearnBrief, two architecture diagrams, 30 screens, operations and stackONE SYSTEM UNDERNEATHsite.css design systemLight and dark tokens,components, motion rulessite.js behaviourES5, two IIFEs,data-attribute hooksContent rulesCard anatomy, AI-approachvalues, grid rule, redactionDeliveryStatic export with hashedassets and no-cache headerszoompage linkopen a case
Teal marks the main path and the case-study dialog; grey lines are links into the overlays and the RHP Learn page.
  1. IntroduceSix hero slides say who I am and what I do, each with a figure and a call to action.
  2. ProveOutcomes, my approach and three featured builds show the work in depth before the grid.
  3. BrowseFeatured work in eight areas, three projects each; 27 public case studies open without a password, and the full archive of 46 projects sits behind one.
  4. Go deeperCase studies, the screen viewer, live demos and the RHP Learn page add detail on demand.
  5. TrustAI practice, community roles, experience, certifications and the toolkit back the claims.
  6. ActEmail and LinkedIn close the page; analytics events show which steps people take.

Case study

Screen

Interactive view

Live chart

Open in new tab ↗

Loading the live chart…