Crie um landing page retrô nos moldes dos anos 80 com IA em 7 minutos
Página HTML/CSS pronta com paleta neon, fonte pixelada e efeito CRT - direto no navegador, sem instalar programas
- 1.Abra o Claude.ai, entre na sua conta (cadastro gratuito por email). Se o serviço não estiver disponível na sua região, use qualquer chatbot alternativo que gere código - ChatGPT ou Gemini servem.
O plano gratuito do Claude dá acesso ao modelo básico; isso é suficiente para gerar HTML/CSS.
Claude ↗Sobre a ferramenta - 2.Crie um novo chat e cole o prompt abaixo. Substitua [TEMA] pelo tema da sua página (por exemplo, «portfólio de fotógrafo», «landing page para cafeteria», «anúncio de podcast») e [ZAGOLOVOK] - pelo título principal da página.
Quanto mais específica a descrição do tema e do conteúdo, menos você terá que ajustar manualmente.
Claude ↗Sobre a ferramentaPromptCrie um site retrô de página única no estilo dos arcades dos anos 80. Tema: [TEMA]. Título principal: [ZAGOLOVOK]. Inclua: seção hero com título neon, seção sobre e um rodapé com informações de contato. Requisitos de estilo: fundo #0A0A0F, destaque neon laranja #FE9901, destaque turquesa ácido #00F0FF, texto branco quente. Use a fonte 'Press Start 2P' do Google Fonts para os títulos e monoespaçada para o corpo do texto. Adicione efeito de scanlines CRT usando CSS, estilos de botão pixelado com sombra interna e bordas estilo ASCII ao redor das seções. Gere como um único arquivo HTML autossuficiente com CSS embutido. Inclua o link do Google Fonts. A página deve ser totalmente responsiva.
O que este prompt fazO prompt está em inglês - assim o Claude entende melhor os requisitos de estilo. Substitua [TEMA] pelo tema da página (por exemplo, «personal blog about retro games») e [ZAGOLOVOK] - pelo seu título principal. Os demais parâmetros (paleta, fontes, efeitos) não precisam ser alterados. - 3.Aguarde a geração do código (geralmente 30 a 60 segundos). Copie todo o bloco HTML - clique no botão Copy no canto superior direito do bloco de código.
Se o código estiver dividido em vários blocos, copie-os um por um no mesmo arquivo.
Claude ↗Sobre a ferramenta - 4.Abra qualquer editor de texto (Bloco de Notas no Windows, TextEdit no Mac no modo «Texto sem formatação»). Cole o código. Salve o arquivo como retro.html - o importante é a extensão .html, não .txt.
No Bloco de Notas, ao salvar, escolha «Todos os arquivos» no campo «Tipo de arquivo», senão será salvo como .txt.
- 5.Dê dois cliques no arquivo salvo retro.html - ele abrirá no navegador. Você verá a página retrô com destaques neon, efeito CRT e fonte pixelada.
O arquivo funciona offline, exceto pela fonte Press Start 2P - ela é carregada do Google Fonts (precisa de internet na primeira abertura).
- 6.Se precisar corrigir algo - volte ao chat com o Claude e escreva: «Change the background to dark purple and add a pixel-art star animation in the hero section». O Claude vai gerar o código atualizado. Substitua o conteúdo do retro.html e salve novamente.
Faça ajustes um de cada vez - assim o resultado é mais previsível.
Claude ↗Sobre a ferramenta
- grátisClaude FreeO plano gratuito oferece um número limitado de mensagens por dia - para gerar e fazer 1 ou 2 ajustes de HTML/CSS isso é suficiente.
Por que hoje
Serviços de IA mudam rápido - interfaces e limites gratuitos podem diferir do descrito.