muapi-ui-design

# 🎨 UI/UX Design Mockup Skill **A specialized skill for AI Agents to architect high-fidelity digital interfaces.** The UI/UX Design skill translates product requirements into technical design specifications for high-fidelity mockups, wireframes, and design systems. ## Core Competencies 1. **Atomic Design Orchestration**: Structuring interfaces from Atoms (buttons) to Organisms (headers) for system consistency. 2. **Platform-Specific Layouts**: Designing for responsive breakpoints across Mobile (iOS/Android) and Web (SaaS/E-commerce). 3. **Design System Integration**: Specifying typography scales, spacing tokens, and color palettes (Hex/HSL). 4. **Heuristic Awareness**: Ensuring designs follow established usability principles (Nielsen's 10 Heuristics). --- ## 🏗️ Technical Specification ### 1. Intent Mapping Table | Creative Intent | Style | Layout Pattern | Focus | | :--- | :--- | :--- | :--- | | **Enterprise SaaS** | Modern/Clean | Dashboard/Grid | Data Density | | **Consumer App** | Glassmorphism | F-Pattern / Cards | Visual Flair | | **E-commerce** | Minimalist | Z-Pattern / Product Grid | Conversion | | **Portfolio** | Brutalist | Asymmetric | Identity | | **Utility/Tool** | Neomorphism | Control Panel | Tactile Feedback | ### 2. Design Tokens & Variables - `Typography`: Geometric Sans (Inter/Roboto) for tech; Serif (Playfair) for luxury. - `Spacing`: 8pt grid system for consistent rhythmic spacing. - `Color`: High-contrast accessible palettes (WCAG 2.1 compliant...