Mmcp.market

muapi-ui-design skill

by SamurAIGPT·SamurAIGPT/Generative-Media-Skills·4.3k stars·MIT

Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai

A100/100content scan

Is the muapi-ui-design skill safe?

Clean: nothing in its files matched our rules. We read 1 file in the folder on 2026-09-28.

No findings.

Install the muapi-ui-design skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/SamurAIGPT/Generative-Media-Skills.git /tmp/Generative-Media-Skills
mkdir -p ~/.claude/skills
cp -r /tmp/Generative-Media-Skills/.opencode/skills/muapi-ui-design ~/.claude/skills/muapi-ui-design
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

🎨 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

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.

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

More skills from SamurAIGPT/Generative-Media-Skills

  • Amuapi-3d-logo-animationTransform a 2D logo into a premium 3D version and animate it with professional cinematic effects.
  • Amuapi-action-figure-generatorConvert a photo of a person into a custom 3D action figure, complete with collectible toy packaging.
  • Amuapi-ad-creativeGenerate a high-converting ad creative set — hero image, ad copy variations, and platform-optimized crops for Meta, Google Display, and LinkedIn.
  • Amuapi-ad-creativeGenerate a high-converting ad creative set — hero image, ad copy variations, and platform-optimized crops for Meta, Google Display, and LinkedIn.
  • Amuapi-ai-clippingTurn a long video into N viral-ready short clips with a single managed API call. Wraps muapi.ai's `/ai-clipping` endpoint, which handles transcription, highlight ranking through a virality framework (hook / emotional peak / opinion bomb / revelation / conflict / quotable / story peak / practical value), overlap dedupe, and vertical face-tracking auto-crop server-side. No local Whisper, no local LLM, no GPU.
  • Amuapi-ai-clippingTurn a long video into N viral-ready short clips with a single managed API call. Wraps muapi.ai's `/ai-clipping` endpoint, which handles transcription, highlight ranking through a virality framework (hook / emotional peak / opinion bomb / revelation / conflict / quotable / story peak / practical value), overlap dedupe, and vertical face-tracking auto-crop server-side. No local Whisper, no local LLM, no GPU.
  • Amuapi-ai-fight-sceneGenerate a high-cut-density action / fight scene by first composing a 16-cell storyboard image, then driving Seedance 2.0 image-to-video off that storyboard. Stacks GPT-Image-2 (character sheet + storyboard), Nano-Banana-2 (environment concept), and Seedance 2.0 i2v.
  • Amuapi-amazon-product-listingGenerate a complete Amazon product listing image set — hero image, lifestyle shot, infographic with features, and comparison/detail closeups optimized for Amazon standards.
  • Amuapi-animal-video-generatorCreate a hilarious and ultra-realistic video of an anthropomorphic animal acting like a human vlogger in a real-world setting.
  • Amuapi-award-ceremony-videoGenerate a 15-second cinematic awards-ceremony video — a host announces a winner from the stage, a spotlight finds them in the crowd, they walk up to the podium, receive the award, and the LED display reveals their name and "THE BEST ACTOR".
  • Amuapi-blog-headerCreate a professional, eye-catching blog post header image sized for web (1200×628) with optional title composition guidance.
  • Amuapi-brand-kitGenerate a cohesive brand visual kit — logo concept, color palette moodboard, and typography pairing suggestions.

All agent skills → · MCP servers