@maestro-ai/mcp-server 1.2.0 → 2.1.0

package/dist/content/skills/specialist-prototipagem-stitch/resources/reference/stitch-guide.md

@@ -0,0 +1,517 @@
+# Guia Completo - Google Stitch para Prototipagem
+
+## 📋 Introdução ao Google Stitch
+
+### O Que é Google Stitch?
+
+Google Stitch é uma ferramenta de prototipagem rápida que usa IA para transformar descrições em texto (prompts) em interfaces visuais funcionais. Permite criar protótipos interativos sem escrever código manualmente.
+
+**Principais Características:**
+- 🎨 Geração de UI a partir de prompts
+- 🔄 Iteração rápida e visual
+- 📱 Suporte a responsividade
+- 🎯 Integração com Design Systems populares
+- 💾 Export de código HTML/CSS
+- 🔗 Compartilhamento fácil de protótipos
+
+**Acesso:** https://stitch.withgoogle.com
+
+---
+
+## 🚀 Primeiros Passos
+
+### 1. Acessando o Stitch
+
+1. Acesse https://stitch.withgoogle.com
+2. Faça login com conta Google
+3. Clique em "New Project"
+4. Escolha template ou comece do zero
+
+### 2. Interface do Stitch
+
+**Áreas Principais:**
+- **Editor de Prompts:** Onde você escreve descrições
+- **Preview:** Visualização em tempo real
+- **Configurações:** Design System, breakpoints, etc.
+- **Export:** Opções de exportação de código
+- **History:** Histórico de iterações
+
+### 3. Primeiro Protótipo
+
+**Exemplo Simples:**
+```
+Create a Material Design button with:
+- Text "Click Me"
+- Primary color #1976D2
+- White text
+- Hover effect
+- Rounded corners
+```
+
+**Resultado:** Botão funcional com todas as características
+
+---
+
+## 🎨 Técnicas de Prompt Engineering
+
+### Estrutura de Prompt Efetivo
+
+#### Template Base
+```
+Create a [Design System] [component type] with:
+- [Feature 1]
+- [Feature 2]
+- [Feature 3]
+- Responsive layout for [devices]
+- Color scheme: Primary [#HEX], Secondary [#HEX]
+- Typography: [Font family]
+```
+
+#### Elementos Essenciais
+
+1. **Design System**
+   - Especificar claramente: Material, Ant, Chakra, Custom
+   - Referências visuais ajudam
+   - Mencionar versão se relevante
+
+2. **Tipo de Componente**
+   - Navigation (header, sidebar, breadcrumb)
+   - Data Display (table, card, list)
+   - Input (form, search, upload)
+   - Feedback (toast, modal, alert)
+   - Layout (grid, container, section)
+
+3. **Funcionalidades**
+   - Lista específica e clara
+   - Priorizar funcionalidades visíveis
+   - Mencionar interações
+
+4. **Responsividade**
+   - Especificar breakpoints
+   - Descrever adaptações
+   - Mencionar dispositivos-alvo
+
+5. **Estilo Visual**
+   - Cores em hexadecimal
+   - Família de fonte
+   - Espaçamento e tamanhos
+   - Efeitos visuais
+
+### Técnicas Avançadas
+
+#### 1. Prompts Incrementais
+Construa complexidade gradualmente:
+
+**Iteração 1:**
+```
+Create a simple card with title and description
+```
+
+**Iteração 2:**
+```
+Add an image at the top and a button at the bottom
+```
+
+**Iteração 3:**
+```
+Add hover effect and shadow
+```
+
+#### 2. Prompts Contextuais
+Referencie componentes anteriores:
+
+```
+Create a header matching the card style from previous iteration
+```
+
+#### 3. Prompts com Exemplos
+Forneça referências visuais:
+
+```
+Create a dashboard like Google Analytics, with 4 metric cards and a line chart
+```
+
+#### 4. Prompts Negativos
+Especifique o que NÃO fazer:
+
+```
+Create a form without labels inside inputs, use labels above instead
+```
+
+---
+
+## 🎯 Design System Integration
+
+### Material Design
+
+**Características:**
+- Elevação e sombras
+- Ripple effects
+- Cores vibrantes
+- Tipografia Roboto
+- Grid de 8px
+
+**Prompt Exemplo:**
+```
+Create a Material Design app bar with:
+- Elevation 4
+- Primary color #1976D2
+- Roboto font
+- Menu icon on left
+- Search icon on right
+- Ripple effect on icons
+```
+
+**Recursos:**
+- https://material.io/design
+- https://material.io/components
+
+---
+
+### Ant Design
+
+**Características:**
+- Estilo corporativo
+- Cores sutis
+- Tipografia system-ui
+- Grid de 24 colunas
+- Ícones outline
+
+**Prompt Exemplo:**
+```
+Create an Ant Design form with:
+- Label above input
+- Primary color #1890FF
+- System-ui font
+- Validation messages below
+- Submit button aligned right
+```
+
+**Recursos:**
+- https://ant.design/
+- https://ant.design/components/overview
+
+---
+
+### Chakra UI
+
+**Características:**
+- Acessibilidade first
+- Dark mode support
+- Cores semânticas
+- Tipografia Inter
+- Spacing scale
+
+**Prompt Exemplo:**
+```
+Create a Chakra UI card with:
+- Light/dark mode support
+- Primary color #3182CE
+- Inter font
+- Padding scale: 4, 6, 8
+- Accessible contrast ratios
+```
+
+**Recursos:**
+- https://chakra-ui.com/
+- https://chakra-ui.com/docs/components
+
+---
+
+### Custom Design System
+
+**Quando Usar:**
+- Marca específica
+- Requisitos únicos
+- Design proprietário
+
+**Prompt Exemplo:**
+```
+Create a custom button with:
+- Brand color #FF6B35
+- Font: Montserrat
+- Border radius: 24px
+- Padding: 16px 32px
+- Gradient background on hover
+```
+
+**Dicas:**
+- Forneça guidelines completas
+- Especifique todos os detalhes
+- Use referências visuais
+- Documente decisões
+
+---
+
+## 💡 Human-in-the-Loop Best Practices
+
+### Feedback Contínuo
+
+#### 1. Compartilhamento Rápido
+- Use links públicos do Stitch
+- Compartilhe em tempo real
+- Colete feedback imediato
+- Itere baseado em feedback
+
+#### 2. Sessões Colaborativas
+- Trabalhe junto com stakeholders
+- Mostre iterações ao vivo
+- Ajuste em tempo real
+- Documente decisões
+
+#### 3. Validação Incremental
+- Valide componentes individuais
+- Não espere protótipo completo
+- Corrija cedo
+- Evite retrabalho
+
+### Coleta de Feedback Estruturada
+
+**Template de Feedback:**
+```markdown
+## Componente: [Nome]
+
+### O que funciona bem?
+- [Item 1]
+- [Item 2]
+
+### O que pode melhorar?
+- [Item 1]
+- [Item 2]
+
+### Crítico (precisa mudar):
+- [Item 1]
+- [Item 2]
+
+### Prioridade:
+[ ] Alta [ ] Média [ ] Baixa
+```
+
+### Iteração Baseada em Feedback
+
+1. **Coletar feedback**
+2. **Priorizar mudanças**
+3. **Iterar no Stitch**
+4. **Re-validar**
+5. **Documentar decisões**
+
+---
+
+## 🚫 Anti-Patterns e Troubleshooting
+
+### Anti-Patterns Comuns
+
+#### 1. Prompts Muito Vagos
+❌ **Errado:**
+```
+Create a nice dashboard
+```
+
+✅ **Correto:**
+```
+Create a Material Design dashboard with header, sidebar, 4 metric cards, and line chart
+```
+
+---
+
+#### 2. Muita Complexidade de Uma Vez
+❌ **Errado:**
+```
+Create a complete e-commerce website with all pages
+```
+
+✅ **Correto:**
+```
+Create a product card with image, title, price, and add to cart button
+```
+
+---
+
+#### 3. Sem Contexto de Design
+❌ **Errado:**
+```
+Create a button
+```
+
+✅ **Correto:**
+```
+Create a Material Design primary button with #1976D2 background, white text, and hover effect
+```
+
+---
+
+#### 4. Ignorar Responsividade
+❌ **Errado:**
+```
+Create a grid with 4 columns
+```
+
+✅ **Correto:**
+```
+Create a responsive grid: 4 columns on desktop, 2 on tablet, 1 on mobile
+```
+
+---
+
+### Troubleshooting
+
+#### Problema: Stitch não gera o esperado
+
+**Causas Comuns:**
+- Prompt muito vago
+- Contexto insuficiente
+- Design System não especificado
+
+**Soluções:**
+1. Adicionar mais detalhes ao prompt
+2. Especificar Design System
+3. Fornecer exemplos ou referências
+4. Iterar incrementalmente
+
+---
+
+#### Problema: Código exportado não funciona
+
+**Causas Comuns:**
+- Dependências não resolvidas
+- CSS não incluído
+- JavaScript não exportado
+
+**Soluções:**
+1. Revisar código exportado
+2. Adicionar dependências manualmente
+3. Ajustar CSS conforme necessário
+4. Testar localmente antes de usar
+
+---
+
+#### Problema: Protótipo não é responsivo
+
+**Causas Comuns:**
+- Breakpoints não especificados
+- Unidades fixas (px) ao invés de relativas
+- Falta de media queries
+
+**Soluções:**
+1. Re-fazer prompt com responsividade explícita
+2. Especificar breakpoints
+3. Usar unidades relativas (%, rem, em)
+4. Testar em múltiplos dispositivos
+
+---
+
+#### Problema: Cores não seguem Design System
+
+**Causas Comuns:**
+- Cores não especificadas em hexadecimal
+- Design System não mencionado
+- Stitch interpretou incorretamente
+
+**Soluções:**
+1. Usar cores em hexadecimal
+2. Mencionar Design System explicitamente
+3. Fornecer paleta completa
+4. Iterar até acertar
+
+---
+
+## 📊 Métricas e Otimização
+
+### Métricas de Sucesso
+
+**Tempo:**
+- Análise: ~15 min
+- Geração: ~20 min
+- Prototipagem: ~30 min
+- Validação: ~20 min
+- **Total:** ~85 min
+
+**Qualidade:**
+- Score mínimo: 75/100
+- Taxa de aprovação: >90%
+- Iterações médias: 2-3 por componente
+
+**Eficiência:**
+- Redução de tempo: 60% vs manual
+- Redução de retrabalho: 60% no desenvolvimento
+- Satisfação de stakeholders: >90%
+
+### Otimização de Processo
+
+#### 1. Biblioteca de Prompts
+- Manter prompts testados
+- Categorizar por tipo
+- Documentar o que funciona
+- Reutilizar e adaptar
+
+#### 2. Templates Reutilizáveis
+- Criar templates base
+- Adaptar para projetos
+- Manter consistência
+- Evitar reinventar
+
+#### 3. Feedback Loops Curtos
+- Validar cedo e frequentemente
+- Coletar feedback estruturado
+- Iterar rapidamente
+- Documentar decisões
+
+#### 4. Automação
+- Usar funções MCP quando disponíveis
+- Automatizar validações
+- Gerar prompts automaticamente
+- Exportar código automaticamente
+
+---
+
+## 🔗 Recursos Adicionais
+
+### Documentação Oficial
+- **Google Stitch:** https://stitch.withgoogle.com/docs
+- **Tutoriais:** https://stitch.withgoogle.com/tutorials
+- **Exemplos:** https://stitch.withgoogle.com/examples
+
+### Design Systems
+- **Material Design:** https://material.io
+- **Ant Design:** https://ant.design
+- **Chakra UI:** https://chakra-ui.com
+
+### Comunidade
+- **Discord:** https://discord.gg/stitch
+- **GitHub:** https://github.com/google/stitch
+- **Stack Overflow:** Tag `google-stitch`
+
+### Ferramentas Complementares
+- **Figma:** Design de alta fidelidade
+- **Miro:** Colaboração e brainstorming
+- **Notion:** Documentação de decisões
+
+---
+
+## 📝 Checklist de Boas Práticas
+
+### Antes de Começar
+- [ ] Design Doc revisado
+- [ ] Requisitos de UI claros
+- [ ] Design System definido
+- [ ] Stakeholders identificados
+
+### Durante a Prototipagem
+- [ ] Prompts específicos e detalhados
+- [ ] Iteração incremental
+- [ ] Validação contínua
+- [ ] Feedback coletado
+- [ ] Decisões documentadas
+
+### Após Concluir
+- [ ] Código exportado
+- [ ] Protótipo compartilhado
+- [ ] Feedback final coletado
+- [ ] Score ≥ 75 validado
+- [ ] Próximos passos definidos
+
+---
+
+**Versão:** 1.0.0  
+**Última Atualização:** 30/01/2026  
+**Mantido por:** Maestro Team