Case study , the brand, building itself
Building aihd, with Claude
From a name to a live brand and a working site, from scratch, in a weekend. The brand that teaches AI as a craft tool was built with AI as a craft tool. Here is every step, and every tool.
≈ two days
The same story as four short clips , rendered from HTML with HyperFrames, the exact method the guide teaches. They autoplay on scroll, and they are shareable on their own.
How aihd was built
The ten steps, from an empty folder to a live site.
The tool stack
One brain, a few sharp tools, a push-button pipeline.
The correction: v1 → v2
The five things that changed after grading against the board.
How it got good
The tight loop, run on every screen, until it held.
The starting point was almost nothing: a positioning idea, a name that had already been tried and retired (/compact), and an old first-draft Claude setup guide sitting in the archive. No identity, no design system, no site.
The job was to build the whole thing , the mark, the visual system, the site, the content, and the way it ships , to a standard that would earn the wedge it is selling. A brand about taste cannot look like slop.
The before
- Name/compact (retired)
- Identitynone
- Design systemnone
- Sitea holding page
- Contenta v1 guide, archived
Ten steps, in order, from an empty folder to a live site. Each one fed the next.
Four briefs, in parallel
Market, niche, the social landscape, and the money model, run at once. The finding: the open lane is the creative director who builds a real brand with AI and shows the taste-led decisions. The UK seat was empty.
The wedge
One position that ages well: AI makes average work worthless and distinctive taste more valuable. Free-first ladder, YouTube and email led. Not automation, authorship at speed.
/compact → aihd
A shortlist, a first name chosen and retired, then aihd. The mystery is the policy: never explain it. The question does the brand’s first job for free.
One atom, three jobs
Lowercase aihd. The blue dot of the "i" detaches to become the standalone mark, and the same dot is the unit the dot-grid is built from. Logo and brand-asset, one thing.
39 references, read closely
The Cosmos board studied for the language behind it: chrome, grey and white, one blue, a Swiss grid, editorial restraint. Not the images, the grammar under them.
The first design system
Fashion-editorial, engineered, in metal. Built as 26 cards on Claude Design. Coherent, but too neat, photography-led, and not yet directed.
v1 → v2
Graded honestly against the board and corrected: austere by default, one Klein blue as flat ink, a structural grid, no glow, no 3D. Layout does the art direction, not borrowed photography.
One Astro site
The brand site and the Claude resources hub consolidated into a single multi-page build on one token spine, so nothing drifts.
Re-dressed, verbatim
The guide, animations, resources and tips carried over word-for-word and re-skinned to v2; the full 16-chapter reference too, its flow-charts kept.
Live, quietly
Push to GitHub, Cloudflare Pages auto-builds to the edge. Live at aihd.studio, noindex, until the launch is ready.
From nothing → live at aihd.studio
One brain, a handful of specialised tools, and a push-button pipeline. Automate the mechanics; keep the taste human.
The 25-card system authored and published, then corrected in place.
HTML compositions rendered into the animated explainer videos.
A static multi-page build, one CSS spine, fast by default.
Every screen checked by screenshot, desktop and mobile, before shipping.
The flow-charts inside the full guide, rendered to clean SVG.
39 references, the shared visual language the system was read from.
Push to main, auto-deploy to the edge. No manual step.
The correction: v1 → v2.
The first system was close but too polite. Graded against the 39 references, five things had to change. Same brand, harder edit.
Quality did not arrive in one pass. It came from a tight loop, run on every screen, until it held.
the test, every time: would it sit on the board?
- 01The markLowercase wordmark, the blue i-dot, the dot-grid atom, the silver-disc avatar.
- 02The token spineOne aihd.css, synced from the design system, so the site and the cards never drift apart.
- 03A 25-card design systemFoundations, components, patterns and motion, live on Claude Design.
- 04Ten pagesHome, guide, animations, resources, tips, about, contact, newsletter, downloads, and the full guide.
- 05The 16-chapter guideThe full reference re-skinned to v2, all 18 flow-charts kept, readable online.
- 06Glass devices + diagramsScreen frames, a glass play button, pop-up panels, and flow-charts, all rebuilt in the system.
- 07Search + navigationA ⌘K command palette and a glass mobile menu, working site-wide.
- 08The deploy pipelineGitHub to Cloudflare, push-to-deploy, noindex until launch.
The point
This is what "authorship at speed" looks like: a full brand, built with taste, fast. Want the method? Start with the guide.