Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Criando uma Habilidade de Geração de Mockup | Planejamento do Dashboard Empresarial
Introdução ao Claude Code

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.

question mark

Qual é o principal benefício de criar uma skill de geração de mockup?

Selecione a resposta correta

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 4

Pergunte à IA

expand

Pergunte à IA

ChatGPT

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.

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 4
some-alt