muapi-ui-design · diff
git:20260225.0ea9980 to git:20260225.aba3bf6
56 added, 14 removed. Audit C to C.
# 🎨 UI/UX Design Mockup Skill
- **Create high-fidelity app and website mockups instantly.**
- Generates clean, modern UI designs optimized for developer handoff and mood boarding.
+ **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.
- ## 🚀 Usage
+ ## Core Competencies
- ```bash
- # Generate a mobile app screen
- bash scripts/generate-mockup.sh --desc "crypto wallet home screen" --platform mobile --style "dark mode cyberpunk"
+ 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).
- # Generate a SaaS dashboard
- bash scripts/generate-mockup.sh --desc "analytics dashboard for ecommerce" --platform web --style "clean minimal"
+ ---
+
+ ## 🏗️ 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).
+ - `Elevation`: Shadow-based depth vs. Flat design layers.
+
+ ---
+
+ ## 🚀 Protocol: Using the UI Designer
+
+ ### Step 1: Define the Product Brief
+ Provide the agent with a feature list and target audience.
+
+ ### Step 2: Invoke the Script
+ The `generate-mockup.sh` script expands the brief using internal knowledge of design systems.
+
+ ```bash
+ # Designing a Fintech Mobile App
+ bash scripts/generate-mockup.sh \
+ --desc "crypto wallet home with price charts" \
+ --platform mobile \
+ --theme dark \
+ --style glassmorphism
```
- ## ✨ Expert Features
- - **Platform-Aware**: Automatically sets correct aspect ratios (9:16 for mobile, 16:9 for web).
- - **Style Injection**: Supports "Glassmorphism", "Neomorphism", and "Flat Design" keywords.
- - **Developer-Ready**: Generates flat layouts without distracting "hand-holding-phone" stock photo elements.
+ ---
- ## ⚙️ How it Works
- Wraps the `core/media/generate-image.sh` primitive with an expert UI design brief.
+ ## ⚠️ Constraints & Guardrails
+
+ - **Device Realism**: **MANDATORY** - Do not show hands, physical phones, or desks. Generate pure UI/UX mockups only.
+ - **Accessibility**: Avoid low-contrast text on bright backgrounds.
+ - **Complexity**: Keep "Atoms" consistent across a single page generation.
+ - **Text Rendering**: Use Flux for legible headers; specify placeholder text for smaller body copy.
+
+ ---
+
+ ## ⚙️ Implementation Details
+ This skill translates a high-level `DESCRIPTION` into a `UX_BRIEF` that specifies layout patterns, design tokens, and aesthetic constraints for the `core/media/generate-image.sh` primitive.