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. 设计标记与变量

```
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.

```
Typography
```
：科技类使用几何无衬线字体（Inter/Roboto）；奢侈品使用衬线字体（Playfair）。
```
Spacing
```
：8pt网格系统，确保间距节奏一致。
```
Color
```
：高对比度的可访问调色板（符合WCAG 2.1标准）。
```
Elevation
```
：基于阴影的层次感 vs 扁平化设计图层。

🧠 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

generate-mockup.sh

script expands the brief using internal knowledge of design systems.

bash

undefined

generate-mockup.sh

脚本会利用设计系统的内部知识扩展简介内容。

bash

undefined

Designing a Fintech Mobile App

bash scripts/generate-mockup.sh
--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

---

⚠️ 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

DESCRIPTION

into a

UX_BRIEF

that specifies layout patterns, design tokens, and aesthetic constraints for the

core/media/generate-image.sh

primitive.

该技能将高层次的

DESCRIPTION

转换为

UX_BRIEF

，为

core/media/generate-image.sh

原语指定布局模式、设计标记和美学约束。