Aplicativo de flashcards para aprendizado de inglês com mais de 3.000 cards, do nível A1 ao C2. Um experimento real sobre como design thinking e IA generativa se combinam para criar um produto funcional — do zero, por um único designer.
Contexto
O projeto nasceu de uma pergunta simples: até onde um designer vai com IA como parceiro de desenvolvimento? Não como substituto — mas como ferramenta de amplificação, responsável por executar o que o design já havia planejado.
O objetivo era criar um aplicativo de estudo de inglês completo: com repetição espaçada (SRS), gamificação, modo escuro, responsividade e conteúdo robusto em todos os níveis do CEFR — do A1 básico ao C2 avançado.
Restrição autoimposta: um único arquivo HTML, funcional offline, sem dependência de backend ou banco de dados externo. Tudo no cliente.
Processo
O processo foi intencional: nenhuma linha de código antes do design estar resolvido. A IA foi usada como parceira de implementação — não como geradora de ideias.
Prototipagem no Figma — arquitetura e UX
Antes de qualquer código, definição completa da experiência: arquitetura da informação, fluxos de estudo, sistema de gamificação (streaks, conquistas), hierarquia dos níveis CEFR e comportamento responsivo. O Figma garantiu que todas as decisões de UX estivessem resolvidas antes da implementação.
Parceria com IA — implementação com prompts estruturados
Com o design definido, uso do ChatGPT para gerar a estrutura HTML/CSS/JS responsiva, implementar o algoritmo de repetição espaçada baseado no SM-2 (Anki), criar os 3.000+ cards de vocabulário com exemplos contextualizados e ajustar microinterações — animações de virada de card, feedback visual de acerto/erro, confetti em conquistas.
Refinamento front-end — olhar crítico do designer
O código gerado pela IA raramente está pronto. A etapa de refinamento incluiu: ajuste de responsividade em diferentes tamanhos de tela, garantia de persistência correta via localStorage, polish de detalhes visuais e correção de bugs de interface que a IA não identifica sem o olhar de quem usa o produto.
Conteúdo — 500+ cards por nível, revisados
A parte mais trabalhosa: garantir que os 3.000+ cards cobrissem vocabulário contextualizado, phrasal verbs, expressões idiomáticas e exemplos de uso real — organizados em 74 decks temáticos, do A1 (gramática básica) ao C2 (vocabulário literário e acadêmico).
Solução
O resultado é um aplicativo funcional, não uma tela no Figma. Funciona offline, lembra o progresso do usuário e usa ciência da aprendizagem real para otimizar a memorização.
01
SRS — Repetição Espaçada
Algoritmo SM-2 (mesmo do Anki) que determina quando cada card deve ser revisado com base no desempenho do usuário. Cards errados voltam mais cedo; cards acertados têm intervalos crescentes.
02
6 Níveis CEFR — A1 ao C2
74 decks temáticos organizados por nível e categoria: gramática básica, verbos, phrasal verbs, expressões idiomáticas, vocabulário acadêmico e literário. Cada card tem palavra, tradução e exemplo em contexto.
03
Gamificação — Streaks e Conquistas
Sistema de streak diário para manter consistência, conquistas por marcos de estudo e feedback visual com confetti. Aprender inglês deve ser motivador, não apenas funcional.
04
100% Offline — Arquivo Único
Todo o app em um único arquivo HTML de ~3.800 linhas. Sem backend, sem APIs, sem dependências externas de dados. O progresso é salvo no localStorage e persiste entre sessões.
05
Modo Escuro + Responsivo
Interface adaptada para celular, tablet e desktop. Modo claro e escuro com transição suave. Fonte ajustável. Projetado para quem estuda no transporte, na pausa do trabalho, em qualquer lugar.
06
Estatísticas e Backup
Painel com métricas de progresso por nível, taxa de acerto e histórico de estudo. Exportação e importação de dados para backup — o progresso pertence ao usuário, não ao app.
Interface
Design orientado pelo uso real: home com decks organizados por nível, tela de estudo com animação de virada de card e feedback imediato, painel de estatísticas com visão geral do progresso.
Home — Decks por nível
Estudo — Card virado
Stats — Progresso geral
App ao vivo
O app está hospedado na mesma pasta do portfólio. Você pode usar direto abaixo — ou abrir em tela cheia para a experiência completa no celular.
Aprendizados
A IA executa com velocidade. O designer decide com intenção. A combinação funciona — mas a ordem importa: design thinking antes, IA como parceira de implementação depois.
O principal aprendizado foi perceber que prompts bem elaborados são uma forma de briefing. Quanto mais preciso o design, mais fiel o resultado gerado. A qualidade do output da IA é diretamente proporcional à qualidade do pensamento que vem antes.
O segundo aprendizado: a IA não sabe quando o produto está bom. Identificar quando o código funcional se torna uma experiência agradável ainda é território do designer — e provavelmente sempre será.