Pular para o conteúdo principal
O jeito mais rápido de ter um site próprio é pedir a um agente de IA de programação, como Claude Code, Cursor ou Codex, que o construa a partir do template da MemberKit. O template já tem todas as telas de uma área de membros e as instruções que o agente precisa seguir, então o trabalho dele é mudar o visual, conectar a sua área de membros e publicar.

​
Antes de começar

Tenha em mãos:
  • Acesso ao template. Depois da compra, aceite o convite para o repositório no GitHub e deixe o agente com acesso à sua conta do GitHub (por exemplo, com gh auth login), para que ele consiga clonar o repositório privado.
  • O subdomínio da sua área de membros (a parte antes de .memberkit.com.br) ou o seu domínio próprio.
  • Uma conta de aluno para testes, com e-mail e senha, matriculada em pelo menos um curso. Não use a conta de dono: donos pulam o onboarding e não perdem a sessão quando outra pessoa entra, então os testes não mostrariam o que um aluno vê.
  • A sua identidade visual: cores, fontes, logotipo, ou um site de referência para o agente se inspirar.

​
Peça ao agente

Abra o agente em uma pasta vazia e cole o pedido abaixo, trocando o que estiver entre colchetes:
Pedido para o agente

​
O que o agente vai fazer

1

Rodar com dados de exemplo

Sem nenhuma configuração, o template roda com dados fictícios: todas as telas funcionam com qualquer e-mail e senha. O agente trabalha no visual sem precisar da sua conta. Veja Dados de exemplo.
2

Mudar o visual

O tema fica em variáveis CSS, em app/styles/global.css. O agente começa pelas variáveis e depois ajusta as telas. A cor da marca, o logotipo e a imagem de fundo do login vêm do painel da MemberKit, então continuam mudando quando você muda o painel.
3

Manter os testes passando

O template vem com testes de ponta a ponta que simulam a API. Eles garantem que nenhuma tela ou recurso foi perdido na mudança de visual.
4

Conectar a sua área de membros

Com as duas variáveis de ambiente definidas, o site passa a usar os seus cursos e alunos reais.
5

Publicar

O site é estático: basta enviar a pasta gerada para uma hospedagem. Veja Publique no seu domínio.

​
Quando está pronto

O template define quando o trabalho termina. Confira com o agente que:
  • pnpm check e pnpm test:e2e passam.
  • Todas as telas funcionam com os dados de exemplo.
  • A conta de aluno de teste consegue entrar, assistir a uma aula e baixar um arquivo na área de membros real.
  • O site publicado abre direto um endereço interno, como /courses/1, em vez de mostrar um erro 404.

​
O que só você pode fazer

Duas etapas acontecem no painel da MemberKit e o agente não consegue fazê-las por você:
  • Passar a senha da conta de teste, de preferência fora da conversa com o agente, num arquivo .env que não vai para o repositório.
  • Editar os templates de e-mail, para que os links dos e-mails abram o seu site em vez da área de membros hospedada. Veja E-mails para o seu site.
Nunca entregue ao agente, nem coloque no site, a chave da API de operador. Ela controla a área de membros inteira. O site usa só a API de membros, com o login de cada aluno.

​
Dúvidas

Quem compra o template tem suporte pelo GitHub. Abra a sua dúvida no repositório do template, e a equipe da MemberKit responde por lá. Antes de abrir, veja se alguém já perguntou a mesma coisa.

​
Dados de exemplo

Enquanto VITE_MEMBERKIT_API_URL estiver vazia, o template responde às chamadas da API no próprio navegador, a partir do arquivo app/mocks/data.ts. Os cursos, alunos e comentários são fictícios e nada é enviado para a MemberKit. Quando uma tela precisa de dados que os exemplos não têm, o agente os adiciona nesse arquivo, para que o site continue funcionando sem conta.
Página inicial do template com dados de exemplo

O template rodando com os dados de exemplo

Para usar a sua área de membros, defina as duas variáveis no .env: As duas são públicas: acabam no código que o navegador baixa, como tudo num site estático.