Sistema de indicação sem quebrar o seu design system
Construindo um produto de indicação em aberto: manter o design system, modelar recompensa e não quebrar a UI da plataforma no meio do caminho.
Resposta direta
Construindo um produto de indicação em aberto: manter o design system, modelar recompensa e não quebrar a UI da plataforma no meio do caminho. Bom pessoal, eu preciso criar um sistema de indicação, um produto de indicação basicamente para uma plataforma minha. E eu pensei, por que eu não faço isso meio aberto assim, explicando para vocês como é que é a minha linha de pensamento conforme a gente vai fazendo. Então isso que vocês estão vendo aqui agora é só a parte da frente, só a interface.
Por que build in public aqui
No material original, o ponto de partida não é teoria abstrata: é uma sequência concreta ligada a «Sistema de indicação sem quebrar o seu design system». Não fiz nada ainda, não fiz back-end, não pensei em banco de dados, enfim, nada aconteceu. Então talvez esse vídeo tenha mais do que um vídeo.
Na prática, isso vira rotina: Pensa que você já tem uma página e você gostaria de manter o... As cores, o formato do botão, o formato das coisas no geral, para uma outra página sua que você vai criar em outra ferramenta. Pense que você está usando o Lovable e queria usar o Bolt ou o Base44.
Design system como restrição boa
O contexto importa porque a mesma ideia muda de preço conforme visto, renda, ferramenta ou fase do produto. Deixa eu até abrir esse projeto aqui com vocês no skip. Então, como é que eu fiz para chegar nisso?
Então, uma coisa que eu faço é extrair o Design System e passar isso como prompt. Por isso que, se vocês observarem, aqui eu dei um prompt, Eu coloquei aqui... O que eu esperava dos níveis, algo bem simples, então até pedi para fazer algo clean, minimalista, que seja acessível apenas em uma seção sem scroll, então sem necessidade de arrastar a página para baixo.
Armadilhas
Em vez de colecionar slogans, trate o conteúdo como checklist operacional: o que fazer nesta semana, o que medir, o que descartar. Então, eu estou arcando com os custos de ir por trás disso. Primeiro ponto, você vai clicar aqui em extrair informações da página e depois você vai clicar em extrair o Design System. Inclusive, tem opções mais avançadas de você gerar o passo a passo para reconstruir a página e depois você gerar um prompt completo para reconstruir a página.
Como eu uso um modelo um pouco mais barato aqui, que é o GPT-4 Mini, eu garanto para vocês que extrair o Design System funciona muito bem. Mas agora, em geral, o passo a passo ali é uma coisa que eu estou melhorando ainda. Então, deixo aqui na descrição para vocês baixarem essa extensão aqui também e usarem à vontade aí.
Information gain
Ganho específico deste material (não genérico): Outra coisa que ele faz também, é selecionar um elemento. Então, pensa que você está no Lovable ou você está aqui na página do Skip e você fala, nossa, que...
Erros comuns e trade-offs
Os erros mais caros aparecem quando você copia a estética do caso e ignora as restrições que tornaram o caso possível. É só um comando para instalar as dependências aqui para que funcione bem. Então, o que ele vai fazer basicamente é instalar aqui...
Para gente alguns pacotes que são importantes e pronto basicamente é isso então agora está instalando aqui tudo que for necessário só está uma beleza vamos ver agora você já vai rodar a certinho aqui para gente ainda não deve vamos ver agora você já consigo abrir aqui na minha máquina o projeto que a gente tem aqui e pronto, pessoal, já está aqui na minha máquina localmente também. E se vocês observarem, ele realmente conseguiu manter o design aqui do skip, como um todo, usando a extração de design system.
Próximo passo acionável
Feche com uma ação única nas próximas 48 horas — pequena o bastante para executar, grande o bastante para gerar sinal. Então vamos fazer o seguinte, eu vou entrar aqui no dbXpert e vou pegar esse prompt que a gente criou aqui. Lembrando que se você não está no Skip ainda, você pode entrar na lista de espera.
Na prática, isso vira rotina: Tá, então ele criou aqui uma tabela de recompensas, que nem vocês estão vendo aqui. Criou esse aqui também users refero code referon count refer ID beleza tá fazendo sentido para mim uma coisa só é que o usuário um para ele refer user ID waitlist entries beleza não faz sentido assim eu tava vendo porque se referiu não deveria tá em aqui users é porque não implemente apenas me explique o que na tabela e não tem um id porque quando o usuário entrar e Boa. Estar cadastrado ele vai ter ele será indicado por alguém e quando indicar alguém ele que terá indicado vamos ver aqui o que ele me responde tá treinando você não quer porque ela é para representar os olhos que estão indicando outras pessoas para ele espera cada tabela é uma quando a informação de quem é indicada a legal eu e se uma pessoa indicou e foi indicada que aquele dele me explicou ficou até boa explicação vocês querem pausar aí para ver Oi e agora eu tô perguntando se o pessoal indicou e foi indicado até para entender como alguém que indica tem um registro da tabela de luzes tá com alguém que foi indicada essa mesma pessoa também teria um registro na tabela oito distantes ela foi indicado por alguém beleza pessoal então fez sentido sim essa tabela que ele fez uma tabela simples é aquele é um resgate via código aqui e a pessoa e por WhatsApp aqui é para cadastrar prêmios e é isso então agora eu poderia ir direto aqui importado super base mas que que eu vou fazer vou exportar isso aqui vou exportar em postgres vou copiar isso aqui postgres a gente vai fazendo super base no mcp de super base já já vou vir aqui no curso já vou criar aqui um arquivo só para deixar aqui salvo modelo e eu vou chamar de.MD só para a gente ter um arquivo mesmo.