What problem does it solve? Front-end developers and designers often need to audit UI screenshots for accessibility issues, extract color palettes, compare design iterations, or convert mockups into code, which is slow and error-prone when done manually. This Skill uses Google Gemini's multimodal models to automate these visual analysis and generation tasks from the command line. ## Core Features & Use Cases - UI Analysis & Accessibility Audits: Analyze screenshots for layout issues, WCAG contrast compliance, visual hierarchy, and UX patterns with multiple analysis modes. - Screenshot to Code: Convert UI mockups into HTML/CSS using Tailwind, Bootstrap, React, Vue, Svelte, or vanilla CSS, with responsive and component-based output options. - Design Comparison & Color Extraction: Compare two design versions for visual, content, or accessibility differences, and extract color palettes as CSS variables, Tailwind config, or SCSS. - Asset Generation & Text-Based Design: Generate icons, backgrounds, patterns, and illustrations with Gemini image models, or produce designs and code from text briefs including interactive multi-turn sessions. - Use Case: Given a landing page mockup PNG, extract its color palette as a Tailwind config, run an accessibility audit, then convert the screenshot into responsive Tailwind components. ## Quick Start Set your GEMINI_API_KEY environment variable, then ask the assistant to analyze a UI screenshot such as "run an accessibility audit on mockup.png" or "convert this screenshot to Tailwind code".
