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
npx skills add SamurAIGPT/Generative-Media-Skills --skill ui-design --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 🎨 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** | N
- Core Competencies
- 🏗️ Technical Specification
- 1. Intent Mapping Table
- 2. Design Tokens & Variables
- 🧠 Prompt Optimization Protocol (Agent Instruction)
- 🚀 Protocol: Using the UI Designer
- Step 1: Define the Product Brief
- Step 2: Invoke the Script
- ⚠️ Constraints & Guardrails
- ⚙️ Implementation Details
Designing a Fintech Mobile App bash scripts/generate-mockup.sh \
What does the muapi-ui-design skill do?
Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai
How do I install it?
Run `npx skills add SamurAIGPT/Generative-Media-Skills --skill ui-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From SamurAIGPT/Generative-Media-Skills, a repository with 3,976 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.