cc60c8bdb4
- Create dedicated frontend-ui-ux-design directory - Add component libraries reference (shadcn/ui, Radix, MUI, etc.) - Add design systems reference (Material, Carbon, Polaris) - Add CSS frameworks reference (Tailwind, Bootstrap, CSS-in-JS) - Add frontend stacks reference (React, Vue, Next.js, Svelte) - Add UI experts reference (MiniMax, GLM design agents) - Update README with prominent Frontend section - Include shadcn/ui quick start guide - Add recommended 2026 tech stack
181 lines
4.6 KiB
Markdown
181 lines
4.6 KiB
Markdown
# 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*
|