Stitch-First Design Workflow

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.

Decisão central

Para pedidos visuais, o caminho padrão agora é: intake visual → Stitch → preview → iteração → export/implementação.

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.

Paleta: quais cores ou combinação principal?
Estilo de design: premium, editorial, clean, institucional, futurista, minimalista, brutalista etc.
Materiais de referência: links, prints, decks, landing pages, marcas, assets ou exemplos visuais.
Background: quer usar imagens de fundo ou prefere blocos/gradientes limpos?
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 pedido	Ferramenta principal	Observação
Apresentação / deck / landing / frontend visual	Google Stitch	Usar Stitch para layout, direção, preview e iteração antes de exportar ou codar.
Imagem avulsa, hero art, background, ilustração, asset	image_generate	Usar geração de imagem para assets de apoio, não para substituir estrutura de interface.
Carrossel do Intus	carrossel-intus	Fluxo próprio, canônico, não substituído por Stitch.
HTML final / front navegável	Stitch + implementação	Se 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.
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.