Prompt para construir landing pages profissionais em 45 minutos sem designer (Claude Code + Nano Banana 2)

Prompt que orienta a criar uma landing page completa com HTML/CSS e assets visuais usando uma workflow de IA de 2 ferramentas (Claude Code + Nano Banana 2) dentro da app Gemini, visando entrega em 45 minutos sem designer.

4.5
18 usos
Gemini
Usar no Gemini
Objetivo: gerar uma landing page completa (HTML/CSS) com UI de alto nível usando uma workflow de IA de 2 ferramentas: Claude Code para codificação/estrutura e Nano Banana 2 para assets visuais, dentro da app Gemini. A ideia é fechar o gargalo de design sem abrir ferramentas como Figma, entregando estrutura, UI e visuais customizados em ~45 minutos.

Instruções de uso:
1) Frame da página: descreva público-alvo, objetivo de negócio, tom de marca e a estrutura da página: header com logo e nav; seção hero com título/CTA; seções de recursos e diferenciais; depoimentos; FAQ; pricing; rodapé.
2) Especificações técnicas: output HTML/CSS completo em um único arquivo, sem dependência de bibliotecas pesadas; use markup semântico, acessibilidade (aria-labels, roles, alt text); design responsivo com CSS Grid/Flex; tokens de cor; nomes de classes consistentes (p.ex., BEM);
3) Conteúdo e assets: inclua placeholders para imagens; defina prompts para Nano Banana 2 gerar assets visuais (3D mockups, ilustrações planas transparentes) e exportar assets; manter convenção de nomes e caminhos de arquivo.
4) Workflow em 3 passos:
   a) Frame: descreva o que Claude Code deve construir (estrutura, carrossel, seções);
   b) Build: Claude Code gera HTML/CSS completo seguindo o Frame;
   c) Visuals: Nano Banana 2 gera assets visuais de acordo com as descrições do Frame e os insere como placeholders no layout ou como arquivos de assets.
5) Saída esperada:
   - (a) código HTML/CSS completo pronto para uso, com comentários explicativos;
   - (b) lista de prompts para Nano Banana 2 para cada asset requerido (3D mockups, UI illustrations, icons, etc.);
   - (c) instruções de exportação e organização de assets;
   - (d) paleta de cores, tokens de tipografia e guidelines de estilo.

Notas:
- Garanta acessibilidade, SEO básico (meta tags simples), e performance (imagens otimizadas, loading lazy).
- O prompt pode ser adaptado para outros nichos substituindo o Frame pela estrutura correspondente.

Como Usar este Prompt

1

Clique no botão "Copiar Prompt" para copiar o conteúdo completo.

2

Abra sua ferramenta de IA de preferência (Gemini e etc.).

3

Cole o prompt e substitua as variáveis (se houver) com suas informações.

Compartilhe

Gostou deste prompt? Ajude outras pessoas a encontrá-lo!