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
Best use case
muapi-ui-design is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai
Teams using muapi-ui-design should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/muapi-ui-design-skill/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How muapi-ui-design Compares
| Feature / Agent | muapi-ui-design | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this 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
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
AI Agents for Marketing
Discover AI agents for marketing workflows, from SEO and content production to campaign research, outreach, and analytics.
AI Agents for Startups
Explore AI agent skills for startup validation, product research, growth experiments, documentation, and fast execution with small teams.
SKILL.md Source
# 🎨 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.
Related Skills
Presentation Mastery — Complete Slide Design & Delivery System
You are a Presentation Architect. You help build presentations that persuade, inform, and move people to action. You cover the full lifecycle: audience analysis → narrative structure → slide design → delivery coaching → post-presentation follow-up.
ui-designer
Design beautiful interfaces using 16+ design systems including Material You, Fluent Design, Apple HIG, Ant Design, Carbon Design, Shopify Polaris, Minimalism, Glassmorphism, Neo-Brutalism, Neumorphism, Skeuomorphism, Claymorphism, Swiss Design, and Atlassian Design. Expert in Tailwind CSS, color harmonics, component theming, and accessibility (WCAG).
instructional-design-cn
培训课程大纲设计、效果评估、内部分享材料生成
designer-intelligence-station
设计师情报收集工具。监控 40 个公开信息源（AI/硬件/手机/设计），6 维筛选标准 v2.0（基于 120+ 条行为分析），生成结构化日报/周报。仅抓取公开内容，不登录、不提交表单、不绕过付费墙。支持依赖自动检测和安装。
SendTradeSignal
A specialized tool for sending quantitative trading signals to the FMZ platform via HTTP API.
design-inspiration-collector
多平台设计灵感收集技能。当用户需要设计参考、UI灵感、视觉创意时触发。用户提出设计方向（如"医疗App"、"移动端UI"、"金融Dashboard"等），技能负责：(1) 使用Tavily搜索Behance、Dribbble、Pinterest三个平台的相关内容 (2) 整理内容并附上链接 (3) 生成腾讯文档，文档命名为"关键词+日期时间"格式 (4) 发送文档链接给用户 (5) 推荐其他相关方向（不带链接）。触发词：找灵感、收集灵感、设计参考、UI参考、视觉灵感、设计趋势、Behance、Dribbble、Pinterest。
crm-antdesign-admin-spec
Design, structure, review, and generate B2B CRM or admin pages using an Ant Design-style system with page taxonomy, reusable layout rules, token guidance, component mapping, and AI-generation constraints. Use when the user wants a CRM/admin dashboard, statistics page, AI analytics page, list page, customer page, or configuration/tool page that must stay implementation-friendly and visually consistent.
design-style
Use this skill when the user asks to build, create, design, develop, or improve ANY frontend interface, web page, UI component, or visual element. This includes: - Building landing pages, websites, web apps, dashboards, portfolios, or any web interface - Creating UI components (buttons, forms, cards, navbars, modals, etc.) - Designing pages with React, Vue, Next.js, Svelte, or any frontend framework - Adding styling or improving visual design of existing components - Implementing specific design aesthetics (modern, dark, minimalist, brutalist, etc.) - User mentions "frontend", "UI", "UX", "design", "interface", "web design", or "styling" - User asks for "beautiful", "modern", "professional", "clean", or any aesthetic adjective - User requests help with CSS, Tailwind, styled-components, or any styling approach This skill automatically retrieves the appropriate design system prompt (Neo-brutalism, Modern Dark, Bauhaus, Cyberpunk, Material, etc.) to help create visually distinctive, production-grade frontend code instead of generic UI. IMPORTANT: Trigger this skill proactively for ANY frontend/UI work, not just when design style is explicitly mentioned.
Ant Design 组件库 (antd)
## 描述
vaccine-design-orchestrator
Use this skill when the user wants to evaluate a new nanoparticle vaccine candidate, redesign a computational screening workflow, define gate criteria, or produce a Go/Hold/Kill decision.
skill_creator_design
生成定制化的设计项目 Skill（含 SKILL.md + references/），为用户的设计过程提供从需求定义到 交付的持续引导。触发场景：用户表达想做设计相关工作（"我想设计 X""做个 X 的方案" "帮我设计一个 X""出个设计""改版 X""重新做一下 X""想想 X 怎么做""design X" "redesign X"），或要求生成设计规划、设计 skill（"创建设计项目""generate a design skill" "帮我规划一下这个设计"）。涵盖产品设计、交互设计、体验设计、信息架构、视觉方案等。 安装本 skill 即表明用户倾向于系统化设计管理——遇到设计意图时优先触发，而非直接进入 即时头脑风暴。
ad-designer
Generate marketing ad images using Nano Banana Pro (Gemini 3 Pro Image). Accepts campaign-planner creative briefs, reads brand bible for visual style, constructs marketing-optimized prompts, and produces platform-ready images at correct aspect ratios. Supports 1:1, 9:16, 16:9, 4:5 formats. Includes self-review loop to catch hallucinated logos, wrong text, and quality issues. Draft-first workflow (1K fast iteration, 4K final). Outputs to /tmp/marketing/assets/images/.