Google Stitch — Resumo Prático

Modos de geração, estrutura de prompts e boas práticas de iteração para criação de UI.

1) Modos de Geração

2) Estrutura de Prompts Efetivos

1. Defina o propósito
   Design a mobile dashboard screen for a cryptocurrency tracking app
2. Liste componentes de UI
   Include: top navigation bar, portfolio summary card, pie chart, trending coins carousel, bottom nav
3. Detalhe o layout com direções
   App name on the left, notification bell on the right
Horizontal scroll for trending section, 2-column grid for top movers
4. Defina estilo e tema
   Dark theme, rounded cards, modern fonts, neon accents
5. Inclua referência visual (ajuda muito)
   Similar to Notion interface
Clean layout like Apple Health app
6. Defina dados dinâmicos exibidos
   Show coin name, icon, current price, percentage change in green/red

3) Como Alterar Layout Existente (Iteração)

Não precisa recomeçar do zero. Use a interface de chat no Stitch:

• ✅ Comando direto
  • Change the pie chart to a bar graph
  • Make the navigation bar sticky on scroll
  • Add more spacing between cards
  • Center the logo instead of left-align
• ✅ Ferramenta Annotate: permite clicar em regiões específicas do layout e pedir mudanças localizadas.
• ⚠️ Dica de ouro: altere uma coisa por vez; prompts com múltiplas mudanças podem confundir o modelo.

4) Exportações Possíveis

• Figma: botão Copy to Figma (somente no Standard Mode)
• Código: HTML/CSS clicando no design → aba Code (nos dois modos)

5) Limitações Atuais

• Os designs são estáticos (sem lógica/interatividade real).
• O Experimental Mode ainda não exporta para Figma.
• Ícones podem aparecer como placeholders em alguns casos.