Criar site dos anos 2000 no Gemini: o limite da nostalgia em 1 hora
Quem navegou na internet raiz no início dos anos 2000 lembra muito bem da febre das “Comunidades de Fãs”. Eram páginas amadoras dedicadas a séries, bandas e animes, feitas na raça com fundos escuros, fóruns toscos, “livros de visitas” e teorias conspiratórias pipocando pra todo lado. Era uma web com alma, feita à mão.
Se você tentar recriar essa estética hoje em dia, costuma bater de frente com a chatice dos padrões modernos de programação. O CSS moderno quer arredondar todos os cantos e aplicar um design “SaaS corporativo minimalista” em tudo. Por isso, obrigar uma inteligência artificial a regredir 20 anos no design é um desafio muito massa.
Para testar até onde a memória cultural do modelo Pro aguenta, lançamos uma missão: programar um site de fãs completão focado na clássica série “Arquivo X”, num único arquivo HTML, em menos de 1 hora. Copie os mega prompts que a gente montou aqui embaixo e veja como a IA se virou para desenhar murais de recados, um chat simulado e até uma “Wiki” numa vibe totalmente nostálgica.
O Gemini Pro sabe exatamente como era a internet em 2002. Ele é um LLM alimentado com muito código antigo e fóruns desativados.
Nesse desafio, proibimos bibliotecas modernas como React ou Tailwind. A IA teve que recriar o livro de visitas e a galeria de imagens na marra, usando puramente HTML5, CSS3 e JavaScript raiz, salvando tudo no localStorage pra brincadeira funcionar de verdade.
Neste guia: a autópsia de um portal antigo, 4 comandos gigantescos da nossa máquina do tempo e o download do arquivo final do Arquivo X Brasil pra você mexer.
Resposta curta:
O Gemini consegue reproduzir a estética dark da web antiga (fundo preto, fontes em bloco, contadores de visitas) perfeitamente. A IA mandou muito bem no sistema de mandar fanfics e murais de recados. O único tropeço foi na hora de gerenciar uma “Wiki” gigantesca num único arquivo de texto, onde ele começou a “esquecer” algumas partes da página inicial.
Como a gente montou esse guia: Tudo aqui é um teste real, sem maquiagem. Fomos colocando camada sobre camada no código, e os prints refletem as vitórias (e as eventuais “travadas”) da IA ao tentar equilibrar uma porrada de menus interligados num bloco de notas.
⚡ TL;DR
- Tempo de leitura: 12 min (ou pule pros prompts)
- Nível: Intermediário / Estrutura de domínio
- O que você vai copiar: 4 mega prompts de design nostálgico e *UI* antiga
- Resultado: Um portal de fãs clássico (Arquivo X) funcionando no seu PC
Índice
- As regras do desafio de fanfics em 1 hora
- Anatomia do mega prompt de cultura pop
- Os 4 prompts mestres e a evolução da página
- O resultado: Baixe o Arquivo X Brasil
- Amanda aconselha: cuidado com as “Wikis” gigantes
- SOS: O texto das teorias saiu da caixa!
- FAQ
As regras do desafio de fanfics em 1 hora
Regra 1: Arquivo único (tudo local)
Os fóruns dos anos 2000 rolavam num servidor rodando PHP/MySQL. Aqui a brincadeira é diferente: queremos simular o envio de teorias, registros no Livro de Visitas e chat guardando toda a conversa num único documento .html através do armazenamento local (localStorage) do seu navegador.
Regra 2: Zero “app moderno”
O foco estético era rígido. Falamos pra IA esquecer qualquer regrinha de design minimalista da Apple ou Google. A gente exigia separadores em bloco, cores escuras, fontes pesadas e, claro, um baita contador de visitas piscando na tela.
Regra 3: Injeção direta de imagens
Como a IA gera texto e não imagens, a gente forçou ela a puxar URLs diretas de fotos reais da internet (posters e ETs da série) pra página ganhar vida sem precisarmos hospedar as fotos num servidor.
Anatomia do mega prompt de cultura pop
| Elemento do prompt | O que faz | O que rola por trás do código | Impacto real | O erro se você ignorar |
|---|---|---|---|---|
| Aviso “não oficial” | Obriga a IA a dizer que é um site de fã. | O HTML coloca um disclaimer no rodapé de copyright. | A IA gera tudo livremente sem bater em filtros éticos de direitos autorais. | A IA apita e recusa programar, alegando pirataria de marca. |
| Forçar *word-wrap* | Faz os textos longos não quebrarem a tela. | No CSS rola um overflow-wrap: anywhere; maroto. | Dá pra ler as teorias gigantescas de boas no celular. | O texto dos Arquivos Confidenciais sai da caixa e a página buga horizontalmente. |
| Estruturar a wiki | Joga uma lista de 50 personagens goela abaixo da IA. | O JS cria uma *Array* monstruosa com nomes, vilões e episódios. | A wiki vira uma enciclopédia interativa de verdade no site. | A IA gera um menu inútil só com 3 nomes como “Exemplo 1 e 2”. |
💡 A dica da engenharia: Quando for pedir pra IA montar um banco de dados longo (como a wiki de personagens ali em cima), não peça mais nada no mesmo prompt! Senão ela estoura a memória de resposta e o código HTML sai pela metade.
Os 4 prompts da nossa máquina do tempo 📌
Aqui embaixo a gente limpou todo o lixo de formatação dos nossos rascunhos. É só copiar o bloco exato e jogar no seu gerador favorito. Dá uma olhada em como o visual do site foi mudando.
👾 Série dev — O projeto Arquivo X Brasil
📸 Prompt 01 — Subindo o fórum básico
Injetamos a atmosfera dark de fórum antigo e cobramos os sistemas de fanfic e chat local logo de cara.
CRIEI UM SITE DE FÃS DE ARQUIVO X COMO SE ESTIVÉSSEMOS NOS ANOS 2000 A ideia é recriar a experiência dos antigos sites de fãs e comunidades online. Quero que você recrie essa sensação nostálgica usando UM ÚNICO ARQUIVO HTML. ESTILO VISUAL: Fundo escuro, efeito misterioso, verde, preto, cinza. Bordas simples, texto pequeno, banners e CONTADOR DE VISITAS. Sem minimalismo corporativo. SISTEMAS OBRIGATÓRIOS (Sem backend, usar localStorage): 1. MENU: Início, Personagens, Episódios, Arquivos Secretos, Fanfic, Chat, Livro de Visitas. 2. FANFICS: O visitante deve poder ler e usar um formulário para submeter fanfics que fiquem salvas localmente. 3. ARQUIVOS SECRETOS: Banco de documentos estilo confidencial que abre num pop-up (Modal). 4. COMUNIDADE: Livro de Visitas onde o utilizador escreve o nome/cidade e fica no mural. Chat simulado com respostas automáticas de bots de fãs. Enquetes interativas. 5. AVISO: "Site de fã, sem vínculo oficial". O site deve ter dezenas de textos originais de fãs resumindo a série. Entregue o HTML, CSS e JavaScript 100% completo, sem funções vazias.
O que aconteceu no teste 1: Sensacional logo de cara. A tela verde com preto super *hacker* dos anos 2000 apareceu certinha, os botões quadrados laterais estavam muito fies. O chat automático simulava mensagens bem engraçadas de outros “fãs”. O bug inicial: A janela flutuante dos “Arquivos Confidenciais” abria num quadradinho minúsculo, e como não tinha barra de rolagem (scroll), não dava pra ler as histórias.
👉 Desliza pro lado pra ver a tela inicial *dark* e o famoso Livro de Visitas. Clica pra ampliar.
📸 Prompt 02 — Jogando fotos da internet lá dentro
Demos a bronca pra consertar o popup cortado e enchemos a IA de links diretos do Google Imagens.
ATUALIZAÇÃO PONTUAL: SITE ARQUIVO X BRASIL NÃO REFAÇA O SITE DO ZERO. Preserve o estilo escuro, fanfics, chat e localStorage. 1. CORRIGIR O POP-UP DOS ARQUIVOS CONFIDENCIAIS: O conteúdo fica cortado. Use uma camada escura, permita rolagem (overflow-y: auto) no conteúdo, ajuste o contraste para ser legível no celular. 2. ADICIONAR IMAGENS VIA LINKS: Use as imagens abaixo nos locais corretos (Banner, Posteres, Monstros) sem esticar. Banner Principal: https://admin.cnnbrasil.com.br/wp-content/uploads/sites/12/2023/12/arquivo-x-e1702927784113.jpg Poster 1: https://macabra.tv/wp-content/uploads/2020/01/Arquivo-X-The-X-Files-1993-s%C3%A9rie_poster_Macabra.jpg Flukeman: https://rollingstone.com.br/wp-content/uploads/flukeman-xfiles-reprodfox.jpg Roswell: https://conteudo.imguol.com.br/blogs/136/files/2016/01/rosswell.jpg Garanta que as imagens não causem rolagem horizontal na tela do celular (max-width: 100%). Entregue o arquivo atualizado.
O que aconteceu no teste 2 (ficou lindo): Como é bom ter imagens na tela! O site ganhou textura de comunidade viva. Os *pop-ups* de textos ganharam rolagem e a IA não deformou o formato das fotos, escalando bonitinho na lista de monstros do episódio.
👉 Desliza pra ver os painéis roláveis novos com imagens injetadas de sites externos.
📸 Prompt 03 — A parede de fotos e blog raiz
Cobramos uma galeria desorganizada no estilo “Masonry” (tipo Pinterest) e textos escondidos em botões de “Spoiler”.
ATUALIZAÇÃO: CORREÇÃO DE TEXTO E NOVO BLOG DE TEORIAS NÃO REFAÇA O SITE DO ZERO. 1. TEXTOS FORA DAS BOXES: Use "overflow-wrap: anywhere" no CSS para impedir que títulos e palavras longas destruam as tabelas e as janelas. 2. GALERIA MASONRY: A galeria deve ter um visual de fotos coladas na parede, em colunas assimétricas (CSS Grid). Ao clicar, as imagens devem ampliar com efeito Lightbox e fundo escuro. 3. BLOG DOS ARQUIVOS: Crie uma aba de Blog de Fãs. Gere 8 posts originais com subtítulos sobre as "Teorias", "Finais Explicados" e "Mitologia". Se tiver spoiler, crie um botão "Revelar Spoiler" antes de libertar o texto escondido via JS. Entregue o arquivo final pronto.
📉 O que rolou no teste 3: Funcionalmente, explodiu a nossa cabeça! O blog de teorias tinha os botões de spoiler funcionando na base do JS, e a galeria de imagens abria em tela cheia quando a gente clicava. A falha técnica: Foi tanto bloco de texto enorme pro blog que a IA perdeu o foco em alinhar a caixa visual da seção de personagens, esticando a página um pouquinho torta.
👉 Desliza pra ver a grelha de fotos e o botão que destranca os spoilers em JS.
📸 Prompt 04 — O ataque da wiki monstruosa
Surtamos e pedimos uma enciclopédia de ETs da série pra testar quando a memória ia estourar.
ATUALIZAÇÃO INCREMENTAL NA WIKI DOS PERSONAGENS NÃO RECRIE O SITE DO ZERO. Preserve o Blog, a Galeria e o Chat. 1. WIKI MASSIVA: Injete no código JavaScript os seguintes 50 personagens (Fox Mulder, Dana Scully, Walter Skinner... [Lista Completa Omitida por Brevidade]). 2. ESTRUTURA DE LORE: Cada personagem tem de conter: Status, Relevância (Essencial, Episódico), Relação com Mulder, e Lista de Episódios principais em que aparece. 3. CLASSIFICAÇÃO: Crie tags nos cards visuais para identificar "Alienígenas", "Conspiração" ou "Agentes do FBI". Se um personagem não tiver imagem na URL, exiba apenas um placeholder de texto elegante sem deformar o layout. Entregue o HTML final revisado.
📊 O veredito: A wiki engoliu a home page. Foi um empate técnico. A wiki ficou colossal, com abas de lore, filtros de “aliens” vs “agentes”. Um banco de dados fenomenal! O preço: Foram tantas linhas de código pra listar 50 ETs, que no final do HTML o Gemini “esqueceu” de preencher o conteúdo do mural inicial e apagou as fanfics que estavam na home page.
👉 Desliza pro lado e baba no volume insano de informações que a IA organizou em Javascript.
O resultado: Baixe o Arquivo X Brasil 🕹️
Deu zebra na página inicial por conta do tamanho abissal da wiki? Deu. Mas o peso das lógicas modulares (janela, galeria e botão de spoiler) é de aplaudir de pé. Chegamos à conclusão de que se você precisar simular uma interação complexa pro seu TCC ou cursinho, a IA faz isso num bloco de notas, de graça, sem precisar pendurar as coisas no WordPress só pra ver funcionando.
ARQUIVO X: Comunidade nostálgica
Baixe o arquivo interativo agora, clica nas fotos pra ampliar, abre o banco de dados dos ETs e pira de ver como a IA entuchou isso tudo num mísero documento HTML rodando direto no seu Chrome!
👉 Amanda aconselha: cuidado com as “wikis” gigantes
- O perigo do limite do token: Mandar a IA criar tabelas enormes (tipo colocar 50 heróis com biografias, parentescos e referências completas) não é má ideia. O erro é pedir tudo isso *no mesmo comando* que você pede pra corrigir um CSS torto! Fragmentar as requisições em 3 chats soltos protege o HTML inteiro de sumir do mapa na resposta do Gemini.
- Sobre imagens roubadas do Google: Usar “links” nativos da internet é uma mão na roda. Mas… se o dono do site apagar aquela foto, o seu portal fica com buracos brancos feios na tela. Se você for vender um freela de landing page de e-commerce pra um cliente, jogue as fotos numa pastinha e mande a IA usar
/imagens/relogio.jpgcomo diretório padrão. - Word-wrap é o seu maior amigo: A estética tosca de 2002 tinha tabelas com 800px de altura rígida. Se colar um texto enorme sem a trava de “overflow-wrap” que a gente mostrou no Prompt 3, a tela do celular vai quebrar feio pros lados. Presta atenção nesse detalhe sempre!
🚨 SOS: Escrevi a teoria e a letra saiu do fundo preto!
- Causa: No calor da emoção emular um PC antigo, a IA meteu um
height: 300px;no CSS cravado. Mas o seu texto tinha 6 parágrafos, aí ele continuou descendo solto e atropelou tudo o que tava embaixo. - Correção rápida: Se tá com pressa, não refaça a página! Só avisa o Gemini: “A caixa das Fanfics tá vazando texto pra baixo. Tira esse ‘height’ travado e bota um ‘min-height: auto’ com um ‘overflow-y: scroll’.”
- Resultado: A estética saudosista é mantida, mas a sua caixa preta ganha uma barrinha de rolagem bonitinha lateral igual a do Windows XP e resolve 100% o B.O.
FAQ: as dúvidas que mais rolam 🔍
O Livro de Visitas salva na internet se eu mandar pra um amigo?
Pior que não! A gente forçou a brincadeira a rolar na memória “passiva” do seu navegador (localStorage). O textinho fofo que você digitar lá na parede do fórum, fica só no seu PC até você limpar o histórico.
Se der pala (token limit) eu perco tudo que fiz?
Basta rolar pra cima, pegar o “código funcional” do chat de trás e abrir num chat fresquinho. Joga a aba da matriz pesada (tipo a wiki dos 50 ETs) e pede pra ele soltar a função de Javascript solta pra você colar depois.
É de boa usar as imagens da série na estrutura?
Num blogão “estilo estudo de TCC” ou de uso pessoal só pra treinar com um belo disclaimer (aviso) de fã embaixo, não dá problema. Mas, lógico, pra monetizar o tráfego ou alugar anúncio nisso aí, tem que trocar a carcaça e jogar FanArt autoral lá dentro.
Posso expandir a página com mais teorias da conspiração?
Com certeza absoluta! O truque do mestre: mande no prompt a seguinte pedrada -> “Eu só quero a injeção extra. Puxa mais 5 artigos de fã com plot twist em JS. NÃO cuspa o resto da folha inteira pra economizar memória da máquina.”
Conclusão: Resgatando o MS-DOS e a emoção 🙌
Fazer o stress-test no “Arquivo X Brasil” deixou bem claro: o LLM modernoso não tem aversão a uma gambiarra artesanal. Ele domina maravilhosamente as amarras estéticas que a gente intencionalmente põe no prompt só pra criar uma aura “arcaica e falha” nas texturas de navegação da época.
As vitórias do “botão de spoiler” sumindo via *Javascript* local, sem precisar instalar trinta *plugins* de WordPress, abrem muito os olhos de quem tá no corre de aprender a ser um desenvolvedor rápido!
Dá um *download* aqui nessa beleza inacabada e cheia de charme. Abre a garrafa térmica, pega os códigos locais desse Frankenstein e muda pro tema do seu desenho dos anos 90 favorito!
Ei, antes de vazar: se você curtiu esse conteúdo, não vacila em olhar os outros testes absurdos dessas categorias. É parada de alto nível que eu jogo aberto aqui:
Se você usar essa matriz HTML e meter a cara no seu próprio filme nostálgico favorito… joga no ar e me dá aquele salve nos *stories* do @mktamanda. Seremos os primeiros da fila a assinar seu “Livro de Visitas”! :))
ps: obgda demais por ficar até aqui, significa muito.
