The websites: design and build, end to end, with AI
outcome three live sites, brand to deploy
Problem
A website is normally a relay race of specialists: brand designer, art director, illustrator, copywriter, front-end engineer, QA. A solo builder who wants real craft, not a template, has to cover every leg of that race, and the result still has to hold up against work made by whole teams.
What I built
Three live sites, each with its own identity, all delivered the same way:
- This portfolio. A painterly design system built in code: hand-torn colour fields, a scroll-driven film of AI-generated clips scrubbed frame by frame on a canvas, a case-study index drawn as a painted bookshelf, and a method page whose centrepiece is a generated hillside that doubles as an interactive diagram. Every visual direction was probed as competing full-page mockup images before a line of code was written; the chosen lane was then built as real, accessible HTML rather than shipped as a picture.
- A company brand site for Freewave Apps Ltd, with its own identity designed from scratch and deployed on its own domain.
- A product marketing site for Courting, the racquet sports platform: product pages plus programmatic local pages, with structured data so both search engines and AI answer engines can read what the product is.
Techniques that made it work
Probe before building. Generating two or four full-page design directions as images costs minutes; committing code to the wrong direction costs days. The image picks the lane, the code does the shipping.
Art direction over prompting. The film’s character keeps the same face across five chained clips because each clip is anchored to the previous one’s final frame. Ambient loops close because the first and last frames are pinned to the same still and the motion completes its cycle inside the clip. Nothing generated goes in without an approval pass.
The design system lives in code. Colour as OKLCH tokens, one typeface pair, painted edges as SVG filters rather than baked images, light and dark themes from the same variables. That is why the painterly look survives being resized, translated to new pages, and read by screen readers.
Verify in a real browser. Every page is exercised across viewports and themes before it ships, by driving an actual browser: screenshots, keyboard focus, hover states. That discipline caught real defects, including a browser-level crash that left no console trace and had to be bisected through operating-system crash reports to a Chromium bug, then engineered around.
Outcome
Three sites live, from brand identity to deployment. The strongest evidence does not need a writeup: you are inside it right now.