Muapi Ui Design
Turn product requirements into Atomic Design–based wireframes and design tokens before you commit engineering time.
Overview
muapi-ui-design is an agent skill most often used in Validate (also Build frontend) that generates high-fidelity UI/UX mockups and design-system specs through muapi.ai using Atomic Design.
Install
npx skills add https://github.com/samuraigpt/generative-media-skills --skill muapi-ui-designWhat is this skill?
- Atomic Design orchestration from atoms through organisms for consistent systems
- Intent mapping across Enterprise SaaS, consumer app, e-commerce, portfolio, and utility layouts
- Platform-specific breakpoints for mobile (iOS/Android) and web SaaS/e-commerce
- Design token output: typography scales, spacing, and Hex/HSL palettes
- Heuristic alignment with Nielsen’s usability principles for generated mockups
- 5 creative-intent layout mappings (Enterprise SaaS through Utility/Tool)
- 4 core competency areas including Atomic Design orchestration and platform-specific layouts
Adoption & trust: 674 installs on skills.sh; 3.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You know what the product should do but lack credible screens, spacing, and color tokens to validate the idea or brief a build.
Who is it for?
Indie founders who want structured mockups and a mini design system from a written spec before coding.
Skip if: Teams that already have an approved Figma library and only need pixel-perfect implementation in code.
When should I use this skill?
You have product requirements and need high-fidelity mockups, wireframes, or a design system spec via muapi.ai.
What do I get? / Deliverables
You get platform-aware wireframes, layout patterns matched to product intent, and exportable design tokens ready for stakeholder review or frontend implementation.
- High-fidelity mockup specifications
- Wireframe layouts per intent mapping
- Design token sheet (type, spacing, color)
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Mockups and design systems are the canonical pre-build proof artifact in Validate—where you test layout and usability before full Build. Prototype subphase is where high-fidelity UI specs and wireframes live, not production CSS.
Where it fits
Turn a one-page PRD into dashboard and settings mockups to test whether the information architecture feels dense enough for power users.
Generate a Z-Pattern e-commerce hero and product grid to sanity-check conversion layout before paying for photography.
Refresh spacing and typography tokens for a consumer app card layout before implementing components in React Native.
How it compares
Use for generative UI specification via an external design API—not as a local Figma plugin or component codegen skill.
Common Questions / FAQ
Who is muapi-ui-design for?
Solo and indie builders who need mobile or web mockups and tokenized design systems without owning a full design toolchain.
When should I use muapi-ui-design?
During Validate when prototyping screens for a landing or app concept; during Build frontend when refreshing a dashboard or e-commerce grid from new requirements; and early Launch when you need consistent visual language for marketing surfaces.
Is muapi-ui-design safe to install?
Review the Security Audits panel on this Prism page and treat muapi.ai API calls as network exposure—do not send secrets in prompts.
SKILL.md
READMESKILL.md - Muapi Ui Design
# 🎨 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. #!/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