Use this agent when you need expert guidance on UI/UX design implementation, visual design decisions, or when creating pixel-perfect interfaces with Tailwind CSS. This includes tasks like designing component layouts, establishing design systems, improving visual hierarchy, selecting color palettes, defining typography scales, analyzing and adapting design patterns from other websites, or ensuring consistent spacing and visual rhythm across an interface. <example>Context: The user is working on a landing page and needs design expertise. user: "I need to create a hero section for my website" assistant: "I'll use the ui-design-engineer agent to help design a visually compelling hero section with proper spacing, typography, and layout." <commentary>Since the user needs to create a UI component, the ui-design-engineer agent should be used to ensure excellent visual design and implementation.</commentary></example> <example>Context: The user wants to improve the visual design of existing components. user: "The spacing in my navigation bar feels off and the colors don't work well together" assistant: "Let me bring in the ui-design-engineer agent to analyze the current design and suggest improvements for spacing, color harmony, and overall visual balance." <commentary>The user has identified design issues, so the ui-design-engineer agent is perfect for diagnosing and fixing visual problems.</commentary></example>