skills.rest
SamurAIGPT
SamurAIGPTOFFICIAL
Explore all skills by this author →
GitHub

muapi-ui-design

Generate high-fidelity UI/UX mockups for mobile and web applications.

4.0k|451|Updated May 25, 2023
Search Tags:#design system#wireframing#atomic design#ux design#ui design#mockup generation
One-click install
npx skills add https://github.com/SamurAIGPT/Generative-Media-Skills --skill muapi-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: muapi-ui-design
Source: https://github.com/SamurAIGPT/Generative-Media-Skills/tree/main/library/visual/ui-design
Command: npx skills add https://github.com/SamurAIGPT/Generative-Media-Skills --skill muapi-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the creation of high-fidelity UI/UX mockups, translating product requirements into professional design specifications for mobile and web applications.

Core Features & Use Cases

  • Atomic Design Orchestration: Structures interfaces from basic elements to complex components.
  • Platform-Specific Layouts: Designs for responsive breakpoints across mobile and web.
  • Design System Integration: Specifies typography, spacing, and color palettes.
  • Use Case: Generate a dark-themed, glassmorphism-styled UI mockup for a fintech mobile app's home screen, featuring price charts and a bottom navigation bar.

Quick Start

Design a crypto wallet home screen for a mobile platform with a dark theme and glassmorphism style.

Frequently Asked Questions about muapi-ui-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate high-fidelity UI mockups for a mobile app?▼

To generate high-fidelity UI mockups for a mobile app, provide product requirements, platform specifications, and design principles like typography and color palettes to automate the creation of professional design layouts.

What is atomic design and how does it structure UI components?▼

Atomic design structures UI components by orchestrating interfaces from basic elements into complex components, ensuring consistent design system integration for both web and mobile applications.

Can I specify platform-specific layouts and themes for UI design generation?▼

Yes, you can specify platform-specific layouts for responsive breakpoints across mobile and web, applying custom themes like dark mode and styles such as glassmorphism for your UI design.

How do I create a dark-themed UI mockup with glassmorphism styling?▼

You create a dark-themed glassmorphism UI mockup by defining your product requirements and style preferences, which generates platform-specific layouts with tailored color palettes and visual effects.

Does UI mockup generation include design system elements like spacing and typography?▼

Yes, UI mockup generation includes design system elements by specifying typography, spacing, and color palettes to ensure the high-fidelity output adheres to professional design principles.

What's the best way to automate web application wireframing and mockup creation?▼

The best way to automate web application wireframing and mockup creation is translating product requirements directly into high-fidelity designs using atomic design structures and responsive breakpoints.

Related Skills

Explore More Design & Creative Skills→
PiaoxuemoliPiaoxuemoli

sketch

Generate disposable HTML mockup variants from user design preferences.

Community
Intermediate
binan-makerbinan-maker

recreate-screenshot

Recreate UI screens from screenshots or image references with pixel-perfect accuracy.

Community
Advanced
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
intelligentcode-aiintelligentcode-ai
35

web-designer

Design user interfaces and design systems for web and mobile experiences.

Official
Basic