Skill v1.0.0
currentAutomated scan100/100version: "1.0.0"
Lara Builder — Vendedora IA Personalizada
Skill que cria uma vendedora IA completa (clone personalizado da "Lara") para qualquer produto digital. Gera projeto full-stack com widget de chat, backend com IA, dashboard de conversas, UTM tracking e deploy.
Trigger
Ativar quando o usuario pedir para:
- Criar uma vendedora IA / chatbot de vendas / assistente de vendas
- Criar uma "Lara" para o produto dele
/lara-builder- "quero uma vendedora no meu site"
- "cria um chat de vendas com IA"
- "quero um chatbot que vende"
Importante
- Cada execucao cria UMA vendedora para UM produto especifico
- O mesmo mentorado pode rodar a skill varias vezes para produtos diferentes
- Cada vendedora tem seu proprio projeto, banco, prompt e widget
- A skill SEMPRE comeca pelo onboarding — nunca pula etapas
Fluxo Completo (7 Fases)
FASE 1 — ONBOARDING (Coleta de Informacoes)
Fazer as perguntas UMA POR VEZ, esperando a resposta antes de prosseguir. Usar tom amigavel e direto.
Pergunta 1 — Nome da Vendedora: "Primeiro, vamos dar um nome pra sua vendedora IA! A da Tata se chama Lara. Qual nome voce quer dar pra sua? (Ex: Sofia, Clara, Bia, Ana...)"
Pergunta 2 — Seu Produto: "Qual e o seu produto? Me conta:
- Nome do produto
- O que ele entrega (resultado principal)
- Preco (ou faixa de preco)
- Link de checkout (Eduzz, Hotmart, Kiwify, etc)"
Pergunta 3 — Pagina de Vendas: "Me manda o link da sua pagina de vendas. Vou analisar ela completamente pra treinar sua vendedora com TUDO que ta la — headlines, beneficios, garantia, depoimentos, FAQ, tudo."
Pergunta 4 — Depoimentos: "Agora me indica onde estao seus depoimentos. Pode ser:
- Uma pasta no seu computador com prints/screenshots
- Links de videos no YouTube
- Textos copiados de WhatsApp/Instagram
- Tudo junto misturado — eu processo qualquer formato!
Se nao tem depoimentos ainda, tudo bem — a gente cria a vendedora sem e adiciona depois."
Pergunta 5 — Tom de Voz: "Como sua vendedora deve falar? Escolha o estilo:
- Amigavel e informal (como uma amiga no WhatsApp)
- Profissional e consultivo (como uma especialista)
- Energetico e motivacional (como uma coach)
- Outro (descreva como quer)
Dica: a vendedora da Tata fala como consultora — nao empurra venda, faz perguntas e guia a pessoa."
Pergunta 6 — Perguntas Frequentes: "Quais sao as perguntas que seus clientes mais fazem? Liste pelo menos 5. Ex:
- Funciona pra quem ta comecando?
- Quanto tempo pra ter resultado?
- Tem garantia?
- Preciso de experiencia?
- Como funciona o acesso?"
Pergunta 7 — Redirecionamento Comercial: "Quando a vendedora nao conseguir resolver ou o lead quiser falar com alguem, pra onde direciona?
- Link do WhatsApp do time comercial
- Ou email de contato"
Pergunta 8 — Visual: "Qual a cor principal da sua marca? (Ex: roxo, azul, verde, laranja...) Se tiver o codigo hex, melhor ainda! (Ex: #7C3AED)"
Ao final do onboarding, apresentar um RESUMO de tudo que foi coletado e pedir confirmacao antes de prosseguir.
FASE 2 — ANALISE DA PAGINA DE VENDAS
Usar WebFetch para acessar a pagina de vendas do mentorado e extrair:
- Headlines e Sub-headlines — todas as promises
- Beneficios — lista completa do que o produto entrega
- Publico-alvo — pra quem e (e pra quem NAO e)
- Garantia — tipo e prazo
- Preco e Condicoes — valores, parcelamento, cupons
- FAQ — perguntas e respostas existentes
- Depoimentos na pagina — nomes e resultados mencionados
- Objecoes implicitas — o que a pagina tenta resolver
- CTA principal — chamada para acao
- Diferenciais — o que torna unico
Salvar toda a analise em um arquivo analise-pagina.md dentro do projeto.
FASE 3 — PROCESSAMENTO DE DEPOIMENTOS
Para cada tipo de depoimento fornecido:
Screenshots/Prints (imagens):
- Ler cada imagem com o tool Read (multimodal)
- Extrair: nome da pessoa, resultado obtido, contexto, emocao
- Classificar por tipo de objecao que quebra
Videos (YouTube links):
- Usar WebFetch para acessar e extrair conteudo
- Ou pedir ao mentorado para transcrever os principais trechos
Textos:
- Organizar por categoria
- Identificar os mais persuasivos
Gerar arquivo depoimentos-processados.md com formato:
## Depoimento 1 — [Nome]- Resultado: "..."- Contexto: ...- Quebra objecao: [qual objecao este depoimento responde]- Frase-chave: "..."
FASE 4 — GERACAO DO SYSTEM PROMPT
Usar o template em templates/prompt-template.md para gerar o system prompt personalizado.
O prompt deve conter:
- Identidade — nome, personalidade, tom de voz
- Conhecimento do produto — tudo extraido da pagina de vendas
- Depoimentos — cada um com nome real e resultado real
- FAQ completo — perguntas e respostas pre-prontas
- Regras de comportamento:
- NUNCA inventar depoimentos ou resultados que nao existem
- NUNCA ser agressiva ou insistente
- Fazer perguntas antes de oferecer solucao
- Usar depoimentos APENAS quando relevante pra objecao
- Enviar link de compra APENAS quando detectar interesse real
- Redirecionar pro time comercial quando nao souber responder
- Estagios da conversa — Discovery > Posicionamento > Objecao > Checkout > Follow-up
- Intent detection — purchase, objection, question, whatsapp, churn_risk
- Link de checkout com UTM — template com parametros dinamicos
Salvar em src/prompt.ts como constante exportada.
FASE 5 — GERACAO DO PROJETO
Criar o projeto completo na pasta ~/[nome-da-vendedora]/ com a estrutura:
~/[nome-vendedora]/├── CLAUDE.md # Contexto do projeto├── package.json # Dependencies├── tsconfig.json # TypeScript config├── .env.example # Template de variaveis├── .gitignore├── src/│ ├── server.ts # Express server principal│ ├── database.ts # Schema SQLite + migrations│ ├── prompt.ts # System prompt personalizado│ ├── routes/│ │ ├── chat.ts # POST /api/chat (conversa com IA)│ │ ├── leads.ts # CRUD leads│ │ ├── conversations.ts # Historico de conversas│ │ ├── metrics.ts # Metricas e KPIs│ │ ├── settings.ts # Configuracoes│ │ └── webhooks.ts # Webhooks de plataforma (Eduzz/Hotmart/etc)│ ├── services/│ │ ├── ai.ts # Integracao Google Gemini│ │ ├── intent.ts # Deteccao de intencao│ │ └── utm.ts # Geracao de UTM tracking│ └── utils/│ └── helpers.ts # Utilidades├── public/│ └── chat-widget.js # Widget embed (vanilla JS)├── dashboard/│ ├── index.html│ ├── package.json│ ├── vite.config.ts│ ├── tailwind.config.ts│ └── src/│ ├── App.tsx # Router principal│ ├── main.tsx # Entry point│ ├── pages/│ │ ├── Dashboard.tsx # KPIs e graficos│ │ ├── Conversations.tsx # Lista de conversas│ │ ├── Leads.tsx # Gestao de leads│ │ └── Settings.tsx # Configuracoes│ └── components/│ ├── MetricCard.tsx│ ├── ConversationView.tsx│ └── LeadTable.tsx├── docs/│ ├── analise-pagina.md # Analise da pagina de vendas│ └── depoimentos-processados.md # Depoimentos organizados└── deploy/├── ecosystem.config.js # PM2 config└── nginx.conf # Nginx template
Regras do Backend:
server.ts:
- Express 5 com CORS, JSON parser
- Serve static files (widget + dashboard)
- Rota
/api/chatcomo endpoint principal - Health check em
/api/health - Porta configuravel via .env (default: 3XXX)
database.ts:
- 4 tabelas: leads, conversations, metrics, settings
- Schema IDENTICO ao original (ver templates/schema.sql)
- WAL mode habilitado
- Indices otimizados
chat.ts (rota principal):
POST /api/chatBody: { message: string, sessionId: string }Response: { reply: string, intent: string }Fluxo:1. Receber mensagem2. Buscar/criar lead pelo sessionId3. Salvar mensagem do usuario (role: 'user')4. Montar contexto: system prompt + historico da conversa5. Enviar pro Gemini6. Detectar intent da resposta7. Se intent = 'purchase', incluir link com UTM8. Salvar resposta (role: 'bot')9. Registrar metrica10. Retornar reply + intent
utm.ts:
Gerar URL: {checkout_url}?utm_source=vendedora-ia&utm_medium=chat-widget&utm_campaign={nome_vendedora}&utm_content={intent}&utm_term={session_id}
intent.ts:
Detectar intencoes:- 'purchase' — quer comprar, pedir link, preco- 'objection' — duvida, medo, resistencia- 'question' — pergunta informativa- 'whatsapp' — quer falar com humano- 'positive' — elogio, agradecimento- 'churn_risk' — desinteresse, despedida
Regras do Widget (v6 — Mobile-First):
Usar o template em templates/chat-widget.js e personalizar o objeto CONFIG:
name— Nome da vendedorasubtitle— Ex: "Assistente do [Negocio]"apiUrl— URL do backendprimaryColor/secondaryColor— Cores do gradientetextOnPrimary— Cor do texto nos botoes (white ou #0d0d0d)bgDark— Cor de fundo do chat (ex: #0D0B15 ou #111)welcomeMessage— Mensagem de boas-vindasquickReplies— Array de quick replies iniciaisavatarLetter— Letra do avatarwhatsappUrl— Link WhatsApp comercialtooltipText— Texto do tooltip pre-aberturatooltipDelay/tooltipDuration— Timing do tooltip (ms)btnPosition— { bottom, right } desktopbtnPositionMobile— { bottom, right } mobile
REGRAS CRITICAS:
- O widget NUNCA abre sozinho — so no clique do botao flutuante
- Badge "1" aparece pra atrair atencao + tooltip aparece apos tooltipDelay
- NO MOBILE: abre tela cheia (fullscreen), NAO parcial
- NO MOBILE: NAO faz auto-focus no input — usuario le primeiro, toca quando quiser
- NO MOBILE: body fica locked (overflow hidden + position fixed) pra nao rolar pagina atras
- KEYBOARD HANDLING: usa polling agressivo (50ms) no focus + visualViewport API pra redimensionar o chat quando teclado abre — funciona em TODOS os browsers incluindo Instagram, Facebook, TikTok in-app WebViews
- Swipe down no header fecha o chat (mobile)
- Botao ✕ grande (36x36px) sempre visivel
- font-size: 16px no input pra evitar zoom automatico no iOS
- Quick replies scrollam horizontalmente no mobile (overflow-x: auto)
Regras do Dashboard:
- Login simples (email/senha do admin)
- 4 paginas: Dashboard (KPIs), Conversas, Leads, Config
- KPIs: total leads, conversas hoje, checkouts enviados, conversoes, taxa conversao
- Graficos com Recharts
- Tabela de leads com TanStack Table
- Visualizador de conversa individual
- Filtros por data e status
FASE 6 — CONFIGURACAO E TESTE
- Criar arquivo
.envcom valores do mentorado - Rodar
npm installno backend e dashboard - Rodar
npm run buildno dashboard - Iniciar servidor com
npm run dev - Testar endpoint
/api/chatcom curl - Abrir dashboard e verificar
- Mostrar como embed o widget na pagina de vendas:
``html <script src="https://SEU-DOMINIO:PORTA/chat-widget.js"></script> ``
FASE 7 — INSTRUCOES DE DEPLOY
Gerar guia personalizado em deploy/DEPLOY.md:
- Como fazer deploy na VPS (PM2 + Nginx)
- Como configurar SSL (Certbot)
- Como apontar DNS
- Como monitorar (pm2 logs)
- Como atualizar depoimentos depois
- Como adicionar novas FAQs
- Como ver as conversas no dashboard
Stack Tecnica Obrigatoria
- Backend: Express 5 + TypeScript + better-sqlite3
- IA: @google/generative-ai (Gemini 2.5 Flash)
- Frontend Dashboard: React 19 + Vite 6 + Tailwind 4 + Recharts
- Widget: Vanilla JavaScript (zero dependencias)
- Banco: SQLite (WAL mode)
- Auth: JWT simples
- Deploy: PM2 + Nginx reverse proxy
Arquivos de Template
Os templates base estao em:
templates/chat-widget.js— Widget completo parametrizadotemplates/schema.sql— Schema do banco de dadostemplates/prompt-template.md— Template do system prompt
Regras de Ouro
- NUNCA inventar depoimentos — so usar os que o mentorado forneceu
- NUNCA abrir o widget automaticamente — so no clique do botao
- SEMPRE gerar UTM nos links — pra rastrear vendas da vendedora
- SEMPRE ter redirecionamento comercial — quando a IA nao souber, manda pro humano
- SEMPRE salvar todas as conversas — inteligencia de mercado
- NUNCA colocar API keys no frontend — APENAS em .env no backend
- Cada produto = 1 vendedora separada — projetos independentes