GABRIEL FAGUNDES · @GABRIELFAGUNDES.AI
Seu sistema funciona. Ele só não parece caro
O que eu mostrei no vídeo: as bibliotecas que eu abro quando um sistema funciona mas tem cara de template. Cliente não vê o seu código. Ele vê a tela.
Por que isso importa
O cliente julga pela tela
Sistema feito com IA sai igual. Mesmo card, mesma sombra, mesmo azul.
Eu não resolvo isso pedindo "deixa bonito" pro Claude. Eu resolvo dando peça pronta e boa pra ele montar em cima.
As 5 abaixo são de código aberto. Você copia o componente, cola no projeto e o código é seu.
Beautiful UI
Pra quem faz agente e chat
Componentes feitos pra interface de agente: a conversa, o "pensando", a aprovação do humano antes da IA agir.
Se você entrega agente de atendimento com painel, é aqui que a tela de conversa deixa de parecer gambiarra.
Abrir o Beautiful UI SITEbeautifului.dev ↗Rare UI
Animação que ninguém está usando
Componentes animados em React, com Tailwind e Motion. Instala pelo CLI do shadcn, então entra fácil em projeto que já usa shadcn.
Abrir o Rare UI SITErareui.com ↗Transitions.dev
A transição certa entre uma tela e outra
Uma coleção das transições que todo sistema web precisa. Você copia e cola, ou usa a skill deles direto no seu agente.
Abrir o Transitions.dev SITEtransitions.dev ↗shadcn/ui
A base de tudo
Se você só for instalar uma, é essa. Componentes acessíveis, com padrão bom, que viram o seu próprio design system.
As outras bibliotecas daqui conversam com ele.
Abrir o shadcn/ui SITEui.shadcn.com ↗beUI
Componentes animados pra React e Next.js
Grátis e de código aberto, feitos com Motion e Tailwind. Copia o código ou instala pelo CLI do shadcn.
Abrir o beUI SITEbeui.dev ↗Como eu uso com o Claude
Referência primeiro, código depois
Eu escolho o componente, mando o link pro Claude e peço pra ele adaptar ao projeto. Não peço pra ele inventar.
Use o componente deste link como base: [cole o link]
Adapte às cores e fontes que o projeto já usa.
Não mude a estrutura nem a animação. Me mostre o diff antes de aplicar.Isso é a base. Biblioteca deixa a tela bonita. O que faz o cliente pagar é você saber vender o sistema inteiro.
Pegou a ferramenta. E o contrato?
Instalar a skill é a parte fácil. O que paga a conta é alguém comprar o que você constrói com ela.
Na FA Academy eu te mostro o processo inteiro, do primeiro sistema ao contrato assinado. É o mesmo processo que eu passo pros meus mentorados.
Conhecer a FA Academy →