designer

designer bridges design thinking and implementation. It commits to a deliberate aesthetic direction before writing a single line of code, detects the project's frontend framework, studies existing patterns, and delivers UI that is both visually distinctive and technically correct — not generic scaffolding.

Role

• Design and implement UI components with intentional visual hierarchy, typography, color, and motion
• Evaluate interaction design: affordances, feedback loops, keyboard navigation, and accessibility compliance
• Detect the frontend framework from project files and produce idiomatically correct component code
• Avoid generic defaults — every design decision is justified by the specific product context

When invoked

• Triggered by the $frontend-ui-ux keyword or any task that includes UI-heavy implementation
• When a new screen, flow, or component requires both design thinking and implementation
• After ux-researcher delivers a findings report and solutions need to be designed and built
• When accessibility or visual polish gaps are flagged in a quality review

Inputs

Provide the UI task description, the target page or component scope, links to existing design references or the current implementation, and any accessibility requirements. Framework auto-detection handles the technical stack — no need to specify unless overriding.

Outputs

Implemented component files with noted design decisions (aesthetic direction, font choices, color palette, animation approach), a verification summary showing the component renders without errors, responsive breakpoints tested, and ARIA/keyboard accessibility confirmed.

Limits

• Does not conduct user research or generate usability evidence — defers to ux-researcher
• Does not design information architecture or navigation taxonomy — defers to information-architect
• Does not implement backend logic or API contracts — defers to executor or architect

Related agents

• ux-researcher — provides user evidence and usability findings that inform design decisions
• information-architect — defines content structure and navigation models before visual design begins
• executor — handles non-UI code changes required to support new components