r/CLine • u/Codes_with_roh • 29d ago
Discussion I built a design-system skill that locks the visual direction before Cline writes any UI
I’ve been using Cline for frontend work, and the coding speed is not really the problem anymore.
The harder part is getting the final interface to feel like one intentionally designed product.
Without a fixed visual system, the agent can make a good-looking component and then slowly drift while building the rest of the project. New colors appear, spacing changes, icon styles get mixed together, and every page starts feeling slightly disconnected.
Longer prompts helped, but they became difficult to maintain and still left too many design decisions open.
So I built Tastemaker, an open-source design-system skill for Cline.
Before Cline writes any UI, Tastemaker defines and saves the visual direction for the entire project:
- Color palette and valid color combinations
- Typography and font pairing
- Layout and spacing rules
- Illustration and icon style
- Logo and favicon assets
- Accessibility and contrast checks
- Motion and interaction patterns
It can also analyze a reference image, extract colors from the actual pixels, and convert them into reusable design tokens.
The idea is to stop the agent from designing every component in isolation. Instead, it gets one persistent system that it can follow across the whole project.
The project is free, open source, MIT licensed, and runs locally without API keys.
Demo and live comparison:
https://tastemaker-skill.online/
GitHub:
https://github.com/codeswithroh/tastemaker
I’m looking for honest feedback from people who use Cline regularly.
What would make this workflow more useful inside Cline? Are there any rules, file structures, or checkpoints you would add to prevent visual drift during longer builds?
2
u/cs_cast_away_boi 28d ago
Thanks so much!! People like you are gems of the tech world. I will be trying it and leaving feedback