samuraigpt/muapi-ui-design
library/visual/ui-design/SKILL.md
Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai
$ install --global
skillsauthnpx skillsauth add samuraigpt/embedai muapi-ui-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 27, 2026, 2:55 PM1.8s1 file scanned
SKILL.md
- 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
samuraigpt/muapi-color-analysis-board
development
VerifiedTrustedCommunity
Turn a portrait photo into a high-end editorial "Color Analysis Board" in a luxury fashion-magazine style (Dior / Ralph Lauren aesthetic) — best colors, undertone, makeup guide, capsule wardrobe, hair & jewelry recommendations, all laid out on a clean beige/ivory grid.
3,298SKILL.mdUpdated May 20, 2026
samuraigpt/muapi-ugc-video-factory
development
VerifiedTrustedCommunity
Turn a person photo + a product photo + an optional script into a vertical 9:16 UGC-style video ad. Generates a lifestyle hero image (Nano-Banana Pro Edit), then animates it with native audio using Seedance 2.0 VIP image-to-video.
3,298SKILL.mdUpdated May 19, 2026
samuraigpt/muapi-freeze-effect-video
development
VerifiedTrustedCommunity
Generate a cinematic "freeze effect" video where time stops mid-scene, the subject walks through the frozen world, then time resumes with a snap.
3,298SKILL.mdUpdated May 17, 2026
samuraigpt/muapi-youtube-thumbnail
development
VerifiedTrustedCommunity
Design a high-CTR YouTube thumbnail — striking imagery, bold text placement, and emotional face/subject if needed.
3,298SKILL.mdUpdated May 16, 2026