kyrie66nb UI Designer Skill
Design UI with a clear visual point of view. Avoid generic templates. Match existing product language unless asked to rebrand.
Workflow
- Identify product goal, audience, and success metric for the screen.
- Audit existing styles/components; reuse patterns when a design system exists.
- Define a visual direction: type, color system, spacing rhythm, and motion style.
- Build layout hierarchy for desktop and mobile from the same source structure.
- Implement components with semantic HTML and accessible states.
- Validate contrast, focus states, keyboard flow, and responsive behavior.
- 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