Building this Lab in Webflow with Claude
How this Lab went from a long-held idea to a working Webflow section in a few days, with Claude doing most of the building.
Build a place to show side-project work in public, on my existing site, without a redesign
Claude did most of the building. I made the calls.
Most of my design work can't be shared publicly. I'd wanted a place to work in the open for a long time, and this fall I finally built one: the Lab you're reading now. I built it on my existing Webflow site, with Claude as my build partner, over a few days.
Structure first. Before any visuals, we sketched the CMS. I assumed I'd need separate pages for tools and projects. Instead, one listing page with filters does the job, plus an entry page for each post. Fewer pages, less to maintain.
Two formats, not three. I started with Notes, Logs and Essays, then dropped Essays to keep the scope realistic. Notes run about a minute. Logs, like this one, run three to four.
Layouts in Figma. Claude mocked up three wireframe layouts. I picked the visual-first option, then worked through the details: how cards behave on hover (and on phones, where there is no hover), a 720px reading column, and a clear marker for Log vs. Note.
A "Worked on" date. A lot of this work happened before the Lab existed, so every entry has a "Worked on" date that places it in the timeline, separate from when it was published.
The build. One CMS collection, one listing page and one template that switches between the Log and Note layouts. It reuses my site's existing navigation, footer, fonts and colors, which Claude pulled by inspecting the live site.
What worked
- Deciding structure before style. Settling layout and CMS questions in rough wireframes kept the build simple.
- Asking Claude to explain each step. I had it walk me through what it did, step by step, so I could change things myself later.
- Reusing what already existed. Same nav, footer and design tokens, so the Lab feels like part of the site, not a bolt-on.
What didn't
- A connection that wouldn't connect. The link to Webflow's visual Designer kept failing, so Claude built everything through Webflow's data tools instead. Slower to check, but it worked.
- A layout switch that didn't switch. The first version of the Log/Note toggle relied on a value Webflow never rendered. We fixed it by reading the format label on the page instead.
- Dates a day early. Dates saved at midnight UTC showed up as the previous day in California. Saving them at midday fixed it.
Claude did most of the building. I made the calls.
Most of what I do day to day stays behind closed doors. The Lab gives me somewhere to show how I think: the research, the decisions, and what I learn along the way.
Building it with Claude was part of the point. Design is moving toward a place where AI is a real part of the toolbox, and I wanted to practice that on something I actually care about. Claude did most of the building. I made the calls on structure, layout and what's honest to show.