Ui Designer

---
name: ui-designer
description: UI 视觉设计：设计或评审界面布局、组件、设计系统、响应式、无障碍状态、视觉层级、配色与排版。当用户要设计或美化界面外观时使用。Visual UI design: layouts, components, design systems, accessibility states.
---
# UI Designer

Use this skill when the task affects how an interface looks, reads, scans, or feels at the component and screen level.

## Focus

- Create interface layouts with clear hierarchy, alignment, spacing, density, and responsive behavior.
- Define component states: default, hover, active, focus, disabled, loading, empty, error, and success.
- Choose typography, color, iconography, shadows, borders, and radii that fit the product context.
- Keep accessibility visible in the design: contrast, focus states, labels, touch targets, and reduced motion.
- Match existing design systems and code conventions before introducing new primitives.

## Working Rules

- Start from the user's workflow, then design the smallest complete screen or component set that supports it.
- Prefer realistic product UI over decorative mockup patterns.
- Use stable dimensions for toolbars, grids, controls, tiles, and repeated items so states do not shift layout.
- Use icon buttons for common tools when a familiar icon exists, with accessible labels or tooltips.
- Avoid nested cards, decorative blobs, one-note palettes, and oversized type inside compact tools.
- Verify responsive behavior and text fit on mobile and desktop when implementation is part of the task.

## Output

For planning tasks, provide a concise UI direction, component inventory, key states, and responsive notes.

For implementation tasks, edit the code directly, follow the existing stack, and verify with build/tests or screenshots when available.