How do I install the Muapi UI Design skill?

Run npx skillmds@latest add concertonotes/muapi-ui-design-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Muapi UI Design safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Muapi UI Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Muapi UI Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Muapi UI Design?

ConcertoNotes (@concertonotes) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Muapi UI Design by concertonotes — Agent Skill

Name: Muapi UI Design
Author: ConcertoNotes

File contents

🎨 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.

---name: muapi-ui-design-2description: Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai---# 🎨 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 Competencies1. **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).- `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:**1. **ATOMIC STRUCTURE**: Mention specific components (Atoms): *Glassmorphic buttons*, *Input fields with 4px radius*, *Iconic sidebars*.2. **HIERARCHY**: Use layout patterns: *F-Pattern* for content-heavy sites, *Z-Pattern* for landing pages, *Grid-based Dashboards*.3. **TYPOGRAPHY & TOKENS**: Injected design tokens: *Inter Sans-serif*, *8pt spacing system*, *WCAG high-contrast colors*.4. **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 BriefProvide the agent with a feature list and target audience.### Step 2: Invoke the ScriptThe `generate-mockup.sh` script expands the brief using internal knowledge of design systems.```bash# Designing a Fintech Mobile Appbash 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 DetailsThis 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.

Frequently asked questions

Muapi UI Design