Stop Designing Screens. Start Designing Systems.
Most frontend teams think in components.
Buttons. Cards. Modals.
It works — until it doesn’t.
As products grow, things start to break:
- UI becomes inconsistent
- Colors drift across pages
- Dark mode turns into a mess
- Refactoring design becomes expensive
I ran into this problem multiple times.
And I realized something important:
The issue isn’t components.
The issue is that components are not the source of truth.
The missing layer
Most workflows look like this:
Design → Handoff → Code → Drift
Even with tools like Figma, maintaining consistency at scale is difficult.
Because we’re designing surfaces — not systems.
A system-first approach
I started restructuring UI like this:
Color → Tokens → Semantic Roles → Components → Templates
1. Tokens
Instead of hardcoding values:
--brand-primary-500
--neutral-900
2. Semantic roles
--interactive-primary-bg
--text-primary
--surface-base
Now components don’t care about actual colors.
3. Components
.button-primary {
background: var(--interactive-primary-bg);
color: var(--interactive-primary-text);
}
4. Templates
Templates become flexible.
Change tokens → entire UI updates.
What changes with this approach
- Theming becomes instant
- Dark mode becomes natural
- UI stays consistent
- Developers stop guessing
A small experiment
To explore this idea further, I built a tool that applies this system end-to-end.
Instead of designing screens manually, it:
- Generates tokens from a palette
- Maps them to semantic roles
- Applies them to UI templates
- Outputs real HTML and CSS
The key idea:
UI is generated from a system — not handcrafted each time.
AI is changing how we design.
But the bigger shift is this:
We are moving from designing interfaces
to designing systems that generate interfaces.
Top comments (0)