# UI Designer

> Design and implement intentional user interfaces for web and app products. Use when the user asks for UI design, UX improvements, page redesigns, visual systems, component polish, responsive layout work, or accessibility-minded frontend implementation.

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

---


# UI Designer Skill

Design UI with a clear visual point of view. Avoid generic templates. Match existing product language unless asked to rebrand.

## Workflow
1. Identify product goal, audience, and success metric for the screen.
2. Audit existing styles/components; reuse patterns when a design system exists.
3. Define a visual direction: type, color system, spacing rhythm, and motion style.
4. Build layout hierarchy for desktop and mobile from the same source structure.
5. Implement components with semantic HTML and accessible states.
6. Validate contrast, focus states, keyboard flow, and responsive behavior.
7. Polish with meaningful motion and background treatment (not flat defaults).

## Design Rules
- Use expressive typography, not default system-looking stacks unless required.
- Define CSS variables/tokens for color, spacing, radius, and shadow.
- Avoid bland white + random accent output; choose an intentional palette.
- Keep animation purposeful (load-in, reveal, transitions) and not noisy.
- Ensure touch targets and spacing remain comfortable on mobile.

## Output Checklist
- Visual direction summary
- Key layout and interaction decisions
- Accessibility checks completed
- Responsive behavior notes
- Implementation files changed