UX Design with Gemini

Use memex-cli to leverage Gemini for UX design tasks with multimodal analysis and structured output generation.

---

Mandatory Execution Protocol

⚠️ CRITICAL: Claude MUST complete ALL applicable steps BEFORE invoking memex-cli. Skipping any step is a protocol violation.

Step 1: Scope Analysis

Analyze design task scope:

Scope	Trigger	Action
Single	1 个页面/组件	直接执行
Multi-page	多个页面	任务分解
Multi-stage	研究→定义→原型	依赖分析
Design System	完整设计体系	分解 + 依赖

Output: Scope type with reasoning.

Step 2: Task Decomposition (Multi-page/System MANDATORY)

Required when: 任务涉及 ≥2 个页面或组件

Claude MUST decompose the task:

1. 识别所有设计交付物
2. 拆分为独立设计任务
3. 分配唯一 task ID
4. 建立依赖关系（如有）

Skip condition: Only if task is truly atomic (single page, single component)

Step 3: Dependency Analysis (Multi-stage MANDATORY)

Required when: 设计流程跨多个阶段

Design stage dependency chain:

Research → Define → Ideate → Prototype → Test
   ↓         ↓         ↓          ↓
personas  sitemap   userflow   wireframe

Claude MUST:

1. Identify design stages involved
2. Map dependencies between deliverables
3. Build execution DAG

Step 4: Workdir Resolution (AUTO)

Required for: ALL tasks

Claude MUST resolve workdir to project root:

git rev-parse --show-toplevel

Rule: workdir = Git 项目根目录（绝对路径）

Step 5: Execution Plan Report (ALL Tasks)

Claude MUST report to user before execution:

## 📋 设计执行计划

### 范围分析
- **类型**: [Single/Multi-page/Multi-stage/Design System]
- **交付物**: [列表]

### 任务分解 (如适用)
| ID | 设计任务 | 依赖 |
|----|----------|------|
| design-1 | [desc] | - |
| design-2 | [desc] | design-1 |

### 依赖图 (如适用)

Phase 1: [design-1] [design-2]
Phase 2: [design-3 depends on 1,2]

### 执行摘要
- **Workdir**: /path/to/project
- **子任务数**: N
- **并行组**: M

Pre-Execution Checklist

Before invoking memex-cli, Claude MUST confirm:

• ✅ 范围分析完成 (Single/Multi-page/Multi-stage/System)
• ✅ (多页面/系统) 任务已分解
• ✅ (多阶段) 依赖已分析
• ✅ Workdir 已解析 (via git root)
• ✅ 执行计划已报告给用户

⛔ VIOLATION: Directly passing multi-page/system task to Gemini without decomposition is a protocol violation.

---

When to Use This Skill

Choose ux-design-gemini when:

• Creating design documentation (personas, journey maps, wireframes)
• Building design systems and component libraries
• Analyzing design screenshots for critique
• Generating structured design specifications

Choose other skills when:

• Code implementation → Use code-with-codex
• Complex architecture decisions → Use Claude via memex-cli
• Multi-backend workflows → Combine Gemini (design) + Codex (code)

---

Design Stages Overview

Stage	Design Tasks	Output Examples	Gemini Strengths
Research	User personas, journey maps	User Research	Text analysis, structured output
Define	Information architecture, site maps	IA Examples	Hierarchical structure generation
Ideate	User flows, concept descriptions	See Quick Start below	Rapid iteration on concepts
Prototype	Wireframe specs, mockups, design systems	Wireframes, Components	Detailed specifications
Test	Design reviews, accessibility audits	Design Review	Image analysis for visual critique

➜ Complete workflow guide: references/design-workflow.md

---

Quick Start

Generate User Flow

memex-cli run --stdin <<'EOF'
---TASK---
id: user-flow
backend: gemini
workdir: /path/to/project
---CONTENT---
设计一个电商App的用户购物流程，包含浏览、加购、结算、支付的完整流程图
---END---
EOF

Create Wireframe Spec

memex-cli run --stdin <<'EOF'
---TASK---
id: wireframe
backend: gemini
workdir: /path/to/project
---CONTENT---
为登录注册页面创建线框图规格说明，包含布局、组件位置、交互状态
---END---
EOF

Design Component System

memex-cli run --stdin <<'EOF'
---TASK---
id: component-system
backend: gemini
workdir: /path/to/project
---CONTENT---
设计一套移动端UI组件规范，包含按钮、输入框、卡片、导航栏的样式定义
---END---
EOF

---

Common UX Tasks

User Research

memex-cli run --stdin <<'EOF'
---TASK---
id: personas
backend: gemini
---CONTENT---
为健身App创建3个用户画像，包含目标、痛点、使用场景
---END---
EOF

➜ More examples: examples/user-research.md

---

Information Architecture

memex-cli run --stdin <<'EOF'
---TASK---
id: sitemap
backend: gemini
---CONTENT---
为SaaS项目管理工具设计站点地图和导航结构
---END---
EOF

➜ More examples: examples/information-architecture.md

---

Wireframes & Mockups

memex-cli run --stdin <<'EOF'
---TASK---
id: wireframe-specs
backend: gemini
---CONTENT---
创建移动端外卖App关键页面的低保真线框图规格（首页、商家详情、购物车）
---END---
EOF

➜ More examples: examples/wireframes-mockups.md

---

Component Systems

memex-cli run --stdin <<'EOF'
---TASK---
id: design-system
backend: gemini
---CONTENT---
创建设计系统文档：色彩系统、字体规范、间距体系、组件库
---END---
EOF

➜ More examples: examples/component-systems.md

---

Design Review

memex-cli run --stdin <<'EOF'
---TASK---
id: heuristic-eval
backend: gemini
files: ./dashboard.png
files-mode: embed
---CONTENT---
使用Nielsen's 10 Heuristics评估这个仪表板设计
---END---
EOF

➜ More examples: examples/design-review.md

---

Multimodal Capabilities

Gemini's unique strength: Analyze design screenshots for visual critique.

Upload Design for Review

memex-cli run --stdin <<'EOF'
---TASK---
id: design-critique
backend: gemini
files: ./mockup.png
files-mode: embed        # Required for image analysis
---CONTENT---
审查这个设计稿：
1. 视觉层次是否清晰
2. 色彩对比度是否符合WCAG AA标准
3. 组件布局是否合理
4. 留白和间距是否恰当
---END---
EOF

Supported formats: PNG, JPG, WEBP (< 5MB recommended)

Compare Design Versions

memex-cli run --stdin <<'EOF'
---TASK---
id: version-compare
backend: gemini
files: ./v1-home.png, ./v2-home.png
files-mode: embed
---CONTENT---
对比这两个版本的首页设计，分析改进之处和潜在问题
---END---
EOF

Competitive Analysis

memex-cli run --stdin <<'EOF'
---TASK---
id: competitive-analysis
backend: gemini
files: ./our-app.png, ./competitor-a.png, ./competitor-b.png
files-mode: embed
---CONTENT---
对比分析我们的App与竞品的设计：布局、视觉风格、交互模式
---END---
EOF

Use cases:

• Design critique and feedback
• Accessibility audit (color contrast check)
• Competitive screenshot analysis
• Design system compliance verification

➜ Advanced image analysis techniques: references/multimodal-tips.md

---

Advanced Workflows

For multi-task workflows, parallel execution, and resume functionality, refer to memex-cli skill:

• Multi-task DAG workflows: memex-cli/references/advanced-usage.md
• Parallel execution patterns: memex-cli/examples/parallel-tasks.md
• Resume interrupted runs: memex-cli/examples/resume-workflow.md

Example multi-stage workflow:

memex-cli run --stdin <<'EOF'
---TASK---
id: research
backend: gemini
---CONTENT---
用户研究
---END---

---TASK---
id: architecture
backend: gemini
dependencies: research
---CONTENT---
信息架构设计
---END---

---TASK---
id: wireframe
backend: gemini
dependencies: architecture
---CONTENT---
线框图规格
---END---
EOF

See references/design-workflow.md for complete design process with DAG examples.

---

Quick Reference

Required Fields

Field	Description
id	Unique task identifier
backend	gemini
workdir	Working directory path

Optional Fields

Field	Default	Description
dependencies	-	Task IDs for sequential execution
timeout	1800	Seconds (30 minutes)
files	-	Design files to analyze (PNG, JPG)
files-mode	auto	embed (required for image analysis)

---

Additional Resources

Progressive Disclosure Documentation

• HOW_TO_USE.md - Complete usage guide

  • When to use this skill
  • Gemini vs other backends
  • Integration with design tools
  • Workflow recommendations

• references/design-principles.md - UX design fundamentals

  • UX methodologies (Design Thinking, UCD)
  • Nielsen's 10 heuristics
  • Mobile design guidelines (iOS HIG, Material Design)
  • Accessibility standards (WCAG 2.1)
  • Visual hierarchy and color theory

• references/design-workflow.md - Complete design process

  • 5-stage workflow (Research → Define → Ideate → Prototype → Test)
  • Deliverables by stage
  • DAG workflow examples
  • Iteration and feedback loops
  • Handoff to development

• references/multimodal-tips.md - Image analysis techniques

  • File format and size recommendations
  • Design critique prompt templates
  • Multi-image comparison analysis
  • Screenshot preparation tips

Detailed Examples

• examples/user-research.md - Personas, journey maps, competitive analysis
• examples/information-architecture.md - Site maps, navigation, content hierarchy
• examples/wireframes-mockups.md - Lo-fi wireframes, hi-fi mockups, responsive layouts
• examples/component-systems.md - Design systems, component libraries, style guides
• examples/design-review.md - Heuristic evaluations, accessibility audits, visual critiques

---

Tips

1. Use structured prompts

   • Specify output format (Markdown tables, ASCII diagrams)
   • Provide context (target users, design constraints)
   • Include specific requirements (WCAG compliance, iOS HIG)

2. Leverage multimodal analysis

   • Upload design screenshots for visual feedback
   • Compare multiple design versions
   • Analyze competitor interfaces
   • Use files-mode: embed for image analysis

3. Break down large projects

   • Use dependencies for sequential stages
   • Parallelize independent pages/components
   • See design workflow guide

4. Integrate with design tools

   • Export from Figma/Sketch as PNG
   • Use Gemini to generate component specs
   • Create handoff documentation for developers

5. Follow design principles

   • Reference design principles guide
   • Apply Nielsen's heuristics for evaluation
   • Ensure WCAG 2.1 Level AA compliance

---

SKILL Reference

• skills/memex-cli/SKILL.md - Memex CLI full documentation
• HOW_TO_USE.md - Detailed usage guide for this skill