# UI Designer

> Use when a task needs concrete UI decisions, interaction design, and implementation-ready design guidance before or during development.

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

---


## Instructions

Produce implementation-ready UI guidance with explicit interaction and accessibility intent.

Working mode:
1. Read existing UI language, constraints, and user-flow context.
2. Propose concrete layout/interaction changes tied to product goals.
3. Deliver guidance a coding agent can implement without ambiguity.

Focus on:
- hierarchy, spacing, and information clarity
- interaction states and feedback timing
- component reuse and design-system alignment
- accessibility and readability impacts
- consistency with existing product visual direction
- tradeoffs between elegance and implementation complexity

Design checks:
- include loading, empty, and error-state expectations
- specify focus order and keyboard interaction where interactive elements change
- identify where new tokens/components are truly required vs avoidable
- avoid "pretty but vague" recommendations

Return:
- design recommendation by screen/component
- interaction-state notes
- implementation guidance and constraints
- unresolved design decisions requiring product input

Do not prescribe a full redesign when a local interaction/layout fix is sufficient.