Generate high-fidelity UI/UX mockups for mobile and web apps
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
--- 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).
Overview
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.
Manual install (npx, ZIP)
Claude Code
npx skills add SamurAIGPT/Generative-Media-Skills --skill muapi-ui-design -g -a claude-codeClaude Code (manual)
mkdir -p ~/.claude/skills && curl -sL https://codeload.github.com/SamurAIGPT/Generative-Media-Skills/tar.gz/5519622e885a \
| tar -xz -C ~/.claude/skills --strip-components=3 Generative-Media-Skills-5519622e885a/.opencode/skills/muapi-ui-designWindows (PowerShell)
New-Item -ItemType Directory -Force "$HOME\.claude\skills" | Out-Null; Invoke-WebRequest "https://m.agentalley.io/zip/0efd1e8ab5599cbad53c/muapi-ui-design.zip" -OutFile "$env:TEMP\muapi-ui-design.zip"; Expand-Archive "$env:TEMP\muapi-ui-design.zip" -DestinationPath "$HOME\.claude\skills" -ForceClaude.ai / desktop
Codex, Cursor, other agents
Connects with Agent Alley MCP · agentalley.io/mcp
Files included
SKILL.md3.5 KB
Read the files here
SamurAIGPT/
Shared references1SKILL.md reads these from elsewhere in the repo. Not in the ZIP.
Get them on GitHub ↗SKILL.md
Show the full text81 lines
🎨 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.
| 1 | |
| 2 | name muapi-ui-design |
| 3 | version 0.1.0 |
| 4 | description Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai |
| 5 | |
| 6 | |
| 7 | # 🎨 UI/UX Design Mockup Skill |
| 8 | |
| 9 | **A specialized skill for AI Agents to architect high-fidelity digital interfaces.** |
| 10 | The UI/UX Design skill translates product requirements into technical design specifications for high-fidelity mockups, wireframes, and design systems. |
| 11 | |
| 12 | ## Core Competencies |
| 13 | |
| 14 | **Atomic Design Orchestration**: Structuring interfaces from Atoms (buttons) to Organisms (headers) for system consistency. |
| 15 | **Platform-Specific Layouts**: Designing for responsive breakpoints across Mobile (iOS/Android) and Web (SaaS/E-commerce). |
| 16 | **Design System Integration**: Specifying typography scales, spacing tokens, and color palettes (Hex/HSL). |
| 17 | **Heuristic Awareness**: Ensuring designs follow established usability principles (Nielsen's 10 Heuristics). |
| 18 | |
| 19 | |
| 20 | |
| 21 | ## 🏗️ Technical Specification |
| 22 | |
| 23 | ### 1. Intent Mapping Table |
| 24 | |
| 25 | | Creative Intent | Style | Layout Pattern | Focus | |
| 26 | | :--- | :--- | :--- | :--- | |
| 27 | | **Enterprise SaaS** | Modern/Clean | Dashboard/Grid | Data Density | |
| 28 | | **Consumer App** | Glassmorphism | F-Pattern / Cards | Visual Flair | |
| 29 | | **E-commerce** | Minimalist | Z-Pattern / Product Grid | Conversion | |
| 30 | | **Portfolio** | Brutalist | Asymmetric | Identity | |
| 31 | | **Utility/Tool** | Neomorphism | Control Panel | Tactile Feedback | |
| 32 | |
| 33 | ### 2. Design Tokens & Variables |
| 34 | `Typography`: Geometric Sans (Inter/Roboto) for tech; Serif (Playfair) for luxury. |
| 35 | `Spacing`: 8pt grid system for consistent rhythmic spacing. |
| 36 | `Color`: High-contrast accessible palettes (WCAG 2.1 compliant). |
| 37 | `Elevation`: Shadow-based depth vs. Flat design layers. |
| 38 | |
| 39 | |
| 40 | |
| 41 | ## 🧠 Prompt Optimization Protocol (Agent Instruction) |
| 42 | |
| 43 | **Before calling the script, the Agent MUST expand the user's requirements into a Design Specification:** |
| 44 | |
| 45 | **ATOMIC STRUCTURE**: Mention specific components (Atoms): *Glassmorphic buttons*, *Input fields with 4px radius*, *Iconic sidebars*. |
| 46 | **HIERARCHY**: Use layout patterns: *F-Pattern* for content-heavy sites, *Z-Pattern* for landing pages, *Grid-based Dashboards*. |
| 47 | **TYPOGRAPHY & TOKENS**: Injected design tokens: *Inter Sans-serif*, *8pt spacing system*, *WCAG high-contrast colors*. |
| 48 | **NO SKEUOMORPHISM**: Ensure the prompt enforces *Flat Design* or *Glassmorphism* to avoid "photograph-of-screen" results. |
| 49 | |
| 50 | |
| 51 | |
| 52 | ## 🚀 Protocol: Using the UI Designer |
| 53 | |
| 54 | ### Step 1: Define the Product Brief |
| 55 | Provide the agent with a feature list and target audience. |
| 56 | |
| 57 | ### Step 2: Invoke the Script |
| 58 | The `generate-mockup.sh` script expands the brief using internal knowledge of design systems. |
| 59 | |
| 60 | |
| 61 | # Designing a Fintech Mobile App |
| 62 | bash scripts/generate-mockup.sh \ |
| 63 | --desc "crypto wallet home with price charts" \ |
| 64 | --platform mobile \ |
| 65 | --theme dark \ |
| 66 | --style glassmorphism |
| 67 | |
| 68 | |
| 69 | |
| 70 | |
| 71 | ## ⚠️ Constraints & Guardrails |
| 72 | |
| 73 | **Device Realism**: **MANDATORY** - Do not show hands, physical phones, or desks. Generate pure UI/UX mockups only. |
| 74 | **Accessibility**: Avoid low-contrast text on bright backgrounds. |
| 75 | **Complexity**: Keep "Atoms" consistent across a single page generation. |
| 76 | **Text Rendering**: Use Flux for legible headers; specify placeholder text for smaller body copy. |
| 77 | |
| 78 | |
| 79 | |
| 80 | ## ⚙️ Implementation Details |
| 81 | 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. |
Details
- Version
- 0.1.0
- Updated
- Sep 8, 2026
- License
- MIT
- Stars on the repo
- ★ 4,317
- Checked
- Source
- SamurAIGPT/Generative-Media-Skills ↗
- Creator
- SamurAIGPT · 16 listings
Similar skills
See all →
SkillDesign, redesign, shape, critique, audit, polish, clarifyImpeccable
pbakaus/impeccable · by pbakausUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.★ 70.4k GitHub stars
SkillApple's approach to interface design and fluidApple design
emilkowalski/skills · by emilkowalskiApple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.★ 40.8k GitHub stars
SkillBuild an animation from scratchBuilding Animationsemilkowalski/skills · by emilkowalskiBuild an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.★ 40.8k GitHub stars
SkillRenders a component you choose in every stateBreak
jakubkrehel/skills · by jakubkrehelRenders a component you choose in every state and scenario on a temporary page and stress tests it.★ 7.1k GitHub stars
SkillReviews your work across multiple categories like UIChange reviewjakubkrehel/skills · by jakubkrehelReviews your work across multiple categories like UI, typography, layout, color, writing and accessibility and gives you a detailed analysis of the findings.★ 7.1k GitHub stars
SkillCraft-first interface design for dashboards, admin panelsThe Problem
Dammyjay93/interface-design · by Dammyjay93Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when designing, building, reviewing, auditing, or refining product UI where visual craft, layout hierarchy, tokens, states, visual direction, or design-system consistency matter. Not for marketing pages, landing pages, campaigns, or brand-only work.★ 5.8k GitHub starsMore from SamurAIGPT
SkillGenerate a high-converting ad creative setMuapi ad creative
SamurAIGPT/Generative-Media-Skills · by SamurAIGPTGenerate a high-converting ad creative set — hero image, ad copy variations, and platform-optimized crops for Meta, Google Display, and LinkedIn.★ 4.3k GitHub stars
SkillTurn a long video into N viral-ready short clipsMuapi AI clippingSamurAIGPT/Generative-Media-Skills · by SamurAIGPTTurn 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.★ 4.3k GitHub stars
SkillGenerate a high-cut-density action / fight scene by firstMuapi AI fight sceneSamurAIGPT/Generative-Media-Skills · by SamurAIGPTGenerate 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.★ 4.3k GitHub stars
SkillTurn a real lifestyle photo into a polished chibi cloneMuapi chibi collage effectSamurAIGPT/Generative-Media-Skills · by SamurAIGPTTurn a real lifestyle photo into a polished "chibi clone sticker diary" image — the original person stays photorealistic, surrounded by 5–8 kawaii chibi mini-clones, scrapbook doodles, and handwritten-style captions that match the scene.★ 4.3k GitHub stars
SkillDirect high-fidelity cinematic video with AIMuapi cinema directorSamurAIGPT/Generative-Media-Skills · by SamurAIGPTDirect high-fidelity cinematic video with AI — translates creative intent into technical cinematographic directives for Veo3, Kling, and Luma video models via muapi.ai★ 4.3k GitHub stars
SkillCreate a polished, on-brand Instagram postMuapi instagram postSamurAIGPT/Generative-Media-Skills · by SamurAIGPTCreate a polished, on-brand Instagram post — square or portrait hero image with matching caption and hashtags.★ 4.3k GitHub stars