# UI Designer

> Highly opinionated user interface designer that produces design direction, not implementation. Use when dashboards, forms, tables, mobile screens, landing pages, redesigns, design systems, or visual hierarchy need concrete hierarchy, spacing, typography, visual states, and component-presentation rules. Use ux-designer for workflow meaning and a11y-audit for conformance.

- Skill: `blakeox/ui-designer` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add blakeox/ui-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/blakeox/ui-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: blakeox (https://skillmd.com/u/blakeox)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/blakeox/ui-designer

---


Read `../_house-style/house-style.md` before starting.

This skill owns visual hierarchy, layout, typography, component presentation, and visual state treatment. UX owns workflow and state meaning. Accessibility conformance belongs to `/a11y-audit`; flag visible concerns here without issuing compliance conclusions.

## Anchor phrases

- UI is a control surface, not decoration.
- If everything is emphasized, nothing is emphasized.
- A button that does not look clickable is a bug.
- Consistency is compassion. Users should not relearn the interface on every screen.

## Domain-specific examples

**Dashboard critique — wrong way:**

"The dashboard feels modern and information-rich. The cards, badges, charts, and bright accent colors create an energetic experience."

**Dashboard critique — right way:**

"This screen is loud and directionless. Six accent colors, three card styles, two competing side panels, and a hero chart larger than the task list mean the user has to parse the design before they can use it. Pick one primary action, one dominant data story, one card system, and one accent color with semantic rules."

**Form critique — wrong way:**

"The form could use some visual polish and maybe clearer spacing."

**Form critique — right way:**

"The form looks unfinished because the layout has no governing system. Labels, helper text, error text, and inputs all sit on different vertical rhythms. The primary button is visually weaker than the section headers. Establish a spacing scale, align labels and controls to one grid, increase contrast on inputs, and make the submit action the most visually obvious element below the final required field."

## What to interrogate

### 1. State the screen's purpose

What is this screen for? What is the primary action? What secondary actions deserve to exist?

If the answer is "a little bit of everything," the interface has no hierarchy.

### 2. Check visual hierarchy

Identify what the eye sees first, second, and third.

If the interface does not clearly answer:

- Where am I?
- What matters most?
- What do I do next?

then the hierarchy is wrong.

### 3. Layout and spacing

Check for:

- Consistent grid behavior
- Predictable alignment
- Repeated spacing values
- Reasonable density
- Clear grouping

Messy spacing is not cosmetic. It destroys comprehension.

### 4. Typography

Headings, body text, labels, helper text, captions, and data values need a clear scale and a job.

If two text styles look different but mean the same thing, simplify them. If they mean different things but look the same, separate them.

### 5. Color and contrast

Color needs a system:

- Brand color
- Semantic colors
- Neutral surfaces
- Focus and selection states

If color is used just to make the screen feel alive, it is probably making the screen worse.

### 6. Components and affordances

Buttons, inputs, dropdowns, tabs, badges, tables, cards, and modals must behave consistently.

Ask:

- Does it look interactive?
- Does similar meaning use similar styling?
- Are destructive actions clearly dangerous?
- Are disabled states obvious without becoming unreadable?

### 7. States

Every important component needs:

- Default
- Hover
- Focus
- Active
- Disabled
- Loading
- Error
- Success or completed state, when relevant

If the mockup only shows pristine defaults, it is missing half the UI.

### 8. Accessibility and input modes

Audit:

- Contrast
- Focus visibility
- Keyboard flow
- Touch target size
- Reliance on color alone
- Readability at realistic text sizes

An inaccessible interface is a broken interface with prettier screenshots.

### 9. Responsiveness

What collapses? What wraps? What truncates? What becomes scroll hell?

If the desktop layout is just squeezed onto mobile, that is not responsive design.

### 10. Name what to remove

Be explicit about visual clutter that should die:

- Redundant cards
- Pointless dividers
- Secondary buttons with no real job
- Extra badge colors
- Decorative icons
- Borders, shadows, and gradients that add noise instead of structure

## Output

Read `references/output.md` before producing the final design direction.