Criando uma Habilidade de Geração de Mockup
Deslize para mostrar o menu
Após coletar os leads, o próximo passo é criar um mockup de site personalizado para cada potencial cliente. Isso torna a abordagem muito mais eficaz, pois, em vez de enviar uma mensagem genérica, é possível mostrar ao negócio como seu site redesenhado realmente poderia ser.
Neste exemplo, é criada uma segunda skill do Claude Code chamada generate-mockup. Essa skill utiliza um lead do banco de dados, geralmente pelo nome da clínica ou domínio, e então executa um processo repetível.
A skill:
- Lê os detalhes do lead no banco de dados;
- Visita o site atual do potencial cliente;
- Coleta informações reais como nome da clínica, serviços, localização e dados de contato;
- Usa esse conteúdo para gerar um redesign moderno de página única;
- Segue a direção de design já definida no projeto;
- Salva o mockup como um arquivo HTML independente;
- Atualiza o banco de dados com o caminho do mockup e altera o status do lead para
mockup-ready.
Para manter a saída simples e portátil, o mockup é criado com HTML puro e Tailwind CSS via CDN. Isso significa que cada página pode ser hospedada facilmente sem necessidade de uma configuração completa de aplicativo.
Como a skill fica armazenada na pasta .claude/skills do projeto, ela pode ser reutilizada sempre que necessário. O Claude pode nem sempre detectar a skill automaticamente no Claude Desktop, então pode ser útil informar explicitamente ao Claude qual skill usar e onde ela está localizada.
Quando a skill é executada com sucesso, ela cria um mockup baseado em informações reais do site do potencial cliente. Isso ajuda a evitar afirmações inventadas e torna o resultado mais confiável. Por exemplo, o mockup gerado pode incluir serviços reais, horários de funcionamento e informações da equipe, enquanto marca claramente seções de placeholder, como avaliações ou formulários de contato inativos.
Esse processo é poderoso porque transforma dados de leads em um ativo de vendas personalizado. Em vez de criar manualmente uma prévia para cada potencial cliente, o Claude pode realizar grande parte do trabalho e criar um fluxo de trabalho repetível que pode ser aprimorado, escalado e automatizado ainda mais no futuro.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Criando uma Habilidade de Geração de Mockup
Após coletar os leads, o próximo passo é criar um mockup de site personalizado para cada potencial cliente. Isso torna a abordagem muito mais eficaz, pois, em vez de enviar uma mensagem genérica, é possível mostrar ao negócio como seu site redesenhado realmente poderia ser.
Neste exemplo, é criada uma segunda skill do Claude Code chamada generate-mockup. Essa skill utiliza um lead do banco de dados, geralmente pelo nome da clínica ou domínio, e então executa um processo repetível.
A skill:
- Lê os detalhes do lead no banco de dados;
- Visita o site atual do potencial cliente;
- Coleta informações reais como nome da clínica, serviços, localização e dados de contato;
- Usa esse conteúdo para gerar um redesign moderno de página única;
- Segue a direção de design já definida no projeto;
- Salva o mockup como um arquivo HTML independente;
- Atualiza o banco de dados com o caminho do mockup e altera o status do lead para
mockup-ready.
Para manter a saída simples e portátil, o mockup é criado com HTML puro e Tailwind CSS via CDN. Isso significa que cada página pode ser hospedada facilmente sem necessidade de uma configuração completa de aplicativo.
Como a skill fica armazenada na pasta .claude/skills do projeto, ela pode ser reutilizada sempre que necessário. O Claude pode nem sempre detectar a skill automaticamente no Claude Desktop, então pode ser útil informar explicitamente ao Claude qual skill usar e onde ela está localizada.
Quando a skill é executada com sucesso, ela cria um mockup baseado em informações reais do site do potencial cliente. Isso ajuda a evitar afirmações inventadas e torna o resultado mais confiável. Por exemplo, o mockup gerado pode incluir serviços reais, horários de funcionamento e informações da equipe, enquanto marca claramente seções de placeholder, como avaliações ou formulários de contato inativos.
Esse processo é poderoso porque transforma dados de leads em um ativo de vendas personalizado. Em vez de criar manualmente uma prévia para cada potencial cliente, o Claude pode realizar grande parte do trabalho e criar um fluxo de trabalho repetível que pode ser aprimorado, escalado e automatizado ainda mais no futuro.
Obrigado pelo seu feedback!