Add Frontend/UI/UX/Design section with shadcn/ui
- 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
This commit is contained in:
uroma
180
frontend-ui-ux-design/ui-experts/README.md
Normal file
180
frontend-ui-ux-design/ui-experts/README.md
Normal file
@@ -0,0 +1,180 @@
|
||||
# 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*
|
||||
Reference in New Issue
Block a user