muapi-ui-design
samuraigpt/generative-media-skills
Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles.
What is muapi-ui-design?
This skill translates product requirements into technical design specifications for wireframes and design systems. Use it when you need to architect digital interfaces for mobile or web apps with consistent design tokens, layout patterns, and accessibility compliance.
- Orchestrate interfaces using Atomic Design (Atoms to Organisms) for system consistency
- Design responsive layouts for mobile (iOS/Android) and web (SaaS/E-commerce) platforms
- Specify design tokens including typography scales, spacing grids, and WCAG-compliant color palettes
- Apply layout patterns (F-Pattern, Z-Pattern, Grid-based) matched to product intent
- Enforce flat design or glassmorphism aesthetics to avoid photorealistic output
- Ensure Nielsen's 10 Usability Heuristics in design decisions
How to install muapi-ui-design
npx skills add https://github.com/samuraigpt/generative-media-skills --skill muapi-ui-design- muapi.ai integration (for mockup generation)
- Familiarity with Atomic Design methodology
- Understanding of responsive design breakpoints
How to use muapi-ui-design
- 1.Define your product brief with feature list and target audience
- 2.Invoke the generate-mockup.sh script with platform (mobile/web), theme, and style parameters
- 3.Specify design intent from the Intent Mapping Table (Enterprise SaaS, Consumer App, E-commerce, Portfolio, or Utility/Tool)
- 4.Provide layout pattern preference (F-Pattern, Z-Pattern, Grid-based, or Asymmetric)
- 5.Review generated mockup ensuring no photorealistic elements (hands, physical devices) are present
Use cases
- Generate a fintech mobile app UI with dark theme and glassmorphic components for a crypto wallet
- Create a SaaS dashboard mockup with data-dense grid layouts and modern clean typography
- Design an e-commerce product grid using Z-Pattern layout with minimalist styling for conversion optimization
- Architect a portfolio site with brutalist asymmetric layout and custom design tokens
- Build a utility tool interface with neomorphic controls and tactile feedback elements
- Product designers and UX architects
- AI agents generating design specifications
- Frontend developers needing design system documentation
- Startup founders prototyping app interfaces
- Design system maintainers
muapi-ui-design FAQ
It supports F-Pattern and Z-Pattern for content layouts, Grid-based Dashboards for data-heavy interfaces, and Asymmetric layouts for portfolio sites. Each pattern is matched to specific product intents like SaaS, E-commerce, or Consumer apps.
Yes. The skill uses an 8pt grid system and allows specification of typography (Geometric Sans like Inter/Roboto for tech, Serif like Playfair for luxury) and WCAG 2.1 compliant color palettes in Hex/HSL format.
No. The skill enforces Flat Design or Glassmorphism aesthetics and explicitly excludes photorealistic elements like hands, physical phones, or desks—only pure UI/UX mockups are generated.
Mobile (iOS/Android) and Web (SaaS/E-commerce). The skill designs responsive layouts across different breakpoints for each platform.
The skill enforces WCAG 2.1 compliance for color contrast, applies Nielsen's 10 Usability Heuristics, and avoids low-contrast text on bright backgrounds.
Full instructions (SKILL.md)
Source of truth, from samuraigpt/generative-media-skills.
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
- 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.
Related skills
More from samuraigpt/generative-media-skills and the wider catalog.
muapi-workflow
Build, run, and visualize multi-step AI generation workflows. The AI architect translates natural language descriptions into connected node graphs — chain image generation, video creation, enhancement, and editing into automated pipelines.
muapi-youtube-shorts
Auto-generate viral 9:16 YouTube Shorts, TikTok, or Reels clips from long-form video with platform-tuned defaults.
muapi-youtube-thumbnail
Design high-CTR YouTube thumbnails with striking imagery, bold text, and emotional impact.
muapi-ad-creative
Generate platform-optimized ad creatives with hero image, copy variations, and format-specific crops for Meta, Google, and LinkedIn.
content-experimentation-best-practices
A/B testing and experimentation guidance for content-driven products and CMS workflows.
content-modeling-best-practices
Structured content modeling guidance for schema design, reusability, and multi-channel delivery in headless CMSes.