Próximo projeto
Boto Sonar: robôs de IA que acham clientes e sugerem o que postar
Boto · 2026
Ver o projeto
Cases de UX/UI
Quem escreve
Erick NobreDesigner de Produto Sênior e UX Engineer. Piracicaba, SP.
Idealizei o ClippCut para quem atende com hora marcada e ainda organiza a agenda no caderno e no WhatsApp. Fiz o produto inteiro, da marca ao banco de dados, e um assistente que responde em português quanto o negócio faturou.
O produto
Barbearias, salões, clínicas e estúdios pequenos marcam horário por mensagem, no meio do atendimento.
O profissional para o corte para responder “tem horário?”, anota no caderno quem confirmou e só descobre quanto faturou quando fecha o caixa do mês. Quem desmarcou fica riscado numa página que ninguém mais consulta.
O ClippCut dá a cada negócio uma página de agendamentos: um link com os serviços, os preços e os horários livres, feito para a bio do Instagram. O cliente marca sozinho e recebe a confirmação no WhatsApp. O dono vê a agenda da equipe, os produtos e os relatórios num painel que se instala no celular como um app.
Comecei pelo modelo de dados. Todo negócio é uma empresa, inclusive quem trabalha sozinho, e as permissões dependem do papel de cada pessoa na empresa (dono, administrador ou colaborador). O banco só devolve a cada login as linhas da própria empresa.
Serviços, preços e horários livres num link. A duração protege a agenda: um serviço de 1h30 só aparece onde cabe 1h30.
Cada agendamento entra numa fila no banco. A cada dois minutos um disparador envia as mensagens por um gateway próprio, com nova tentativa quando falha.
Uma agenda por profissional, e o cliente escolhe com quem quer ser atendido. O colaborador vê os próprios números; o dono vê os de todos.
Previsto (o que está confirmado na agenda) e realizado (o que foi atendido), lado a lado, para ninguém confundir promessa com caixa.
Onde entra a IA
A resposta mostra o mesmo número da tela de relatórios, sempre.
No painel, o dono pergunta em português: “quanto fiz mês passado?” ou “quantas pessoas vieram no dia 22?”. Essas respostas já existiam no ClippCut. São as mesmas funções do banco que montam os relatórios, com as regras de fuso horário e de faturamento previsto e realizado.
Por isso a regra do projeto foi que a IA nunca calcula. Se o modelo somasse por conta própria, ele viraria uma terceira fonte de verdade, capaz de contradizer o número que a pessoa acabou de ver na tela ao lado. Uma divergência bastaria para ninguém mais confiar no recurso.
Descartei deixar o modelo escrever SQL: as observações dos agendamentos são texto livre de clientes, e qualquer consulta que esquecesse um filtro de status sairia com um faturamento diferente do relatório.
O modelo recebe a pergunta, a data de hoje no fuso da empresa e um catálogo fechado de consultas. Devolve só um JSON: qual consulta e qual período.
Uma Edge Function resolve o período em datas e chama a função do Postgres com o login de quem perguntou. As regras de acesso valem como em qualquer outra tela.
O modelo recebe os valores já formatados em reais e só escreve a frase. Junto vai um cartão com os dados e o atalho “Ver no relatório”.
// “quanto fiz mês passado?” { "ferramenta": "metricas_periodo", "periodo": { "tipo": "mes_passado" } }
Três chamadas em vez de function calling. Os modelos gratuitos do OpenRouter têm suporte irregular a ferramentas, e a lista deles muda. JSON estrito, com validação e uma tentativa de reparo, funciona em qualquer modelo de texto.
Números prontos para a etapa 3. Modelo de linguagem erra aritmética. Se ele recebesse 4320.00 para formatar, um dia escreveria R$ 43,20. Ele recebe “R$ 4.320,00” e a instrução de copiar o valor.
Falha sem erro. Se a redação falhar por tempo ou limite de uso, a resposta sai de um modelo de frase escrito no código, com os mesmos números. O recurso fica mais seco, mas continua respondendo.
Telas
Como eu construí
Desenho e código no mesmo par de mãos, com a IA como par de programação.
Nome, logo e o site institucional em HTML, SCSS e Vite, com uma página para cada segmento e uma para cada recurso.
Supabase com Postgres: regras de acesso por empresa (RLS), funções para os relatórios e 179 testes que rodam num Postgres descartável.
Vue 3 com Pinia e Bootstrap, empacotado como PWA para instalar no celular sem passar por loja.
Uma fila de mensagens no banco, disparada pelo pg_cron, e uma instância própria da Evolution API.
O assistente usa modelos do OpenRouter numa Edge Function. No desenvolvimento, programo em par com o Claude Code, com as regras do projeto escritas no próprio repositório.
clippcut.com.br para quem conhece o produto, app.clippcut.com.br para quem usa.
Grátis para um profissional, sem cartão de crédito.
Responde sobre faturamento, atendimentos e clientes, com cota de perguntas por plano.
Ideia, marca, design, código e operação, incluindo a venda para barbearias de Piracicaba.
Contato
Conte o contexto e o prazo do projeto. Respondo em até 48 horas.