muapi-ui-design
Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai
Paste into Claude, ChatGPT or Cursor.
Read the source81 lines
| 1 | |
| 2 | name muapi-ui-design |
| 3 | version 0.1.0 |
| 4 | description Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai |
| 5 | |
| 6 | |
| 7 | # 🎨 UI/UX Design Mockup Skill |
| 8 | |
| 9 | **A specialized skill for AI Agents to architect high-fidelity digital interfaces.** |
| 10 | The UI/UX Design skill translates product requirements into technical design specifications for high-fidelity mockups, wireframes, and design systems. |
| 11 | |
| 12 | ## Core Competencies |
| 13 | |
| 14 | **Atomic Design Orchestration**: Structuring interfaces from Atoms (buttons) to Organisms (headers) for system consistency. |
| 15 | **Platform-Specific Layouts**: Designing for responsive breakpoints across Mobile (iOS/Android) and Web (SaaS/E-commerce). |
| 16 | **Design System Integration**: Specifying typography scales, spacing tokens, and color palettes (Hex/HSL). |
| 17 | **Heuristic Awareness**: Ensuring designs follow established usability principles (Nielsen's 10 Heuristics). |
| 18 | |
| 19 | |
| 20 | |
| 21 | ## 🏗️ Technical Specification |
| 22 | |
| 23 | ### 1. Intent Mapping Table |
| 24 | |
| 25 | | Creative Intent | Style | Layout Pattern | Focus | |
| 26 | | :--- | :--- | :--- | :--- | |
| 27 | | **Enterprise SaaS** | Modern/Clean | Dashboard/Grid | Data Density | |
| 28 | | **Consumer App** | Glassmorphism | F-Pattern / Cards | Visual Flair | |
| 29 | | **E-commerce** | Minimalist | Z-Pattern / Product Grid | Conversion | |
| 30 | | **Portfolio** | Brutalist | Asymmetric | Identity | |
| 31 | | **Utility/Tool** | Neomorphism | Control Panel | Tactile Feedback | |
| 32 | |
| 33 | ### 2. Design Tokens & Variables |
| 34 | `Typography`: Geometric Sans (Inter/Roboto) for tech; Serif (Playfair) for luxury. |
| 35 | `Spacing`: 8pt grid system for consistent rhythmic spacing. |
| 36 | `Color`: High-contrast accessible palettes (WCAG 2.1 compliant). |
| 37 | `Elevation`: Shadow-based depth vs. Flat design layers. |
| 38 | |
| 39 | |
| 40 | |
| 41 | ## 🧠 Prompt Optimization Protocol (Agent Instruction) |
| 42 | |
| 43 | **Before calling the script, the Agent MUST expand the user's requirements into a Design Specification:** |
| 44 | |
| 45 | **ATOMIC STRUCTURE**: Mention specific components (Atoms): *Glassmorphic buttons*, *Input fields with 4px radius*, *Iconic sidebars*. |
| 46 | **HIERARCHY**: Use layout patterns: *F-Pattern* for content-heavy sites, *Z-Pattern* for landing pages, *Grid-based Dashboards*. |
| 47 | **TYPOGRAPHY & TOKENS**: Injected design tokens: *Inter Sans-serif*, *8pt spacing system*, *WCAG high-contrast colors*. |
| 48 | **NO SKEUOMORPHISM**: Ensure the prompt enforces *Flat Design* or *Glassmorphism* to avoid "photograph-of-screen" results. |
| 49 | |
| 50 | |
| 51 | |
| 52 | ## 🚀 Protocol: Using the UI Designer |
| 53 | |
| 54 | ### Step 1: Define the Product Brief |
| 55 | Provide the agent with a feature list and target audience. |
| 56 | |
| 57 | ### Step 2: Invoke the Script |
| 58 | The `generate-mockup.sh` script expands the brief using internal knowledge of design systems. |
| 59 | |
| 60 | |
| 61 | # Designing a Fintech Mobile App |
| 62 | bash scripts/generate-mockup.sh \ |
| 63 | --desc "crypto wallet home with price charts" \ |
| 64 | --platform mobile \ |
| 65 | --theme dark \ |
| 66 | --style glassmorphism |
| 67 | |
| 68 | |
| 69 | |
| 70 | |
| 71 | ## ⚠️ Constraints & Guardrails |
| 72 | |
| 73 | **Device Realism**: **MANDATORY** - Do not show hands, physical phones, or desks. Generate pure UI/UX mockups only. |
| 74 | **Accessibility**: Avoid low-contrast text on bright backgrounds. |
| 75 | **Complexity**: Keep "Atoms" consistent across a single page generation. |
| 76 | **Text Rendering**: Use Flux for legible headers; specify placeholder text for smaller body copy. |
| 77 | |
| 78 | |
| 79 | |
| 80 | ## ⚙️ Implementation Details |
| 81 | 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. |