kevinkeiper.com
This site is its own case study, designed and built through direct, iterative collaboration with Claude Code, documented as it happened rather than written up after the fact.
The site's own card image, chosen mid-build, one of many small decisions made live.
- Problem
- The previous site was a static Webflow build: it didn't grow, and it didn't show how the work actually got made.
- Opportunity
- A hand-built living document on a token-based foundation, designed and coded in conversation with Claude Code, and honest about that collaboration.
- Result
- A repeatable method (propose, react, revise, document) that has held up across every case study since, saving about 10 hours with the new workflow and tools.
Two briefs came first, one for the design and one for case study pages.
No wireframes; everything after was a live conversation with Claude Code.
The layout went from a card grid to alternating rows to this sticky rail.
this site uses sections that when filled up with images make the section tall, long... user needs to remember what the section was about, lose focus as they scroll... you helped implement a left rail right rail solution that im wondering if we can implement here, wdyt
Became the sticky-rail layout now used on every case study page, including this one: a section's title stays pinned while its content scrolls past.
for neux, "what shipped" is all wrong, please replace those wires with final nuex images
Triggered a full re-check of every image on that page, catching several mismatched captions along the way, not just the one flagged.
The main research artifact was the old site itself.
It got some things right: a stats bar, a real tools list, some personality.
But it was static, with no story about how any of it was made.
kevinkeiper.com v3.0, the starting point this version replaces.
Execution was the conversation: propose a layout, react live, keep what works.
Rules got written down as they surfaced, like matching image widths to paragraph measure.
"Rule: images keep their original/native aspect ratio. Never forced-crop to a fixed ratio. All images share the same fixed width; height is not constrained and simply hangs down however long the native ratio makes it, so cards/rows will naturally vary in height, and that's expected, not a bug to fix."
Tokens, component libraries, and Figma variables came up too, so I took real positions.
im trying to feel how figma is even so valuable here when you can design in the DOM instead
Landed on a real stance: Figma still earns its keep for reading someone else's finished system (pulling tokens out of a kit like Glow UI) or syncing design and code across separate people. Solo, working directly in code with instant real previews, staying in Figma just adds a translation step, so this site skips it in favor of the browser.
"When something doesn't fit an existing pattern, that's a real signal to stop and design it deliberately rather than bend one of these — but check here first. Most 'new' needs turn out to already exist under a slightly different name."
A home page and eight in-depth case study pages, all on one visual system.
Hosted free on GitHub Pages, version-controlled from the first commit.
Still in progress; this page describes a conversation that hasn't ended.
The real outcome is a method: propose, react, revise, document.
It held across eight very different case studies without breaking the system.
- Meta
- AI Workflow
- In Progress