muapi-ui-design

What This Skill Does

The muapi-ui-design skill is an advanced interface architect designed to transform abstract product requirements into structured, high-fidelity UI/UX mockups. By leveraging Atomic Design principles, the skill allows AI agents to decompose complex screens into logical hierarchies, ranging from individual atoms like buttons and input fields to full organisms such as navigation sidebars and data-dense dashboards. It acts as a bridge between intent and visual execution, ensuring that every generated interface adheres to modern design standards, responsive layouts, and accessibility requirements like WCAG 2.1.

Installation

To integrate this skill into your agent, use the OpenClaw CLI within your terminal. Ensure your environment is authenticated with the repository, then execute the following command: clawhub install openclaw/skills/skills/anil-matcha/muapi-ui-design-skill. Once installed, the skill exposes the generate-mockup.sh script, which can be triggered directly via your agent's command execution flow.

Use Cases

This skill is ideal for rapid prototyping and design system maintenance. Key use cases include: generating mobile app screens for Fintech or E-commerce platforms, creating responsive web dashboard layouts for SaaS applications, maintaining a consistent brand aesthetic using specific design tokens, and automating the creation of wireframes during the early stages of product development to iterate faster without manual design overhead.

Example Prompts

1. "Create a high-fidelity dashboard for a SaaS analytics tool using a grid-based layout and a clean, modern style with dark mode enabled."
2. "Design a mobile wallet screen for an iOS app; use glassmorphism, include a price chart widget, and ensure buttons follow a 4px radius standard."
3. "Generate a landing page mockup for a minimalist e-commerce store using a Z-pattern layout to optimize conversion for product discovery."

Tips & Limitations

To get the best results, always be specific about the platform and the target audience. The skill performs best when given a clear 'Design Specification' rather than a vague request. Remember that the output is intended to provide structural and visual blueprints; you may need to tweak specific hex codes if your brand identity is strictly defined. Avoid requesting photorealistic images, as this skill is optimized for UI/UX schematic accuracy. Always define the layout pattern—such as F-pattern or Z-pattern—to ensure the AI correctly prioritizes your content hierarchy.