A specialized AI agent skill for architecting high-fidelity digital interfaces and design systems using Atomic Design principles.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install muapi-ui-design-skill
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install muapi-ui-design-skill using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is muapi-ui-design?
The muapi-ui-design skill is a sophisticated technical framework designed for AI agents to translate raw product requirements into structured technical design specifications. By leveraging Openclaw Skills, developers can automate the creation of wireframes, high-fidelity mockups, and comprehensive design systems for both mobile and web platforms.
Built on the foundation of Atomic Design, this skill ensures interface consistency by orchestrating components from individual atoms like buttons and inputs up to complex organisms and page layouts. It integrates deep heuristic awareness and platform-specific layout patterns to deliver production-ready visual concepts that adhere to modern usability standards.
muapi-ui-design Use Cases
- Rapid prototyping of Enterprise SaaS dashboards with high data density.
- Creating glassmorphic consumer app interfaces for iOS and Android.
- Designing conversion-optimized E-commerce product grids and landing pages.
- Generating consistent design systems including typography scales, spacing tokens, and color palettes.
- Developing accessible, WCAG-compliant UI mockups for utility tools.
How muapi-ui-design Works
- Requirement Analysis: The agent processes the user's product brief, identifying target audience and core features.
- Design Specification Expansion: The Openclaw Skills protocol expands the brief into a technical design spec, defining atomic structures and layout patterns (F-pattern, Z-pattern, or Grid).
- Token Injection: Precise design tokens such as 8pt grid spacing, typography (e.g., Inter Sans-serif), and color hex codes are assigned.
- Constraint Enforcement: The system applies guardrails to ensure device realism, removing physical objects and focusing strictly on the digital UI.
- Mockup Generation: The script executes the design brief to produce a high-fidelity visual mockup via the media primitive.
muapi-ui-design Setup
To install and begin using this skill within your agent environment, follow these steps:
- Ensure you have the Openclaw Skills environment configured.
- Deploy the UI design scripts to your local repository.
- Execute the generation script with your desired parameters:
# Example: Designing a Fintech Mobile App
bash scripts/generate-mockup.sh \
--desc "crypto wallet home with price charts" \
--platform mobile \
--theme dark \
--style glassmorphism
muapi-ui-design Data Schema & Taxonomy
The skill organizes design data into a structured hierarchy to maintain system integrity:
| Data Layer | Components | Output Format |
|---|---|---|
| Atoms | Buttons, Inputs, Icons | Design Tokens |
| Molecules | Search Bars, Form Fields | Component Specs |
| Organisms | Headers, Sidebars, Nav | Layout Blocks |
| Templates | Page Wireframes | High-Fidelity Mockups |
Metadata includes typography scales (Geometric Sans/Serif), spacing variables (8pt grid), and accessibility compliance levels.
muapi-ui-design Advanced Features
- Atomic Design Orchestration: Ensures every generated page uses a consistent library of components.
- Heuristic Awareness: Automatically applies Nielsen's 10 Heuristics to layout logic.
- Prompt Optimization Protocol: An internal agent instruction set that prevents skeuomorphism and ensures flat or glassmorphic modern aesthetics.
- Multi-Platform Support: Context-aware design for Mobile (iOS/Android) and Web breakpoints using the same Openclaw Skills workflow.
- WCAG Compliance: High-contrast accessibility palettes are prioritized during the token generation phase.
SKILL.md
Loading
Related Openclaw Skills
Clip History
An offline developer documentation reference tool providing instant access to patterns, debugging guides, and best practices.
SenseAudio Video Narrator
A powerful AI narration tool that generates synchronized audio tracks and timestamped voiceovers for video content production.
VASP Input Generator
A specialized tool for generating and validating complete VASP input files for density functional theory (DFT) calculations.
Test Online Analysis
A sophisticated tool for real-time data analysis, business rule extraction, and anomaly detection in testing environments.
Twitter Reader
A specialized tool for extracting clean markdown content from Twitter/X articles and status updates via the jina.ai proxy.
Behavior Design OS
A meta-foundation skill that transforms AI agents into behavior architects by analyzing human motives and designing psychologically aligned systems.
Featured*
