opencode Skill

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

LLM Mart · 0 points · 11 0 0

Virus-scanned Reviewed automatically before listing.

Full trust report

Download samuraigpt-generative-media-skills-library_visual_ui-design-74df8cb.zip · 2 KB

samuraigpt/generative-media-skills 4295 492 forks MIT Updated 16d ago

Part of samuraigpt/generative-media-skills — 72 skills

Install

skills CLI npx skills add https://github.com/SamurAIGPT/Generative-Media-Skills/tree/main/library/visual/ui-design

Claude Code

claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install samuraigpt-generative-media-skills@llmmart

Git git clone https://github.com/SamurAIGPT/Generative-Media-Skills.git

The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole samuraigpt/generative-media-skills collection as a plugin from our marketplace. Git is the plain clone.

Skill manifest

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

Files (generative-media-skills)

scripts

generate-mockup.sh 1.6 KB

#!/bin/bash
# Expert Skill: UI/UX Design Mockup Generator
# Translates product requirements into design system directives.

PLATFORM="mobile"
STYLE="modern"
THEME="light"
DESCRIPTION=""

while [[ $# -gt 0 ]]; do
    case $1 in
        --platform) PLATFORM="$2"; shift 2 ;;
        --style) STYLE="$2"; shift 2 ;;
        --theme) THEME="$2"; shift 2 ;;
        --desc) DESCRIPTION="$2"; shift 2 ;;
        *) shift ;;
    esac
done

if [ -z "$DESCRIPTION" ]; then
    echo "Usage: bash generate-mockup.sh --desc 'travel app' [--platform mobile|web] [--style glassmorphism|brutalist] [--theme light|dark]"
    exit 1
fi

# Design System Logic
if [ "$PLATFORM" == "mobile" ]; then
    AR_FLAG="--aspect-ratio 9:16"
    LAYOUT="Card-based, bottom navigation bar, 8pt grid system"
    SYSTEM="iOS Human Interface Guidelines style"
else
    AR_FLAG="--aspect-ratio 16:9"
    LAYOUT="Sidebar navigation, grid layout, F-pattern hierarchy"
    SYSTEM="Modern SaaS Design System style"
fi

# Technical UX Brief
EXPERT_PROMPT="[UX_BRIEF]
PLATFORM: $PLATFORM
CONTEXT: $DESCRIPTION
DESIGN_SYSTEM: $SYSTEM, $THEME mode
STYLE_TOKENS: $STYLE aesthetic, geometric sans-serif (Inter), high-contrast accessibility
LAYOUT_PATTERN: $LAYOUT, professional whitespace, vector icons
[EXECUTE] Generate a high-fidelity flat UI mockup. NO hands, NO physical devices, NO background clutter. Pure digital interface only."

# Call Core Primitive
SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
CORE_SCRIPT="$SCRIPT_DIR/../../../../core/media/generate-image.sh"

bash "$CORE_SCRIPT" --prompt "$EXPERT_PROMPT" --model flux-dev $AR_FLAG --json

SKILL.md 3.5 KB

---
name: muapi-ui-design
version: 0.1.0
description: 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 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.