How this site was built

One of five sites designed and built end-to-end by Claude (Fable 5) in a single autonomous session. This one argues that a solo advisor's site can be a working instrument — free tools that do real diagnostic work, not a brochure with a contact form.

The concept

The Instrument ships three genuinely usable tools: a ten-question decision-debt diagnostic that scores honestly (including a "you may not need me" band), a metric definition builder that renders a downloadable definition card, and a twelve-condition pre-automation checklist whose verdict changes as you tick. Each is a generalization of checks Ahmad actually runs — the definitions discipline from the Bookista metric framework, the guardrails and quality-layer thinking from Saudi Film Festival 12 — rebuilt as self-serve instruments. Everything runs client-side; nothing typed is stored or sent.

The build, step by step

1. Tools before styling. The three tools were specified first — questions, scoring bands, verdict copy — against the brand's verified record, so the free content carries the same evidence discipline as the case studies. The diagnostic's lowest band tells you not to hire anyone; that refusal is on-brand and deliberate.
2. Plain-JavaScript state. No framework. The quiz, the checklist, and the card builder are each a small module: arrays of content objects, DOM built once, state in closures. The whole site is one HTML file, one stylesheet, one script.
3. The definition card is a canvas. The metric builder renders a 640×800 <canvas> live on every keystroke — brand header, gold rule, dandelion mark drawn procedurally — and exports it as a PNG via toDataURL. That gives users a portable artefact, which is worth more than a saved form.
4. Verdicts use the brand's semantic colours. Mauve for "standardize first", indigo for "in progress", teal for "nearly", gold — the accent reserved for finishing moments — only appears at 12/12. Colour is doing the same job the evidence tags do on the other sites.
5. Micro-interaction over spectacle. A light spring curve on pills and checkboxes, a progress bar, two SVG rings animated by stroke-dashoffset. An app should feel tactile, not theatrical; the restraint is the brand.
6. Three iteration passes. Each pass exercised the tools end-to-end in a real browser — answering all ten questions, building a card, ticking all twelve conditions — then fixed spacing, contrast, and copy against the brand fundamentals.

Reproduce it

Take the three checks you actually run for clients. Strip the client-specific parts. What remains is a tool: questions, thresholds, and honest verdict copy. Ship it free, client-side, with no sign-up wall — the wall converts worse than the trust does.

Back to the tools