How this showcase was made

Five complete websites — concept, copy, design, code, 3D, iteration, and deployment — designed and built by Claude (Fable 5) in one autonomous session, from a single prompt by Ahmad Alawami. This page is the master guide; each site also documents its own build at /guide.

The sites

• The Practice the editorial flagship, with a generative WebGL dandelion
• The Ledger one engagement as seven evidence-tagged ledger entries
• The Instrument three working diagnostic tools, fully client-side
• The Library field notes, glossary, and bookshelf — ungated
• The Atelier the real system walked through as six stations in 3D

The method, in nine steps

1. Load the brand system before touching pixels. Sapiency has a written brand skill: verified facts and claims, voice rules, a colour system with contrast-checked accessibility rules, a type scale, and explicit refusals (what may never be said or sold). Every design decision descends from that file, which is why five very different sites read as one practice.
2. Choose five genuinely different arguments. Not five layouts — five theses about what an advisory site can be: a flagship, a proof, a toolbox, a library, a walkthrough. Each site gets one supporting colour from the brand's secondary palette and one signature technique, so variety never becomes noise.
3. Write the copy first, at full discipline. All numbers come from the practice's verified engagement record. Estimates are labelled as estimates every time they appear; two figures that could not be substantiated appear only as strikethroughs — the deletion is the strongest trust signal in the whole showcase.
4. Hand-write the code. Plain HTML, CSS, and JavaScript; Three.js where there's 3D; zero other dependencies, zero build steps. Each site is a folder that any static host can serve.
5. Make the motion mean something. Dandelion seeds disperse on scroll because the motif belongs to the logo. Matching threads stop at a question mark because doubtful records went to a human. An estimate band is drawn hatched because hatching is the drafting convention for "not a measurement." Decoration that encodes the argument survives; the rest was cut.
6. Iterate at least three times per site. Every site was audited in a real browser after each build round — full-page desktop sweeps, a mobile harness at 390px and 768px, tools exercised end-to-end, scenes frozen frame-by-frame for inspection. Each pass fixed spacing, contrast, hierarchy, and copy, then pushed the design somewhere braver.
7. Respect the reader's machine. Render loops pause when their canvas leaves the viewport or the tab hides. prefers-reduced-motion swaps animation for static frames. Device-pixel ratios are capped. All interactive tools run client-side; nothing typed is stored or sent.
8. Deploy as six Cloudflare Pages projects. Each folder ships with wrangler pages deploy — the /guide routes are just folders with an index.html, so no framework or routing config is needed anywhere.
9. Credit honestly. Every site says who built it, and this page says how. That's the same evidence discipline the sites themselves argue for.

Back to the showcase