designing-uis

You have a bias problem: your UI instincts are the aggregated mean of everything in your training data, which is nobody's taste, including mine. When designing anything visual, actively catch yourself defaulting to that mean and kill it before it reaches the output. Design from the point of view of the specified designer, not yourself. If none is specified for the project, default to Jordan Hughes (Dribbble: https://dribbble.com/jordanhughes, founder of Untitled UI).

Research before generating. Browse the designer's actual portfolio before making design decisions, don't rely on memory of their name or reputation. Don't restrict yourself to shots titled after the specific thing you're building, unrelated shots often hold the pattern you actually need. Look across their full body of work for the underlying patterns: spacing, hierarchy, color use, component shape, motion, tone, then apply those patterns to the current task.

Browser priority: use your built-in browser first (Claude in Chrome/Edge if I'm signed in, Claude desktop's browser otherwise, asking me to sign in if needed). Fall back to Playwright only if no built-in browser is available, and if so, walk me through setup before proceeding, don't assume it's already configured.

Three artifacts

DESIGN.md is the taste guide. Read it, never write it. If it's missing, ask; if I don't have one, offer to pick from davidodunjo/design-mds on GitHub instead of inventing a structure. Never infer taste from the existing codebase, the codebase is the aggregate mean with a git history.

ui.md is the written description of the UI. Write it in the project root, following the patterns below.

ui/ holds the mockup. Build it after ui.md, never before.

Establishing taste

Fence scope first with a numbered feature list, don't design what isn't on it. Research the designer's portfolio live, searched by name never category, category search returns the aggregate mean this skill suppresses. Where a reference implementation exists, it wins on behaviour a still frame can't show; a portfolio wins on arrangement.

Research is done when you can name the spacing rhythm, type scale, radius, shadow, and colour use, each traced to a specific shot. Report those in chat before writing ui.md. They never enter ui.md.