Skill UI

A comprehensive guide for implementing soft pastel, low-contrast aesthetics across web, iOS (SwiftUI), and Flutter applications. Details include desaturated color palettes (mint, blush, lavender), rounded corner principles, airy spacing techniques, and specific CSS/SwiftUI code examples for achieving a calming, gentle user interface suitable for lifestyle or baby-related branding.

A comprehensive guide for implementing spatial, mixed-reality user interfaces. Inspired by Apple Vision Pro and AR aesthetics, this pattern uses environmental transparency, blurred glass-like panels, and dynamic lighting effects to create deeply integrated, context-aware layouts for web and mobile applications.

A comprehensive guide to implementing the Swiss Design (International Typographic Style). This style emphasizes absolute mathematical grids, clean sans-serif typography (like Helvetica), and asymmetrical layouts. It is ideal for users requiring highly structured, minimal, and objective visual communication across web and mobile platforms.

A comprehensive guide for implementing Typography First Design across web and mobile applications. This style emphasizes using type as the primary visual element, minimizing decorative UI elements (chroming) to create a highly focused, high-impact, and sophisticated user experience. Includes specific implementation details for CSS, SwiftUI, Flutter, and React Native.

A comprehensive guide for implementing the "More is More" aesthetic. This style thrives on sensory overload, clashing neon colors, complex layered gradients, and chaotic typography mixes. Use this when the design needs to feel vibrant, intense, and visually dense, perfect for attention-grabbing web or app 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.

This skill provides expert guidance on design engineering, focusing on UI polish, micro-interactions, and high-craft component decisions. It is ideal for reviewing frontend code (React, CSS, Tailwind) to elevate perceived quality, addressing details like easing, duration, and physical feedback. Use it when subtle detail and refined taste are critical differentiators.

A comprehensive guide for implementing the raw, highly structured, and intentionally unfinished Brutalist aesthetic across web, mobile (SwiftUI, Flutter), and cross-platform applications. Learn to utilize stark borders, monospace fonts, high contrast colors, and system defaults to achieve a non-conventional, anti-polished design look.

A comprehensive guide to implementing Claymorphism, a playful and tactile UI/UX design trend. This style emphasizes soft, rounded shapes, inflated 3D volumes, and continuous curves, giving elements the look of soft clay or balloons. Learn the core principles, color palettes, and implementation techniques across CSS, SwiftUI, and Flutter.

A comprehensive guide for implementing the Glassmorphism aesthetic across web and mobile applications. Learn the core principles, including backdrop filtering, semi-transparent backgrounds, and light borders, to create a modern, frosted glass look inspired by macOS and contemporary digital interfaces. Includes code examples for CSS, SwiftUI, and Flutter.

Neumorphism, or Soft UI, is a contemporary design trend where interface elements appear extruded from the background material itself. This guide details the core principles—unified colors and dual shadows (light highlight and dark shadow)—and provides comprehensive implementation examples for web (CSS), iOS (SwiftUI), and cross-platform (Flutter) development. Use this style when a subtle, soft, and integrated aesthetic is desired.