Publicado：2026-09-28
Palavras-chave：Nano Banana Pro, Nano Banana, site oficial Nano Banana, landing SaaS, Hero de landing, nanobanana prompts
Equipas que constroem sites B2B, ferramentas para developers ou SaaS de fluxos de IA sabem isto: antes de o visitante chegar aos preços, o que decide se continua a descer costuma ser se o Hero do primeiro ecrã parece profissional e se as ilustrações de recursos parecem o mesmo sistema de design. Se o Hero, os cartões de recursos e a placa de prova social discordam na temperatura de cor ou na escala do Logo, o visitante sente que a página foi colada por três empresas. Muitos entregam o Hero a um designer, tiram as funções de um banco de ícones e recortam a faixa de benefícios de um Pitch Deck — alinhar as três cadeias muitas vezes demora dias, e o primeiro ecrã móvel ainda corta o produto até «ficar só metade».
Este guia não é um artigo de slides Pitch Deck, kit visual de webinar, cabeçalhos de Newsletter nem capturas ASO da App Store. Resolve uma só coisa: como entrar no site oficial Nano Banana na app criativa via aplicação criativa Nano Banana e, com Nano Banana / Nano Banana Pro, concluir em meio dia um kit visual de landing SaaS pronto a publicar — cobrindo o Hero, os cartões de recursos e a faixa de benefícios / prova social sem três cadeias de design externalizadas.
Vais obter: tabela de planeamento do kit (8 peças), checklist de assets, fluxo em quatro passos, 3 templates de prompt em inglês completos (placeholders substituíveis), recomendações de proporção para o primeiro ecrã e blocos, três desdobramentos de casos, tabela de erros e critérios para escolher entre Nano Banana e Nano Banana Pro. Os corpos dos prompts não são encurtados aqui — a seed injeta os blocos ingleses completos para colares e publicares o Hero, os cartões de recursos e a faixa de benefícios.
1. Porque usar Nano Banana / Nano Banana Pro para o visual de uma landing SaaS?
Externalizar o Hero, as ilustrações de recursos e a faixa de benefícios a fornecedores diferentes parte o sistema de design. Ícones de stock saltam de estilo e a prova social parece de outra marca. No fluxo do site oficial Nano Banana, Nano Banana serve para explorar composição e volume depressa, e Nano Banana Pro bloqueia cor de marca, identidade de produto/UI e zona segura do título no fecho. Compara a matriz antes de gastar créditos:
| Capacidade | Mistura externalizada tradicional | Nano Banana / Nano Banana Pro |
|---|---|---|
| Composição do Hero do primeiro ecrã | Uma revisão espera um dia | Linguagem natural para testar 5 direções; Pro fixa cor de marca e produto/UI com mais estabilidade |
| Espaço negativo das ilustrações de recursos | O estilo de bancos de ícones salta | Esboços limpos de cartão; Pro deixa mais clara a zona segura de um título curto |
| Unidade da série | Hero, recursos e faixa de benefícios feitos à parte | Reutiliza-se o mesmo esqueleto de prompt; o fluxo da mesma conta mantém-se contínuo |
| Corte móvel | Só depois de exportar descobres que a cara/produto foi cortada | Âncoras fixas de zona segura; o contraste do fecho Pro encaixa melhor no primeiro ecrã |
| Entrada e aprendizagem | Ferramentas dispersas | O site oficial Nano Banana tem guias e casos; a página pilar de Pro explica a seleção |
Numa frase: usa Nano Banana para explorar composição e quantidade; usa Nano Banana Pro para fechar cor de marca, identidade de produto/interface e zona segura do título. Decisões e entradas: começa pelas páginas de produto Nano Banana e Nano Banana Pro; créditos e planos, em Preços. Isto não é «uma imagem bonita» — é um sistema visual reutilizável de produto para Hero, recursos e prova social.
2. Plano do kit visual de landing SaaS (8 peças recomendadas)
Antes de encher o Figma com ilustrações de stock, define numa tabela «o trabalho visual de cada bloco» — poupa créditos e evita que Hero, recursos e faixa de benefícios pareçam três marcas:
| N.º | Tipo de imagem | Propósito | Modelo recomendado |
|---|---|---|---|
| 1 | Placa Hero | Visual principal atrás do H1 + CTA do primeiro ecrã | Nano Banana Pro |
| 2 | Close-up de produto/UI | Provar que «isto é um produto real» | Nano Banana Pro |
| 3 | Ilustração de recurso A | Metáfora de automação / eficiência | Nano Banana / Pro |
| 4 | Ilustração de recurso B | Metáfora de colaboração / fluxo de trabalho | Nano Banana / Pro |
| 5 | Ilustração de recurso C | Metáfora de analytics / segurança | Nano Banana Pro |
| 6 | Faixa de benefícios / prova social | Base para citações ou muro de Logos | Nano Banana Pro |
| 7 | Cena de contraste antes/depois | Explicar «antes vs depois» | Nano Banana Pro |
| 8 | Ambiente CTA inferior | Fechar a conversão sem roubar o botão | Nano Banana Pro |
Dica do site oficial: No site oficial Nano Banana, abre primeiro o Showcase e o guia de prompts e guarda casos de «ilustração comercial limpa / Hero de produto». Depois entra em aplicação criativa Nano Banana: é mais rápido do que inventar o look do zero. Este kit é para Hero de landing SaaS, cartões de recursos e faixa de benefícios / prova social, não para Pitch Deck, webinars, Newsletter nem capturas ASO.
3. Checklist de assets (o que decide se o site todo «parece um só produto»)
Antes de abrir a app criativa, prepara o seguinte. Saltar este passo é a razão nº 1 para o Hero, os cartões de recursos e a faixa de benefícios parecerem três empresas coladas:
- Referência de marca (obrigatório): silhueta clara do Logo; cor primária e secundária em nome inglês ou hex
- Referência de produto ou interface (fortemente recomendado): captura real de UI ou foto do produto como Imagem 1; escreve «não redesenhar o texto da interface até ficar ilegível»
- Tom de categoria: ferramenta B2B de produtividade / ferramentas para developers / SaaS de fluxo de IA — escolhe apenas um e escreve-o na descrição de estilo
- Lista de blocos: Hero, 3 cartões de recursos, faixa de benefícios, CTA inferior — fixa a quantidade antes de gerar
- Proporção e zona segura: Hero em 16:9; cartões de recursos em 1:1; reserva ~40% de espaço negativo limpo para o título
- Restrições negativas: no watermark, no fake pricing, no melted UI text, no random stock faces
Não precisas de desenhar botões no mockup primeiro. Nano Banana Pro pode deixar a zona segura do título e do CTA só com a descrição; quanto mais limpo o fundo, mais estável fica depois o copy real. Trata esta lista como o brief de «um só produto» para todo o kit.
4. Fluxo em quatro passos (do site oficial a uma landing publicável)
Passo 1: Entrar na criação a partir do site oficial Nano Banana
- Abre aplicação criativa Nano Banana a partir do site oficial Nano Banana
- Prioriza Nano Banana Pro para o Hero, o close-up de produto e a faixa de benefícios; usa Nano Banana para explorar metáforas puras
- Carrega a marca ou a imagem de produto/UI como Imagem 1
Passo 2: Escolhe o template pela ordem do kit
Abaixo há três esqueletos de prompt em inglês prontos a copiar (não inventes stubs encurtados — cola os blocos completos para o Hero, o cartão de recurso e a faixa de benefícios):
- Template A: placa Hero de landing (16:9, grande zona segura de título)
- Template B: cartão quadrado de recurso (1:1, uma metáfora de recurso)
- Template C: faixa de benefícios / prova social (16:9, amplo espaço negativo)
Passo 3: Faz um «controlo de publicação» após gerar
- Após o corte móvel do primeiro ecrã, ainda se reconhecem o produto e a cor de marca?
- A zona segura de título e CTA é grande o suficiente, sem texturas a enchê-la?
- As bordas de UI/produto estão intactas e as etiquetas não derretem?
- Hero, cartões de recursos e faixa de benefícios partilham temperatura de cor e linguagem de composição?
- Há preços falsos, Logos de clientes inventados ou marcas de água?
Passo 4: Itera com frases curtas + exporta por bloco
Itera com ajustes conversacionais curtos, depois exporta Hero e faixa de benefícios em 16:9 e os cartões em 1:1, e sobrepõe o copy e os botões reais na landing. Seguimentos habituais:
- “enlarge headline safe zone”
- “keep brand purple”
- “simplify UI chrome”
- “simpler background, larger headline zone”
- “preserve UI label legibility”
Após o fecho, exporta Hero e faixa de benefícios em 16:9 e os cartões de recursos em 1:1; depois compõe o copy e os botões reais na página — nunca assentes preços falsos na placa. Para padrões de falha e reparação, usa a página Failures e o blog de falhas comuns no site oficial Nano Banana.
5. Template de prompt A: placa Hero de landing
Subject: SaaS landing-page hero background, 16:9. Preserve brand identity from Image 1 100% — logo silhouette, primary colors, and product/UI shape if present. Do not invent a different brand.
Composition: Product, UI frame, or abstract brand motif on the 【left third / right third】. Leave a large clean headline-safe zone on the opposite side (about 40% width) for H1 + subhead + CTA overlay later — no baked-in garbled text, no fake buttons with melted labels.
Style: 【B2B productivity / developer tools / AI workflow SaaS】; premium modern landing-page look; high contrast for above-the-fold readability on desktop and mobile.
Lighting: Soft studio key, gentle rim, subtle screen glow if UI is shown; avoid muddy midtones and neon overload.
Negative constraints: no watermark, no fake pricing numbers, no unreadable micro-UI text, no random stock faces, no cluttered dashboard spam.
Output: 16:9, 4K, Nano Banana Pro SaaS landing hero plate.
Como usar
- Carrega o Logo ou a referência de produto/UI como Imagem 1
- Cola o bloco inglês completo, preenche o tom de categoria e o lado da zona segura
- Se o fundo estiver demasiado carregado, segue com “simpler background, larger headline zone”
- Antes de fechar, pré-visualiza o primeiro ecrã uma vez em desktop e uma vez em largura móvel
6. Template de prompt B: cartão quadrado de recurso
Layout: Square SaaS feature illustration card, 1:1. Preserve brand accent from Image 1 as a quiet motif only. Communicate ONE feature metaphor — 【automation / collaboration / analytics / security】 — without baking long paragraphs.
Composition: One clear visual metaphor centered or left-weighted. Keep 40–50% calm negative space for a short feature title overlay later. Motif stays simple and icon-like, not a full comic scene.
Style: Minimal product-marketing illustration, Nano Banana Pro clean commercial plate, section-grid friendly.
Lighting: Even, low-drama; readable as a small card in a 3-column features row.
Negative constraints: no fake charts with readable numbers, no melted labels, no watermark, no stock photo collage, no unrelated mascot spam.
Output: 1:1, 4K, Nano Banana or Nano Banana Pro SaaS feature illustration.
Ponto de aprendizagem: um cartão de recurso leva uma metáfora, não o parágrafo inteiro do recurso assado na imagem. O título real e os bullets ficam na camada de copy da web. Se só quiseres testar direção depressa, começa com Nano Banana e passa a Nano Banana Pro no fecho. Um cartão que tenta imprimir toda a explicação fica ilegível numa fila de três colunas.
7. Template de prompt C: faixa de benefícios / prova social
Benefit strip / social proof backdrop for a SaaS landing page, 16:9 wide or 3:1 crop-friendly.
Identity: If a logo is uploaded as Image 1, preserve brand colors and silhouette 100%. Do not invent competitor logos. If a product shot is uploaded, preserve the SKU/UI 100%.
Composition: Soft brand-color gradient or quiet abstract geometry with a wide calm center band for future quote/logo-row overlay. Keep edges quiet so the strip can sit under a testimonials section.
Style: Consistent with the hero palette 【brand primary + charcoal/white】 so hero, feature cards, and benefit strip feel like one design system.
Lighting: Soft even wash, no harsh vignette that hides overlay text later.
Negative constraints: no fake customer logos, no watermark, no dense isometric city, no garbled testimonial text baked in.
Output: 16:9, 4K, Nano Banana Pro SaaS benefit-strip plate.
Ponto de aprendizagem: a zona de prova social precisa de uma placa silenciosa; Logos de clientes e citações reais sobrepõem-se com material autêntico. Logos falsos ferem a confiança e implicam risco de conformidade. Preferir Nano Banana Pro quando a paleta deve alinhar-se com o Hero. Mais esqueletos de prompt estão na coleção de prompts do site oficial Nano Banana.
8. Proporções, primeiro ecrã e recomendações de exportação
| Uso | Proporção recomendada | Notas |
|---|---|---|
| Hero de desktop | 16:9 | Reservar ~40% de espaço negativo para o título |
| Corte Hero móvel | Cuidar da zona segura | O sujeito do produto não deve colar na margem |
| Cartões de recursos em três colunas | 1:1 | Mesma direção de luz e mesma paleta |
| Faixa de benefícios / muro de Logos | 16:9 ou recortável a 3:1 | Faixa central larga para sobrepor texto |
| Ambiente CTA inferior | 16:9 | Não competir com o botão nem o formulário |
Mesmo depois de exportar, pré-visualiza nos breakpoints alvo. Muitos casos de «parece premium no desktop e no telemóvel só fica um bloco de cor» vêm do contraste e do empacotamento da zona segura — não do 4K em si. Mantém limpa a zona do título para que H1 e CTA continuem legíveis.
9. Três desdobramentos de casos (copia a estrutura)
Caso 1: landing de ferramenta B2B de produtividade
- Objetivo: o Hero lembra o roxo da marca; três cartões de recursos com a mesma linguagem; a faixa de benefícios deixa espaço a citações de clientes
- Abordagem: template A (produto à direita, zona de título à esquerda) → B×3 (automação / colaboração / relatórios) → C (faixa larga em gradiente carvão)
- Resultado: o primeiro ecrã e a zona de recursos parecem o mesmo sistema de design
- Aprendizagem: não assentes preços falsos no Hero; o preço vai no bloco de preços
Caso 2: home de documentação de ferramenta para developers
- Objetivo: captura de UI legível, sem lixo tipográfico; tom de «engenharia credível»
- Abordagem: close-up de produto com Nano Banana Pro para bloquear a interface; cartões de recursos com pouca decoração e muito espaço negativo
- Resultado: visitantes técnicos disseram que «não parece um SaaS de template»
- Aprendizagem: em sites para developers evita néon excessivo e efeitos de ficção científica
Caso 3: redesign de produto de fluxo de trabalho com IA
- Objetivo: continuidade visual entre o site antigo e o novo, mas com uma melhoria clara
- Abordagem: fixa a cor primária e a proporção de zona segura; só muda elementos de metáfora e um ajuste fino da luz
- Resultado: utilizadores antigos ainda reconhecem a marca; os novos sentem frescor
- Aprendizagem: muda só uma classe de variável de cada vez para a série se manter estável
10. Erros comuns e como evitá-los
| Erro | Consequência | Correção |
|---|---|---|
| Encher o Hero com números falsos de dashboard | Pouco credível e difícil de manter | Hero = visual principal + zona de título apenas |
| Zona segura do título cheia de textura | Ao sobrepor H1/CTA o resultado fica sujo | “larger clean headline-safe zone” |
| Estilos de cartões de recursos sem relação | O site todo parece uma colagem | Fixa a descrição de paleta e de composição |
| Texto de UI derretido | O produto parece falso | “preserve UI label legibility” + Nano Banana Pro |
| Gerar Logos falsos de clientes na faixa de benefícios | Risco de confiança e de conformidade | Gerar só a placa; Logos com material real |
| Fechar o Hero só com o modelo standard | Bordas de produto borrosas | Hero e close-up de produto: mudar para Nano Banana Pro |
Para prevenção sistemática, cruza Failures e as experiências de parâmetros do Lab no site oficial Nano Banana. A confiança de uma landing SaaS parte mais depressa com preços falsos, Logos inventados ou UI derretida — trata isso como um travão duro antes de publicar.
11. Nano Banana vs Nano Banana Pro: como escolher para uma landing?
| Tarefa | Melhor opção |
|---|---|
| Testar depressa 5 composições de Hero | Nano Banana |
| Fecho do Hero + bloqueio de cor de marca e UI | Nano Banana Pro |
| Exploração de metáforas em cartões de recursos | Nano Banana / Pro |
| Placa silenciosa de faixa de benefícios | Nano Banana Pro |
| Entrada de aprendizagem e explicação de produto | Site oficial Nano Banana: páginas pilar e blog |
O detalhe da seleção também está no artigo de diferenças Nano Banana vs Pro e na review do site oficial no {{SITE_LINK}}. Regra prática para landings: explora volume no modelo standard, bloqueia cor de marca, identidade de produto/UI e zona segura do título no Pro, depois compõe o copy real fora da imagem — abre {{APP_LINK}} quando estiveres pronto a gerar.
12. Três passos para começar hoje (um rascunho do primeiro ecrã no mesmo dia)
- Abre o site oficial Nano Banana → entra em aplicação criativa Nano Banana → carrega a marca ou a imagem de produto/UI → escolhe Nano Banana Pro
- Executa pela ordem o template A (Hero) → B (cartão de recurso) → C (faixa de benefícios); faz um controlo de publicação por peça
- Exporta em 16:9 e 1:1, coloca no rascunho da landing e sobrepõe o copy real; para créditos, consulta o guia de teste gratuito e Preços no site oficial
Encerramento
Uma landing SaaS não se ganha com «uma só imagem mágica», mas com um sistema visual de produto reutilizável. Separa o Hero, as ilustrações de recursos e a faixa de benefícios; explora com Nano Banana, fecha com Nano Banana Pro, e apoia-te em guias, casos e explicação de preços do site oficial Nano Banana. Podes estabilizar a qualidade visual ligada à conversão do primeiro ecrã sem alongar outra cadeia de externalização.
Próximo passo: revê os antes/depois verificados no Showcase ou descarrega o pack de templates Resources para guardar esqueletos de prompt, e lança hoje este fluxo de landing em aplicação criativa Nano Banana.