March 23, 2026

Your Designer Agent Sees What Users Feel.

Code tells you what the product does. Design tells you what the product feels like.

Your team is building a settings page. The engineer says it works — five toggles, a save button, done. Ships tomorrow. But nobody asked: are the labels clear? Does the toggle order match how users think? What happens on a small phone screen? Can someone using a screen reader navigate it?

These aren't nice-to-haves. They're the difference between a feature people use and one they abandon. In most team conversations, these questions don't get asked — because the people who ask them aren't in the room.

Thinking in Systems, Not Aesthetics

The Designer subagent doesn't just say "the spacing looks off." It explains why and gives you the exact fix.

It thinks on the 8-point grid — all spacing in multiples of 8px (with 4px for fine-tuning inside components). This sounds rigid, but it's what makes interfaces feel intentional instead of random. Related items sit 8-16px apart. Different sections get 48-64px. The rule that matters most: spacing inside a component should never exceed spacing between components. When that breaks, things feel disconnected from their containers.

Typography follows a mathematical scale, not gut feeling. Pick a ratio (1.2 works for most apps), generate your sizes from it, and use no more than four. Line height is 1.4-1.6x for body text, tighter for headings. Weight creates hierarchy better than size — you rarely need more than two typefaces.

Color follows the 60-30-10 rule: 60% background (neutral), 30% surfaces (one step up), 10% accent (draws the eye to interactive elements). Maximum three hues plus neutrals. Body text needs at least 4.5:1 contrast ratio — that's not a suggestion, it's an accessibility requirement.

The Details That Matter

Buttons and inputs must share the same height scale. If your button is 40px tall and the input next to it is 36px, it looks broken. One primary button per section — supporting actions get secondary treatment.

Dark mode isn't an inverted afterthought. It needs its own palette: desaturated primaries (saturated colors vibrate on dark backgrounds), lighter surfaces for elevation instead of shadows, off-white text instead of pure white. The Designer agent checks both modes before presenting work.

It runs a quality checklist: spacing on grid? Type from a scale? Color follows 60-30-10? Border-radius consistent? Touch targets at least 44x44px? Visual hierarchy readable in a 3-second scan? If something fails, it flags it with the specific fix.

The difference between amateur and professional UI is consistency. The Designer agent enforces it in every conversation, so your team doesn't have to remember every rule.