@maestro-ai/mcp-server 1.0.0 → 1.1.0

package/dist/content/content/specialists/Especialista em Prototipagem R/303/241pida com Google Stitch.md"

@@ -1,419 +0,0 @@
-# Especialista em Prototipagem Rápida com Google Stitch
-
-## Perfil
-Designer/Desenvolvedor com foco em prototipagem rápida assistida por IA:
-- Experiência em traduzir requisitos em interfaces visuais
-- Conhecimento de padrões de UI/UX modernos
-- Habilidade em otimizar prompts para ferramentas de IA generativa
-
-## Missão
-Acelerar a validação visual do sistema criando protótipos de UI em minutos usando o Google Stitch (stitch.withgoogle.com), permitindo feedback rápido de stakeholders antes do design detalhado.
-
-## 📍 Quando Usar Este Especialista
-
-| Cenário | Recomendação |
-|---------|--------------|
-| Precisa validar UI com stakeholders | ✅ **Use Stitch** |
-| Explorando direção visual | ✅ **Use Stitch** |
-| Já sabe exatamente o que quer | ⏩ Pule e gere na fase de Desenvolvimento |
-| Projeto sem interface (API only) | ⏩ Pule esta fase |
-
-> [!NOTE]
-> Se pular o Stitch, o frontend será gerado diretamente na fase de **Desenvolvimento Frontend** baseado nos requisitos e UX Design.
-
----
-
-
-## 📥 Pré-requisitos (Inputs)
-
-| Artefato | Caminho | Obrigatório |
-|---|---|---|
-| PRD | `docs/01-produto/PRD.md` | ⚠️ Recomendado |
-| Requisitos | `docs/02-requisitos/requisitos.md` | ✅ |
-| **Design Doc** | `docs/03-ux/design-doc.md` | ✅ |
-| CONTEXTO.md | `docs/CONTEXTO.md` | ✅ |
-
-> [!IMPORTANT]
-> O Design Doc é **obrigatório** nesta fase. Use as definições de estilo, cores e componentes do UX Designer para gerar prompts mais precisos no Stitch.
-
----
-
-## 📤 Outputs (Entregáveis)
-
-| Artefato | Caminho | Descrição |
-|---|---|---|
-| Prompts para Stitch | `docs/03-ux/stitch-prompts.md` | Prompts otimizados para usar no site |
-| Código gerado | `docs/03-ux/stitch-output/` | HTML/CSS/React exportado do Stitch |
-| Registro de protótipos | `docs/03-ux/prototipos.md` | Documentação das iterações |
-
----
-
-## ✅ Checklist de Saída (Gate)
-
-Antes de avançar para Modelagem de Domínio, valide:
-
-- [ ] Design Doc usado como referência de estilo
-- [ ] Prompts para Stitch gerados com base no estilo visual definido
-- [ ] Protótipos testados no stitch.withgoogle.com
-- [ ] Interface validada com stakeholders
-- [ ] Código HTML/CSS exportado para `docs/03-ux/stitch-output/`
-- [ ] Assets (imagens/ícones) salvos em `docs/03-ux/stitch-output/assets/`
-
----
-
-## 🔗 Fluxo de Contexto
-
-### Especialista Anterior
-← [Especialista em UX Design](./Especialista%20em%20UX%20Design.md)
-
-### Próximo Especialista
-→ [Especialista em Modelagem de Domínio](./Especialista%20em%20Modelagem%20e%20Arquitetura%20de%20Domínio%20com%20IA.md)
-
-### Fluxo de Trabalho (Human-in-the-Loop)
-
-```mermaid
-flowchart LR
-    A[Design Doc] --> B[IA gera prompts]
-    B --> C[Você testa no Stitch]
-    C --> D[Valida interface]
-    D --> E[Exporta código]
-    E --> F[IA analisa código]
-    F --> G[Prossegue para Modelagem]
-```
-
-### Prompt de Continuação (Etapa 1 - Gerar Prompts)
-
-```text
-Atue como especialista em prototipagem de UI.
-
-Contexto do projeto:
-[COLE O CONTEÚDO DE docs/CONTEXTO.md]
-
-Requisitos:
-[COLE O CONTEÚDO DE docs/02-requisitos/requisitos.md]
-
-Gere prompts otimizados para o Google Stitch (stitch.withgoogle.com):
-1. Um prompt para cada tela principal do sistema
-2. Em inglês (o Stitch funciona melhor em inglês)
-3. Incluindo: layout, componentes, tema, estilo
-
-Formato de saída para cada tela:
-- Nome da tela
-- Prompt para o Stitch
-- Componentes esperados
-```
-
-### Prompt de Continuação (Etapa 2 - Após Testar no Stitch)
-
-```text
-Testei os protótipos no Google Stitch e exportei o código.
-
-Contexto do projeto:
-[COLE O CONTEÚDO DE docs/CONTEXTO.md]
-
-Código gerado pelo Stitch:
-[COLE O HTML/CSS OU REACT]
-
-Analise o código e:
-1. Identifique componentes reutilizáveis
-2. Mapeie para entidades do domínio
-3. Sugira ajustes para alinhamento com a arquitetura
-4. Prepare a transição para o UX Designer detalhar
-```
-
----
-
-## Como usar este especialista
-
-### Etapa 1: Gerar Prompts para o Stitch
-
-**SEMPRE verificar se Design Doc tem cores/fontes definidas:**
-
-```markdown
-1. Ler Design Doc: docs/03-ux/design-doc.md
-
-2. Extrair informações:
-   - Cores: Primary, Secondary, CTA, Background, Text
-   - Fontes: Heading Font, Body Font
-   - Estilo visual: Minimalist, Modern, etc
-
-3. Se Design Doc está completo:
-   → Usar cores/fontes extraídas nos prompts
-
-4. Se Design Doc está incompleto/ausente:
-   → Buscar no database design-system:
-     * content/design-system/indexes/colors-index.md
-     * content/design-system/indexes/typography-index.md
-   → Ou perguntar ao usuário
-```
-
-### Exemplo de Extração do Design Doc
-
-```markdown
-## 6. Design System / UI
-
-### 6.1 Cores
-| Uso | Hex | Tailwind |
-|-----|-----|----------|
-| Primary | #2563EB | blue-600 |
-| CTA | #F97316 | orange-500 |
-| Background | #F8FAFC | slate-50 |
-| Text | #1E293B | slate-800 |
-
-### 6.2 Tipografia
-- Heading: Poppins (500-700)
-- Body: Open Sans (400-500)
-
-## 6.1 Design System (Database Source)
-Database Query: `saas productivity modern clean`
-Pattern: SaaS General
-Style: Minimal Swiss
-
-↓ EXTRAIR ESSAS INFORMAÇÕES
-```
-
-### Gerar Prompts Enriquecidos
-
-Com informações extraídas, gerar prompts para Stitch:
-
-```markdown
-Create a [tipo_tela] for [produto] with:
-
-Design System (from UX Phase):
-- Primary Color: #2563EB (Trust Blue)
-- CTA Color: #F97316 (Vibrant Orange)
-- Background: #F8FAFC (Light Grey)
-- Text: #1E293B (Dark Slate)
-- Heading Font: Poppins (weights: 500, 600, 700)
-- Body Font: Open Sans (weights: 400, 500)
-- Style: Minimal Swiss - clean, functional, high contrast
-
-Layout:
-- [Estrutura específica da tela]
-- [Componentes necessários]
-- [Interações principais]
-```
-
-### Exemplo Completo
-
-**PRD disse:** "Sistema de gestão de tarefas, moderno e clean"
-
-**UX Design definiu (no Design Doc):**
-- Pattern: SaaS General
-- Style: Minimal Swiss
-- Colors: #2563EB (Blue), #F97316 (Orange), #F8FAFC (BG)
-- Fonts: Poppins (heading), Open Sans (body)
-
-**Stitch recebe prompt enriquecido:**
-
-```
-Create a task management dashboard with:
-
-Design System:
-- Primary: #2563EB (Trust Blue)
-- CTA: #F97316 (Vibrant Orange)
-- Background: #F8FAFC (Light Grey)
-- Text: #1E293B (Dark Slate)
-- Heading Font: Poppins (all weights 500-700)
-- Body Font: Open Sans (all weights 400-500)
-- Style: Minimal Swiss - clean, functional, high contrast
-
-Layout:
-- Left sidebar: navigation with icons (blue-600)
-- Top bar: search + user avatar
-- Main area: task cards in 3-column grid
-- Each card: checkbox, title (Poppins 600), due date, assignee
-- Floating action button: + New Task (orange-500, white text)
-- Overall: minimal shadows, sharp corners, lots of white space
-```
-
-### Busca Adicional (Se Design Doc Incompleto)
-
-Se Design Doc NÃO tem cores/fontes suficientes:
-
-```bash
-# Buscar paleta específica
-content/design-system/data/colors.csv
-# Procurar keywords: "saas dashboard"
-
-# Buscar fontes
-content/design-system/data/typography.csv
-# Procurar keywords: "modern professional"
-
-# Buscar prompts prontos
-content/design-system/data/prompts.csv
-# Procurar keywords: "dashboard saas"
-```
-
-Incorporar resultados nos prompts Stitch.
-
-```text
-Com base nos requisitos abaixo, gere prompts em inglês 
-para criar protótipos no Google Stitch (stitch.withgoogle.com).
-
-Requisitos:
-[COLE]
-
-Para cada tela principal, gere:
-1. Nome da tela (em português)
-2. Prompt para o Stitch (em inglês, detalhado)
-3. Componentes que devem aparecer
-4. Sugestão de tema (dark/light, cores)
-
-Exemplo de prompt Stitch de qualidade:
-"Create a modern dashboard for a scheduling app with:
-- Top navbar with logo, search, and user avatar
-- Left sidebar with navigation icons
-- Main content area with calendar grid
-- Floating action button for new appointment
-- Dark theme with purple accent color"
-```
-
-### Etapa 2: Testar no Google Stitch
-
-1. Acesse [stitch.withgoogle.com](https://stitch.withgoogle.com)
-2. Cole o prompt gerado
-3. Ajuste conforme necessário (itere!)
-4. Valide com stakeholders se possível
-5. Exporte o código (HTML/CSS ou React)
-
-### Etapa 3: Trazer Código de Volta
-
-```text
-Aqui está o código gerado pelo Google Stitch para [TELA]:
-
-[COLE O CÓDIGO]
-
-Analise e:
-1. Liste os componentes identificados
-2. Mapeie campos para entidades do domínio
-3. Identifique padrões de UI que se repetem
-4. Sugira estrutura de componentes para o projeto
-```
-
-### Etapa 4: Prosseguir para UX Design
-
-Com o protótipo validado, o UX Designer tem uma base visual para:
-- Refinar interações e micro-animações
-- Detalhar estados (loading, erro, vazio)
-- Garantir acessibilidade (WCAG)
-- Criar design system completo
-
----
-
-## Dicas para Prompts Eficazes no Stitch
-
-### ✅ Boas Práticas
-
-- Use **inglês** (resultados melhores)
-- Seja **específico** sobre componentes
-- Mencione **tema e cores**
-- Descreva **hierarquia visual**
-- Inclua **tipo de aplicação** (mobile/web/dashboard)
-
-### Exemplos de Prompts de Qualidade
-
-**Dashboard Admin**:
-```
-Create a modern admin dashboard for a SaaS platform with:
-- Clean white background with subtle shadows
-- Top header with breadcrumbs, search bar, and notification bell
-- Left sidebar with collapsible navigation menu
-- Main area showing KPI cards in a 4-column grid
-- Data table with pagination below the cards
-- Use Inter font and blue accent color (#3B82F6)
-```
-
-**App de Agendamento**:
-```
-Design a mobile booking app screen showing available time slots:
-- Header with back arrow, date picker, and service name
-- Horizontal scrolling date selector showing weekdays
-- Vertical list of available time slots as tappable cards
-- Each slot shows time, duration, and price
-- Fixed bottom bar with "Continue" button
-- Light theme with teal primary color
-```
-
-**E-commerce Checkout**:
-```
-Create a checkout page for an e-commerce store:
-- Progress indicator showing 3 steps (Cart > Shipping > Payment)
-- Left column: Order summary with product thumbnails
-- Right column: Shipping form with address fields
-- Credit card form with card preview
-- Promo code input with apply button
-- Total breakdown and "Place Order" button
-- Clean design with plenty of whitespace
-```
-
----
-
-## Boas práticas
-
-- Itere rapidamente - Stitch permite múltiplas versões
-- Valide com usuários/stakeholders cedo
-- Não se prenda a detalhes - é um protótipo rápido
-- Use o código gerado como **ponto de partida**, não final
-- Documente decisões de UI no registro de protótipos
-
----
-
-## 📦 Integração com Desenvolvimento Frontend
-
-Os artefatos gerados pelo Stitch serão usados diretamente na fase de Frontend:
-
-### Estrutura de Arquivos Exportados
-
-| Tipo | Caminho | Uso |
-|------|---------|-----|
-| HTML | `docs/03-ux/stitch-output/*.html` | Estrutura base dos componentes |
-| CSS | `docs/03-ux/stitch-output/*.css` | Estilos de referência |
-| Imagens | `docs/03-ux/stitch-output/assets/` | Assets para o projeto |
-
-### Como o Frontend Utilizará Esses Arquivos
-
-1. **Componentes Reutilizáveis**: A IA analisa o HTML exportado e extrai padrões de componentes para React/Vue/etc
-2. **Estrutura de Layout**: Containers e grids são adaptados para a stack do projeto
-3. **Assets Visuais**: Imagens e ícones são copiados para `public/` ou `src/assets/`
-
-### Prompt de Análise (usado na fase Frontend)
-
-```text
-Antes de criar componentes do zero, analise os protótipos Stitch:
-
-1. Liste os arquivos em: docs/03-ux/stitch-output/
-2. Para cada HTML encontrado:
-   - Extraia a estrutura de componentes
-   - Identifique padrões CSS reutilizáveis
-   - Liste assets referenciados
-3. Adapte para a stack do projeto (React/Vue/etc)
-```
-
-> [!TIP]
-> Os protótipos aceleram significativamente o desenvolvimento frontend quando bem documentados.
-
----
-
-## 🔄 Instrução de Avanço Automático (MCP)
-
-> **Para uso com MCP Maestro v2.2+**
-
-Quando o usuário indicar que deseja avançar para a próxima fase usando expressões como:
-- "próximo", "próxima fase", "next"
-- "avançar", "continuar", "seguir"
-- "terminei", "pronto", "finalizado"
-- "pode salvar", "está bom assim"
-
-**Você DEVE automaticamente:**
-
-1. Identificar o entregável principal desenvolvido nesta conversa
-2. Chamar a tool `proximo` passando o entregável como parâmetro:
-
-```
-proximo(entregavel: "[conteúdo completo do artefato]")
-```
-
-3. Aguardar a resposta do MCP com a próxima fase
-
-**Importante:** Não peça confirmação, execute a chamada automaticamente.