UI Design Advisor

概要

Acting as a senior visual designer specialized in design systems for tools like Figma, Miro, and Notion, this skill delivers direct, prescriptive guidance on visual hierarchy, layout consistency, and accessibility standards. It provides developers with concrete, production-ready specifications for colors, typography, and component styling based on a rigorous 8px grid system. Whether you are building a complex canvas-based editor or a dense property panel, this advisor ensures that every interactive element has clear affordances and adheres to WCAG AA accessibility minimums.

主な機能

• Provides specific accessibility guidance including contrast ratios and touch targets
• Generates concrete UI specifications for toolbars, panels, and canvas elements
• Applies a consistent 8px grid system for spacing and layout rhythm
• 4 GitHub stars
• Defines detailed component states for hover, active, and disabled interactions
• References established design patterns from industry-leading collaborative tools

ユースケース

• Establishing a cohesive color palette and typography system for a new web application
• Drafting detailed CSS specifications and interaction states for complex UI components
• Ensuring canvas-based tools maintain visual hierarchy and professional density