为 AI 代理提供的专用技能，用于架构高保真数字界面。
UI/UX 设计技能将产品要求转换为高保真模拟、线框图和设计系统的技术设计规范。
核心能力
- 原子设计编排：从按钮（原子）到头部（生物体）结构化界面，确保系统一致性。
- 平台特定布局：为移动（iOS/Android）和网页（SaaS/电商）设计响应式断点。
- 设计系统集成：指定字体尺寸、间距令牌（8pt 网格）和颜色调色板（十六进制/HSI）。
- 启发式意识：确保设计遵循已建立的可用性原则（Nielsen 的 10 个启发式）。
... （由于字符限制，完整的 cn_skill_md_content 未全部显示，但您可以根据需要自行翻译剩余部分）
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
- 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).
🏗️ 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:
- 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.
🚀 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.
# 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.
by