Criar um workspace estilo Notion no Gemini: organizador pessoal em HTML único
Talvez uma das coisas que você mais use no seu celular ou computador seja o bloco de notas. É lá que você joga ideias, tenta organizar listas de tarefas e guarda links importantes. O grande problema é que os melhores aplicativos do mercado acabam nos prendendo com anúncios invasivos ou cobrando assinaturas altas para liberar recursos básicos de organização.
Então, por que não criar o seu próprio?
Neste experimento da série “Desafiando a IA”, ordenamos ao modelo Gemini Pro que construísse um workspace pessoal do zero, inspirado na estrutura de ferramentas como o Notion e Notepad++. As regras do nosso laboratório mantiveram-se inflexíveis: usar apenas 3 prompts e consolidar todo o sistema de organização (tarefas, calendário, editor de texto avançado e temas) num único arquivo HTML independente, sem servidores externos.
A engenharia de um cérebro digital local:
Para criar um aplicativo de produtividade funcional sem base de dados, a IA precisa programar matrizes complexas de localStorage. Isso significa que, ao fechar o navegador, o seu progresso, textos coloridos, pastas e até imagens anexadas têm de ser serializados e salvos no cache local da sua máquina, sendo restaurados magicamente quando você reabre o arquivo HTML.
Neste guia: explore a evolução de uma simples lista de tarefas (“To-Do”) para um espaço de trabalho complexo, copie os 3 prompts práticos e baixe a ferramenta final para o seu próprio uso.
Resposta curta:
O Gemini Pro brilha intensamente na arquitetura de utilitários locais. A IA escalou o projeto sem falhas, passando de uma simples checklist para um sistema de pastas e notas ricas com imagens, conectando tudo a um dashboard central. O único desafio visível foi o suporte parcial aos estilos de temas mais arrojados (como o “Anos 2000” ou “Gamer”) e uma funcionalidade de calendário que ficou estruturalmente limitada, mas o motor de produtividade é absolutamente irrepreensível.
Índice
- Os 3 prompts de evolução do workspace
- O veredito: baixe o organizador pessoal
- Amanda aconselha: os limites do localStorage em editores ricos
Os 3 prompts de desenvolvimento do workspace 📌
Abaixo você encontra os comandos estruturais que guiaram a evolução da ferramenta. Limpamos os blocos de texto de formatações ocultas para que possa copiar e replicar o código na sua própria janela de IA sem erros.
👾 Laboratório dev — O projeto workspace pessoal
📸 Prompt 01 — A gênese: lista de tarefas inteligente
Este primeiro comando ordena a criação da base de todo o sistema: uma aplicação sólida de tarefas com barra de progresso, categorias e preservação de dados.
Quero que você crie um aplicativo completo de lista de tarefas, como parte da série: PEDI AO GEMINI PRO PARA CRIAR MEU PRÓPRIO APP DE TAREFAS — DESAFIANDO A IA Quero criar tudo em um único arquivo HTML, utilizando HTML, CSS e JavaScript, sem backend. IDEIA PRINCIPAL Quero conseguir abrir o aplicativo e imediatamente: criar uma tarefa → organizar → concluir → acompanhar o que já fiz. Priorize: velocidade + organização + facilidade de uso. CRIAR TAREFA Na parte principal, deixar muito evidente: "O que você precisa fazer?". Campo para digitar a tarefa e Botão "Adicionar tarefa". Cada tarefa deve possuir: título, status, prioridade (Alta, Média, Baixa), categoria (Trabalho, Pessoal, Estudos, Compras, Ideias) e data de vencimento. Permitir edição e exclusão (com confirmação). CONCLUIR E FILTRAR Ao marcar a checkbox: tarefa fica visualmente concluída, texto recebe efeito e contador é atualizado. Criar filtros: Todas, Pendentes, Concluídas, Atrasadas, Hoje. Adicionar campo de pesquisa em tempo real. RESUMO E PROGRESSO Criar área de resumo no topo (ex: 12 tarefas, 7 pendentes). Adicionar barra de progresso visual (ex: ████████░░ 70%). VISUALIZAÇÃO Criar duas formas de visualizar: Lista (uma abaixo da outra) e Quadro (separar em A fazer / Concluídas). SALVAR AUTOMATICAMENTE Usar localStorage. As tarefas devem continuar existindo após fechar o navegador. Salvar tarefas, status, prioridades e categorias. DESIGN E RESPONSIVIDADE Adicionar botão para Modo Claro / Modo Escuro. O app precisa funcionar muito bem no celular (mobile first). Design moderno, fundo claro, cards, bordas arredondadas e sombras discretas. Não faça parecer um painel corporativo pesado. DADOS INICIAIS Ao abrir pela primeira vez, crie algumas tarefas demonstrativas. IMPORTANTE: FUNCIONALIDADE PRIMEIRO Antes de pensar em animações, faça a lógica funcionar (criar, editar, concluir, pesquisar, filtrar, persistência). Não crie login ou backend. Entregue o projeto completo em um único arquivo HTML.
O que aconteceu no Teste 1: A IA entregou uma base incrivelmente polida! Tivemos uma aplicação de tarefas super rápida, com um belo medidor circular de progresso e transição perfeita entre “Modo Lista” e “Modo Kanban” (Quadro). O sistema de cache local salvou o estado perfeitamente.
👉 Deslize. A primeira fundação da lista de tarefas: simples, responsiva e com modo noturno funcional.
📸 Prompt 02 — O salto para um workspace integrado
Lista de tarefas é bom, mas o objetivo é replicar a utilidade do Notion. Aqui, ordenamos à IA que não destrua o que fez, mas anexe blocos de notas, estruturação de projetos, calendário e um editor rico.
O app de tarefas ficou funcional, mas quero evoluir para algo muito mais útil: um workspace pessoal, misturando lista de tarefas, bloco de notas, documentos, organização por pastas, projetos e calendário. Inspiração de experiência: Notion e Notepad++, mas com interface própria. REGRA MAIS IMPORTANTE: O sistema atual de tarefas já funciona. NÃO remova nem quebre nenhuma função existente. NOVA HOME E TAREFAS Criar um Dashboard inicial: "Bom dia! O que você quer fazer hoje?" com atalhos para nova tarefa/nota/projeto e um resumo de atividades. As tarefas agora podem pertencer a um projeto (Ex: Projeto "Criar site" -> tarefa "Fazer wireframe"). Ao abrir um projeto, mostre suas tarefas e seu progresso (ex: 70% com barra visual). Status de projetos: Planejamento, Em andamento, Concluído. NOTAS E PASTAS Criar seção "Notas". Botão "+ Nova nota". Cada nota tem título, conteúdo, tags e pode ser favoritada. Criar um sistema simples de pastas (ex: Trabalho, Pessoal, Estudos) onde as notas ficarão organizadas. EDITOR FUNCIONAL Criar um editor de texto prático. Preciso de recursos úteis: Negrito, Itálico, Sublinhado, Títulos, Lista normal, Checklist interativa, e Bloco de Código (área monoespaçada para organizar códigos). BUSCA E TAGS Busca Global: Pesquisar em tarefas, notas, documentos e projetos (ex: pesquisar "Gemini"). Permitir adicionar tags (ex: #ideias). CALENDÁRIO E INTERFACE Adicionar uma seção simples de calendário (mês, dias, tarefas com vencimento). Interface Desktop: Criar uma barra lateral com Início, Tarefas, Notas, Projetos, Calendário, Favoritos e Pastas. Mobile: A barra lateral deve virar um menu compacto. EXPERIÊNCIA E PERSISTÊNCIA Adicionar atalhos de teclado (Ctrl+K para busca, Ctrl+S para salvar). Persistência: Continuar usando localStorage para salvar todos os dados novos (notas, pastas, projetos, tags). Não quebre o modo claro/escuro. Entregue o HTML completo atualizado com dados demonstrativos (um projeto e algumas notas iniciais).
A evolução magnífica: A aplicação sofreu uma mutação incrível. Ganhamos uma barra lateral elegante e um sistema central de “Projetos” onde a progressão de percentagem subia quando marcávamos uma sub-tarefa. O editor de texto, ainda em versão básica, já permitia escrita e organização em pastas locais.
👉 A adição da interface de barra lateral e do módulo de editor de documentos rico e pesquisável.
📸 Prompt 03 — Editor rico, correções e customização de temas
Faltavam funcionalidades cruciais no editor (como a incorporação de imagens via base64 no localStorage) e queríamos pressionar o CSS gerado com opções de “Skins” temáticas extravagantes.
O workspace está ficando muito bom. Agora quero melhorar o editor de notas, corrigir a criação de projetos e adicionar temas visuais. REGRA: NÃO reescreva o projeto inteiro e NÃO quebre as funções que já estão funcionando. 1. EDITOR DE NOTAS MAIS COMPLETO Adicionar barra de ferramentas: Negrito, Itálico, Sublinhado, Tachado, Cor do texto, Cor de destaque/marca-texto, Tamanho da fonte e Tipo de fonte (Arial, Georgia, etc). Adicionar alinhamento e listas (com marcadores, numerada e checklist interativo). Adicionar Inserção de Link e Inserção de IMAGEM local (usando FileReader e localStorage, sem upload para servidor). Permitir redimensionar imagem inserida e usar Desfazer/Refazer. 2. CORRIGIR CRIAÇÃO DE PROJETOS O botão "Novo projeto" atual não está funcionando. Corrija: ao clicar, deve abrir modal simples com Nome, Descrição, Status e Datas. Ao salvar, o projeto deve aparecer na lista e permitir associação de novas tarefas a ele. A conclusão de tarefas deve atualizar a barra de progresso do projeto. 3. TEMAS DO WORKSPACE Criar uma seção "Personalizar workspace" com cards de preview para aplicar temas visuais instantaneamente. Crie estes temas (salvos no localStorage): - Gamer: Fundo escuro, detalhes neon, cartões tecnológicos. - Café: Tons bege/marrom, visual aconchegante de caderno. - Tech: Tons escuros, azul/ciano, detalhes de terminal. - Anos 2000: Nostálgico, azul/roxo, gradientes, bordas marcadas. - Minimalista: Branco, cinza suave, muito espaço. - Escuro: Manter o modo escuro já existente. O tema deve alterar cores de fundo, botões e cards, sem quebrar a estrutura responsiva (mobile-friendly) do layout e os componentes já prontos. Entregue o HTML completo.
O resultado final (Uma máquina de produtividade com pequenas falhas estéticas): O editor atingiu o seu objetivo: inserção de imagens locais suportada e barra de ferramentas funcional. A correção do módulo de projetos conectou perfeitamente as tarefas ao progresso geral. A limitação notou-se na aplicação de “Temas”: o Gemini aplicou as cores solicitadas, mas a coerência estética do layout sofreu em estilos como “Gamer” ou “Anos 2000”, tornando a leitura um pouco menos orgânica, ainda que totalmente operacional.
👉 Deslize. O editor rico com anexos de imagem e o seletor de “Skins” personalizadas a funcionar em pleno.
O veredito: baixe o organizador pessoal 🕹️
O que o Gemini Pro entregou neste laboratório foi um motor formidável de gestão pessoal offline. Usar um editor e guardar notas longas sem necessidade de ligar à internet ou ver anúncios intrusivos é o ápice de “retomar o controle” do seu próprio código.
Você pode testar a versão funcional, explorar os diferentes temas no painel de controle, ou até inspecionar o código fonte para verificar como o JavaScript estrutura as bases da função contenteditable num arquivo isolado.
MEU WORKSPACE: O código final
Quer utilizar este organizador pessoal na sua máquina ou explorar as lógicas do editor HTML rico? Clique abaixo para abrir o documento gerado no laboratório.
👉 Amanda aconselha: os limites do localStorage em editores ricos
- O perigo das imagens codificadas (Base64): O nosso prompt 3 pediu para que as fotos fossem anexadas às notas via
FileReader. Funciona maravilhosamente, mas há um detalhe letal. O método converte imagens reais numa sequência gigantesca de caracteres (Base64) para conseguir arquivar no cache. OlocalStoragedo seu navegador normalmente suporta até 5 Megabytes. Se você adicionar duas fotografias pesadas tiradas com a câmera do celular dentro deste projeto, a base de dados rompe a capacidade máxima, e a aplicação deixará de salvar o seu progresso. Se planeja usar o workspace ativamente, evite inserir imagens pesadas. - A importância de preservar funcionalidades: Repare como, em todos os prompts, o cabeçalho inclui ordens expressas de contenção: “NÃO reescreva o projeto inteiro e NÃO quebre as funções existentes.” Os grandes modelos de linguagem são reativos; se você pedir uma alteração drástica no visual sem amarrá-los a essa regra, eles tendem a mutilar ou esquecer as funções estruturadas na resposta anterior.
- Sincronização cloud real: Este protótipo demonstra o esplendor do Front-End. Se decidir expandir este bloco de notas para acessar a mesma lista de compras no celular e no notebook simultaneamente, será forçado a conectar uma base de dados remota (como o Firebase ou o Supabase) via APIs, transformando este projeto local num verdadeiro produto *SaaS* funcional.
ps: muito obrigada por me acompanhar nesta leitura. Valorizo imensamente a sua presença técnica por aqui.
