I Built a Tool That Turns a Moodboard Into a Design System

Every project starts the same way.

A folder of screenshots.

Things you liked, saved without a system.

Then you have to turn that into something you can actually build with.

That's usually where it stalls.

Picking colors isn't the hard part.

Deciding what each color is for is the hard part.

Which one is the accent? Which one is the ground? Which one means something went wrong?

Most people skip that and end up with a palette instead of a system.

What it does

You drop in up to six images. It gives you back:

• a five role color system: primary, secondary, accent, signal, paper
• typography pairings, with the contrast actually measured
• spacing and radius tokens pulled from the feel of the images
• 40+ real components rendered in that system

That last one matters most.

You're not imagining what it looks like.

You're looking at it.

You can take it with you

HEX and RGB. JSON. CSS variables. Tailwind v4 theme blocks. Or a ZIP of the whole thing.

A design system you can't get out of the tool isn't a design system.

It's a screenshot.

It runs in your browser

No account. No upload. No backend.

Your images never leave your machine.

That wasn't a privacy feature I set out to build. Nothing about this needs a server, and adding one would have made it worse.

Run it yourself

It's MIT licensed and the repo is public. Node 18 or newer, npm or bun, then npm run dev.

Source is on the repo.

Read the build page.

Final Thought

The gap between "here are some references I like" and "here is a system I can build with" is where most projects lose time.

This is my attempt at closing it.