Sistema de Indicação com Skip, Cursor
Criando um sistema gamificado de indicação do zero, com design system, geração de códigos e backend funcional.
Por que isso é importante
Sistema de Indicação com Skip, Cursor. Criando um sistema gamificado de indicação do zero, com design system, geração de códigos e backend funcional.
Objetivo do Projeto
Fazer um sistema completo de indicação, acessível sem login, que deixe os usuários
receberem um código, acompanharem suas indicações e que a gente possa escalar em
produção usando ferramentas modernas.
Design sem Limites
Usamos o Skip pra construir a primeira interface respeitando o design system da app
principal, extraindo layout, cores e componentes prontos com uma extensão
personalizada.
Atenção
Mantendo design system consistente, a gente consegue transportar a experiência da
interface principal pras interfaces satélites sem ruído de usabilidade.
Ferramenta Skip em Ação
O Skip ajudou a criar a camada visual inicial mockada. Nele rolaram os primeiros prompts
com foco em layout limpo, uma seção só, código simples de copiar e barra de progresso
responsiva validada.
Transição para o Cursor
Depois de baixar o código do Skip, abrimos o projeto no Cursor, instalamos dependências
com pnpm , e rodamos local, mantendo compatibilidade visual com o design
original.
Revisão Visual e Responsividade
Checamos a experiência mobile, consistência do layout e rotinas de UI tipo troca de logo,
ajustes em componentes e barra de progresso baseada no avanço do usuário.
Info
Manter responsividade desde o início poupa um retrabalho gigante no final. Testa
cedo!
Estratégia para o Banco de Dados
Usamos o Claude code pra gerar um arquivo interpretável detalhando a arquitetura da app.
Isso virou prompt pro DB Expert gerar automaticamente a estrutura de dados.
Montagem do Banco via DB Expert
O modelo criado montou tabelas chave como users, referrals, rewards e entries. A
estrutura prevê usuários que foram indicados e também os que fizeram indicações.
Exportação para o Supabase
Exportamos a estrutura em SQL (Postgres) e conectamos via MCP no Claude code direto na
instância do Supabase, garantindo segurança, controle total e integração com o
backend.
Atenção
Nunca exponha sua chave MCP. Guarda em ambiente seguro e jamais em versão
pública.
Configuração do MCP
Pra conectar direito, criamos um arquivo mcp.de com o token de acesso.
Depois de salvar e reiniciar o Claude code, os projetos ficaram visíveis e
utilizáveis.
Funcionamento do Sistema de Indicação
A pessoa entra com o e-mail, gera um código de resgate ou link pra compartilhar, e vê o
número de pessoas indicadas e recompensas acumuladas.
Visão de Dados e Relações
Cada usuário pode ter sido indicado por alguém (relação direta) e também ter indicado
outros. A estrutura da base deixa essa dupla organização rolar.
Armazenamento de Prêmios
Estrutura auxiliar prevê tabela de recompensas, permitindo condicionar ações gamificadas
baseadas na quantidade de pessoas indicadas.
Fluxo Sem Login
O sistema foi feito pra funcionar sem login no início. O e-mail vira identificador único
pra rastrear e recompensar.
Importância da Extração do Design System
Processar o design system da app base e reutilizar reduz falha visual e acelera a
prototipação com coerência.
Integração com Claude code
A automação da construção de schema e integração com banco foi realizada usando prompts
no formato esperado pelo Claude code com ajuda da template MCP.
Segurança e Controle no Supabase
Preferimos a configuração anterior do MCP por dar mais controle de escrita e leitura ao
administrador sobre o banco, ainda que exista nova versão mais segura.
Testes e Deploy com Vercel
Após finalizado o backend e frontend, o deploy será feito via Vercel com Supabase como
banco principal, mantendo agilidade e escalabilidade.
Checklist de Implementação
- Interface criada no Skip com design consistente
- Código migrado e ajustado no Cursor
- Banco de dados gerado automaticamente no DB Expert
- Exportação e criação do schema no Supabase via MCP
- Integração do back-end com banco finalizada
- Sistema de indicações funcional e testado
- Projeto pronto para deploy via Vercel