Skill UI

Visits target URLs to capture screenshots and inspect pages, then extracts palettes, typography, layouts, and repeatable UI patterns so design teams can document inspiration for new projects.

Guides how to craft detailed prompts for Google Stitch so it generates high-quality web and mobile UI designs, covering specificity, visual style, multi-screen structure, platform targeting, and iterative refinement.

Turn screenshots and scene descriptions into polished demo videos, walkthroughs, or GIFs. Orchestrates Playwright screenshots, edge-tts narration, and FFmpeg compositing with story structure, pacing, and scene design.

Retired skill for redesigning, restyling, and reviewing existing pages and app screens; now delegates to design-taste-frontend for browser-based audits and rebuilds.

Generates agent-friendly DESIGN.md for Google Stitch, encoding strict typography, color, layout, component, and motion rules to produce premium non-generic UI screens.

This skill provides a comprehensive audit of user interfaces, evaluating screens against Nielsen's 10 Usability Heuristics and modern mobile UX best practices. It systematically checks for critical usability flaws, design inconsistencies, accessibility gaps, and potential dark patterns, ensuring the resulting product delivers a superior and intuitive user experience across all platforms.

This skill assists in designing comprehensive, user-centric flow maps and navigation architectures. It adheres to established UX principles, such as Progressive Disclosure, Miller's Law, and Hick's Law, ensuring optimal user journeys. Use it to map out the structural connections, screen inventory, and edge case handling for a product feature, creating a scaffolded blueprint before visual implementation.

This skill acts as an expert Design Systems Lead, analyzing complex technical assets (HTML, CSS, screenshots) from existing projects. It synthesizes a comprehensive 'Semantic Design System' into a structured DESIGN.md file. This output serves as the authoritative 'source of truth' for AI prompting, ensuring that any new UI generated by tools like Stitch adheres perfectly to the established visual language, color palette, and component standards.

Converts images such as design mockups or screenshots into code. This skill has moved to an external repository and only runs when explicitly invoked by name.

Generate professional, master-level designs in the unique Mondo aesthetic. This skill is perfect for creating stunning posters, book covers, album art, and event promotion materials for various platforms (e.g., 9:16, 1:1, 21:9). It removes the need for graphic design expertise by automatically optimizing prompts, simulating limited color palettes (screen print), and applying advanced compositional techniques like negative space storytelling and dramatic scale contrast.

This skill allows users to build and maintain complex UI components and full screens directly within Figma using the Figma MCP. It rigorously enforces a defined design system (like Rayna UI) by validating design tokens, applying craft rules, detecting anti-patterns, and ensuring visual consistency. Ideal for creating new components, composing entire dashboards or landing pages, or auditing existing files for compliance.

Generates structured DESIGN.md files that serve as a single source of truth for AI-powered screen generation (Google Stitch). This skill translates complex, anti-generic design directives into precise semantic rules, covering typography, color calibration, motion physics, and layout principles to enforce a premium, high-agency UI/UX standard. It ensures outputs are sophisticated and avoid common AI design clichés.