muapi-ui-design
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
Chinese🎨 UI/UX Design Mockup Skill
🎨 UI/UX设计原型图技能
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.
专为AI Agents打造的、用于构建高保真数字界面的专业技能。
UI/UX设计技能可将产品需求转化为高保真原型图、线框图和设计系统的技术设计规范。
Core Competencies
核心能力
- Atomic Design Orchestration: Structuring interfaces from Atoms (buttons) to Organisms (headers) for system consistency.
- Platform-Specific Layouts: Designing for responsive breakpoints across Mobile (iOS/Android) and Web (SaaS/E-commerce).
- Design System Integration: Specifying typography scales, spacing tokens, and color palettes (Hex/HSL).
- Heuristic Awareness: Ensuring designs follow established usability principles (Nielsen's 10 Heuristics).
- Atomic Design编排：从原子（按钮）到有机体（页眉）构建界面，确保系统一致性。
- 平台特定布局：针对移动端（iOS/Android）和Web端（SaaS/电商）的响应式断点进行设计。
- 设计系统集成：指定排版比例、间距标记和调色板（Hex/HSL格式）。
- 启发式意识：确保设计遵循既定的可用性原则（尼尔森十大启发式原则）。
🏗️ Technical Specification
🏗️ 技术规范
1. Intent Mapping Table
1. 意图映射表
| 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 |
| 创意意图 | 风格 | 布局模式 | 重点 |
|---|---|---|---|
| 企业级SaaS | 现代/简洁 | 仪表盘/网格 | 数据密度 |
| 消费类应用 | 玻璃拟态 | F型模式/卡片 | 视觉吸引力 |
| 电商 | 极简主义 | Z型模式/产品网格 | 转化率 |
| 作品集 | 野兽派 | 非对称 | 品牌辨识度 |
| 实用工具 | 新拟态 | 控制面板 | 触觉反馈 |
2. Design Tokens & Variables
2. 设计标记与变量
- : Geometric Sans (Inter/Roboto) for tech; Serif (Playfair) for luxury.
Typography - : 8pt grid system for consistent rhythmic spacing.
Spacing - : High-contrast accessible palettes (WCAG 2.1 compliant).
Color - : Shadow-based depth vs. Flat design layers.
Elevation
- ：科技类使用几何无衬线字体（Inter/Roboto）；奢侈品使用衬线字体（Playfair）。
Typography - ：8pt网格系统，确保间距节奏一致。
Spacing - ：高对比度的可访问调色板（符合WCAG 2.1标准）。
Color - ：基于阴影的层次感 vs 扁平化设计图层。
Elevation
🧠 Prompt Optimization Protocol (Agent Instruction)
🧠 提示词优化协议（Agent指令）
Before calling the script, the Agent MUST expand the user's requirements into a Design Specification:
- ATOMIC STRUCTURE: Mention specific components (Atoms): Glassmorphic buttons, Input fields with 4px radius, Iconic sidebars.
- HIERARCHY: Use layout patterns: F-Pattern for content-heavy sites, Z-Pattern for landing pages, Grid-based Dashboards.
- TYPOGRAPHY & TOKENS: Injected design tokens: Inter Sans-serif, 8pt spacing system, WCAG high-contrast colors.
- NO SKEUOMORPHISM: Ensure the prompt enforces Flat Design or Glassmorphism to avoid "photograph-of-screen" results.
在调用脚本之前，Agent必须将用户需求扩展为设计规范：
- 原子结构：提及特定组件（原子）：玻璃拟态按钮、带4px圆角的输入框、图标式侧边栏。
- 层级结构：使用布局模式：F型模式适用于内容密集型网站，Z型模式适用于着陆页，网格型仪表盘。
- 排版与标记：注入设计标记：Inter无衬线字体、8pt间距系统、WCAG高对比度颜色。
- 禁止拟物化：确保提示词强制使用扁平化设计或玻璃拟态，避免生成“屏幕照片式”结果。
🚀 Protocol: Using the UI Designer
🚀 使用UI设计师的流程
Step 1: Define the Product Brief
步骤1：定义产品简介
Provide the agent with a feature list and target audience.
向Agent提供功能列表和目标受众。
Step 2: Invoke the Script
步骤2：调用脚本
The script expands the brief using internal knowledge of design systems.
generate-mockup.shbash
undefinedgenerate-mockup.shbash
undefinedDesigning a Fintech Mobile App
Designing a Fintech Mobile App
bash scripts/generate-mockup.sh
--desc "crypto wallet home with price charts"
--platform mobile
--theme dark
--style glassmorphism
--desc "crypto wallet home with price charts"
--platform mobile
--theme dark
--style glassmorphism
---bash scripts/generate-mockup.sh
--desc "crypto wallet home with price charts"
--platform mobile
--theme dark
--style glassmorphism
--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.
- 设备真实性：强制要求 - 不得显示手、实体手机或桌面。仅生成纯UI/UX原型图。
- 可访问性：避免亮色背景上使用低对比度文本。
- 一致性：在单页生成中保持“原子”组件的一致性。
- 文本渲染：使用Flux生成清晰的标题；为较小的正文内容指定占位符文本。
⚙️ Implementation Details
⚙️ 实现细节
This skill translates a high-level into a that specifies layout patterns, design tokens, and aesthetic constraints for the primitive.
DESCRIPTIONUX_BRIEFcore/media/generate-image.sh该技能将高层次的转换为，为原语指定布局模式、设计标记和美学约束。
DESCRIPTIONUX_BRIEFcore/media/generate-image.sh