Stitch Build Loop

Você é um construtor autônomo de front-end participando de um loop iterativo de construção de sites. Seu objetivo é gerar uma página usando Stitch, integrá-la ao site e preparar instruções para a próxima iteração.

Quando Usar

• Você está construindo um site iterativamente com Stitch usando um loop baseado em bastão entre execuções ou agentes.
• Cada passagem deve ler o próximo prompt, gerar ou integrar uma página e passar a próxima tarefa.
• Você precisa de um loop autônomo disciplinado para construção de sites de front-end em várias etapas.

Visão Geral

O padrão Build Loop permite o desenvolvimento contínuo e autônomo de sites através de um sistema de "bastão". Cada iteração:

1. Lê a tarefa atual de um arquivo de bastão (.stitch/next-prompt.md)
2. Gera uma página usando as ferramentas do Stitch MCP
3. Integra a página à estrutura do site
4. Escreve a próxima tarefa no arquivo de bastão para a próxima iteração

Pré-requisitos

Obrigatório:

• Acesso ao Stitch MCP Server
• Um projeto Stitch (existente ou será criado)
• Um arquivo .stitch/DESIGN.md (gere um usando a skill design-md se necessário)
• Um arquivo .stitch/SITE.md documentando a visão e o roteiro do site

Opcional:

• Chrome DevTools MCP Server — permite a verificação visual das páginas geradas

O Sistema de Bastão

O arquivo .stitch/next-prompt.md atua como um bastão de revezamento entre as iterações:

---
page: about
---
A page describing how jules.top tracking works.

**DESIGN SYSTEM (REQUIRED):**
[Copy from .stitch/DESIGN.md Section 6]

**Page Structure:**
1. Header with navigation
2. Explanation of tracking methodology
3. Footer with links

Regras críticas:

• O campo page no frontmatter YAML determina o nome do arquivo de saída
• O conteúdo do prompt deve incluir o bloco do sistema de design de .stitch/DESIGN.md
• VOCÊ DEVE atualizar este arquivo antes de concluir seu trabalho para continuar o loop

Protocolo de Execução

Etapa 1: Ler o Bastão

Analise .stitch/next-prompt.md para extrair:

• Nome da página do campo de frontmatter page
• Conteúdo do prompt do corpo do markdown

Etapa 2: Consultar Arquivos de Contexto

Antes de gerar, leia estes arquivos:

Verificações importantes:

• Seção 4 (Sitemap) — NÃO recrie páginas que já existem
• Seção 5 (Roteiro) — Escolha tarefas daqui se houver backlog
• Seção 6 (Liberdade Criativa) — Ideias para novas páginas se o roteiro estiver vazio

Etapa 3: Gerar com Stitch

Use as ferramentas do Stitch MCP para gerar a página:

1. Descobrir namespace: Execute list_tools para encontrar o prefixo do Stitch MCP
2. Obter ou criar projeto:
   • Se .stitch/metadata.json existir, use o projectId dele
   • Caso contrário, chame [prefix]:create_project, depois chame [prefix]:get_project para recuperar os detalhes completos do projeto e salve-os em .stitch/metadata.json (veja o esquema abaixo)
   • Após gerar cada tela, chame [prefix]:get_project novamente e atualize o mapa screens em .stitch/metadata.json com os metadados completos de cada tela (id, sourceScreen, dimensions, canvas position)
3. Gerar tela: Chame [prefix]:generate_screen_from_text com:
   • projectId: O ID do projeto
   • prompt: O prompt completo do bastão (incluindo o bloco do sistema de design)
   • deviceType: DESKTOP (ou conforme especificado)
4. Recuperar assets: Antes de baixar, verifique se .stitch/designs/{page}.html e .stitch/designs/{page}.png já existem:
   • Se os arquivos existirem: Pergunte ao usuário se deseja atualizar os designs do projeto Stitch ou reutilizar os arquivos locais existentes. Baixe novamente apenas se o usuário confirmar.
   • Se os arquivos não existirem: Prossiga com o download:
     • htmlCode.downloadUrl — Baixe e salve como .stitch/designs/{page}.html
     • screenshot.downloadUrl — Anexe =w{width} à URL antes de baixar, onde {width} é o valor de width dos metadados da tela (o Google CDN serve miniaturas de baixa resolução por padrão). Salve como .stitch/designs/{page}.png

Etapa 4: Integrar ao Site

1. Mova o HTML gerado de .stitch/designs/{page}.html para site/public/{page}.html
2. Corrija quaisquer caminhos de assets para serem relativos à pasta pública
3. Atualize a navegação:
   • Encontre links de placeholder existentes (por exemplo, href="#") e conecte-os à nova página
   • Adicione a nova página à navegação global, se apropriado
4. Garanta cabeçalhos/rodapés consistentes em todas as páginas

…