Muapi Ui Design
- 1.9k installs
- 4k repo stars
- Updated August 4, 2026
- samuraigpt/generative-media-skills
muapi-ui-design is an agent skill for generate high-fidelity ui/ux mockups for mobile and web apps using atomic design principles — creates wireframes and design systems via muapi.ai.
About
The muapi-ui-design skill is designed for 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. Invoke when the user asks about muapi ui design or related SKILL.md workflows.
- 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.
- Device Realism: MANDATORY - Do not show hands, physical phones, or desks. Generate pure UI/UX mockups only.
Muapi Ui Design by the numbers
- 1,909 all-time installs (skills.sh)
- +175 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Ranked #130 of 1,038 Mobile Development skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Aug 6, 2026 (Skillselion catalog sync)
muapi-ui-design capabilities & compatibility
- Capabilities
- typography: geometric sans (inter/roboto) for te · spacing: 8pt grid system for consistent rhythmic · color: high contrast accessible palettes (wcag 2 · elevation: shadow based depth vs. flat design la
- Use cases
- frontend
What muapi-ui-design says it does
Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai
Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai
npx skills add https://github.com/samuraigpt/generative-media-skills --skill muapi-ui-designAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.9k |
|---|---|
| repo stars | ★ 4k |
| Security audit | 3 / 3 scanners passed |
| Last updated | August 4, 2026 |
| Repository | samuraigpt/generative-media-skills ↗ |
How do I generate high-fidelity ui/ux mockups for mobile and web apps using atomic design principles — creates wireframes and design systems via muapi.ai?
Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai.
Who is it for?
Developers using muapi ui design workflows documented in SKILL.md.
Skip if: Skip when the task falls outside muapi-ui-design scope or needs a different stack.
When should I use this skill?
User asks about muapi ui design or related SKILL.md workflows.
What you get
Completed muapi-ui-design workflow with documented commands, files, and expected deliverables.
- High-fidelity mockups
- Wireframes
- Design system specifications
By the numbers
- Skill version 0.1.0 in generative-media-skills
- Structures interfaces across 5 Atomic Design levels from atoms to organisms
Files
🎨 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.
# 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
Xcode Project SetupAutomatically create and configure a new Xcode project with Swift Package Manager dependencies for iOS or macOS agent projects.79.5k396
Expo Tailwind SetupInstantly configure Tailwind CSS v4 with NativeWind v5 and react-native-css inside an Expo project for universal styling.48.3k2.4kExpo Dev ClientCreate custom development clients for Expo React Native apps that need native modules or Apple-specific targets.47.5k2.4k
Swiftui Expert SkillGet expert guidance when writing, reviewing, or refactoring SwiftUI views, state, performance, and modern iOS/macOS APIs.28.2k3.4kExpo ModuleCreate custom config plugins that safely modify native Android and iOS projects generated by Expo prebuild.26.3k2.4k
Flutter Apply Architecture Best PracticesEnforce clean layered architecture when creating or refactoring a Flutter mobile application.26k2.8kHow it compares
Use muapi-ui-design for AI-generated mockups from requirements; use rive-interactive when the deliverable is interactive vector animation in React.
FAQ
What does muapi-ui-design do?
Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai.
When should I use muapi-ui-design?
User asks about muapi ui design or related SKILL.md workflows.
Is muapi-ui-design safe to install?
Review the Security Audits panel on this page before installing in production.