Criar um Windows XP em HTML no Gemini: o clone perfeito em 1 hora
Sistemas operativos clássicos sempre despertam uma nostalgia imediata. Nunca esquecemos o som de arranque do primeiro computador que ligamos, o primeiro jogo de Campo Minado que tentamos resolver, ou a interface icônica que nos ensinou a navegar na internet. Recriar essa teia complexa de janelas e aplicações exige um domínio profundo de lógica estrutural.
O custo de tentar ditar toda a arquitetura de um Sistema Operativo para uma IA usando um prompt ingênuo é receber uma “imagem morta”: ícones desenhados no ecrã em que clicar não abre absolutamente nada. Construir um ecossistema que gere múltiplas janelas, blocos de notas que guardem dados e motores de xadrez exige disciplina modular.
Para provar a genialidade estrutural do modelo Pro, desenhamos o desafio mais surreal até ao momento: recriar a experiência completa de um sistema inspirado no Windows XP (o “Windows Retro”), contendo navegador fictício, Paint e jogos, tudo dentro de um único arquivo HTML. Copie a estrutura de comandos massiva desta experiência e aprenda como a IA encadeia diferentes ferramentas numa só plataforma.
Gemini Pro é o LLM avançado do Google, desenvolvido para suportar longos blocos de contexto temporal. Programar o *DOM* (Modelo de Objeto de Documento) de um browser para se comportar como um sistema operativo exige que a IA crie um algoritmo rigoroso para ditar qual a janela que fica à frente (Z-Index) sempre que é clicada.
Neste teste monumental de arquitetura, forçamos a IA a criar todas as funcionalidades e jogos através de HTML5, CSS3 e JavaScript puro, sem qualquer recurso a bases de dados (Back-end) ou logotipos baixados da internet.
Neste guia: a dissecação da lógica de uma aplicação de múltiplas janelas, os 3 comandos colossais do projeto, as capturas da ressurreição nostálgica e o código HTML open-source completo.
Resposta curta:
O Gemini executou o impensável. Num único arquivo, conseguiu escrever a engenharia base para arrastar e fechar janelas. Nas iterações seguintes, construiu um motor de xadrez inteligente (Minimax) jogável e até mesmo um “Google” fictício que pesquisa as pastas dentro do nosso próprio sistema operativo. E fê-lo sem quebrar as linhas mestras do código original.
Como este guia foi montado: Submetemos a IA a um teste de desenvolvimento iterativo sem acesso externo. Os comandos documentados abaixo foram elaborados a cada fase, e as imagens retratam perfeitamente os avanços em direto no nosso browser. Um laboratório espetacular de manipulação *front-end*.
⚡ TL;DR
- Tempo de leitura: 12 min (ou pule para os prompts)
- Nível: Avançado / Arquitetura de software web
- O que você vai copiar: 3 mega prompts de estruturação front-end multitarefa
- Resultado: Um arquivo HTML contendo o seu próprio sistema operativo nostálgico
Índice
- As regras do desafio de sistema simulado
- Anatomia do mega prompt de janelas
- Os 3 prompts mestres e o renascer dos clássicos
- O resultado: Baixe o Windows Retro
- Amanda aconselha: o limite do “Z-Index”
- SOS: O meu Paint sumiu da tela!
- FAQ
As regras do desafio de sistema simulado
Regra 1: Arquivo único (zero imagens da internet)
O desafio estrutural aqui não permitia truques: o wallpaper com colinas idílicas, os ícones da Lixeira, até os naipes do jogo de Paciência teriam que ser totalmente gerados em CSS/SVG matematicamente, dentro do exato bloco de texto do .html independente.
Regra 2: Originalidade forçada (Windows Retro)
Pedir à IA a recriação fiel dos códigos-fonte da Microsoft bloqueia o prompt por direitos autorais. Injetamos o conceito estético dos anos 2000, batizando-o como “Windows Retro”, para evocar a familiaridade dos gradientes azuis, mas garantindo arquitetura nova.
Regra 3: Limite de iteração e multitarefa
Estabelecemos 1 prompt fundador para ditar as lógicas base de interação (arrastar e duplo clique) e os restantes para injeção de aplicações complexas. O objetivo central era obrigar as janelas a abrirem umas sobre as outras, garantindo que o fecho de uma delas não estragava a tela inteira.
Anatomia do mega prompt de janelas (DOM)
| Elemento do prompt | O que faz | O que acontece por dentro | Impacto real | Erro se ignorado |
|---|---|---|---|---|
| Proibição de falsidade | “É melhor ter 8 apps reais do que 30 falsas.” | A IA apaga a necessidade de desenhar ícones em branco. | Cada clique abre janelas funcionais garantidas (Bloco de Notas/Calculadora). | A tela ficará inundada de programas que abrem alertas de “Brevemente”. |
| A hierarquia do foco (Z-Index) | Manda a janela clicada vir para a frente de todas as outras. | O código injeta funções `zIndex = getMaxZIndex()` no evento de clique. | Pode ter Calculadora e o Paint abertos, alternando quem fica visível. | Abrir o Paint tapa o Bloco de Notas permanentemente até fecharmos a aplicação. |
| A persistência em disco falso | Os arquivos .txt devem ser gravados internamente. | A IA escreve lógicas pesadas de armazenamento passivo no localStorage. | O que o usuário digitar e “Salvar Como”, vai poder aceder amanhã! | O computador finge o salvamento e as notas desaparecem com um *Refresh*. |
💡 O segredo dos especialistas: Programar lógicas independentes como a Inteligência de um motor de Xadrez, um Paint de desenho vetorial, e um *DOM* que permite arrastar janelas pelo ecrã exige um *buffer* mental massivo da IA. A instrução “NÃO ALTERE O QUE FUNCIONA” é o único salva-vidas nas atualizações!
Os 3 prompts mestres e o renascer dos clássicos 📌
Abaixo detalhamos os comandos exatos desprovidos de ruído de PDF. Acompanhe a transformação visual fabulosa, as lutas estruturais e o milagre da engenharia de janelas simuladas num navegador isolado.
👾 Série dev — O projeto Windows Retro
📸 Prompt 01 — A fundação do SO
Este comando maciço delineia o ambiente de trabalho, o gestor de janelas (arrastar e largar) e a identidade multitarefa.
DESAFIO: RECRIAR UM DESKTOP CLÁSSICO EM HTML Quero criar uma experiência de sistema operacional inspirada no Windows XP, contendo desktop, menu iniciar, barra de tarefas, janelas, lixeira, configurador e explorador de arquivos. Nome do sistema: WINDOWS RETRO. REGRA PRINCIPAL: Entregar todo o projeto em um ÚNICO ARQUIVO windows-retro.html. Sem banco de dados, sem backend, sem imagens e logos protegidos. Ícones em CSS/SVG inline e armazenamento local (localStorage). MECÂNICAS EXIGIDAS: 1. SISTEMA DE JANELAS (O Core): As janelas devem poder mover, minimizar, maximizar, fechar, e sobrepor outras janelas (Z-index no foco ativo). A barra de título deve ser o controle de arrastar (Pointer Events). 2. BARRA DE TAREFAS E INICIAR: Botão Menu Iniciar que expande aplicativos e janelas abertas minimizáveis. Relógio funcional na barra. 3. ÍCONES E MULTITAREFA: Duplo clique abre os apps. Crie Bloco de Notas (salvando txt fictício no localStorage), Calculadora, Paint básico, Jogos (Campo minado simples, Snake) e Lixeira funcional. 4. ÁUDIO: Sons sutis de Web Audio API para erro, iniciar e janelas. FUNCIONALIDADE É PRIORIDADE: Entregue apenas o HTML final, é melhor ter 8 apps reais do que 30 inativos.
O que aconteceu no teste 1 (vitória visual inegável): Ficou soberbo. A sensação mecânica e as cores saturadas gritam “anos 2000” para qualquer pessoa da geração. O Gestor de Janelas correu de forma absolutamente fluida — conseguimos arrastar, minimizar e sobrepor janelas de forma fidedigna. As falhas: No fundo, os utilitários estavam pálidos; a Internet fictícia era aborrecida, alguns minijogos falhavam e o Bloco de Notas não estava ainda a guardar arquivos interligados no Explorador.
👉 Deslize para ver todas as ferramentas renderizadas no Teste 1 (incluindo o menu Iniciar). Clique para ampliar.
📸 Prompt 02 — O salto para a internet e a lógica de jogos
Exigimos uma injeção radical de códigos lógicos (Minimax no Xadrez e Interligação de Dados).
ATUALIZAÇÃO WINDOWS RETRO - FASE 2 O projeto JÁ ESTÁ BOM. NÃO REFAÇA DO ZERO. Preserve wallpaper atual, desktop, Z-index e tudo o que já funciona. Esta rodada é exclusiva para melhorar a INTERNET, O PAINT E OS JOGOS CLÁSSICOS. 1. NAVEGADOR: Crie uma "Internet Fictícia" simulada interna ao código. Sites como "Retro Mail, Retro Search, Tech World". Páginas compactas com links azuis e tabelas 100% nostálgicas com histórico funcional (Voltar/Avançar). 2. PACIÊNCIA E XADREZ: Conserte a Paciência de verdade (Klondike) usando baralho 52 cartas funcional na tela. E mais importante: O Xadrez DEVE ter um computador que jogue contra o usuário usando um motor "Minimax" simplificado com IA básica de decisão e turnos com animação "Computador Pensando...". 3. BLOCO DE NOTAS & EXPLORADOR: O bloco agora tem de se ligar ao explorador. O usuário salva o arquivo > o txt físico simulado aparece na pasta > ele clica na pasta e o app reabre lendo o arquivo usando localStorage! 4. PAINT: Adicione paleta de cores e seleção real de ferramentas, permitindo desenhar formas e usar a borracha ou balde de tinta. Entregue apenas o HTML final, super completo.
O que aconteceu no teste 2 (o progresso lógico): O Gemini transpirou genialidade nesta execução! O Paint transformou-se numa pérola de edição e a IA escreveu uma biblioteca inteira de cálculo relacional para permitir ao Computador jogar um Xadrez formidável na dificuldade “Média”. Além disso, construímos efetivamente uma rede interligada: quando guardávamos um arquivo no Bloco de Notas, ele materializava-se no nosso Explorador local e vice-versa.
👉 Deslize para ver o Xadrez inteligente e as redes de arquivos ligadas.
📸 Prompt 03 — A refinação perfeita (GooRetro e Wallpapers)
Quisemos finalizar a obra selando a identidade de época: um Google fictício a vasculhar os nossos arquivos e um menu de personalização (temas).
ATUALIZAÇÃO WINDOWS RETRO - FASE 3
ATENÇÃO: O projeto está funcionando perfeitamente (Jogos, Paciência, Minimax, Navegador e Paint). NÃO REFAÇA A ESTRUTURA.
O objetivo desta última fase é apenas:
1. CORRIGIR CONFIGURAÇÕES: O app não estava abrindo. Conserte usando o mesmo sistema modal do SO. Nele, o usuário deve poder escolher novos Wallpapers desenhados em CSS puro ("Céu Azul", "Sunset", "Windows Clássico"), controlar Volume de som do sistema e alterar o modo 12h/24h.
2. BUSCADOR RETRÔ GOOGLE: Crie o "GooRetro" na web fictícia. Ele tem que realmente pesquisar termos (ex: ao digitar "jogos", lista links para as suas janelas de xadrez ou pacman). Com autocompletar sugestões nostálgicas e registro no histórico.
3. ESTABILIDADE DE FECHAMENTO: Apenas valide o código para assegurar a navegação contínua de todo este universo em um arquivo.
Entregue o código completo finalizado.📊 O resultado final (surpresa absoluta): Triunfamos a 100%. Com a ferramenta final de configurações ativada, conseguimos saltar entre fundos dinâmicos espantosos no desktop! O portal de busca comportou-se maravilhosamente bem: ao digitar a nossa palavra, localizava todas as abas das nossas aplicações disponíveis e criava um “Portal Online”. Estávamos diante do nosso próprio cérebro virtual e um *playground* em HD da internet do passado!
👉 Deslize para ver o portal GooRetro e o magnífico painel de configurações funcionando. Clique para ampliar.
O resultado: Baixe o Windows Retro agora 🕹️
O céu, com esta base estrutural, não tem literalmente qualquer limite tecnológico a curto prazo. Pense que este mesmo código que lhe disponibilizamos poderia tornar-se facilmente o seu *Hub* (central de trabalho) personalizado! Pode injetar os links da nossa antiga brincadeira de “Canva clone” e usá-lo como o seu estúdio digital *vintage* de forma organizada e portátil num pendrive!
WINDOWS RETRO: O seu sistema portátil
Quer analisar como o Gemini construiu a lógica de gestão de janelas e o motor Minimax do xadrez que acabamos de montar? Baixe o projeto interativo diretamente no seu ecrã.
👉 Amanda aconselha: o limite brutal do “Z-Index”
- Se procura uma aplicação destas para o seu portfólio: Empregar *Front-End* simulado neste formato de sistema é o passaporte perfeito para convencer recrutadores de UX/UI! Mostre que domina a estruturação de classes JavaScript encapsuladas. Uma aplicação que arrasta, guarda estado e muda visualmente é uma mina de ouro.
- Sobre a sobreposição infinita de Janelas: O segredo vital deste prompt foi instruir a IA no *Gestor de Foco*. Repare que dissemos “Quem recebe o foco, tem o Z-index mais alto!”. Sem este mandato, o seu Paint ia estar a desenhar num plano inferior aos documentos, deixando-o completamente entalado por baixo da Lixeira do sistema!
- A importância do localStorage nos editores Textuais: Ninguém quer brincar num bloco de notas que apaga tudo se der azar e fizer *Refresh* ao *browser*. Exija sempre o `JSON.stringify` nativo nos desenvolvimentos de arquivos em cache!
🚨 SOS: O meu Paint sumiu da tela ao tentar arrastar!
- Causa: Ao gerar múltiplos ouvintes (`event listeners`) com MouseDown e TouchStart em aplicações complexas, as coordenadas relativas (offsetX/Y) podem enlouquecer e empurrar instantaneamente o bloco CSS da aplicação para o limite negativo da moldura de renderização, ocultando-a.
- Correção prática: Não refaça a matemática vetorial. Exija apenas proteções marginais de ecrã no chat da IA: “A ferramenta X desapareceu do viewport ao ser arrastada; implemente ‘Clamp / Math.max e min’ nas coordenadas de drag and drop limitando a barra de título (Top e Left) às fronteiras máximas do window.innerWidth/Height!”
- Resultado: A janela voltará a bater contra os limites do ecrã visível perfeitamente.
FAQ: dúvidas reais a serem respondidas 🔍
Posso transformar este Sistema Operativo na minha nova página pessoal?
Indiscutivelmente sim! É uma *framework* interativa de excelência. Substitua as alcunhas das aplicações fictícias pelas moradas dos seus repositórios de GitHub ou perfis de Linkedin e terá o cartão de visita digital mais criativo da década.
Onde guardo os documentos escritos no Bloco de Notas falso?
Ficam estáticos alojados nativamente dentro do diretório em *cache* (Local Storage) alocado pelo navegador web a esse endereço html. Sobrevive a encerramentos de aba e *shutdowns* da máquina, a menos que proceda fisicamente a uma limpeza sistemática dos dados temporários no menu do Chrome/Safari!
O Google do retro funciona com a internet real?
Não, isso quebra o limite seguro de desenvolvimento fechado sem servidor. Pedimos precisamente para ser uma simulação (“Intranet”), garantindo que apenas busca dados entre os pequenos nós estruturais programados nas pastas virtuais deste jogo nostálgico.
Como foi possível o jogo de Xadrez funcionar numa janela tão leve?
Através do algoritmo “Minimax” incorporado em JS, onde cada nó recursivo da árvore de ataque tem uma profundidade imposta para não quebrar a compilação do computador local. É inteligência artificial a fabricar uma inteligência artificial sintética mais primitiva para atuar num navegador web retro!
Conclusão: O poder absoluto do DOM perfeitamente afinado 🙌
A arquitetura embutida desta relíquia expõe uma evidência assombrosa do estado atual dos algoritmos: a Inteligência Generativa, devidamente encadeada com passos hierárquicos metódicos, tem agilidade vetorial suficiente para construir o equivalente aos Sistemas Operativos complexos das décadas passadas através de puros elementos de marcação CSS disfarçados!
O desafio multitarefa, as lógicas vitais do “Z-Index” relacional e o resgate contínuo das memórias internas confirmam-nos um segredo basilar da profissão: quem coordena as barreiras e dita os trincos programáticos continua a ser a mente humana em frente ao *Prompt*.
Incorpore estas fundações, baixe esta “máquina virtual de um documento”, e comece já hoje a desenhar as inovações que povoam a sua memória visual com uma mestria nunca antes tão viável de transitar das ideias para a realidade programada.
Ei, antes de ir: se este conteúdo ajudou, não pode perder o que separamos nestas outras categorias. É conhecimento de nível pago, entregue de graça aqui:
Se aplicar este clone nos seus serviços, modificar-lhe as cores ou alojá-lo numa máquina arcade, compartilhe nas suas redes, e marque a nossa página @mktamanda. Seremos o seu principal fã! :))
ps: obgda por chegar até aqui, é importante para mim.
