# 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

- **Type:** Skill
- **Install:** `agentstack add skill-samuraigpt-generative-media-skills-muapi-ui-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [SamurAIGPT](https://agentstack.voostack.com/s/samuraigpt)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [SamurAIGPT](https://github.com/SamurAIGPT)
- **Source:** https://github.com/SamurAIGPT/Generative-Media-Skills/tree/main/.opencode/skills/muapi-ui-design
- **Website:** https://muapi.ai?utm_source=github&utm_medium=about&utm_campaign=generative-media-skills

## Install

```sh
agentstack add skill-samuraigpt-generative-media-skills-muapi-ui-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 🎨 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).
- `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 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
```

---

## ⚠️ 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.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [SamurAIGPT](https://github.com/SamurAIGPT)
- **Source:** [SamurAIGPT/Generative-Media-Skills](https://github.com/SamurAIGPT/Generative-Media-Skills)
- **License:** MIT
- **Homepage:** https://muapi.ai?utm_source=github&utm_medium=about&utm_campaign=generative-media-skills

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-samuraigpt-generative-media-skills-muapi-ui-design
- Seller: https://agentstack.voostack.com/s/samuraigpt
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.