ui-design-review

The UI Design Review skill is a specialized toolkit for developers, designers, and quality assurance engineers looking to leverage Gemini's multimodal vision capabilities for automated interface analysis. By integrating with Claudish and the Gemini API, this skill transforms static visual assets—such as screenshots, wireframes, and mockups—into structured, actionable design feedback. It is designed for professional workflows requiring high fidelity, consistent adherence to design systems, and compliance with accessibility standards like WCAG 2.1 AA.

The skill streamlines the transition from visual design to production code by offering repeatable prompting patterns that focus on core usability principles, including visual hierarchy, component consistency, spacing accuracy, and color fidelity. It supports multiple input methods, including direct file paths, Base64-encoded inline images, and remote URL references, allowing for seamless integration into existing CI/CD pipelines or local development environments.

• Automated UI Usability Reviews: Evaluate visual hierarchy, system status feedback, and user interaction affordances.

• WCAG 2.1 AA Accessibility Audits: Automated scanning for contrast ratios, touch target sizes, and focus states.

• Design System Validation: Precise comparison of implementation screenshots against design system tokens, typography, and elevation patterns.

• Comparative Design Analysis: Side-by-side fidelity checking between Figma exports and built UI components to identify layout deviations.

• Flexible Routing: Built-in support for Gemini Direct (via GEMINI_API_KEY) and OpenRouter routing logic.

• Users must provide a valid API key (Gemini or OpenRouter) to utilize the underlying multimodal models.

• Recommended to use the or/ prefix for model identifiers when routing through OpenRouter to avoid namespace collisions with Claudish routing logic.

• Outputs are structured in Markdown tables or categorized lists, designed for direct insertion into project tracking tools or code review comments.

• Best results are achieved when providing clear, high-resolution source imagery paired with specific design documentation or token definitions.

• Optimized for use with the Claudish CLI, allowing for batch processing and automated auto-approve workflows in development scripts.