Skill UI

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.

Generate a cohesive three-panel social media carousel (1080x1080), designed for cinematic storytelling. Perfect for creating multi-part, on-brand content series for platforms like Instagram, LinkedIn, or X. The skill ensures the panels read as one continuous narrative while maintaining individual visual appeal.

Runs a comprehensive, systematic QA check on Figma designs to ensure they are production-ready before handing off to engineering. The checklist rigorously evaluates file hygiene, component consistency, accessibility (WCAG AA), content completeness, and overall readiness across multiple platforms (iOS/Android/Web). Use this skill when needing to validate a design’s quality and structure to prevent costly development rework.

A comprehensive guide for implementing 'Aurora UI' aesthetics across multiple platforms including Web, SwiftUI, and Flutter. Learn how to create ethereal, atmospheric backgrounds using blurred color orbs, glassmorphism overlays, and fluid motion, ideal for luxury, futuristic, or high-end applications.

This comprehensive guide provides implementation details for Card-Based Design, a popular pattern for displaying bite-sized, discrete information units. It covers best practices for achieving responsive, Pinterest-style layouts across multiple platforms, including modern CSS Grid/Masonry for web, and native frameworks like SwiftUI, Flutter, and React Native for mobile apps. Use it when structuring content feeds, portfolio grids, or news articles.

A comprehensive guide to implementing the iconic Cyberpunk aesthetic across multiple platforms (Web, iOS, Android, Flutter). This guide details core principles like Neon-on-Black color schemes, sharply angled geometries (using clip-path or custom clippers), and glitch effects. It is ideal for developers needing to create high-tech, dystopian, or hacking interface experiences.

This comprehensive guide outlines the core principles for implementing effective and aesthetically pleasing dark mode across multiple platforms. It covers critical rules such as avoiding pure black backgrounds, defining elevation using lightness contrast, and utilizing desaturated accent colors to reduce eye strain. Detailed code examples for Web (CSS), iOS (SwiftUI), and Flutter are provided, ensuring a premium, high-fidelity user experience.

A comprehensive guide for developers to implement the iconic Vaporwave aesthetic across multiple platforms, including Web (CSS), iOS (SwiftUI), and Flutter. It details core principles such as 90s OS motifs, cyan/magenta neon gradients, and surreal pastel color palettes, enabling the creation of nostalgic, retro-futuristic user interfaces.

A comprehensive system for designing high-quality, multi-platform banners, including social media ads, website heroes, and print materials. It leverages AI visual generation, UI/UX insights, and HTML/CSS structuring to create multiple art direction options for any campaign.

A comprehensive, all-in-one design skill covering the entire creative lifecycle. Features include building brand identity, defining design tokens, UI styling with Tailwind/shadcn/ui, sophisticated logo generation (AI-powered), Corporate Identity Program (CIP) mockups, professional pitch decks, multi-platform banner design, and social media image creation. It acts as a unified hub for professional graphic and digital assets.