Agent skill · design visual · samuraigpt
muapi-ui-design
Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai
Why this skill is useful
Adds a script for generating high-fidelity UI/UX mockups using specific design tokens and patterns that the AI cannot generate on its own.
What it needs
Requires bash installed locally. About 2k tokens when loaded. Last updated 2026-08-04. 3,990 stars on the source repository.
What this skill does
🎨 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills samuraigpt/ui-design