Do design ao código: construindo a base do app com Pencil e agentes de IA

Este é um conteúdo da 22ª edição da Next Level Week, apresentada entre 12 a 16 de março de 2026.

Acesse repositório e instruções aqui

Nesta aula, apresentamos o DevRoast, uma aplicação que avalia e "humilha" trechos de código com IA, gerando um ranking público dos piores códigos. Partimos do zero: criamos o layout no Pencil (alternativa ao Figma com suporte a agentes de IA), configuramos o projeto Next.js com Biome, Tailwind v4 e pnpm, e integramos o Pencil ao OpenCode via MCP para transformar o design em código diretamente do terminal. Ao longo da aula, construímos a component library completa com variantes, aplicamos padrões como Tailwind Variants, composition pattern e AGENTS.md para manter consistência entre sessões. Por fim, entregamos a homepage funcional com dados estáticos.

Atenção: benefícios que podem ser citados nessa aula não estão disponíveis para essa modalidade de acesso ao workshop. O suporte de instrutores na comunidade, programa de bolsas, desafios, prêmios e encontros especiais são exclusivamente para o evento ao vivo.

Se tiver dúvidas durante o desenvolvimento do seu projeto, lembre-se que na comunidade aberta você encontra milhares de programadoras e programadores prontos para te ajudar.