Aplicativo de flashcards para aprendizado de inglês com over 3,000 cards, do nível A1 ao C2. Um experimento real sobre como design thinking and generative AI se combinam para criar um produto funcional — from scratch, by a single designer.
Context
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.
Process
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).
Solution
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
Live App
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.
Key Takeaways
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á.