ThemeBuilder: A Theme Studio for Design Systems

My role

Product design, design systems, front-end architecture, AI-assisted build

Impact

30 block types, live light and dark themes, and real code export; it styled this website

Challenge

A theme chosen in the abstract often fails. A palette that looks good as swatches can fall apart on a real page. I wanted to test a theme on real page blocks, in light and dark, at every width, before I write any production code.

Process

What it does

Previews a theme live on a full sample site and a style guide, at desktop, tablet and phone widths.
Builds themes from the 348 palettes of Sanzo Wada's A Dictionary of Colour Combinations (1933–34), and from my own palettes. Each palette suggests several themes and checks the contrast.
Offers 30 block types, from heroes and features to pricing, FAQ, events, menus and timelines, each with variants.
Exports pages and blocks as real code: ShadCN CSS and JSON, React and Tailwind, or HTML and Tailwind.

How I built it with AI

Each feature started as a written plan: the export plan, the blocks plan, the palette library plan and the site-builder plan. Each plan lists its open decisions, and I accepted or changed them one by one before any code was written.

Claude Code then did the tasks in order and stopped after each one for my review. Snapshot tests compare every export with a saved baseline, so a change I did not intend shows up at once. I checked each visual change in a browser, because the tests do not see the layout.

The project rules live in one file that every session reads first. Examples: keep the app launchable from my dashboard, never remove a feature without asking, and write every label in plain, simple English.

Key insights

A theme is a system of decisions, not a palette. Type, space and contrast matter as much as colour.
Write the plan before the code. An AI partner follows a clear plan well, and a plan is easy to review.
Tests make speed safe. With a baseline for every export, I can change a lot and still trust the result.

Outcome

I started ThemeBuilder in April 2026. It has grown through four plans into a full theme studio with multi-page export.

It styled this website. The type scale, colours and spacing here are ThemeBuilder tokens, copied into Webflow variables with the same names. When I made the site more readable, I changed the values in both places, so the tool and the site still match.

Reflection

Building the tool taught me more about design systems than any single system I designed by hand.