Building a coherent and attractive design system is one of those problems that seems simple until you actually sit down to do it. Colors that look great in isolation but clash together, inconsistently named tokens, CSS variables nobody understands three weeks later... This post documents how I solved it by combining Claude Code with tweakcn, a tool I'd never heard of that completely changed my workflow.
The starting point: I had colors, not a system
It all started with a palette. I had my brand colors well defined — primaries, secondaries, neutrals — but the way I'd organized them in code wasn't working for me. I'd set them up directly in Claude Code and, while it functioned, the visual result wasn't what I was after.
The problem wasn't the code itself. It was that I was making design decisions inside a text environment, with no immediate visual feedback. Deciding whether primary-600 should be the hover color or the active color is nearly impossible without seeing it in context.
I got this types of previews from Claude, but I didn't feel it looked good enough, and iterating was not great because I wasn't sure about what I wanted exactly, and it would take up a lot of time and AI tokens...
Discovering tweakcn
While looking for tools to visualize design tokens, I found tweakcn.com/editor/theme. It's a visual theme editor for Tailwind/shadcn that lets you:
Import your existing configuration (CSS variables, Tailwind config)
Edit visually with real-time preview on actual components
Export the result as production-ready code
What makes it particularly useful for developers is that the output isn't just a pretty palette — it's semantic tokens applied to real components. You can immediately see how your destructive color looks on a button, how readable your muted-foreground is as secondary text, or whether the contrast between your card and background is sufficient.
The workflow
- Export from Claude Code The first step was getting my existing configuration into a format tweakcn could read. I exported my CSS custom properties as they were:
- Import into tweakcn In the tweakcn editor I used the import option to paste my configuration. The editor automatically maps your variables to its semantic token system (background, foreground, primary, secondary, muted, accent, destructive, border, ring...).
- Adjust visually This is where the workflow shifts dramatically compared to editing CSS by hand. You can:
Modify the hue, saturation and lightness of each token with sliders
See the change applied in real time across a set of reference components (buttons, cards, inputs, badges, alerts...)
Check foreground/background pairs for readability
Toggle between light and dark mode to make sure both themes are coherent
The adjustments I made were mostly around the lightness values in dark mode — my original setup was too saturated — and fine-tuning the accent color so it had enough contrast with primary without competing with it.
- Export the result Once satisfied, tweakcn generates a CSS variables block ready to copy. The output includes both the light and dark themes, with values in HSL format (which makes it trivial to adjust lightness programmatically later if you need to).
Back to Claude Code
With the exported CSS in hand, I went back to Claude Code to integrate it into the project. The process was straightforward: import the variables and let Claude reorganize the token architecture to be consistent with the rest of the codebase.
The result was a complete semantic palette:
What I value most about the final result is that the tokens have semantic meaning, not just color values. The difference between having --color-blue-500 and having --primary is enormous when it comes to maintaining the system: if you rebrand, you change the value of --primary in one place, not forty.
Takeaway: why this workflow works
The Claude Code + tweakcn combination covers two distinct needs:
Claude Code is excellent at generating architecture, naming tokens consistently, and writing CSS boilerplate. But it can't give you visual feedback. tweakcn does exactly that — it puts your colors in context on real components — but it doesn't manage your codebase.
Using them together eliminates the core problem of defining design systems in text: making visual decisions blind.
Resources
tweakcn editor — the theme editor I used
shadcn/ui theming docs — documentation on the token system tweakcn is based on
Claude Code — the terminal agent I used for the codebase
Do you have a different approach to managing design tokens? I'd love to know what tools you use — drop it in the comments.
Top comments (0)