A série dia-a-dia do canal, do primeiro app ao planejador de workflows e projetos reais. Aprenda fazendo: plano enxuto, fases com checklist e construção guiada.
Dia 1–2 · plano enxuto, Lovable
Dia 3 · enxames de agentes
Dia 4–5 · construindo a ferramenta
Dia 6–9 · Supabase, 21st.dev
Dia 10–11 · interfaces e bots
Dia 13 · ferramentas sob medida
Leilão de cavalos · sistema PETS
O ponto de partida da série: construir um app real do zero com o Claude Code. A regra de ouro do Dia 1 — descreva o QUE, não o COMO. Um plano .md enxuto vale mais que travar bibliotecas cedo demais.
A maioria trava porque dá detalhe técnico de mais ("use Framer Motion X") em vez de requisito ("cards com hover suave"). Definir requisitos visuais/UX e deixar o Claude escolher as libs reduz alucinação e retrabalho. Quem vem do Lovable migra o projeto e ganha controle real do código.
Plano .md enxuto: o quê, não o como — ative o modo plano (Shift+Tab) antes de editar
Construa por fases curtas; cada fase termina com: build ok · screenshot · commit · resumo em 5 linhas
Quebrou "do nada"? Rode um git diff do último estado bom e isole por bissecção
# script de resgate no package.json "rescue": "rimraf node_modules .next dist && npm i"
O Claude Flow é um framework para rodar enxames de agentes (agent swarms) que trabalham em paralelo. Duas arquiteturas: Swarm (agentes independentes em paralelo) e Hive Mind (memória compartilhada entre eles).
Dividir um build em agentes concorrentes (UI, API, storage, testes) acelera muito — mas só funciona com plano e checklist de validação. A diferença entre "vibe coder" (itera sem plano) e "engenheiro agentic" (processo + arquitetura) é o que gera sistema funcional, não simulação.
npx claude-flow@alpha init --force # inicializa o Flow # rode o swarm com UI interativa: claude-flow swarm "..." --cloud # depurar MCP: claude mcp list --debug claude mcp remove FlowNexus claude mcp add FlowNexus "npx -y flow-nexus mcp"
Aliases no terminal (ex.: dsp) pra não digitar comandos longos
Supabase Realtime no lugar de Redis; Vite.js pra protótipo rápido
Adicione -y ao npx pra resolver path/permissão
Peça documentar antes de implementar; checklist antes do build final
💡 Dica: Supabase local em dev economiza custo, e políticas RLS + links assinados/expirados evitam vazar dados em links públicos.
Dos Dias 4 e 5: construir um planejador de fluxos de trabalho — uma ferramenta com UI, persistência e lógica — e depois iterar com "grandes atualizações" em cima da base estável.
É o salto do "app de demonstração" para uma ferramenta que você usaria. Mostra como evoluir um projeto existente sem quebrar o que já funciona — commits por fase, base sempre verde, e atualizações grandes feitas com plano.
| Etapa | O que fazer |
|---|---|
| Base | CRUD + UI mínima funcionando, commitado |
| Plano | Modo plano (Shift+Tab) pra desenhar a "grande atualização" |
| Iterar | Uma feature por vez, build verde a cada passo |
| Resgate | Diff/bissecção quando algo regredir |
A partir do Dia 6, o projeto ganha MCP servers — o protocolo que dá ferramentas externas ao Claude. Supabase MCP (banco/auth/storage) e 21st.dev MCP (componentes de UI "magic") aparecem na série.
Com MCP, o Claude consulta o schema do banco real, cria tabelas e gera UI a partir de bibliotecas de componentes — sem você sair do terminal. É o que transforma um protótipo num app conectado. (A trilha 5 aprofunda MCP.)
# listar / adicionar / remover MCP servers claude mcp list claude mcp add supabase "npx -y @supabase/mcp-server" claude mcp add magic "npx -y @21st-dev/magic" # dentro da sessão: /mcp # ver status dos servers conectados
Padrão: conecte o MCP, peça pro Claude "leia o schema atual" antes de gerar código, e configure RLS no Supabase antes de qualquer link público.
Dia 10 constrói um dashboard (visualização de dados com gráficos e métricas); Dia 11 mostra como o Claude Code ajuda a montar GPTs / assistentes customizados a partir do seu conteúdo.
Dashboard é o caso de uso que mais aparece em produto real — e um ótimo exercício de UI + dados. Já os GPTs mostram o Claude Code como ferramenta de autoria: ele estrutura instruções, base de conhecimento e fluxo do bot.
Fonte real (API/Supabase), não mock
Cards de métrica + gráficos; descreva UX
Screenshot → ajuste → commit por fase
Dia 13 vira a chave: em vez de pagar vários "superapps"/SaaS, você constrói a ferramenta sob medida com o Claude Code — exatamente com as features que usa, sem o resto.
É a tese econômica do curso: muito do que você assina pode virar um app pequeno e próprio. Você controla os dados, paga só a infra, e ajusta quando quiser. O Claude Code derruba o custo de "fazer o seu".
Uso simples e repetido, dados seus, integração com seu stack
Compliance pesado, escala enorme, features que mudam toda semana
Dois projetos completos guiados na comunidade: um leilão de cavalos e um sistema PETS (cadastro/gestão). Do schema do banco à UI, mostrando o fluxo ponta a ponta.
Ver um app inteiro nascer — modelagem de dados, telas, regras de negócio — consolida tudo das trilhas anteriores. São bons "projetos-âncora" pra você refazer com o seu próprio tema.
| Camada | 🐎 Leilão | 🐾 PETS |
|---|---|---|
| Dados | lotes, lances, usuários | tutores, pets, atendimentos |
| Regra | lance mínimo, tempo de leilão | agenda, histórico, vacinas |
| UI | listagem + tela de lance ao vivo | ficha do pet + dashboard |
💡 Próximo passo: pegue a estrutura desses exemplos e troque o domínio pelo seu. Mesmo esqueleto, conteúdo diferente — é o jeito mais rápido de aprender.