技能详情（站内镜像，无评论）
作者：Anil Chandra Naidu Matcha @anil-matcha
许可证：MIT-0
MIT-0 ·免费使用、修改和重新分发。无需归因。
版本：v0.1.0
统计：⭐ 0 · 129 · 1 current installs · 1 all-time installs
⭐ 0
安装量（当前） 1
🛡 VirusTotal ：良性 · OpenClaw ：良性
Package：anil-matcha/muapi-ui-design-skill
安全扫描（ClawHub）
- VirusTotal ：良性
- OpenClaw ：良性
OpenClaw 评估
The skill is internally consistent for generating UI mockups using a local 'core' image-generation primitive, but there is a minor mismatch between the description (mentions muapi.ai) and the actual implementation (calls a local core/media/generate-image.sh with model 'flux-dev'); no excessive credentials or risky installs are requested.
目的
The skill's stated purpose is UI/UX mockup generation. The included script and SKILL.md implement that: they build a UX brief and call a core image-generation primitive. However the description mentions 'muapi.ai' as the generator, while the script calls a local core/media/generate-image.sh with model 'flux-dev' — a superficial mismatch that should be clarified but does not indicate malicious behavior.
说明范围
SKILL.md instructs the agent to expand the user's brief into a structured UX_BRIEF and then run the provided script. The instructions do not request reading unrelated files, environment variables, or external endpoints beyond the core primitive, and the script only constructs a prompt and forwards it to core/media/generate-image.sh.
安装机制
No install spec is provided (instruction-only plus a small helper script). Nothing is downloaded or written to disk by an installer, which is the lowest-risk model for skills.
证书
The skill requests no environment variables or credentials, which matches its stated functionality. The description's reference to muapi.ai could imply an external API or credential requirement, but no such vars are declared or used in the code — clarify whether muapi.ai is an implementation detail of the platform or an outdated note.
持久
The skill does not request always:true and has no install-time persistence. It merely invokes a local core primitive; it does not modify other skills or system-wide configuration.
综合结论
This skill appears to do what it says: convert a product brief into a UX prompt and call the agent platform's image-generation primitive. Before installing, verify two small things: (1) Clarify the 'muapi.ai' mention — confirm whether an external API or API key is actually required (none are declared), and (2) confirm what the core/media/generate-image.sh primitive does on your platform (network calls, external providers, or data retention pol…
安装（复制给龙虾 AI）
将下方整段复制到龙虾中文库对话中，由龙虾按 SKILL.md 完成安装。
请把本段交给龙虾中文库（龙虾 AI）执行：为本机安装 OpenClaw 技能「Ui Design」。简介：Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Desig…。
请 fetch 以下地址读取 SKILL.md 并按文档完成安装：https://raw.githubusercontent.com/openclaw/skills/refs/heads/main/skills/anil-matcha/muapi-ui-design-skill/SKILL.md
（来源：yingzhi8.cn 技能库）SKILL.md
---
slug: muapi-ui-design-skill
name: muapi-ui-design
version: "0.1.0"
description: Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai
acceptLicenseTerms: true
---
# 🎨 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. **NO SKEUOMORPHISM**: Ensure the prompt enforces *Flat Design* or *Glassmorphism* to avoid "photograph-of-screen" results.
---
## 🚀 Protocol: Using the UI Designer
### Step 1: Define the Product Brief
Provide the agent with a feature list and target audience.
### Step 2: Invoke the Script
The `generate-mockup.sh` script expands the brief using internal knowledge of design systems.
```bash
# Designing a Fintech Mobile App
bash scripts/generate-mockup.sh
--desc "crypto wallet home with price charts"
--platform mobile
--theme dark
--style glassmorphism
```
---
## ⚠️ Constraints & Guardrails
- **Device Realism**: **MANDATORY** - Do not show hands, physical phones, or desks. Generate pure UI/UX mockups only.
- **Accessibility**: Avoid low-contrast text on bright backgrounds.
- **Complexity**: Keep "Atoms" consistent across a single page generation.
- **Text Rendering**: Use Flux for legible headers; specify placeholder text for smaller body copy.
---
## ⚙️ Implementation Details
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.