Three Mindsets, One Product
Overview
Designers, developers, and business stakeholders all think about UI differently. This is fine and expected. The problem is that most teams never build a shared foundation underneath those different perspectives. This article looks at why that gap persists and what actually helps close it.
1.Three different ways of seeing UI
Designers care about brand coherence. A button isn't just a clickable element. It has a default state, a hover state, a pressed state, a disabled state. A color isn't just a hex value. It has semantic weight: primary action, destructive warning, success. Typography carries tone. Spacing creates rhythm. Animations communicate intent.
Developers think about the same button as a reusable component with props. Which variants does it support? What happens at different viewport sizes? How does it behave with a loading state and no text? The visual result is the same thing, approached from a completely different direction.
Business stakeholders see conversion rates, timelines, and cost. They care whether the UI works, but their frame for "works" is different from both the designer's and the developer's. All three are right. None of them are naturally speaking to each other.
2.The gap is closing, but speed creates new problems
Modern tools are compressing the distance between design and code. Figma Make, AI coding platforms, MCP integrations, Claude, Copilot — a prototype that used to take a week to implement can be tested in an afternoon. That's genuinely useful.
But speed without a shared foundation creates its own problems. When everyone moves fast and nobody agrees on the base tokens, inconsistencies compound faster too. You end up with more screens, built quicker, that agree with each other even less.
A typical UI audit, inspecting an existing site to extract its visual language, takes a senior designer 1 to 3 hours per site. Multiply that across 5 to 10 competitor brands and you've lost a week before a single wireframe has been drawn.
3.The B2B problem
In B2C, UI quality is a direct competitive factor. Customers choose between products and part of that choice is how the product feels to use. That market pressure keeps teams focused on consistency.
In B2B, buyers are companies. Decisions happen in meetings, not in product moments. So UI consistency gets deprioritized in favor of features and contracts. The result is usually a brand guide that exists, and a collection of interfaces that clearly do not follow it. One tool from a 2016 acquisition. One internal dashboard a contractor built in 2019. One new product on the current stack. None of them match.
The same pattern shows up inside large B2C companies too, in internal tooling. Customer-facing work gets the attention. Internal tools get whatever is left. Over time, the internal environment ends up looking like a museum of past tech choices.
4.Design systems: monolithic vs token-first
The traditional answer is a monolithic design system: a shared component library every team uses. It works when an organization has the discipline and resources to maintain it. Most organizations don't, and the system quietly falls behind until it's more of a liability than an asset.
A more practical starting point is tokens. Identify the core values: primary colors, type scale, spacing rhythm, border radii. Document them in a format that travels — CSS custom properties, Tailwind variables, Figma variables. Once that foundation is shared, AI-powered tools like Figma Make can actually use it rather than invent their own.
The full ecosystem for token-first workflows isn't quite there yet, but it's close. Dembrandt is one part of that: extract what's already running in production, get a baseline you can actually work from.
5.Different backgrounds, different blind spots
Designers tend to be visual and sometimes authoritative about decisions. That's useful when someone needs to make a call on color, hierarchy, or motion. Developers prefer clear structures and things that can be tested. Measurable, reproducible, predictable.
Some people work well across both sides. But even hybrid designer-developers have gaps. Typography nuance, photo selection, content quality, accessibility, usability testing, third-party integrations, motion design — any of these can slip when the person responsible isn't particularly strong in that area.
A shared token foundation reduces the number of decisions that have to be made by feel. When the spacing scale is already defined, nobody has to guess whether 14px or 16px is right. The system already answered that.
6.UI is brand in use
UI isn't a layer on top of a brand. It's the brand in use. Every spacing decision, every shadow, every hover state either reinforces what the brand stands for or weakens it slightly. Those small deviations compound across hundreds of screens.
The goal isn't perfect consistency for its own sake. It's that a person moving through a product always feels like they're talking to the same company. That requires knowing what the design system actually is — not what the brand guide says it should be, but what's running in production right now.
Extracting that baseline should take seconds, not hours. That's what Dembrandt does.
Continue reading
Run Your First Extraction
Install Dembrandt and turn any public website into a complete set of design tokens in under 2 minutes. All you need is Node.js and a terminal.
I Built Dembrandt: Extract Any Website's Design System in Seconds
Technical deep-dive on the motivation, architecture, and methodology behind Dembrandt. How headless browser automation turns manual DevTools work into a single CLI command.
Explorer
Design tokens extracted from well-known brands using Dembrandt.