KaimingWan/oh-my-kiro

Exemplos de Acionamento

• "Puxe meus designs do Stitch para o código"
• "用 Stitch 做个落地页"
• "Aplique o estilo desta captura de tela no meu site"
• "Exporte design.md do meu projeto Stitch"
• "Converta o design do Stitch para componentes ShadCN"

Skill de Integração com o Google Stitch

Conceito Central: design.md

O sistema de design do Stitch é capturado em um arquivo design.md — cores, fontes, temas, estilos de componentes. Este arquivo é:

• Otimizado para agentes — usa linguagem direcionada que agentes entendem melhor que CSS puro
• Transferível — entregue ao Claude Code, Cursor ou qualquer agente, eles reproduzem o estilo perfeitamente
• Criado automaticamente — o Stitch gera um para cada projeto, mesmo sem solicitação

Fluxo padrão: Sempre comece estabelecendo um design.md e, em seguida, construa páginas sobre ele.

Servidor MCP

Pacote da comunidade: davideast/stitch-mcp npm: @_davideast/stitch-mcp

Configuração

Pré-requisitos

• Google Cloud CLI (gcloud) instalado
• Um projeto GCP com a API Stitch ativada

Autenticação (OAuth — API Key NÃO é suportada)

gcloud auth login
gcloud auth application-default login
gcloud config set project <YOUR_PROJECT_ID>
gcloud auth application-default set-quota-project <YOUR_PROJECT_ID>
gcloud beta services mcp enable stitch.googleapis.com --project=<YOUR_PROJECT_ID>

Configuração MCP

Adicione à configuração do seu cliente MCP (ex.: .kiro/settings/mcp.json):

{
  "stitch": {
    "command": "npx",
    "args": ["@_davideast/stitch-mcp", "proxy"],
    "env": {
      "STITCH_USE_SYSTEM_GCLOUD": "1",
      "GOOGLE_CLOUD_PROJECT": "<YOUR_PROJECT_ID>"
    }
  }
}

CRÍTICO: Use o modo proxy + STITCH_USE_SYSTEM_GCLOUD=1. O modo direto serverUrl é instável.

Verificar Configuração

npx @_davideast/stitch-mcp doctor

Se doctor expirar no teste de API, verifique diretamente:

ACCESS_TOKEN=$(gcloud auth application-default print-access-token)
curl -s -w "\nHTTP:%{http_code}" \
  -H "Authorization: Bearer $ACCESS_TOKEN" \
  -H "x-goog-user-project: <YOUR_PROJECT_ID>" \
  "https://stitch.googleapis.com/v1/projects"

Ferramentas MCP

Ferramenta	Finalidade
list_projects	Listar todos os projetos Stitch
get_screen_code	Obter HTML/CSS de uma tela
get_screen_image	Obter captura de tela da tela (base64)
build_site	Mapear telas para rotas, gerar projeto Astro

Ferramentas CLI (não-MCP)

npx @_davideast/stitch-mcp view --projects          # Navegar por projetos
npx @_davideast/stitch-mcp serve -p <project-id>    # Pré-visualização local
npx @_davideast/stitch-mcp site -p <project-id>     # Gerar site Astro

Fluxos de Trabalho

Caminho A: Design do Zero (Padrão)

1. Estabelecer sistema de design — Crie ou forneça um design.md no Stitch (criado automaticamente se não especificado)
2. Gerar telas — Solicite ao Stitch com seus requisitos; ele constrói sobre o sistema de design
3. Importar para o local — get_screen_code → HTML/CSS, get_screen_image → captura de tela
4. Implementar — Converter para o framework alvo (Next.js/Astro/React)
5. Verificar — Comparação visual (consulte Fase: Verificação abaixo)

Caminho B: Redesign a partir de Referência

Use quando você tem um site/captura de tela existente cujo estilo deseja adotar (não copiar):

1. Capturar referência — Captura de tela de página inteira do site que você gosta (use GoFullPage ou similar)
2. Redesenhar no Stitch — Envie a captura de tela; o Stitch extrai a linguagem de design, padrões de componentes e layout — depois aplica ao SEU conteúdo
3. Alternativa: Importar via URL — No painel de sistema de design do Stitch, importe de qualquer URL de site. O Stitch percorre o site e extrai tipografia + cores como um design.md
4. Refinar — Envie wireframes ou anote seções específicas para ajustar

Caminho C: Construção Integrada com Agente (Claude Code + Stitch)

Para construções autônomas de ponta a ponta usando as skills oficiais do Google Stitch:

1. Prompt Aprimorado — Converte prompts vagos do usuário em prompts otimizados para Stitch (o Stitch depende de adjetivos para clima, não descrições exatas)
2. Loop Stitch — Loop de construção autônomo usando Chrome DevTools, mantém rastreamento de prompt entre estágios
3. Componentes React — Converte a exportação HTML monolítica do Stitch em componentes React modulares com validação

Ordem do fluxo em claude.md:

Prompt Aprimorado → Loop Stitch → Conversão para Componente React

Requer o MCP do Stitch conectado. Veja repositório de skills Stitch do Google para instalação.

Caminho D: Conversão para UI ShadCN

React/HTML puro do Stitch carece de interações. Use ShadCN para componentes de qualidade de produção:

1. Conecte o MCP do ShadCN
2. Use a skill de UI ShadCN do Google para converter designs do Stitch em componentes ShadCN
3. Estenda com registries (ex.: glassmorphism, motion-primitives) para uma sensação premium
4. Especifique registries em claude.md para conversão automática

Fase: Verificação (inspirada em gstack design-review)

Após a implementação, execute uma verificação em múltiplas camadas. O objetivo: capturar o que os olhos humanos perdem.

Camada 1: Capturas de Tela Multi-Viewport

Tire capturas de tela em 3 breakpoints para detectar problemas de responsividade:

npx playwright screenshot --viewport-size=375,812 http://localhost:3000 impl-mobile.png
npx playwright screenshot --viewport-size=768,1024 http://localhost:3000 impl-tablet.png
npx playwright screenshot --viewport-size=1440,900 http://localhost:3000 impl-desktop.png

Verifique: estouro de texto, colapso de layout, sobreposição de elementos, conteúdo não adaptável.

Camada 2: Verificação de Consistência do Design System

Extraia valores renderizados reais da implementação e compare com o design.md:

# Extrair fontes realmente usadas (execute no console do navegador ou Playwright)
npx playwright evaluate http://localhost:3000 \
  "JSON.stringify([...new Set([...document.querySelectorAll('*')].slice(0,500).map(e => getComputedStyle(e).fontFamily))])"

# Extrair paletas de cores em uso
npx playwright evaluate http://localhost:3000 \
  "JSON.stringify([...new Set([...document.querySelectorAll('*')].slice(0,500).flatMap(e => [getComputedStyle(e).color, getComputedStyle(e).backgroundColor]).filter(c => c !== 'rgba(0, 0, 0, 0)'))])"

Compare valores extraídos com os tokens do design.md. Sinalize desvios.

Camada 3: Diff de Pixel vs Design

npx pixelmatch design.png impl-desktop.png diff.png 0.1

Camada 4: Detecção de Padrões de IA (AI Slop)

Verifique a implementação para estes 10 padrões gerados por IA (da lista negra do gstack):

1. Fundos gradientes roxos/violeta como padrão
2. Grade de recursos de 3 colunas com ícone em círculo + título + descrição
3. Ícones em círculos coloridos como decoração de seção
4. text-align: center em tudo
5. Border-radius uniforme e arredondado em todos os elementos
6. Blobs decorativos, divisores SVG ondulados
7. Emoji como elementos de design
8. Borda esquerda colorida em cards
9. Cópia genérica de hero ("Bem-vindo ao X", "Desbloqueie o poder de...")
10. Ritmo de seção padronizado (hero → recursos → depoimentos → preços → CTA)

Se ≥3 padrões detectados, sinalize como "risco de IA slop" e sugira correções específicas.

Camada 5: Diff Visual por IA

Alimente tanto design.png quanto impl-desktop.png para o LLM para comparação. Pergunte especificamente:

• A hierarquia corresponde?
• As proporções de espaçamento são preservadas?
• Alguma seção ou elemento ausente?

Loop de Refinamento

Após a verificação, itere:

1. Mostre ao usuário as capturas de tela + resultados de diff
2. O usuário fornece feedback
3. Aplique edições cirúrgicas (não regenere arquivos inteiros)
4. Re-verifique
5. Repita até "concluído" (máx. 10 rodadas)

Dicas sobre design.md

• Modelo: Obtenha o modelo otimizado para agentes do repositório oficial de skills do Google
• Transferência: Entregue design.md a qualquer agente (Claude Code, Cursor) para estilização consistente
• Extrair: Use a "skill design MD" do Google para extrair design.md de projetos Stitch existentes
• Personalizado: Crie seu próprio design.md com cores/fontes/temas, cole no painel de sistema de design do Stitch

Problemas Conhecidos

1. Autenticação por API Key quebrada — A API Stitch rejeita chaves de API, deve usar OAuth (confirmado 2026-02 pela comunidade)
2. Tempo limite de busca do doctor — Dependente de rede; o teste direto com curl é mais confiável
3. Faturamento não necessário — A API Stitch funciona em projetos sem faturamento ativado
4. Modo experimental não exporta Figma — Apenas o modo Standard suporta exportação para Figma