Creación de una Habilidad para Generar Maquetas

Después de recopilar clientes potenciales, el siguiente paso es crear un prototipo de sitio web personalizado para cada prospecto. Esto fortalece mucho el alcance, ya que en lugar de enviar un mensaje genérico, puedes mostrarle a un negocio cómo podría verse realmente su sitio web rediseñado.

En este ejemplo, se crea una segunda habilidad de Claude Code llamada generate-mockup. Esta habilidad toma un cliente potencial de la base de datos, generalmente por nombre de la práctica o dominio, y luego sigue un proceso repetible.

La habilidad:

• Lee los detalles del cliente potencial desde la base de datos;
• Visita el sitio web actual del prospecto;
• Extrae información real como el nombre de la práctica, servicios, ubicación y datos de contacto;
• Utiliza ese contenido para generar un rediseño moderno de una sola página;
• Sigue la dirección de diseño ya definida en el proyecto;
• Guarda el prototipo como un archivo HTML autónomo;
• Actualiza la base de datos con la ruta del prototipo y cambia el estado del cliente potencial a mockup-ready.

Para mantener la salida simple y portátil, el prototipo se crea con HTML puro y Tailwind CSS a través de un CDN. Esto significa que cada página puede alojarse fácilmente sin necesidad de configurar una aplicación completa.

Debido a que la habilidad se almacena dentro de la carpeta .claude/skills del proyecto, puede reutilizarse cuando sea necesario. Claude puede que no detecte siempre la habilidad automáticamente en Claude Desktop, por lo que puede ser útil indicarle explícitamente a Claude qué habilidad usar y dónde se encuentra.

Cuando la habilidad se ejecuta correctamente, crea un prototipo basado en información real del sitio del prospecto. Esto ayuda a evitar afirmaciones inventadas y hace que el resultado sea más creíble. Por ejemplo, el prototipo generado puede incluir servicios reales, horarios de apertura e información del equipo, mientras marca claramente las secciones de marcador de posición como reseñas o formularios de contacto inactivos.

Este proceso es potente porque convierte los datos de clientes potenciales en un recurso de ventas personalizado. En lugar de diseñar manualmente una vista previa para cada prospecto, Claude puede encargarse de gran parte del trabajo y crear un flujo de trabajo repetible que luego puede mejorarse, escalarse y automatizarse aún más.