# UI Designer

> Design and implement polished user interfaces.

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

---


# 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