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
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.
Tags relacionadas
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.