GLM-Tools-Skills-Agents/frontend-ui-ux-design/ui-experts

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

# 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

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

# 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