🎨 Stitch-first protocol

Stitch-First Design Workflow

Regra operacional para pedidos de apresentação, página web, frontend, landing page e entregas visuais do Aspira. O objetivo é padronizar intake visual, priorizar Google Stitch quando fizer sentido e evitar começar design sem direção de paleta, estilo, referências e nível de interatividade.

✅ Ativo Google Stitch como padrão visual Intake obrigatório antes de desenhar 2 metodologias oficiais Atualizado: 20/04/2026

Resumo executivo

O Aspira deve tratar design como processo, não como chute visual.
Quando usar
Apresentações, páginas, interfaces, landing pages, dashboards e peças visuais com foco em layout, direção e navegação.
Ferramenta prioritária
Google Stitch para compor tela, organizar layout, iterar preview e só depois exportar ou implementar.
Perguntas obrigatórias
Paleta, estilo, referências, uso de imagens de background e se a entrega deve ser dinâmica/interativa ou estática.
Saída esperada
Preview bom primeiro, código ou HTML depois. Evitar pular direto para implementação sem direção visual.

Duas metodologias oficiais

A regra agora não é usar uma só ferramenta sempre. É escolher conscientemente qual metodologia vira fonte de verdade final.
Metodologia A
Stitch-first: intake visual, projeto no Stitch, geração de telas, preview, iteração e entrega dentro do projeto.
Metodologia B
HTML-premium: intake visual, arquitetura narrativa e implementação direta em HTML/CSS/JS quando o arquivo final precisa de mais controle, interatividade e acabamento.
Regra de escolha
Se o usuário pedir Stitch, criar e entregar no Stitch. Se o melhor entregável for um arquivo premium controlado, HTML-premium é válido e oficial.
O que não vale
Derivar sem critério entre uma abordagem e outra e depois confundir qual artefato é o canônico.

Decisão central

Para pedidos visuais, o caminho padrão agora é: intake visual → escolher metodologia → preview/implementação → iteração → entrega.
Essa decisão não substitui o workflow canônico de carrossel-intus. Carrossel continua com seu próprio fluxo. Stitch entra como padrão para UI, páginas, apresentações e interfaces visuais em geral.

Checklist obrigatório antes de começar

Se o usuário já respondeu, consolidar. Se não respondeu, perguntar explicitamente.
  1. Paleta: quais cores ou combinação principal?
  2. Estilo de design: premium, editorial, clean, institucional, futurista, minimalista, brutalista etc.
  3. Materiais de referência: links, prints, decks, landing pages, marcas, assets ou exemplos visuais.
  4. Background: quer usar imagens de fundo ou prefere blocos/gradientes limpos?
  5. Modo da experiência: quer algo dinâmico/interativo ou estático?

Campos que valem ouro quando o projeto é maior

Objetivo
Vender, apresentar, explicar, capturar lead, navegar produto ou impressionar visualmente.
Público
Quem vai consumir, qual repertório visual esse público espera e qual nível de densidade faz sentido.
Formato
16:9, desktop web, mobile-first, one-page, deck, hero + seções, app screen, dashboard.
Tom
Executivo, institucional, aspiracional, comercial, didático, técnico ou community-driven.

Fluxo padrão

Etapa 1
Intake visual
Fechar paleta, estilo, referências, background e interatividade.
Etapa 2
Prompt para Stitch
Transformar o briefing em direção visual clara, com prioridade em layout e consistência.
Etapa 3
Preview primeiro
Gerar tela/deck/sessão no Stitch, revisar composição e hierarquia antes de falar em código.
Etapa 4
Iteração
Ajustar direção com base no preview aprovado ou criticado pelo usuário.
Etapa 5
Entrega final
Exportar código, montar HTML navegável, gerar assets auxiliares e entregar arquivo baixável no canal pedido.

Princípio operacional

Não começar por implementação cega. Primeiro fechar a cara da peça. Depois decidir se vira HTML estático, página interativa, deck navegável ou outro formato.

Qual ferramenta entra em cada tipo de trabalho

Tipo de pedidoFerramenta principalObservação
Apresentação / deck / landing / frontend visual com entrega no projetoGoogle StitchUsar Stitch para layout, direção, preview e iteração antes de exportar ou codar.
Deck premium, HTML navegável, apresentação interativa, front file-firstHTML-premiumUsar implementação direta quando o artefato final precisa de mais controle de narrativa, responsividade, animação ou entrega por arquivo.
Imagem avulsa, hero art, background, ilustração, assetimage_generateUsar geração de imagem para assets de apoio, não para substituir estrutura de interface.
Carrossel do Intuscarrossel-intusFluxo próprio, canônico, não substituído por Stitch.
HTML final / front navegável derivado de previewStitch + implementaçãoSe o preview foi aprovado, exportar ou reconstruir em HTML/CSS/JS conforme a entrega pedida.

Regras duráveis

  • Para projetos visuais, priorizar Stitch quando o problema principal for layout, interface e direção visual.
  • HTML-premium é metodologia oficial quando o melhor entregável for um arquivo mais controlado, interativo ou narrativo do que o projeto nativo no Stitch.
  • Não assumir paleta ou estilo se isso ainda não foi combinado, exceto quando o usuário explicitamente pedir para eu decidir.
  • Quando o usuário pedir arquivo no Telegram, entregar anexo real no tópico, não apenas mencionar que o arquivo existe.
  • Se houver vários arquivos, serializar um por vez e validar o recebimento.
  • Usar geração de imagem como complemento visual, não como substituto do fluxo de interface no Stitch.

Frase de bolso

Regra simples: quando for apresentação, página ou frontend, pensar primeiro em Stitch e começar perguntando sobre paleta, estilo, referências, background e interatividade.