# UI/UX & Design AI Experts

AI-powered design experts from MiniMax and GLM platforms for visual creation.

---

## 🎨 MiniMax Design Experts

### Visual Design Experts

| Expert ID | Name | Specialization |
|-----------|------|----------------|
| `content_creation` | Content Creator | Marketing content, copywriting |
| `logo_generation` | Logo Designer | Brand identity, logos |
| `icon_generation` | Icon Designer | UI icons, symbols |
| `visual_creation` | Visual Creator | Graphics, illustrations |
| `landing_page` | Landing Page Designer | Conversion-focused pages |
| `marketing` | Marketing Expert | Campaign materials |

### Usage via MiniMax API

```bash
# Using minimax-experts skill
# Auto-triggers on: logo, icon, visual, landing page design
```

See: `skills/minimax-experts/SKILL.md` for complete expert catalog.

---

## 🖼️ GLM/Z.ai Visual Skills

### Image Generation

| Skill | Description | Use Case |
|-------|-------------|----------|
| `image_generation` | Text-to-image generation | Creating visuals from descriptions |
| `VLM` | Vision Language Model | Image understanding & analysis |
| `vision_model` | Computer vision | Image recognition, OCR |

### Video Generation

| Skill | Description | Use Case |
|-------|-------------|----------|
| `video_generation` | Text-to-video | Creating video content |

### Document Processing

| Skill | Description | Use Case |
|-------|-------------|----------|
| `PDF_processing` | PDF analysis | Document design review |
| `DOCX` | Word document handling | Document styling |
| `XLSX` | Excel processing | Data visualization |
| `PPTX` | PowerPoint handling | Presentation design |

### Web & Search

| Skill | Description | Use Case |
|-------|-------------|----------|
| `web_search` | Search the web | Research design trends |
| `web_scraping` | Extract web content | Competitor analysis |

### Speech & Audio

| Skill | Description | Use Case |
|-------|-------------|----------|
| `speech_to_text` | ASR transcription | Accessibility |
| `text_to_speech` | TTS synthesis | Audio content |

### Usage via GLM SDK

```javascript
import { ZaiClient } from 'z-ai-web-dev-sdk';

const client = new ZaiClient();

// Image generation
const image = await client.image.generate({
  prompt: "Modern minimalist logo for tech startup",
  size: "1024x1024"
});

// Video generation
const video = await client.video.generate({
  prompt: "Product demo animation",
  duration: 30
});
```

See: `skills/glm-skills/SKILL.md` for complete SDK reference.

---

## 🤖 Built-in Claude Code Agents

### Frontend-Focused Agents

| Agent | Description | When to Use |
|-------|-------------|-------------|
| `frontend-developer` | UI implementation | Building React/Vue/Angular components |
| `ui-sketcher` | UI Blueprint Engineer | ASCII interface designs |
| `rapid-prototyper` | MVP builder | Quick app prototyping |
| `whimsy-injector` | Delight specialist | Adding personality to UI |

### Design Workflow

```
1. ui-ux-pro-max skill     → Design system & guidelines
2. frontend-developer      → Component implementation
3. whimsy-injector         → Add delightful touches
4. code-reviewer           → Quality check
```

---

## 🔧 MCP Tools for Design

### Image Analysis Tools

| Tool | Purpose |
|------|---------|
| `ui_to_artifact` | Convert UI screenshot to code |
| `analyze_image` | General image analysis |
| `analyze_data_visualization` | Chart/graph analysis |

### Usage Examples

```bash
# Convert UI screenshot to React code
ui_to_artifact(image_source="mockup.png", output_type="code")

# Analyze design patterns
analyze_image(image_source="design.png", prompt="Describe UI patterns used")
```

---

## 📚 Related Skills

| Skill | Description | Location |
|-------|-------------|----------|
| **ui-ux-pro-max** | Complete design intelligence | `skills/external/ui-ux-pro-max/` |
| **minimax-experts** | 40 AI experts catalog | `skills/minimax-experts/` |
| **glm-skills** | Multimodal AI skills | `skills/glm-skills/` |
| **zai-tooling-reference** | Next.js + frontend patterns | `skills/zai-tooling-reference/` |

---

## 🎯 Quick Reference

### For Logo/Icon Design
```
→ Use MiniMax logo_generation, icon_generation experts
→ Auto-triggers from minimax-experts skill
```

### For Landing Pages
```
→ Use ui-ux-pro-max for design system
→ Use MiniMax landing_page expert
→ Use frontend-developer agent
```

### For UI Mockup to Code
```
→ Use ui_to_artifact MCP tool
→ Use ui-ux-pro-max for patterns
→ Use frontend-developer agent
```

### For Design Analysis
```
→ Use analyze_image MCP tool
→ Use VLM for understanding
→ Use ui-ux-pro-max for guidelines
```

---

*Last updated: 2026-02-13*