{"slug":"muapi-ui-design-2","title":"muapi-ui-design","summary":"Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai","platform":"opencode","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-09-01T17:42:45.979385Z","repo":{"url":"https://github.com/SamurAIGPT/Generative-Media-Skills","stars":4329,"forks":496,"license":"MIT","updatedAt":"2026-09-08T23:14:35Z"},"bodyHtml":"
\n

name: muapi-ui-design\nversion: 0.1.0\ndescription: Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai

\n

\uD83C\uDFA8 UI/UX Design Mockup Skill

\n

A specialized skill for AI Agents to architect high-fidelity digital interfaces.\nThe UI/UX Design skill translates product requirements into technical design specifications for high-fidelity mockups, wireframes, and design systems.

\n

Core Competencies

\n
    \n
  1. Atomic Design Orchestration: Structuring interfaces from Atoms (buttons) to Organisms (headers) for system consistency.
    2. \n
  2. Platform-Specific Layouts: Designing for responsive breakpoints across Mobile (iOS/Android) and Web (SaaS/E-commerce).
    3. \n
  3. Design System Integration: Specifying typography scales, spacing tokens, and color palettes (Hex/HSL).
    4. \n
  4. Heuristic Awareness: Ensuring designs follow established usability principles (Nielsen's 10 Heuristics).
    5. \n
\n
\n

\uD83C\uDFD7️ Technical Specification

\n

1. Intent Mapping Table

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Creative IntentStyleLayout PatternFocus
Enterprise SaaSModern/CleanDashboard/GridData Density
Consumer AppGlassmorphismF-Pattern / CardsVisual Flair
E-commerceMinimalistZ-Pattern / Product GridConversion
PortfolioBrutalistAsymmetricIdentity
Utility/ToolNeomorphismControl PanelTactile Feedback
\n

2. Design Tokens & Variables

\n\n
\n

\uD83E\uDDE0 Prompt Optimization Protocol (Agent Instruction)

\n

Before calling the script, the Agent MUST expand the user's requirements into a Design Specification:

\n
    \n
  1. ATOMIC STRUCTURE: Mention specific components (Atoms): Glassmorphic buttons, Input fields with 4px radius, Iconic sidebars.
    2. \n
  2. HIERARCHY: Use layout patterns: F-Pattern for content-heavy sites, Z-Pattern for landing pages, Grid-based Dashboards.
    3. \n
  3. TYPOGRAPHY & TOKENS: Injected design tokens: Inter Sans-serif, 8pt spacing system, WCAG high-contrast colors.
    4. \n
  4. NO SKEUOMORPHISM: Ensure the prompt enforces Flat Design or Glassmorphism to avoid \"photograph-of-screen\" results.
    5. \n
\n
\n

\uD83D\uDE80 Protocol: Using the UI Designer

\n

Step 1: Define the Product Brief

\n

Provide the agent with a feature list and target audience.

\n

Step 2: Invoke the Script

\n

The generate-mockup.sh script expands the brief using internal knowledge of design systems.

\n
# Designing a Fintech Mobile App\nbash scripts/generate-mockup.sh \\\n  --desc \"crypto wallet home with price charts\" \\\n  --platform mobile \\\n  --theme dark \\\n  --style glassmorphism\n
\n
\n

⚠️ Constraints & Guardrails

\n\n
\n

⚙️ Implementation Details

\n

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.

\n","files":[{"path":"scripts/generate-mockup.sh","sizeBytes":1627,"isText":true},{"path":"SKILL.md","sizeBytes":3555,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-09-01T17:44:33.441831Z","sha256":"84CC9E7D04C6E366D64A29EB57464E23E3E981F56D890BC1ECEC9A4193D93E4B","sizeBytes":3018},"review":null,"source":{"repositoryUrl":"https://github.com/SamurAIGPT/Generative-Media-Skills","path":"library/visual/ui-design","license":"MIT","commit":"5519622e885abc60217a65c8e090bcb1d9830746","subtreeSha":"ADAD78B52F57F4251E1E4209E2CE985F03CAB8AA21782C33F57A44E034167EC3","lastSyncedAt":"2026-09-26T23:11:47.74198Z"},"reviewedAt":"2026-09-01T17:48:23.817968Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/SamurAIGPT/Generative-Media-Skills/tree/main/library/visual/ui-design"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install samuraigpt-generative-media-skills@llmmart"},{"target":"git","command":"git clone https://github.com/SamurAIGPT/Generative-Media-Skills.git"}]}