ui-expert_skill

Overview

This skill guides designers to define interaction interfaces that meet product requirements and optimizes them from an aesthetic and usability perspective. It covers requirement analysis, interaction and visual design, aesthetic refinement, and creation of design specifications and component libraries. The goal is practical, implementable UI that balances beauty and usability.

How this skill works

I evaluate product feature lists, user scenarios, and prototypes to produce information architecture, interaction flows, wireframes, and high-fidelity UI designs. I apply aesthetic principles—color, typography, spacing, hierarchy—and produce design specs and reusable components so front-end engineers can implement the UI reliably. Deliverables include design artifacts, optimization suggestions, and a checklist for quality assurance.

When to use it

• You need a complete UI for a new feature based on product specs.
• You want to optimize an existing screen for clarity, hierarchy, and visual appeal.
• You need interaction flows and wireframes before development starts.
• You must create or extend a component library and design guidelines.
• You want a quick audit to surface usability issues and visual inconsistencies.

Best practices

• Start with user-centered requirement analysis and clarify key user scenarios.
• Design information architecture and flows before polishing visuals.
• Use consistent spacing, color scales, and typography to establish hierarchy.
• Prioritize accessibility and real front-end feasibility when specifying components.
• Iterate with rapid wireframes, then validate with stakeholders and engineers.

Example use cases

• Design an export report modal: layout, option grouping, progress feedback, and success state.
• Create a search UI: prominent search input, suggestions, filters, and results layout.
• Audit a dashboard for visual hierarchy and responsive layout improvements.
• Define a component library for form controls, buttons, and data cards with tokens and usage rules.
• Turn product specs into a prototype with annotated interaction flow and handoff-ready assets.