---
name: design-studio
description: "Unified design orchestrator combining 4 tools: UI/UX Pro Max (design intelligence — 67 styles, 96 palettes, 57 fonts, 99 UX guidelines), Google Stitch MCP (full screen/page generation from text), NanoBanana MCP (AI image generation via Gemini), and 21st Dev Magic MCP (ready-made React/shadcn components). Actions: design, build, create, prototype, generate, mockup, wireframe, landing page, dashboard, UI, screen, component, image, illustration, art, icon. Use when the user wants to create any visual artifact — pages, screens, components, images, or complete design systems."
---

# Design Studio — Unified Design Orchestrator

Combines 4 specialized tools into one intelligent workflow. Automatically routes requests to the right tool(s) based on what the user needs.

## Tool Arsenal

| Tool | Type | Specialty | When to Use |
|------|------|-----------|-------------|
| **UI/UX Pro Max** | Skill (Python BM25) | Design intelligence: styles, palettes, fonts, UX guidelines, charts | Design decisions, design systems, style selection, color/font choices |
| **Google Stitch** | MCP (HTTP) | Generate complete UI screens from text prompts | Full pages, screens, landing pages, dashboards, multi-screen flows |
| **NanoBanana** | MCP (uvx) | AI image generation/editing via Google Gemini | Photos, illustrations, backgrounds, hero images, icons, art |
| **21st Dev Magic** | MCP (npx) | Ready-made React/shadcn/Tailwind components | Specific UI components, buttons, cards, modals, navbars, forms |

---

## Routing Rules — FOLLOW STRICTLY

When the user makes a design request, classify it and route to the correct tool(s):

### Route 1: "I need a full page/screen/layout"
**Primary:** Google Stitch → `mcp__stitch-http__generate_screen_from_text`
**Support:** UI/UX Pro Max (pre-generate design system for style guidance)

**Workflow:**
1. Run UI/UX Pro Max design system search to determine style, palette, fonts
2. Create Stitch project if none exists → `mcp__stitch-http__create_project`
3. Generate screen with enriched prompt (include style/color/font from step 1) → `mcp__stitch-http__generate_screen_from_text`
4. If user wants variants → `mcp__stitch-http__generate_variants`
5. If user wants edits → `mcp__stitch-http__edit_screens`

**Trigger keywords:** landing page, dashboard, tela, pagina, screen, layout, wireframe, mockup, prototype, homepage, pricing page, signup page, admin panel

### Route 2: "I need a specific component"
**Primary:** 21st Dev Magic MCP (search for ready-made components)
**Fallback:** Code it manually using UI/UX Pro Max guidelines

**Workflow:**
1. Search 21st Dev Magic for matching component
2. If found: adapt to user's stack and project conventions
3. If not found: use UI/UX Pro Max guidelines to code it from scratch
4. Apply project's design system (if persisted in `design-system/MASTER.md`)

**Trigger keywords:** component, button, card, modal, navbar, sidebar, form, table, dropdown, accordion, tabs, carousel, hero section, footer, header, input, select, dialog, toast, alert

### Route 3: "I need an image/illustration/art"
**Primary:** NanoBanana MCP (Gemini image generation)

**Workflow:**
1. If style context needed: quick UI/UX Pro Max search for color palette reference
2. Generate image with NanoBanana using enriched prompt
3. If user wants variations: generate multiple with different prompts

**Trigger keywords:** image, photo, illustration, icon, logo, background, hero image, banner, art, picture, generate image, create image, imagem, foto, ilustracao, arte, icone

### Route 4: "I need a design system / style guide"
**Primary:** UI/UX Pro Max (design intelligence engine)

**Workflow:**
1. Generate full design system:
```bash
python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system -p "Project Name"
```
2. Optionally persist for reuse:
```bash
python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
```
3. Supplement with domain-specific searches as needed

**Trigger keywords:** design system, style guide, paleta, palette, font, typography, color scheme, tema visual, visual identity, brand colors, estilo

### Route 5: "I need to implement a complete UI from scratch"
**Combined:** UI/UX Pro Max + 21st Dev Magic + manual coding

**Workflow:**
1. UI/UX Pro Max → design system (style, palette, fonts, guidelines)
2. 21st Dev Magic → search for reusable components that match
3. Code the page using the design system + found components
4. Apply pre-delivery checklist (see below)

**Trigger keywords:** build, implement, code, create page, criar, construir, desenvolver, fazer

### Route 6: "I need a Figma design"
**Primary:** Figma MCP tools (already available separately)

**Trigger keywords:** figma, figma URL, figma.com/design

---

## Combined Workflows — Power Moves

### Full Landing Page Pipeline
```
User: "Cria uma landing page pro meu curso de mentoria"

1. UI/UX Pro Max → design system (education/course style)
2. Stitch → generate full landing page screen
3. NanoBanana → generate hero image
4. 21st Dev Magic → find testimonial card, pricing table components
5. Assemble final code with all pieces
```

### Dashboard Pipeline
```
User: "Preciso de um dashboard de analytics"

1. UI/UX Pro Max → design system (SaaS dashboard style) + chart recommendations
2. Stitch → generate dashboard layout
3. 21st Dev Magic → find chart components, stat cards, data tables
4. Assemble with real data bindings
```

### Component Library Pipeline
```
User: "Monta uma biblioteca de componentes pro meu app"

1. UI/UX Pro Max → design system (persist as MASTER.md)
2. 21st Dev Magic → search all needed component types
3. Customize each component to match design system
4. Export as reusable component library
```

---

## UI/UX Pro Max — Quick Reference

### Design System Generation (ALWAYS start here for any design task)
```bash
python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
```

### Domain Searches
```bash
python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain>
```

| Domain | Use For |
|--------|---------|
| `product` | Product type recommendations |
| `style` | UI styles and effects |
| `typography` | Font pairings (Google Fonts) |
| `color` | Color palettes by product type |
| `landing` | Page structure and CTA strategies |
| `chart` | Chart types and libraries |
| `ux` | Best practices and anti-patterns |

### Stack Guidelines
```bash
python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack <stack>
```
Stacks: `html-tailwind` (default), `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`

---

## Google Stitch MCP — Quick Reference

### Create Project
```
mcp__stitch-http__create_project(title: "Project Name")
```

### Generate Screen
```
mcp__stitch-http__generate_screen_from_text(
  projectId: "<id>",
  prompt: "<detailed description with style/color/font guidance>",
  deviceType: "DESKTOP" | "MOBILE" | "TABLET",
  modelId: "GEMINI_3_1_PRO" | "GEMINI_3_FLASH"
)
```

### Generate Variants
```
mcp__stitch-http__generate_variants(
  projectId: "<id>",
  selectedScreenIds: ["<screenId>"],
  prompt: "<what to vary>",
  variantOptions: {
    variantCount: 3,
    creativeRange: "EXPLORE",
    aspects: ["LAYOUT", "COLOR_SCHEME", "IMAGES", "TEXT_FONT", "TEXT_CONTENT"]
  }
)
```

### Edit Screens
```
mcp__stitch-http__edit_screens(
  projectId: "<id>",
  selectedScreenIds: ["<screenId>"],
  prompt: "<what to change>"
)
```

**Important:** Stitch calls can take a few minutes. DO NOT RETRY if it seems slow.

---

## NanoBanana MCP — Quick Reference

Uses Google Gemini for image generation. Available when the `nanobanana` MCP server is running.

Search for available tools with prefix `mcp__nanobanana__` when needed.

**Tips for prompts:**
- Be specific about style: "professional photo", "flat illustration", "watercolor", "3D render"
- Include color guidance from UI/UX Pro Max palette
- Specify dimensions/aspect ratio when possible
- For UI assets: "clean, minimal, white background, PNG-ready"

---

## 21st Dev Magic MCP — Quick Reference

Searches the 21st.dev component library for ready-made React/shadcn/Tailwind components.

Search for available tools with prefix `mcp__21st-magic__` when needed.

**Tips:**
- Search by component type: "navbar", "pricing table", "hero section"
- Components come as React + Tailwind code
- Always adapt to the user's existing project stack and conventions
- Apply the project's design system colors/fonts on top

---

## Pre-Delivery Checklist (ALWAYS verify before delivering)

### Visual Quality
- [ ] No emojis used as icons (use SVG: Heroicons, Lucide)
- [ ] Consistent icon set throughout
- [ ] Hover states don't cause layout shift
- [ ] Colors match the design system

### Interaction
- [ ] All clickable elements have `cursor-pointer`
- [ ] Smooth transitions (150-300ms)
- [ ] Focus states visible for keyboard navigation

### Light Mode (MANDATORY — user preference)
- [ ] Light/white background (NEVER dark mode by default)
- [ ] Text has sufficient contrast (4.5:1 minimum)
- [ ] Borders visible
- [ ] Glass/transparent elements properly opaque

### Layout
- [ ] Responsive at 375px, 768px, 1024px, 1440px
- [ ] No horizontal scroll on mobile
- [ ] Fixed navbars don't hide content
- [ ] Consistent max-width containers

### Accessibility
- [ ] All images have alt text
- [ ] Form inputs have labels
- [ ] Color is not the only indicator
- [ ] `prefers-reduced-motion` respected

---

## User-Specific Rules (Tata Goncalves)

1. **ALWAYS light mode** — user has vision difficulty with dark backgrounds
2. **Design System:** Use the standard design system from `design-system.md` when available (Inter font, slate palette, violet-600 accent)
3. **Language:** UI text in Portuguese BR, code/prompts in English
4. **Stack default:** React 19 + Vite 6 + Tailwind 4 (matches user's projects)
5. **No confirmation needed:** Work autonomously, deliver results
