Crie o seu formulário conversacional
e pare de alugar o Typeform.

Você é um engenheiro full-stack sênior. Vamos construir um clone do Typeform/Respondi: uma plataforma onde EU crio formulários conversacionais (uma pergunta por tela), publico um link e recebo as respostas já classificadas por interesse.

STACK, sem discussão
- Next.js (App Router) + React + TypeScript + Tailwind. Sem biblioteca de formulário, sem biblioteca de animação, sem UI kit.
- Banco: Supabase (Postgres), acessado SÓ pelo servidor, com a service role key. Essa chave nunca pode aparecer no navegador.
- CSS em globals.css com variáveis de cor. Ícones em SVG inline, traço 1.8. Nada de emoji na interface.
- Deploy final na Vercel.

POR QUE NÃO É UM ARQUIVO SÓ: quem responde o formulário não pode ter acesso ao banco. O navegador manda a resposta pra uma rota do meu servidor e o servidor grava. Isso não é negociável.

A DECISÃO MAIS IMPORTANTE DO PROJETO
Um formulário é DADO, não código. Toda a estrutura de um formulário vive num objeto JSON chamado FormConfig, guardado numa coluna jsonb. O motor lê esse objeto e desenha as telas. Nenhuma pergunta minha pode estar escrita dentro de um componente.

Comece criando src/lib/form-config.ts com exatamente estes tipos:

FieldType, uma união de: "name" | "company" | "email" | "short_text" | "long_text" | "phone" | "date" | "url" | "cpf" | "cnpj" | "number" | "single_choice" | "multiple_choice" | "rating" | "file" | "calendar" | "statement"

Choice = { label, value?, score?, goTo? }
  score é o peso daquela opção na qualificação.
  goTo é o id da próxima pergunta quando a pessoa escolhe essa opção, ou "__end__" pra finalizar.

Question = { id, type, title, description?, required?, placeholder?, mapTo?, choices?, maxSelect?, ratingMax?, ratingLabels?, accept?, calendarUrl?, asButton?, buttonLabel?, buttonUrl? }
  mapTo aceita "nome" | "email" | "whatsapp" | "empresa" e diz em qual coluna do lead aquela resposta é gravada, além do jsonb.

Tier = { name, min, label }
EndingScreen = { title, subtitle, cta?: { label, url } }
WelcomeScreen = { eyebrow?, title, subtitle?, buttonLabel, minutes? }
FormTheme = { accent?, mode?: "dark" | "light" }
FormConfig = { meta?, welcome, questions[], scoring?: { tiers[] }, ending?: registro de tier para EndingScreen, theme? }

No mesmo arquivo, três helpers que RECEBEM a config (nunca leiam de variável global):
- computeScore(config, answers): soma o score das opções escolhidas, contando cada escolha de multipla.
- tierForScore(config, score): devolve o tier de maior "min" que caiba no score.
- endingForTier(config, tier): devolve a tela final daquele tier, caindo pro "default" quando não houver.

Crie também um defaultConfig de exemplo com 6 perguntas (nome, empresa, uma escolha única com pesos, uma escolha única, uma escala de 0 a 10 e telefone), três tiers (quente min 7, morno min 4, frio min 0) e três telas finais diferentes. Ele serve de referência e de teste.

ENTREGA
- Só o esqueleto do projeto e esse arquivo de tipos, funcionando e compilando. Ainda não construa telas.
- Nada de TODO, nada de função vazia, nada de "aqui você implementa".
- Me diga em 5 linhas o que existe agora e o que vem no próximo passo.

Agora construa o motor: o componente que recebe uma FormConfig e vira o formulário conversacional na tela. Ele é a cara do produto, então capricha.

COMPORTAMENTO
- Uma pergunta por tela cheia, centralizada, com muito respiro. Nunca duas perguntas juntas.
- Transição entre telas: desliza de baixo pra cima com um fade curto, 0.35s, saída e entrada. Nada de piscar.
- Barra de progresso fina no topo, e o contador "3 / 6" acima da pergunta.
- Botão de voltar discreto no canto. Voltar tem que devolver a resposta anterior já preenchida.
- Teclado: Enter avança, Shift+Enter quebra linha no texto longo, as letras A, B, C, D escolhem as opções, e escolha única e escala AVANÇAM SOZINHAS 0.4s depois do clique. Essa auto-avanço é metade da mágica.
- Tela de boas-vindas com título, subtítulo, o tempo estimado e um botão. Tela final no fim.
- Se um campo obrigatório estiver vazio, mostra a mensagem embaixo do campo, em vermelho, e NÃO avança.

OS 17 TIPOS DE CAMPO, cada um com o seu comportamento
- name e company: texto simples, mas já marcados pra virar coluna do lead.
- email: valida formato de verdade antes de avançar.
- short_text e long_text: o longo é textarea que cresce sozinha.
- phone: seletor de país com bandeira e código, lista de uns 50 países, busca dentro do seletor, Brasil como padrão. Grava sempre no formato "+DDI numero". Máscara de celular brasileiro só quando o país for o Brasil.
- date: campo de data nativo, formatado em dd/mm/aaaa na exibição.
- url: aceita com ou sem https e normaliza.
- cpf e cnpj: máscara enquanto digita e validação de dígito verificador de verdade. Documento inválido não passa.
- number: só número, com mínimo e máximo opcionais.
- single_choice: cartões grandes clicáveis, com a letra do atalho num quadradinho à esquerda.
- multiple_choice: mesmos cartões, com marcação, respeitando o limite de seleção quando existir, e um botão de avançar (esse não auto-avança).
- rating: escala de 1 até o máximo definido, com os dois rótulos das pontas.
- file: envia o arquivo pro storage por uma rota do servidor e guarda a URL. Mostra o nome do arquivo e o progresso.
- calendar: mostra a agenda embutida num iframe a partir do link que eu colar (Calendly ou outra), e pré-preenche nome e e-mail se já tiverem sido respondidos.
- statement: só uma mensagem, sem resposta, com um botão. Se o botão tiver link, ele abre em outra aba e ENCERRA o formulário.

REGRAS
- Nenhuma pergunta pode estar escrita no componente. Tudo sai da config recebida por props.
- O componente precisa funcionar igual no celular: campo com 16px pra o iPhone não dar zoom, área de toque de 44px, teclado certo por tipo de campo (email abre teclado de e-mail, telefone abre teclado numérico).
- Nada de biblioteca de animação. CSS puro.
- Me entregue o arquivo completo e a lista do que testar tipo por tipo.

Agora ligue a qualificação e a gravação no banco.

A LÓGICA DE QUALIFICAÇÃO
- Cada opção de escolha tem um peso (score). A soma dos pesos das respostas é a pontuação do lead.
- Os tiers vêm da config: quente a partir de 7, morno a partir de 4, frio a partir de 0. Isso é dado, não código: outro formulário pode ter outros cortes.
- A tela final muda por tier: título, subtítulo e botão diferentes. Se o tier não tiver tela própria, cai na "default".
- Na tela final, mostre uma etiqueta discreta com o nome do tier.

A ROTA QUE GRAVA (POST /api/submit)
- Recebe o slug do formulário, as respostas, os utm e o referer.
- Carrega a config daquele formulário DO BANCO e RECALCULA o score e o tier no servidor. Nunca confie no score que o navegador mandar: ele pode ter sido alterado. Isso é obrigatório.
- Grava uma linha na tabela de respostas com: form_id, o jsonb inteiro das respostas, score, tier, utm, referer e user agent.
- Além do jsonb, joga nas colunas próprias o que tiver mapTo: nome, email, whatsapp e empresa. É isso que deixa a lista de leads legível depois.
- Devolve o tier calculado, pra o formulário mostrar a tela final certa.
- Valida: sem respostas, devolve erro 400. Formulário que não existe, 404. Erro do banco, 500 com mensagem curta.
- Nunca devolva detalhe interno de erro pro navegador.

CAPTURA DE ORIGEM
- Leia os utm_source, utm_medium, utm_campaign e o sck da URL quando a pessoa abre o formulário, guarde e mande junto no envio. É assim que você vai saber de qual anúncio veio o lead bom.

REGRAS
- O cálculo do score tem que existir em UMA função só, usada pelo servidor. Se o navegador quiser mostrar uma prévia, ele chama a mesma função, mas quem manda é o servidor.
- Teste comigo: responda escolhendo as opções de peso alto e confirme que caiu como quente; depois de peso baixo e confirme frio.
- Me entregue os arquivos completos e o que testar.

Agora construa o painel: a tela em /painel onde eu vejo e crio os meus formulários.

ENTRADA
- Uma senha só, minha, guardada numa variável de ambiente do servidor. A tela pede a senha, e cada chamada de API manda ela num cabeçalho. Se bater, passa; se não, 401.
- A senha fica lembrada no navegador pra eu não digitar toda hora, e tem um "Sair" que esquece.
- Não é login de usuário, é cadeado de dono. Deixe simples de trocar depois por login de verdade.

A TELA
- Topo com a marca à esquerda, busca no meio e o meu avatar com iniciais à direita.
- Botão principal "Criar novo".
- Lista de cards, um por formulário, cada um com: miniatura, título, etiqueta de Privado ou Público, etiqueta de Rascunho quando não estiver publicado, e a contagem de respostas ("28 respostas") que é um link direto pra tela de respostas daquele formulário.
- Menu de três pontinhos em cada card: Editar, Ver respostas, Excluir. Excluir pede confirmação.
- Clicar no card abre o construtor daquele formulário.
- Busca filtra por título enquanto digito.
- Estado de carregando é esqueleto cinza, nunca a palavra "carregando". Estado vazio tem uma frase e o botão de criar.

AS ROTAS
- GET lista os formulários com a contagem vindo da view de contagem, ordenados pelo último editado.
- POST cria um formulário com título padrão, gera um slug único a partir do título (sem acento, sem espaço, com um sufixo curto aleatório pra nunca colidir) e uma config inicial com uma pergunta só.
- DELETE apaga o formulário.
- Todas exigem a senha no cabeçalho.

O QUE EU NÃO QUERO
- Nada de "Faça upgrade", nada de bolha de ajuda, nada de banner de novidade. É a minha ferramenta, não um SaaS tentando me vender.
- Nada de emoji na interface.

Me entregue os arquivos completos e o que testar.

Agora o construtor visual, em /painel/[id]. É a tela mais importante do produto. Três colunas.

TOPO
- Seta de voltar fininha, sem caixa.
- Título do formulário editável ali mesmo, clicando.
- À direita: "Salvar" (com indicador de "salvo" discreto), "Publicar" ou "Despublicar" conforme o estado, um botão que abre a tela de respostas, um que abre o formulário publicado em outra aba e um que copia o link público.

COLUNA 1, AS TELAS
- Lista na ordem: Boas-vindas, cada pergunta numerada, e Tela final. As duas pontas são fixas e editáveis, mas não podem ser apagadas.
- Cada pergunta mostra o começo do título e o tipo embaixo, em cinza.
- Setas de subir e descer pra reordenar, e uma lixeira pra excluir com confirmação.
- Um bloco pontilhado "Adicionar pergunta" no fim.
- A pergunta selecionada fica destacada.

COLUNA 2, A PRÉVIA AO VIVO
- Mostra o passo selecionado usando O MOTOR DE VERDADE, o mesmo componente do formulário publicado, num quadro com cara de tela de celular. Nada de recriar uma prévia parecida: é o motor, em modo prévia (sem gravar no banco).
- Muda na hora enquanto eu digito no inspetor.

COLUNA 3, O INSPETOR
- Muda conforme o tipo do campo selecionado.
- Sempre: seletor de "Tipo de campo" (os 17), título, descrição opcional, obrigatória sim ou não, e o campo "grava em" (nome, e-mail, WhatsApp, empresa ou nenhum).
- Escolha única e múltipla: lista de opções, cada uma com o texto à esquerda e o PESO num campinho à direita, botão de remover e um "adicionar opção".
- Escala: valor máximo e os dois rótulos das pontas.
- Anexo: tipos de arquivo aceitos.
- Calendário: campo pro link da agenda.
- Mensagem: texto do botão e link opcional.
- Tela de boas-vindas e tela final têm o seu próprio inspetor, com os campos delas (incluindo, na final, o texto e o link do botão por tier).

SALVAR
- Uma rota que recebe o formulário inteiro e grava a config no banco, mais o título, o status e a privacidade.
- Salvar não pode perder nada: quem salva é o objeto inteiro, não campo por campo.
- Publicar muda o status. Um formulário em rascunho, se alguém abrir o link público, mostra uma tela dizendo que não está publicado.

REGRAS
- Nada de biblioteca de arrastar. Reordenar com as setas já resolve, e não quebra no celular.
- Toda edição atualiza a prévia na hora, sem recarregar.
- Me entregue os arquivos completos e uma lista de 10 coisas pra eu testar clicando.

Três recursos, um de cada vez, sem quebrar o que já funciona.

1) PUXAR RESPOSTA (o recall)
- Em qualquer título, descrição ou texto da tela final, eu posso escrever um marcador com o id de uma pergunta anterior entre chaves duplas. Na hora de mostrar, o motor troca pelo que a pessoa respondeu.
- Exemplo: "Quanto a {{empresa}} investe por mês?" e "{{nome}}, qual é o seu maior gargalo?".
- Se a resposta ainda não existe, o marcador some do texto e a frase continua fazendo sentido, sem sobrar espaço duplo.
- Quando o marcador for usado dentro do link do botão da tela final, o valor precisa ser codificado pra URL (pra funcionar no link do WhatsApp).
- No inspetor, um seletor "puxar resposta de outra pergunta" que insere o marcador no cursor. Só oferece perguntas ANTERIORES à atual.
- Na prévia, o marcador aparece como um chip colorido com o nome do campo, não como texto cru.

2) LÓGICA CONDICIONAL (o pulo)
- Cada opção de uma pergunta de escolha ÚNICA ganha um destino: a próxima pergunta, uma pergunta específica ou "finalizar agora".
- No inspetor, embaixo de cada opção, um seletor "vai para" com a lista das perguntas.
- A navegação passa a ser por pilha de histórico: o botão de voltar tem que respeitar o caminho que a pessoa fez, não a ordem da lista.
- Depois de pular pra uma pergunta, o fluxo segue linear a partir dali.
- Exemplo que precisa funcionar: "Já investe em anúncio? Não" pula direto pra pergunta de contato e encerra; "Sim" segue o caminho completo.

3) COR POR FORMULÁRIO
- Cada formulário guarda na config uma cor de destaque e o modo claro ou escuro.
- No topo do construtor, um botão "Cores" abre um seletor com uns 10 tons prontos, um seletor de cor livre e a escolha entre fundo claro e escuro.
- A cor entra como variável de CSS aplicada no formulário e na prévia. Botões, seleção, barra de progresso e brilhos usam essa variável.
- Calcule automaticamente se o texto em cima da cor deve ser preto ou branco, pela luminância. Cor clara com texto branco é o erro clássico aqui.

REGRAS
- Faça um recurso, me mostre funcionando, e só então vá pro próximo.
- Nenhum dos três pode quebrar formulários antigos que não usam o recurso.
- Me diga, pra cada um, exatamente o que clicar pra ver funcionando.

Agora a tela de respostas de um formulário, em /admin com o slug do formulário na URL. Mesma senha do painel.

TOPO
- Nome do formulário e a contagem de leads embaixo.
- Botões pra trocar entre duas visões: cartões e lista. A escolha fica lembrada.
- Botão de recarregar, com o ícone virando um spinner enquanto carrega.

FAIXA DE NÚMEROS
Quatro caixas: total, quentes, mornos e frios. Cada número na cor do seu tier.

VISÃO EM CARTÕES
- Um cartão por lead: nome grande, etiqueta do tier com a pontuação ("quente · 7pts"), data e hora, e uma lixeira.
- Linha de contato: empresa, WhatsApp e e-mail, todos clicáveis. O WhatsApp abre a conversa já com o número certo, respeitando o código do país. O e-mail abre o cliente de e-mail.
- Se veio de anúncio, mostre a origem em cinza.
- Embaixo, todas as respostas em duas colunas: a pergunta em cinza pequeno e a resposta em branco. Resposta que for link vira link clicável, e anexo aparece como "ver arquivo".

VISÃO EM LISTA
Tabela com nome, empresa, contato, classificação e quando. Serve pra bater o olho em 50 leads de uma vez.

EXCLUIR
Lixeira abre um modal de confirmação com o nome do lead. Só apaga depois do confirmar, e some da tela na hora.

A ROTA
- GET devolve os leads daquele formulário, do mais novo pro mais antigo, exigindo a senha no cabeçalho. Sem senha, 401.
- DELETE apaga um lead pelo id, também com senha.
- Nenhuma dessas rotas pode ser aberta sem a senha. Teste isso e me mostre o 401.

REGRAS
- Estado vazio com uma frase, nunca uma tela em branco.
- Nada de paginar por enquanto: carregue os últimos 500 e pronto.
- Me entregue os arquivos completos e o que testar.

Meu projeto está funcionando na minha máquina. Quero ele no ar, de graça, com um link que eu possa mandar hoje.

Me guie pelo caminho mais curto na Vercel, clicado, assumindo que eu não sei o que é terminal:
1. O que eu clico pra criar a conta e subir o projeto.
2. Onde eu cadastro as três variáveis de ambiente (a URL do Supabase, a service role key e a senha do painel) e por que elas NÃO podem estar no código.
3. Como eu confiro que subiu certo e como atualizo depois de mudar alguma coisa.
4. Como eu ligo um domínio próprio.

Depois de no ar, faça a checagem de produção comigo:
- Abra o formulário publicado numa aba anônima e responda inteiro. A resposta apareceu na tela de respostas?
- O score e o tier bateram com o que eu esperava?
- A tela de respostas sem senha devolve 401?
- A chave secreta aparece em algum lugar no código que chega no navegador? Procure de verdade e me prove que não.
- O formulário abre certo no celular, com o teclado adequado em cada tipo de campo?
- O título da aba, o ícone e a imagem de compartilhamento estão com a cara do meu formulário ou ainda genéricos?
- Se o upload de arquivo estiver ligado, o arquivo sobe e o link abre?

Me responda em passos numerados e curtos, sem termo técnico sem explicação.

Pare de construir. Agora ataque o próprio trabalho como o usuário mais desastrado possível.

Vá atrás de tudo que quebra, especificamente:
- Campo obrigatório: dá pra avançar sem responder apertando Enter duas vezes rápido? E clicando no botão duas vezes?
- Voltar: depois de um pulo condicional, o botão de voltar leva pra tela certa ou pra ordem da lista? Voltar e mudar a resposta refaz o caminho?
- Puxar resposta: o que aparece quando o marcador aponta pra uma pergunta que ainda não foi respondida, ou pra uma pergunta apagada?
- Envio duplo: clicar em enviar duas vezes cria dois leads? A internet caindo no meio do envio deixa a pessoa numa tela morta?
- Máscaras: CPF e CNPJ inválidos passam? Telefone de outro país grava com o código certo? E-mail com espaço no fim?
- Escolha múltipla com limite: dá pra marcar além do limite?
- Escala: o zero funciona ou some por ser valor falso em JavaScript?
- Arquivo: arquivo de 40MB, arquivo de tipo não permitido, e cancelar no meio do upload.
- Formulário em rascunho: o link público mostra o quê?
- Formulário sem nenhuma pergunta: o construtor e o motor aguentam?
- Texto com acento, emoji e aspas nas respostas: chega inteiro no banco e na tela de leads?
- A prévia do construtor grava alguma coisa no banco? Ela NÃO pode gravar.

Escreva a lista numerada, do mais grave pro mais bobo, cada item com o que acontece na prática e em que arquivo está. Não conserte ainda.
Depois conserte um por um, na ordem, dizendo o que mudou.
No fim, rode a varredura inteira de novo. Repita até uma passagem inteira não achar nada novo.

Compare o meu formulário com o Typeform, o Respondi e o Tally, e o meu construtor com o editor do Notion.

Liste 10 diferenças concretas de acabamento. Nada de "melhorar o design", quero item objetivo:
- Tempo e curva das transições entre perguntas.
- Onde o cursor está quando a tela troca (o campo já vem focado?).
- Respiro entre a pergunta e as opções, e largura máxima da linha de texto.
- Peso e tamanho da fonte na hierarquia pergunta, descrição, opção.
- Estado de hover, de selecionado e de foco por teclado nas opções.
- Como o erro aparece e como ele some.
- O que a pessoa vê no meio segundo entre apertar enviar e a tela final.
- Consistência de raio de canto e de borda entre motor, painel e construtor.
- Contraste do texto cinza no fundo claro e no escuro.
- Como fica em 390px de largura.

Regras: não invente cor nova nem fonte nova, nada de emoji na interface, nada de sombra pesada. Estado de carregando é esqueleto, não a palavra "carregando".
Aplique uma de cada vez e me diga o que mudou. No fim, descreva o antes e o depois em texto.

Esqueça que você construiu isso. Você é uma pessoa mal intencionada que abriu o meu formulário publicado e apertou F12. Seu objetivo é roubar os leads.

Liste tudo que você tentaria e o resultado real, considerando o meu código:
- Achar alguma chave do banco no que chegou no navegador. Vasculhe o bundle e me prove se tem ou não tem.
- Chamar a rota que lista os leads sem a senha, e com senha errada.
- Chamar a rota que grava passando um score altíssimo, pra entrar como lead quente.
- Gravar resposta num formulário que não é meu, ou num slug inventado.
- Mandar um payload gigante ou um jsonb com 5MB de texto pra derrubar ou encher o banco.
- Enviar mil respostas em um minuto (tem algum limite?).
- Injetar HTML ou script dentro de uma resposta e ver se ele executa na minha tela de leads. Esse é o ataque mais provável de todos.
- Subir um arquivo executável pelo campo de anexo.
- Abrir a tela do construtor de um formulário que não é meu.

Para cada item: o que eu tentei, o que aconteceu, e se é um buraco.
Se alguma coisa passar, me entregue a correção pronta e a explicação em português do que ela bloqueia.
No fim, diga em uma frase qual é o meu risco real que sobra mesmo com tudo certo.

Alguma coisa quebrou. Antes de mexer em qualquer linha, investigue.

O que eu fiz e o que aconteceu: DESCREVA AQUI
O que eu esperava: DESCREVA AQUI
Onde quebrou: no formulário público, no painel, no construtor ou na tela de respostas?
Console do navegador (F12, aba Console): COLE A MENSAGEM VERMELHA, OU ESCREVA "nada"
Terminal onde o projeto está rodando: COLE O ERRO, OU ESCREVA "nada"

Siga exatamente esta ordem:
1. Diga em uma frase a sua hipótese da causa, apontando o arquivo.
2. Liste outras duas causas possíveis.
3. Diga o teste mais rápido pra saber qual das três é a verdadeira, e o que eu devo ver em cada caso.
4. Só com a causa confirmada, faça a correção mínima. Não reescreva arquivo inteiro, não aproveite pra melhorar outra coisa, não mude o visual.
5. Diga o que mudou e o que eu clico pra confirmar.

Se não tiver certeza, diga que não tem certeza e me peça o que falta. Chutar correção é proibido.