Criar um Pomodoro no Gemini: a arquitetura de ferramentas de produtividade
A concepção de uma ferramenta de produtividade sob medida é um objetivo comum para muitos desenvolvedores. Cronômetros genéricos baseados na técnica Pomodoro existem aos milhares, mas poucos atendem às necessidades reais de quem passa horas imerso em código, seja realizando vibe coding, depurando falhas ou arquitetando sistemas.
Neste laboratório da série “Desafiando a IA”, propusemos um teste prático: forçar o Gemini Pro a programar o DevFocus, um aplicativo Pomodoro pensado exclusivamente para programadores. O escopo exigia que o sistema inteiro — incluindo cronômetro baseado em timestamps, gestão de tarefas, histórico no localStorage e ferramentas periféricas — fosse condensado em um único arquivo HTML, sem qualquer dependência externa.
O desafio do estado contínuo (State Management):
Ao criar um cronômetro em JavaScript de arquivo único, o maior erro das IAs é utilizar setInterval com decremento de segundos. Quando a aba do navegador entra em segundo plano, o motor suspende o script para economizar memória, dessincronizando o tempo. O projeto exigiu cálculos reais baseados em timestamps matemáticos para manter a confiabilidade da ferramenta.
Neste estudo de caso: acompanhe a evolução estrutural da aplicação através de 3 mega prompts limpos, analise os gargalos da inteligência artificial ao escalar o escopo e faça o download do código final da aplicação.
Índice
- Os 3 prompts de engenharia do DevFocus
- O veredito: análise técnica e download
- Boas práticas para aplicações offline em HTML
Os 3 prompts de engenharia do DevFocus 📌
Abaixo documentamos os comandos exatos utilizados na evolução da aplicação. Os textos foram purgados de formatações embutidas para garantir que a sua cópia para o terminal da IA ocorra sem falhas sintáticas.
👾 Laboratório Dev — o projeto DevFocus
📸 Prompt 01 — a gênese do cronômetro base
Este comando inicial estabelece o motor principal: um cronômetro robusto que não dessincroniza em background, acoplado a um sistema local de categorias voltadas para desenvolvedores.
Crie um aplicativo completo em um único arquivo HTML chamado DevFocus — Pomodoro para programadores, para o desafio "Desafiando a IA". A proposta não é criar mais um cronômetro Pomodoro genérico. Quero uma ferramenta de produtividade pensada especificamente para quem passa horas programando, desenvolvendo sites, corrigindo bugs ou trabalhando com projetos de software. Regras técnicas - Entregue tudo em um único arquivo HTML, incluindo HTML, CSS e JavaScript. - Não utilize backend, banco de dados externo ou instalação de dependências. - Salve configurações, projetos, histórico e estatísticas com localStorage. - O cronômetro deve calcular o tempo restante usando timestamps e diferenças reais de tempo, não apenas decrementando um contador a cada segundo. Isso evita erros quando a aba fica em segundo plano. Identidade visual - Tema escuro elegante como padrão (fundo grafite). - Cronômetro como elemento central, com números grandes. - Layout responsivo para desktop, tablet e celular. Modos de trabalho para programadores O usuário deve poder escolher o tipo de atividade antes de começar: desenvolver funcionalidade, corrigir bugs, estudar programação, fazer vibe coding, refatorar código, etc. Cronômetro adaptado Modos iniciais: foco curto (25 min), foco profundo (50 min), foco prolongado (90 min) e personalizado. Ter botões: iniciar, pausar, continuar, encerrar sessão. Sistema de pausas Crie três categorias: - Pausa rápida: 5 minutos. - Pausa visual: descanso da tela (sugestão de 20 segundos para os olhos). - Pausa longa: recuperação entre ciclos (15 minutos). Contexto e estatísticas Antes de iniciar, registrar nome do projeto e objetivo. Ao concluir, mostrar um resumo para preencher: "O que consegui fazer?", "O que ficou pendente?". Crie um painel de histórico com gráficos simples e legíveis alimentados pelo localStorage. Diferenciais - Estacionamento de pensamentos: anotações rápidas durante a sessão sem interromper o tempo. - Fila de próximos passos. Entregue o HTML completo e funcional.
Análise do teste 1: O resultado inicial foi altamente promissor. A interface escura transparecia o rigor exigido e o núcleo lógico (cronômetro com timestamps) foi executado com precisão impecável. Contudo, a disposição visual resultou numa usabilidade ligeiramente difusa para o utilizador final, exigindo refinamento em termos de fluxo de uso.
👉 O protótipo inicial: motor lógico estruturado e foco nas métricas locais de produtividade.
📸 Prompt 02 — usabilidade e injeção de identidade
Para corrigir a curva de aprendizado inicial, este comando exige uma reorganização hierárquica e implementa o “micro-copy”, uma técnica de UX Writing que injeta humor de nicho (piadas de programação) na interface.
Quero fazer uma nova rodada de melhorias no DevFocus, o Pomodoro para programadores que você acabou de criar. Importante: a versão atual já funcionou muito bem. Não quero reconstruir o aplicativo nem adicionar funcionalidades novas complexas. Quero melhorar facilidade de uso e personalidade. 1. Deixe a experiência mais simples Crie uma hierarquia visual clara, destacando o botão de iniciar foco. Apresente configurações avançadas somente quando solicitadas. Troque nomes técnicos por expressões que qualquer programador reconheça. 2. Personalidade DevFocus Use humor leve, referências do universo dev e pequenas piadas internas. Exemplos de linguagem: - Iniciar: "Modo dev ativado. Uma tarefa por vez, sem abrir 37 abas." - Registrar objetivo: "O que vamos colocar em produção hoje?" - Pausa visual: "Seus olhos não são um monitor OLED. Olhe para longe por alguns segundos." - Conclusão: "Commit de progresso realizado." 3. Organize nomes e rótulos Use: "Missão atual", "Checkpoint", "Estacionamento de ideias", "Próximo commit", "Log de sessões". 4. Preserve tudo o que já funciona Não remova nenhuma funcionalidade existente. Não altere a lógica do cronômetro. Não mude o funcionamento do localStorage. Faça alterações pontuais na interface. Entregue o HTML completo atualizado em um único arquivo.
Análise do teste 2: A aplicação ganhou contornos de produto comercial. O micro-copy transformou a experiência fria do cronômetro numa ferramenta mais envolvente. O ajuste de hierarquia visual estabilizou as interações.
👉 A injeção de UX Writing e o redimensionamento dos espaços brancos elevaram o nível da aplicação.
📸 Prompt 03 — a barreira das funcionalidades periféricas
Nesta fase final, tentamos transformar o cronômetro num pequeno sistema operacional de produtividade, exigindo onboarding de primeira utilização, laboratório de prompts, blocos de notas e controladores de áudio simulados.
Vamos evoluir o DevFocus. A versão atual está funcionando bem. Regra principal Preserve o cronômetro, ciclos, pausas, projetos e localStorage. Não reescreva tudo do zero. 1. Crie uma experiência de primeira abertura (onboarding) Implemente uma apresentação inicial interativa, exibida somente na primeira utilização, salvando a flag no localStorage. 2. Reorganize a navegação Divida em: foco (cronômetro e missões), bancada do dev (notas, snippets) e ambiente (música e configurações). 3. Bancada do dev Crie: - Bloco de notas rápido. - Laboratório de prompts para IA (modelos para investigar bugs, documentação). - Caixa de snippets (salvar código útil). - Ferramentas rápidas (contador de palavras, formatador JSON local). 4. Ambiente de música e sons Painel compacto com: silêncio, sons ambientes (áudios leves embutidos se possível) e playlist externa (link para o usuário). 5. Prioridade final A experiência deve ser simples. Se a implementação ficar grande demais, priorize a introdução, a bancada com notas e o cronômetro. Não sacrifique a estabilidade do timer para adicionar funcionalidades. Entregue o HTML completo e funcional.
Análise do teste 3: Identificamos aqui a clara limitação cognitiva de trabalhar em contexto de ficheiro único denso. A IA focou instintivamente na regra “prioridade final: não sacrificar a estabilidade do timer”. Como resultado, o cronômetro manteve-se irrepreensível, mas grande parte das funções periféricas complexas (como o formatador JSON ou a manipulação robusta de snippets) foi ignorada ou gerada de forma muito superficial, consolidando a estabilidade da interface principal em detrimento da expansão do escopo.
👉 A interface final manteve-se funcional e segura, limitando a expansão exagerada de periféricos exigidos no último prompt.
O veredito: análise técnica e download 🕹️
O desenvolvimento do DevFocus evidencia uma lição valiosa sobre engenharia de prompts voltada para código: as diretrizes de priorização (fallback rules) são essenciais para evitar que a IA corrompa a base estrutural. Ao orientar expressamente que a estabilidade do cronômetro era intocável, garantimos um produto funcional, ainda que a máquina tenha rejeitado a injeção excessiva de ferramentas adicionais no último passo.
A aplicação resultante é uma base fantástica de produtividade local. Permite gerir ciclos longos de desenvolvimento, salvaguardando todo o progresso do desenvolvedor através da tecnologia robusta de Cache Web.
DevFocus: o arquivo fonte
Quer analisar a lógica matemática do cronômetro via timestamps ou utilizar a aplicação na sua rotina diária? Baixe o documento gerado em laboratório abaixo.
👉 Práticas recomendadas para aplicações offline em HTML
- O motor de tempo certo: Como mencionado na introdução, um relógio em JavaScript que simplesmente utiliza
setInterval(() => segundos--, 1000)irá falhar quando a janela do navegador minimizar. A solução do nosso Prompt 01 — exigir cálculos porDate.now()ou deltas de timestamps — garante que o Pomodoro contabilize o tempo corretamente em background. - A estratégia de “features” periféricas: Ao solicitar o desenvolvimento com IAs de contexto limitado, evite agrupar blocos funcionais gigantes no mesmo prompt (ex: “faça um cronômetro e um validador JSON e um reprodutor de áudio”). O ideal é solicitar blocos granulares ou arquiteturas de componentes separados em projetos reais com frameworks modernos (React/Vue).
- Micro-copy é design: Repare como o Prompt 02 alterou radicalmente a percepção da ferramenta sem adicionar sequer um cálculo novo de JavaScript, focando apenas no texto (UX Writing). A forma como a interface comunica dita muitas vezes o nível percebido de profissionalismo da aplicação.
