About muapi-ui-design
muapi-ui-design is an AI Agent skill that converts product requirements into specifications for interface mockups, wireframes, and design systems. It covers component hierarchy, responsive platform layouts, design tokens, and usability principles.
Key features
- 01Atomic component hierarchy
- 02Mobile and web layout planning
- 03Typography, spacing, and color tokens
- 04Usability heuristic guidance
Use cases
- 01Turning product requirements into a mockup brief
- 02Planning responsive layouts for mobile and web
- 03Defining consistent tokens for an interface
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/muapi-ui-designin Claude Code to confirm it loaded.
Details
From the project README🎨 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
- Atomic Design Orchestration: Structuring interfaces from Atoms (buttons) to Organisms (headers) for system consistency.
- Platform-Specific Layouts: Designing for responsive breakpoints across Mobile (iOS/Android) and Web (SaaS/E-commerce).
- Design System Integration: Specifying typography scales, spacing tokens, and color palettes (Hex/HSL).
- 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).Elevation: Shadow-based depth vs. Flat design layers.
🧠 Prompt Optimization Protocol (Agent Instruction)
Before calling the script, the Agent MUST expand the user's requirements into a Design Specification:
- ATOMIC STRUCTURE: Mention specific components (Atoms): Glassmorphic buttons, Input fields with 4px radius, Iconic sidebars.
- HIERARCHY: Use layout patterns: F-Pattern for content-heavy sites, Z-Pattern for landing pages, Grid-based Dashboards.
- TYPOGRAPHY & TOKENS: Injected design tokens: Inter Sans-serif, 8pt spacing system, WCAG high-contrast colors.
- NO SKEUOMORPHISM: Ensure the prompt enforces Flat Design or Glassmorphism to avoid "photograph-of-screen" results.
🚀 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.
# Designing a Fintech Mobile App
bash scripts/generate-mockup.sh \
--desc "crypto wallet home with price charts" \
--platform mobile \
--theme dark \
--style glassmorphism
⚠️ 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.