{"id":83769,"date":"2026-07-06T12:54:13","date_gmt":"2026-07-06T10:54:13","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=83769&#038;preview=true&#038;preview_id=83769"},"modified":"2026-07-09T15:18:37","modified_gmt":"2026-07-09T13:18:37","slug":"vibe-coding-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/","title":{"rendered":"Haciendo \u00abvibe coding\u00bb de flujos de trabajo reales en WordPress usando la API de Kinsta"},"content":{"rendered":"<p>La clave para conseguir una ventaja competitiva para las agencias de WordPress modernas ya no est\u00e1 en escribir un c\u00f3digo excelente. Las agencias orientadas al crecimiento <a href=\"https:\/\/kinsta.com\/es\/blog\/automatizacion-de-wordpress-gestion-de-sitios\/\">automatizan las tareas repetitivas<\/a>, reducen los <a href=\"https:\/\/kinsta.com\/es\/blog\/ingresos-por-alojamiento-de-agencias\/\">costes operativos<\/a> y el tiempo de lanzamiento al mercado, y ofrecen a los clientes servicios m\u00e1s personalizados.<\/p>\n<p>La integraci\u00f3n de herramientas de IA en los procesos de producci\u00f3n es clave para las agencias que quieren automatizar sus flujos de trabajo. En este contexto, Vibe Coding \u2014 el nuevo modelo de desarrollo basado en la IA \u2014 est\u00e1 ganando cada d\u00eda m\u00e1s popularidad.<\/p>\n<p>Sin embargo, el Vibe Coding no es una forma f\u00e1cil de programar. Aunque es cierto que no necesitas a\u00f1os de experiencia para sacar partido al enfoque del Vibe Coding, es fundamental tener un buen conocimiento de la programaci\u00f3n y de los lenguajes que usas. Y eso no es todo. Adem\u00e1s de las <a href=\"https:\/\/kinsta.com\/es\/blog\/desarrollador-de-frontend\/\">habilidades<\/a> de <a href=\"https:\/\/kinsta.com\/es\/blog\/desarrollador-de-backend\/\">programaci\u00f3n<\/a> tradicionales, ahora es esencial desarrollar un conjunto m\u00e1s amplio de capacidades. Saber c\u00f3mo usar las herramientas m\u00e1s potentes basadas en IA es, sin duda, una de ellas.<\/p>\n<p>\u00bfEst\u00e1s listo para aplicar el Vibe Coding a los flujos de trabajo de WordPress de tu agencia? Sigue leyendo.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Flujos de trabajo de WordPress con Vibe Coding<\/h2>\n<p>Si a\u00fan no lo has probado, Vibe Coding es una metodolog\u00eda de desarrollo orientada a la eficiencia y la optimizaci\u00f3n de recursos. Con Vibe Coding, dejas de escribir f\u00edsicamente l\u00edneas de c\u00f3digo y pasas a un nivel superior de abstracci\u00f3n: <b>el nivel de intenci\u00f3n<\/b>. T\u00fa, como desarrollador, defines la arquitectura, la l\u00f3gica y los requisitos t\u00e9cnicos y de negocio de un proyecto web, y delegas la programaci\u00f3n propiamente dicha al agente de IA.<\/p>\n<p>Adoptar el enfoque de Vibe para la automatizaci\u00f3n de procesos aporta ventajas importantes: reducci\u00f3n del tiempo de lanzamiento al mercado, democratizaci\u00f3n de la automatizaci\u00f3n y flexibilidad y adaptabilidad de los procesos. Estas ventajas se traducen en una mayor eficiencia y escalabilidad. Gracias a la automatizaci\u00f3n de los flujos de trabajo y a la introducci\u00f3n de Vibe Coding, las agencias de WordPress pueden <a href=\"https:\/\/kinsta.com\/es\/blog\/escalar-mejor-no-mas-dificil\/\">escalar m\u00e1s f\u00e1cilmente<\/a> porque <a href=\"https:\/\/kinsta.com\/es\/blog\/retencion-clientes-de-agencia\/#9-build-a-structured-client-onboarding-process-to-save-time-later\">incorporar nuevos clientes<\/a> no aumenta la carga de trabajo ni los <a href=\"https:\/\/kinsta.com\/es\/blog\/agencias-wordpress-escalables\/\">gastos generales<\/a>.<\/p>\n<p>Sin embargo, antes de lanzarte a celebrarlo, debes tener en cuenta que Vibe Coding no es una panacea que, como por arte de magia, te proporcione un c\u00f3digo bien estructurado y f\u00e1cil de mantener que siempre funcione como se espera. Adoptar este nuevo paradigma requiere entender c\u00f3mo funcionan los agentes de IA y debe dise\u00f1arse siguiendo principios y buenas pr\u00e1cticas que lo conviertan en un enfoque fiable para una agencia de WordPress.<\/p>\n<p>En las siguientes secciones, nos centraremos en crear un flujo de trabajo de automatizaci\u00f3n para poner en marcha un nuevo proyecto de WordPress, siguiendo un enfoque pr\u00e1ctico basado en un caso real: veremos c\u00f3mo clonar una plantilla de sitio de WordPress preconfigurada alojada en Kinsta utilizando GitHub Copilot y la API de Kinsta.<\/p>\n<p>Esperamos que este art\u00edculo te ayude a entender las ventajas de la automatizaci\u00f3n y c\u00f3mo implementar de forma eficaz Vibe Coding en el flujo de trabajo de desarrollo de tu agencia.<\/p>\n<h2>Tu kit de herramientas de automatizaci\u00f3n<\/h2>\n<p>Lo primero que necesitas es un sitio modelo alojado en Kinsta. Para este ejemplo, hemos creado un sitio nuevo y hemos instalado los temas <a href=\"https:\/\/kinsta.com\/es\/blog\/tema-mas-rapido-de-woocommerce\/#astra\">Astra<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-wordpress-rapidos\/#4-generatepress\">GeneratePress<\/a> y <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-wordpress-rapidos\/#2-neve\">Neve<\/a>. Tambi\u00e9n hemos instalado <a href=\"https:\/\/kinsta.com\/es\/blog\/yoast-seo\/\">Yoast SEO<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/astra-sites\/\">Starter Templates<\/a> y otros plugins de apoyo para el tema Astra.<\/p>\n<figure style=\"width: 2614px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/themes-screen.jpg\" alt=\"Pantalla de administraci\u00f3n de temas\" width=\"2614\" height=\"1586\"><figcaption class=\"wp-caption-text\">La pantalla de administraci\u00f3n de Temas del sitio modelo<\/figcaption><\/figure>\n<figure style=\"width: 2610px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/plugins-screen.png\" alt=\"Pantalla de administraci\u00f3n de plugins\" width=\"2610\" height=\"1602\"><figcaption class=\"wp-caption-text\">La pantalla de administraci\u00f3n de plugins del sitio modelo<\/figcaption><\/figure>\n<figure style=\"width: 2934px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/blueprint-site.jpg\" alt=\"La p\u00e1gina de inicio del sitio basado en una plantilla preconfigurada\" width=\"2934\" height=\"1432\"><figcaption class=\"wp-caption-text\">La p\u00e1gina de inicio del sitio basado en una plantilla preconfigurada<\/figcaption><\/figure>\n<p>Para crear un clon de tu sitio, tendr\u00e1s que acceder a tu <a href=\"https:\/\/kinsta.com\/es\/blog\/solucion-de-alojamiento-para-desarrolladores\/\">entorno de alojamiento de Kinsta<\/a> a trav\u00e9s de la <a href=\"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/\">API de Kinsta<\/a>. Necesitar\u00e1s una <a href=\"https:\/\/kinsta.com\/es\/blog\/kinsta-api-key\/\">clave API de Kinsta<\/a>, tu ID de empresa y el ID del entorno que quieras clonar.<\/p>\n<p>Puedes obtener tu <strong>ID de empresa<\/strong> en la URL de tu <a href=\"https:\/\/kinsta.com\/es\/blog\/administre-varios-sitios-wordpress\/\">panel de control de MyKinsta<\/a> (el par\u00e1metro <code>idCompany<\/code>) y en la secci\u00f3n <strong>Informaci\u00f3n del sitio<\/strong>\u00a0de MyKinsta, yendo a <strong>Sitios<\/strong> &gt; <strong>nombre del sitio<\/strong> &gt; <strong>Informaci\u00f3n<\/strong>. En la misma secci\u00f3n tambi\u00e9n encontrar\u00e1s el <strong>ID de tu entorno<\/strong>.<\/p>\n<figure style=\"width: 1818px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/mykinsta-site-information.png\" alt=\"Secci\u00f3n Informaci\u00f3n del sitio en MyKinsta\" width=\"1818\" height=\"820\"><figcaption class=\"wp-caption-text\">Secci\u00f3n Informaci\u00f3n del sitio en MyKinsta<\/figcaption><\/figure>\n<p>Por \u00faltimo, necesitar\u00e1s un IDE en el que trabajar. Entre las muchas opciones disponibles se encuentran entornos de desarrollo muy utilizados, como <a href=\"https:\/\/code.visualstudio.com\/\">Visual Studio Code<\/a> o <a href=\"https:\/\/www.cursor.com\/\">Cursor<\/a>, o entornos de desarrollo centrados en la IA, como <a href=\"https:\/\/kinsta.com\/es\/blog\/crear-sitio-wordpress-lovable\/\">Lovable<\/a>. Tambi\u00e9n podr\u00edas usar una plataforma de prototipado basada en la web, como <a href=\"https:\/\/aistudio.google.com\/\">Google AI Studio<\/a>, que es ideal para probar prompts en un entorno aislado antes de pasar al desarrollo propiamente dicho.<\/p>\n<p>Para este art\u00edculo, hemos usado Google AI Studio para crear los prompts y <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/overview\">GitHub Copilot en Visual Studio Code<\/a> para desarrollar la aplicaci\u00f3n. Te cuento por qu\u00e9 esta configuraci\u00f3n funciona tan bien:<\/p>\n<ul>\n<li><b>Amplia aceptaci\u00f3n:<\/b> GitHub Copilot goza de una popularidad incre\u00edble y ya es una parte fundamental del stack tecnol\u00f3gico de muchas agencias de WordPress. Aprovecharlo para un proyecto de automatizaci\u00f3n de flujos de trabajo significa que tu equipo no tendr\u00e1 que perder tiempo familiariz\u00e1ndose con nuevas herramientas de desarrollo.<\/li>\n<li><strong>Acceso directo al sistema de archivos:<\/strong> Copilot tiene acceso al sistema de archivos de tu proyecto. Esto le permite crear directamente los archivos necesarios, incluidos los recursos de configuraci\u00f3n, y escribir c\u00f3digo seg\u00fan tus peticiones.<\/li>\n<li><strong>Instrucciones para el agente:<\/strong> Puedes definir reglas globales a nivel de proyecto mediante un archivo de configuraci\u00f3n de <code>.github\/copilot-instructions.md<\/code>. El agente seguir\u00e1 al pie de la letra estas instrucciones del sistema, asegur\u00e1ndose de que cada archivo cumpla con los est\u00e1ndares de tu proyecto.<\/li>\n<\/ul>\n<p>Teniendo en cuenta estas caracter\u00edsticas, veamos c\u00f3mo funciona GitHub Copilot.<\/p>\n<h2>Programaci\u00f3n con GitHub Copilot: modos, ventana de contexto e instrucciones para el agente<\/h2>\n<p>Entender c\u00f3mo funciona GitHub Copilot es fundamental para aprovechar todo su potencial. En esta secci\u00f3n, te familiarizar\u00e1s con los conceptos b\u00e1sicos de Copilot.<br \/>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc><\/p>\n<h3>Modos de Copilot<\/h3>\n<p>Hay <a href=\"https:\/\/docs.github.com\/en\/copilot\/how-tos\/chat-with-copilot\/chat-in-ide\" target=\"_blank\" rel=\"noopener noreferrer\">tres modos distintos<\/a> que puedes usar para interactuar con GitHub Copilot, y cada uno determina el tipo de conversaci\u00f3n que mantienes con el chatbot.<\/p>\n<figure style=\"width: 964px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-modes.png\" alt=\"Los tres modos de GitHub Copilot\" width=\"964\" height=\"382\"><figcaption class=\"wp-caption-text\">Los tres modos de GitHub Copilot<\/figcaption><\/figure>\n<p><b>Plan:<\/b> En el <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/agents\/planning\">modo Plan<\/a>, Copilot genera un plan estructurado dividido en tareas, que luego se pasa al modo Agente para su ejecuci\u00f3n (lee m\u00e1s abajo para m\u00e1s detalles). Esto hace que el agente se centre plenamente en los objetivos generales del proyecto y le permite hacer un seguimiento eficaz del progreso.<\/p>\n<p>En el modo Plan, Copilot te ofrece una hoja de ruta detallada, junto con los pasos de implementaci\u00f3n y verificaci\u00f3n. Tras revisar la propuesta, puedes enviar tus comentarios para que se hagan los ajustes necesarios. Cuando el plan se ajuste a tus necesidades, puedes pasar a la fase de implementaci\u00f3n.<\/p>\n<p>El modo Plan cuenta con un completo conjunto de herramientas disponibles en <b>Configurar herramientas<\/b>, directamente en la ventana de chat.<\/p>\n<figure style=\"width: 1226px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-plan-mode-tools.png\" alt=\"Las herramientas disponibles en el modo Plan de Copilot\" width=\"1226\" height=\"1188\"><figcaption class=\"wp-caption-text\">Las herramientas disponibles en el modo Plan de Copilot<\/figcaption><\/figure>\n<p><strong>Agente (Agent): <\/strong>En <a href=\"https:\/\/learn.microsoft.com\/en-us\/visualstudio\/ide\/copilot-agent-mode?view=visualstudio\">modo Agente<\/a>, Copilot analiza tu solicitud, consulta a un modelo de IA sobre c\u00f3mo resolver la tarea y se pone manos a la obra. Una vez completada la primera iteraci\u00f3n, Copilot realiza una comprobaci\u00f3n para detectar posibles errores y determina qu\u00e9 correcciones son necesarias, ya sean modificaciones en el c\u00f3digo, comandos de terminal o llamadas a herramientas.<\/p>\n<p>Por defecto, todas las <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/agents\/agent-tools\">herramientas disponibles<\/a> est\u00e1n preseleccionadas en el modo Agente.<\/p>\n<figure style=\"width: 1212px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-agent-mode-tools.png\" alt=\"Las herramientas disponibles en el modo Agente de Copilot\" width=\"1212\" height=\"1110\"><figcaption class=\"wp-caption-text\">Las herramientas disponibles en el modo Agente de Copilot<\/figcaption><\/figure>\n<p>Para m\u00e1s informaci\u00f3n sobre los agentes, consulta la <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/agents\/overview\" target=\"_blank\" rel=\"noopener noreferrer\">documentaci\u00f3n oficial de VS Code<\/a>.<\/p>\n<p><b>Preguntar<\/b><strong> (Ask):<\/strong> El <a href=\"https:\/\/learn.microsoft.com\/en-us\/visualstudio\/ide\/visual-studio-github-copilot-chat?view=visualstudio#ask-questions-in-the-chat-window\">modo Preguntar<\/a> sirve para <a href=\"https:\/\/docs.github.com\/en\/copilot\/how-tos\/chat-with-copilot\/chat-in-ide#ask-mode\">hacer preguntas<\/a> a trav\u00e9s de la ventana de chat. Este modo es el m\u00e1s adecuado para pedir ayuda y hacer preguntas generales sobre programaci\u00f3n.<\/p>\n<figure style=\"width: 1222px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-ask-mode-tools.png\" alt=\"Las herramientas disponibles en el modo Preguntar de Copilot\" width=\"1222\" height=\"1102\"><figcaption class=\"wp-caption-text\">Las herramientas disponibles en el modo Preguntar de Copilot<\/figcaption><\/figure>\n<p>Estos tres modos de GitHub Copilot siguen una <a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/ask-mode-vs-agent-mode\/\">secuencia cronol\u00f3gica y l\u00f3gica<\/a> precisa dentro del ciclo de vida del desarrollo de una aplicaci\u00f3n.<\/p>\n<p>Durante la fase inicial de dise\u00f1o del proyecto, el <b>modo Plan<\/b> te ayuda a trazar los pasos l\u00f3gicos de tu hoja de ruta, identificando los archivos que hay que crear, las dependencias que hay que instalar y la arquitectura subyacente.<\/p>\n<p>En la fase de programaci\u00f3n propiamente dicha, el <b>modo Agente<\/b> se encarga de crear los archivos y generar el c\u00f3digo. En esta etapa, el agente act\u00faa de forma aut\u00f3noma. Tu papel pasa a ser el de supervisor \u2013 te encargas de dar el feedback necesario para resolver los bloqueos o perfeccionar partes concretas del c\u00f3digo.<\/p>\n<p>El <b>modo Preguntar<\/b> vuelve a ser muy \u00fatil durante la fase de depuraci\u00f3n. En este modo, Copilot te ayuda a aclarar dudas, gestiona las excepciones y documenta tu c\u00f3digo.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>El modo Preguntar es multifuncional; puedes recurrir a \u00e9l en cualquier momento del proceso de desarrollo para obtener ayuda r\u00e1pida y respuestas a tus preguntas.<\/p>\n<\/aside>\n\n<h3>Ventana de Contexto<\/h3>\n<p>El contexto es todo lo que el modelo puede ver cuando procesa una respuesta. Incluye cosas como tu historial de chat, los archivos de tu espacio de trabajo local o remoto, instrucciones del sistema y personalizadas, resultados de herramientas y cualquier referencia que a\u00f1adas expl\u00edcitamente al chat.<\/p>\n<p>La calidad de las respuestas <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/concepts\/context\" target=\"_blank\" rel=\"noopener noreferrer\">depende del contexto<\/a>, por lo que es fundamental proporcionar al modelo la informaci\u00f3n adecuada y relevante.<\/p>\n<figure style=\"width: 2520px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/context-diagram.png\" alt=\"Diagrama de la ventana de contexto\" width=\"2520\" height=\"1260\"><figcaption class=\"wp-caption-text\">Diagrama de la ventana de contexto (Fuente de la imagen: <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/concepts\/context\" target=\"_blank\" rel=\"noopener noreferrer\">VisualStudio.com<\/a>)<\/figcaption><\/figure>\n<p>El modelo no tiene memoria ilimitada. La <strong>ventana de contexto<\/strong> es la cantidad m\u00e1xima de datos \u2014medida en tokens (fragmentos de palabras o c\u00f3digo)\u2014 que un LLM puede procesar y \u00abtener en cuenta\u00bb a la vez durante un \u00fanico ciclo de solicitud y respuesta. En VS Code, puedes ver cu\u00e1ntos tokens hay disponibles en tu ventana de contexto haciendo clic en el icono de la esquina inferior derecha, junto a la ventana de chat.<\/p>\n<figure style=\"width: 664px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-contest-window.png\" alt=\"La ventana de contexto de Copilot en VS Code\" width=\"664\" height=\"742\"><figcaption class=\"wp-caption-text\">La ventana de contexto de Copilot en VS Code<\/figcaption><\/figure>\n<p>La ventana de contexto representa la memoria a corto plazo del modelo. Si se satura, el agente podr\u00eda devolver datos incorrectos o incoherentes. Un riesgo a\u00fan mayor es la <b>contaminaci\u00f3n del contexto<\/b>, que se produce cuando la ventana de contexto se llena de informaci\u00f3n irrelevante. En cualquiera de los dos casos \u2014ya sea por saturaci\u00f3n o por contaminaci\u00f3n del contexto\u2014, Copilot puede generar errores, alucinaciones o c\u00f3digo no optimizado.<\/p>\n<p>Para evitar pasar horas intentando conseguir un c\u00f3digo limpio y sin errores, es fundamental mantener una higiene estricta en el chat. Puedes hacerlo cerrando las pesta\u00f1as que no necesites realmente, utilizando referencias expl\u00edcitas a archivos para <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/chat\/copilot-chat-context\">a\u00f1adirlas al contexto<\/a>, compactando tu historial de chat con <code>\/compact<\/code> o, simplemente, abriendo una ventana de chat nueva para empezar de cero con un contexto limpio.<\/p>\n<h3>Instrucciones para el agente<\/h3>\n<p>Las instrucciones para el agente establecen las <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/customization\/custom-instructions\" target=\"_blank\" rel=\"noopener noreferrer\">reglas de comportamiento<\/a> que influyen directamente en c\u00f3mo el agente genera c\u00f3digo y gestiona diversas tareas de desarrollo. Esto garantiza que obtengas c\u00f3digo que se ajuste a los est\u00e1ndares de tu empresa, utilice exclusivamente bibliotecas autorizadas o mantenga totalmente seguros los datos estrat\u00e9gicos, como las claves API.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Para garantizar la seguridad, la informaci\u00f3n confidencial, como tus claves API de Kinsta, nunca debe escribirse directamente en estas instrucciones ni en el propio c\u00f3digo; en su lugar, pide a tu agente que declare las variables de entorno en un archivo <code>.env<\/code> y que las proteja con <code>.gitignore<\/code>.<\/p>\n<\/aside>\n\n<p>En lugar de incluir manualmente estas directivas en cada solicitud, puedes especificar tus instrucciones personalizadas en un archivo Markdown para asegurarte de que las respuestas se ajusten siempre a los requisitos de tu empresa y de tu proyecto. Si tienes varios archivos de instrucciones, VS Code los combina autom\u00e1ticamente y los a\u00f1ade al contexto del chat.<\/p>\n<p>Al proporcionar instrucciones precisas, Copilot no confundir\u00e1 los nombres de los par\u00e1metros en las solicitudes a la API y no cometer\u00e1 errores al procesar las respuestas de un servicio externo.<\/p>\n<p>Pero no te preocupes demasiado si esto te parece complicado. GitHub Copilot puede <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/customization\/custom-instructions#_create-an-instructions-file\" target=\"_blank\" rel=\"noopener noreferrer\">generar un archivo de instrucciones<\/a> por ti. Solo tienes que seguir los pasos que se describen en la documentaci\u00f3n oficial.<\/p>\n<figure style=\"width: 2028px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-agent-instructions.png\" alt=\"Generar un archivo de instrucciones para el agente en VS Code\" width=\"2028\" height=\"1114\"><figcaption class=\"wp-caption-text\">Generar un archivo de instrucciones para el agente en VS Code<\/figcaption><\/figure>\n<p>Ahora que ya hemos visto lo b\u00e1sico, en la siguiente secci\u00f3n aprender\u00e1s a programar una aplicaci\u00f3n de automatizaci\u00f3n de flujos de trabajo de WordPress basada en la API de Kinsta utilizando GitHub Copilot en VS Code. Es hora de arremangarse y ponerse manos a la obra.<\/p>\n<h2>Programar un flujo de trabajo de automatizaci\u00f3n de WordPress del mundo real<\/h2>\n<p>Al igual que con la programaci\u00f3n tradicional, hacer vibe coding en un proyecto avanzado como la automatizaci\u00f3n de flujos de trabajo en WordPress implica una secuencia de fases l\u00f3gicas a lo largo de todo el ciclo de vida del desarrollo de software.<\/p>\n<p>Por eso hemos desglosado el proceso de programaci\u00f3n con Vibe Coding de un proyecto de automatizaci\u00f3n de flujos de trabajo en WordPress en una serie de pasos l\u00f3gicos. Vamos a ver cada fase en detalle y a descubrir qu\u00e9 cambia con el enfoque de Vibe Coding:<br \/>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"6\" sub-toc=\"true\"><\/kinsta-auto-toc><\/p>\n<h3>Definici\u00f3n de reglas<\/h3>\n<p>En esta fase, tienes que definir las directrices generales que establecen los l\u00edmites dentro de los cuales operar\u00e1 el agente. Esto implica crear archivos de contexto que definan el stack tecnol\u00f3gico, las directrices de seguridad y los patrones de registro estructurados.<\/p>\n<p>Despu\u00e9s de crear una nueva carpeta de proyecto en VS Code, lo primero que tienes que hacer es abrir el chat de Copilot e iniciar una conversaci\u00f3n con el agente para definir el esquema del proyecto. En esta fase inicial, trabajar\u00e1s principalmente en el modo Preguntar (Ask) para determinar el lenguaje m\u00e1s adecuado para tu proyecto y dise\u00f1ar el conjunto de instrucciones para el agente.<\/p>\n<h4>Elige el lenguaje para el proyecto<\/h4>\n<p>Si a\u00fan no has decidido qu\u00e9 stack tecnol\u00f3gico vas a usar, lo primero que debes hacer es averiguar qu\u00e9 lenguaje es el m\u00e1s adecuado para tu proyecto. Para nuestro flujo de trabajo de automatizaci\u00f3n, le pedimos a Copilot que nos enumerara las ventajas y desventajas de Node.js frente a Python:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/ask-questions-copilot.png\" alt=\"Chat de Copilot en modo Preguntar\" width=\"1000\" height=\"452\"><figcaption class=\"wp-caption-text\">Preguntando a Copilot qu\u00e9 tecnolog\u00eda se adapta mejor a nuestro proyecto<\/figcaption><\/figure>\n<p>Copilot respondi\u00f3 con un desglose detallado de las ventajas y desventajas de ambos lenguajes y, finalmente, recomend\u00f3 Node.js:<\/p>\n<figure style=\"width: 1394px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-recommendation.png\" alt=\"Recomendaci\u00f3n de Copilot\" width=\"1394\" height=\"554\"><figcaption class=\"wp-caption-text\">Copilot recomend\u00f3 usar Node.js para crear un flujo de trabajo automatizado de WordPress<\/figcaption><\/figure>\n<h4>Dise\u00f1ar instrucciones para los agentes<\/h4>\n<p>A continuaci\u00f3n, le preguntamos a Copilot c\u00f3mo dise\u00f1ar correctamente las instrucciones personalizadas para los agentes con el fin de minimizar las alucinaciones y evitar la p\u00e9rdida de contexto:<\/p>\n<figure style=\"width: 1404px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/agent-instructions-copilot.png\" alt=\"Chat de Copilot en modo Preguntar\" width=\"1404\" height=\"304\"><figcaption class=\"wp-caption-text\">Pregunt\u00e1ndole a Copilot cu\u00e1l es la mejor forma de dar instrucciones al modelo<\/figcaption><\/figure>\n<p>Copilot recomend\u00f3 dividir nuestras instrucciones para el agente en varios archivos. Esto evitar\u00eda la contaminaci\u00f3n del contexto.<\/p>\n<figure style=\"width: 1290px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/hybrid-approach-agent-instructions-copilot.png\" alt=\"Respuesta de Copilot\" width=\"1290\" height=\"1144\"><figcaption class=\"wp-caption-text\">Copilot recomend\u00f3 un enfoque con varios archivos para las instrucciones del agente<\/figcaption><\/figure>\n<p>Una vez que entendimos bien la recomendaci\u00f3n de Copilot, pasamos a planificar la arquitectura de las instrucciones de nuestro agente.<\/p>\n<p>Cambiamos Copilot del <strong>modo<\/strong> <strong>Preguntar<\/strong>\u00a0al <strong>modo Plan<\/strong>, pidi\u00e9ndole que esbozara la estructura de archivos para nuestro sistema modular de instrucciones con archivos separados <code>.md<\/code>:<\/p>\n<figure style=\"width: 1402px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/plan-instructions-architecture-copilot.png\" alt=\"Instrucciones de planificaci\u00f3n arquitect\u00f3nica en el chat de Copilot\" width=\"1402\" height=\"542\"><figcaption class=\"wp-caption-text\">Planificando la arquitectura de las instrucciones en el chat de Copilot<\/figcaption><\/figure>\n<p>Copilot empez\u00f3 a trazar los pasos, dando un razonamiento claro mientras nos hac\u00eda una serie de preguntas para adaptar las reglas a la configuraci\u00f3n de nuestro proyecto.<\/p>\n<figure style=\"width: 1398px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/interaction-with-copilot.png\" alt=\"Interacci\u00f3n con Copilot\" width=\"1398\" height=\"428\"><figcaption class=\"wp-caption-text\">Consultando la documentaci\u00f3n de la API de Kinsta en el chat de Copilot<\/figcaption><\/figure>\n<p>Le pasamos a Copilot los siguientes enlaces:<\/p>\n<pre><code>https:\/\/api-docs.kinsta.com\/api-reference\/wordpress-sites\/get-list-of-company-sites\nhttps:\/\/api-docs.kinsta.com\/api-reference\/wordpress-sites\/get-site-by-id\nhttps:\/\/api-docs.kinsta.com\/api-reference\/wordpress-sites\/clone-existing-site<\/code><\/pre>\n<p>Copilot desglos\u00f3 las fases de ejecuci\u00f3n, explic\u00f3 los fundamentos t\u00e9cnicos de sus decisiones y nos pregunt\u00f3 si est\u00e1bamos listos para aplicar los cambios.<\/p>\n<p>Al aprobar el plan propuesto, el modo de Copilot cambia autom\u00e1ticamente de Plan a Agente (Agent). A partir de ah\u00ed, el agente de IA trabaja directamente en tu sistema de archivos local para crear los archivos de instrucciones del agente.<\/p>\n<p>La imagen de abajo muestra una vista previa del archivo \u00ab<code>copilot-instructions.md<\/code>\u00bb:<\/p>\n<figure style=\"width: 1754px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-instructions.png\" alt=\"Una vista previa del archivo copilot-instructions.md\" width=\"1754\" height=\"1374\"><figcaption class=\"wp-caption-text\">Una vista previa del archivo copilot-instructions.md<\/figcaption><\/figure>\n<h3>Desarrollo iterativo<\/h3>\n<p>Esta es la fase de creaci\u00f3n del c\u00f3digo. El agente de IA genera los archivos y scripts del proyecto, mientras que el desarrollador act\u00faa como arquitecto y director del proceso. En otras palabras, durante esta fase, le pedir\u00e1s a Copilot que cree la estructura y el c\u00f3digo de la aplicaci\u00f3n, aportar\u00e1s la informaci\u00f3n y los comentarios necesarios, evaluar\u00e1s las opciones disponibles y tomar\u00e1s decisiones estrat\u00e9gicas.<\/p>\n<p>El siguiente paso en nuestro proyecto de automatizaci\u00f3n del flujo de trabajo de WordPress es inicializar el proyecto de Node.js y definir la estructura de archivos. Volvimos al <strong>modo Plan<\/strong>\u00a0y le pedimos a Copilot que planificara los siguientes pasos:<\/p>\n<figure style=\"width: 1388px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/planning-initialization-copilot.png\" alt=\"Planificaci\u00f3n de la inicializaci\u00f3n del proyecto\" width=\"1388\" height=\"540\"><figcaption class=\"wp-caption-text\">Planificaci\u00f3n de la inicializaci\u00f3n del proyecto<\/figcaption><\/figure>\n<p>Copilot elabor\u00f3 un plan detallado, junto con informaci\u00f3n adicional sobre los archivos relevantes, las comprobaciones que hab\u00eda que realizar y las decisiones que hab\u00eda que tomar. Tras revisar detenidamente la respuesta, empezamos con la implementaci\u00f3n.<\/p>\n<figure style=\"width: 1358px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/initialization-steps-copilot.png\" alt=\"Pasos de inicializaci\u00f3n en el chat de Copilot\" width=\"1358\" height=\"842\"><figcaption class=\"wp-caption-text\">Pasos de inicializaci\u00f3n en el chat de Copilot<\/figcaption><\/figure>\n<p>Si te parece que hay mucho que hacer, no te preocupes demasiado. Le pedir\u00e1s a Copilot que realice todas las operaciones necesarias por ti.<\/p>\n<p>Mientras genera los archivos, es probable que Copilot te pida tu opini\u00f3n sobre puntos que necesiten aclaraci\u00f3n o tu permiso antes de continuar con operaciones espec\u00edficas. Revisa las solicitudes y act\u00faa en consecuencia.<\/p>\n<figure style=\"width: 1386px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/give-permission-copilot.png\" alt=\"Solicitud de autorizaci\u00f3n de Copilot\" width=\"1386\" height=\"456\"><figcaption class=\"wp-caption-text\">Solicitud de autorizaci\u00f3n de Copilot<\/figcaption><\/figure>\n<p>Una vez completada una operaci\u00f3n, Copilot te dir\u00e1 qu\u00e9 hacer a continuaci\u00f3n:<\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-next-steps.png\" alt=\"Copilot enumera los siguientes pasos\" width=\"1050\" height=\"228\"><figcaption class=\"wp-caption-text\">Copilot enumera los siguientes pasos<\/figcaption><\/figure>\n<p>La conversaci\u00f3n contin\u00faa con preguntas y respuestas hasta que Copilot haya creado todos los archivos y el c\u00f3digo para tu app. En la siguiente solicitud, le pedimos a Copilot, en <strong>modo Plan<\/strong>, que generara una plantilla para el archivo <code>.env<\/code> y que configurara los controles de seguridad adecuados (fail-fast).<\/p>\n<figure style=\"width: 1056px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/plan-env-copilot.png\" alt=\"Creaci\u00f3n de una plantilla de configuraci\u00f3n .env\" width=\"1056\" height=\"646\"><figcaption class=\"wp-caption-text\">Creaci\u00f3n de una plantilla de configuraci\u00f3n .env<\/figcaption><\/figure>\n<p>La siguiente imagen muestra el archivo <code>.env.example<\/code> generado por Copilot:<\/p>\n<figure style=\"width: 1208px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/env-example.png\" alt=\"El archivo .env.example que te da Copilot\" width=\"1208\" height=\"662\"><figcaption class=\"wp-caption-text\">El archivo .env.example que te da Copilot<\/figcaption><\/figure>\n<p>Despu\u00e9s le pedimos que generara un archivo <code>index.js<\/code> que englobara toda la l\u00f3gica de la app. Para una aplicaci\u00f3n m\u00e1s avanzada, habr\u00eda sido mejor dividir el script en varios archivos; pero para esta aplicaci\u00f3n, preferimos mantener toda la l\u00f3gica en un solo script.<\/p>\n<figure style=\"width: 970px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/index-js-prompt-copilot.png\" alt=\"Pidiendo a Copilot que creara un archivo index.js\" width=\"970\" height=\"356\"><figcaption class=\"wp-caption-text\">Pidiendo a Copilot que creara un archivo index.js<\/figcaption><\/figure>\n<p>Es hora de ejecutar nuestro script. Antes de empezar a clonar el sitio, creamos un archivo <code>.env<\/code> basado en <code>.env.example<\/code> y sustituimos los marcadores de posici\u00f3n por los valores reales de <code>KINSTA_API_KEY<\/code>, <code>KINSTA_COMPANY_ID<\/code> y <code>SOURCE_ENVIRONMENT_ID<\/code>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Cuando trabajes con datos confidenciales, como tus claves de API, debes comprobar siempre que la l\u00ednea <code>.env<\/code> est\u00e9 incluida en el archivo <code>.gitignore<\/code> de tu proyecto.<\/p>\n<\/aside>\n\n<p>Cuando hayas terminado con el script y las variables de entorno, abre la terminal de VS Code y escribe <code>npm start<\/code>.<\/p>\n<p>Si todo funciona como se espera, ver\u00e1s aparecer un nuevo sitio con un nombre gen\u00e9rico en MyKinsta. Si el sistema te muestra un error, solo tienes que copiar el mensaje de error de la terminal y pegarlo en el chat de Copilot para que el agente pueda evaluarlo, identificar la causa y proponer soluciones adecuadas. Es posible que te pida m\u00e1s informaci\u00f3n.<\/p>\n<p>Llegados a este punto, quiz\u00e1 quieras a\u00f1adir mejoras o nuevas funcionalidades a tu app. En nuestro caso, el nombre gen\u00e9rico del sitio que generaba el script no nos convenc\u00eda. As\u00ed que pasamos a la segunda iteraci\u00f3n.<\/p>\n<h3>Ajustar tu aplicaci\u00f3n<\/h3>\n<p>Tras alcanzar nuestro primer hito \u2014clonar autom\u00e1ticamente un sitio de WordPress alojado en Kinsta\u2014, le pedimos a Copilot que a\u00f1adiera una funcionalidad que permitiera a los usuarios especificar un nombre de sitio personalizado al ejecutar la tarea.<\/p>\n<p>El endpoint <code>\/sites\/clone<\/code> de la API de Kinsta requiere tres par\u00e1metros: <code>company<\/code>, <code>source_env_id<\/code> y <code>display_name<\/code>. Mientras que los dos primeros par\u00e1metros est\u00e1n fijados como variables de entorno en nuestro archivo <code>.env<\/code>, el par\u00e1metro <code>display_name<\/code> lo genera autom\u00e1ticamente el script.<\/p>\n<figure style=\"width: 1510px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/clone-parameters-kinsta-api.png\" alt=\"Entorno de pruebas de la API de Kinsta\" width=\"1510\" height=\"1062\"><figcaption class=\"wp-caption-text\">Probando una solicitud de clonaci\u00f3n de un sitio en el entorno de pruebas de la API de Kinsta<\/figcaption><\/figure>\n<p>Ofrecer a los usuarios de la aplicaci\u00f3n una variable de entorno alternativa les habr\u00eda dado m\u00e1s flexibilidad, al tiempo que les permit\u00eda pasar un par\u00e1metro adicional directamente mediante el comando <code>npm run<\/code>.<\/p>\n<p>Le pasamos esta solicitud a Copilot. El agente implement\u00f3 los cambios necesarios modificando tanto <code>index.js<\/code> como <code>.env<\/code> y nos dio la siguiente respuesta:<\/p>\n<figure style=\"width: 954px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/commands-to-use-copilot.png\" alt=\"Lista de comandos del chat de Copilot\" width=\"954\" height=\"430\"><figcaption class=\"wp-caption-text\">Copilot ofrece una lista de los comandos disponibles para clonar un sitio web<\/figcaption><\/figure>\n<p>Por \u00faltimo, hemos puesto a prueba nuestra aplicaci\u00f3n en diferentes condiciones siguiendo las instrucciones de Copilot:<\/p>\n<ul>\n<li>Ejecutamos <code>npm run<\/code> sin par\u00e1metros.<\/li>\n<li>Establecimos un valor por defecto para la constante <code>SITE_NAME<\/code> en el archivo <code>.env<\/code> y volvimos a ejecutar <code>npm run<\/code>.<\/li>\n<li>Hemos a\u00f1adido manualmente el par\u00e1metro <code>SITE_NAME=nombre-de-tu-sitio<\/code> al comando <code>npm run<\/code>.<\/li>\n<li>Ejecutamos el script utilizando tanto la sintaxis <code>npm start -- --site-name tu sitio<\/code> como la de <code>npm start -- --site-name=tu sitio<\/code>.<\/li>\n<\/ul>\n<figure style=\"width: 2070px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/cloning-website-mykinsta.png\" alt=\"Clonar un sitio web de WordPress en MyKinsta\" width=\"2070\" height=\"998\"><figcaption class=\"wp-caption-text\">Clonar un sitio web de WordPress en MyKinsta<\/figcaption><\/figure>\n<p>Impulsados por este ciclo de mejora continua, tambi\u00e9n hemos integrado una funcionalidad para normalizar los datos introducidos manualmente y convertirlos en un nombre visible, sin dejar de aceptar sin problemas valores tipo slug como <code>my-awesome-wordpress-website<\/code>.<\/p>\n<p>Por eso, se admiten los dos siguientes comandos:<\/p>\n<pre><code>npm start -- --site-name=\"My Awesome WordPress Website\"\nnpm start -- --site-name=my-awesome-wordpress-website<\/code><\/pre>\n<p>Si has llegado hasta aqu\u00ed, enhorabuena, acabas de programar tu primera aplicaci\u00f3n de automatizaci\u00f3n de flujos de trabajo. Ahora comprueba los plugins, los temas y la visualizaci\u00f3n en la interfaz de usuario. Si se te ocurre alguna caracter\u00edstica adicional para mejorar tu script, simplemente sigue desarrollando siguiendo el enfoque iterativo descrito anteriormente.<\/p>\n<h3>Comprobaciones de seguridad de fallo r\u00e1pido<\/h3>\n<p>Para una aplicaci\u00f3n cr\u00edtica que utiliza datos confidenciales, como tus claves API, es fundamental que el script realice comprobaciones rigurosas en puntos clave de la ejecuci\u00f3n y, en caso de fallo, devuelva mensajes claros sobre el tipo de error y detenga la ejecuci\u00f3n de inmediato (mira el <a href=\"#iterative-development\">mensaje anterior<\/a>).<\/p>\n<p>GitHub Copilot implement\u00f3 la detecci\u00f3n r\u00e1pida de fallos en tres niveles cr\u00edticos:<\/p>\n<p><strong>Validaci\u00f3n del entorno:<\/strong> en este nivel, el script comprueba que las variables de entorno existan antes de realizar cualquier llamada a la API o ejecutar cualquier tarea. La siguiente imagen muestra la explicaci\u00f3n de Copilot sobre esta comprobaci\u00f3n en el chat:<\/p>\n<figure style=\"width: 1394px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/environment-validation-copilot.png\" alt=\"Validaci\u00f3n del entorno\" width=\"1394\" height=\"700\"><figcaption class=\"wp-caption-text\">Validaci\u00f3n del entorno<\/figcaption><\/figure>\n<p>Obviamente, tu c\u00f3digo puede ser diferente al que se muestra en la imagen, pero lo que importa aqu\u00ed es el enfoque.<\/p>\n<p><strong>Validaci\u00f3n de la respuesta de la API:<\/strong> Justo despu\u00e9s de que empiece la clonaci\u00f3n, el script comprueba de inmediato si hay un ID de operaci\u00f3n. Si el script recibe un ID no v\u00e1lido, detiene la ejecuci\u00f3n al instante, evitando as\u00ed tener que seguir intent\u00e1ndolo durante media hora. A continuaci\u00f3n tienes la explicaci\u00f3n que da Copilot:<\/p>\n<figure style=\"width: 1388px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/api-response-validation.png\" alt=\"Validaci\u00f3n de la respuesta de la API\" width=\"1388\" height=\"426\"><figcaption class=\"wp-caption-text\">Validaci\u00f3n de la respuesta de la API<\/figcaption><\/figure>\n<p><b>Propagaci\u00f3n controlada de errores:<\/b> Cualquier error que se produzca en cualquier punto de la cadena (validaci\u00f3n, API, sondeo) se transmite hasta el nivel superior, queda guardado en los logs y detiene de forma ordenada la ejecuci\u00f3n del script.<\/p>\n<figure style=\"width: 1392px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/graceful-error-propagation.png\" alt=\"Propagaci\u00f3n controlada de errores\" width=\"1392\" height=\"488\"><figcaption class=\"wp-caption-text\">Propagaci\u00f3n controlada de errores<\/figcaption><\/figure>\n<p>El enfoque fail-fast (fallo r\u00e1pido) ofrece varias ventajas, entre ellas:<\/p>\n<ul>\n<li>No se desperdician llamadas a la API<\/li>\n<li>Mensajes de error claros<\/li>\n<li>Sabes al instante qu\u00e9 es lo que falla<\/li>\n<\/ul>\n<p>Para las agencias de WordPress que necesiten escalar una aplicaci\u00f3n como esta y clonar docenas de sitios a gran escala, este enfoque permite detectar al instante los fallos en los scripts a cualquier nivel, evitando que se conviertan en una cascada de operaciones fallidas.<\/p>\n<p>Sin embargo, si tu aplicaci\u00f3n est\u00e1 pensada para escalar, te conviene implementar un sistema de pruebas unitarias.<\/p>\n<h3>Pruebas unitarias con Jest<\/h3>\n<p>Durante la fase de desarrollo, Copilot ejecut\u00f3 de forma aut\u00f3noma varias pruebas locales, entre ellas:<\/p>\n<ul>\n<li><code>npm run check<\/code> \u2014 que se ejecutan despu\u00e9s de cada edici\u00f3n, para detectar errores de sintaxis.<\/li>\n<li><code>npm start<\/code> \u2014 que se ejecutan varias veces para observar las respuestas de la API e identificar errores.<\/li>\n<li><code>npm start 2&gt;&1 | head -30<\/code> \u2014 que se ejecutan para capturar y leer la salida estructurada de los registros en tiempo real.<\/li>\n<\/ul>\n<p>Aunque estas pruebas ayudaron a Copilot a detectar bastantes errores, son bastante b\u00e1sicas y, en realidad, solo sirven para una aplicaci\u00f3n sencilla. Adem\u00e1s, tienen un gran inconveniente: cada vez que ejecutas <code>npm start<\/code>, se crea una copia de tu sitio. Esto puede hacer que alcances r\u00e1pidamente el l\u00edmite de capacidad de tu plan, como puedes ver en la imagen de abajo:<\/p>\n<figure style=\"width: 1214px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/max-install-count-error.png\" alt=\"Has alcanzado tu n\u00famero m\u00e1ximo de instalaciones\" width=\"1214\" height=\"948\"><figcaption class=\"wp-caption-text\">Has alcanzado tu n\u00famero m\u00e1ximo de instalaciones<\/figcaption><\/figure>\n<p>Adem\u00e1s, estas pruebas no se pueden ejecutar en un proceso de CI\/CD sin exponer tus credenciales.<\/p>\n<p>Para que tu aplicaci\u00f3n sea realmente escalable, es fundamental que utilices un framework de pruebas unitarias s\u00f3lido como <a href=\"https:\/\/jestjs.io\/\">Jest<\/a>.<\/p>\n<p>En lugar de saturar los servidores de Kinsta con solicitudes reales cada vez, Jest te permite interceptar y simular respuestas de API (mocking). Esto te permite probar el comportamiento de tu software de forma totalmente aislada.<\/p>\n<p>Adem\u00e1s, como las llamadas a la API son simuladas, Jest te permite ejecutar todo tu conjunto de pruebas dentro de procesos de automatizaci\u00f3n como GitHub Actions sin necesidad de tocar tus credenciales de producci\u00f3n.<\/p>\n<p>Para poner en marcha Jest en tu proyecto de automatizaci\u00f3n, puedes pedirle a Copilot instrucciones paso a paso o dejar que \u00e9l se encargue del trabajo duro por ti.<\/p>\n<figure style=\"width: 1454px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/how-to-implement-jest-copilot.png\" alt=\"Copilot te explica c\u00f3mo implementar Jest en tu proyecto\" width=\"1454\" height=\"1114\"><figcaption class=\"wp-caption-text\">Copilot te explica c\u00f3mo implementar Jest en tu proyecto<\/figcaption><\/figure>\n<figure style=\"width: 1434px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/install-jest-copilot.png\" alt=\"Instalaci\u00f3n de Jest con Copilot\" width=\"1434\" height=\"682\"><figcaption class=\"wp-caption-text\">Instalaci\u00f3n de Jest con Copilot<\/figcaption><\/figure>\n<p>Una vez configurado Jest, puedes ejecutar todas tus pruebas de una sola vez con <code>npm test<\/code>. Tambi\u00e9n puedes seleccionar un archivo concreto o ejecutar las pruebas en modo Watch:<\/p>\n<figure style=\"width: 1446px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/example-tests.png\" alt=\"Ejemplos de pruebas proporcionados por Copilot\" width=\"1446\" height=\"720\"><figcaption class=\"wp-caption-text\">Ejemplos de pruebas proporcionados por Copilot<\/figcaption><\/figure>\n<p>Tambi\u00e9n vale la pena destacar que Copilot incluye comandos de chat integrados que te ayudan con las pruebas unitarias con Jest:<\/p>\n<ul>\n<li><code>\/tests<\/code> genera un archivo de pruebas para el archivo que tengas abierto en ese momento. Cuando escribas <code>\/tests<\/code> en el chat, Copilot generar\u00e1 pruebas de Jest para las funciones que encuentre en ese archivo.<\/li>\n<li><code>@workspace \/tests<\/code> hace lo mismo que el comando anterior, pero con todo el contexto del proyecto.<\/li>\n<\/ul>\n<p>Mientras chateas con Copilot en <strong>modo Preguntar (Ask)<\/strong>, recibir\u00e1s recomendaciones y consejos que te guiar\u00e1n a lo largo de tus pruebas unitarias:<\/p>\n<figure style=\"width: 1254px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/test-recommendation-copilot.png\" alt=\"Prueba recomendada por Copilot:\" width=\"1254\" height=\"382\"><figcaption class=\"wp-caption-text\">Prueba recomendada por Copilot:<\/figcaption><\/figure>\n<p>Abre un nuevo chat para esta prueba y aseg\u00farate de que est\u00e1 configurado en <code>Agent mode<\/code>. A continuaci\u00f3n, pega el comando que te ha proporcionado Copilot directamente en el chat:<\/p>\n<pre><code>@workspace \/tests for pollUntilComplete and KinstaClient using fetch mocks<\/code><\/pre>\n<p>Pulsa Intro y ver\u00e1s c\u00f3mo se van mostrando en el chat el razonamiento de Copilot y los pasos a seguir. Te pedir\u00e1 que confirmes la ejecuci\u00f3n del comando cada vez que ejecute una prueba, hasta que se hayan solucionado todos y cada uno de los errores.<\/p>\n<figure style=\"width: 1266px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-running-tests.png\" alt=\"Ejecutar pruebas en Copilot\" width=\"1266\" height=\"968\"><figcaption class=\"wp-caption-text\">Ejecutar pruebas en Copilot<\/figcaption><\/figure>\n<h3>Documentaci\u00f3n y despliegue<\/h3>\n<p>Un c\u00f3digo bien documentado es fundamental para que el c\u00f3digo sea f\u00e1cil de mantener. Por eso le pedimos a Copilot que generara un archivo <code>README.md<\/code> en la ra\u00edz del proyecto. Le pedimos que describiera la aplicaci\u00f3n, especificara los requisitos, explicara c\u00f3mo configurar el archivo <code>.env<\/code>, resumiera las diferentes formas de iniciar la aplicaci\u00f3n y mostrara c\u00f3mo ejecutar las pruebas.<\/p>\n<p>Iniciamos un nuevo chat en <strong>modo Ask (Preguntar)<\/strong>, a\u00f1adimos los archivos<code>index.js<\/code> y\u00a0<code>package.json<\/code> al contexto (ver el <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/chat\/copilot-chat-context#_hashmentions\">atajo <code>#filename<\/code><\/a> de Copilot) y le pasamos el siguiente prompt a Copilot:<\/p>\n<figure style=\"width: 1732px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/readme-prompt-copilot.png\" alt=\"Chat de Copilot\" width=\"1732\" height=\"1246\"><figcaption class=\"wp-caption-text\">Le pedimos a Copilot que creara un archivo README.md en modo Preguntar<\/figcaption><\/figure>\n<p>Copilot nos mostr\u00f3 una vista previa del archivo <code>README.md<\/code>. Lo revisamos con atenci\u00f3n y cambiamos al <strong>modo Agent (Agente)<\/strong>\u00a0para crear el archivo.<\/p>\n<figure style=\"width: 1748px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/readme-file.png\" alt=\"El archivo README.md generado por Copilot en VS Code\" width=\"1748\" height=\"1416\"><figcaption class=\"wp-caption-text\">El archivo README.md generado por Copilot en VS Code<\/figcaption><\/figure>\n<p>El siguiente paso fue documentar el c\u00f3digo en s\u00ed. Con el archivo <code>index.js<\/code> abierto, seleccionamos todo el c\u00f3digo para a\u00f1adirlo al contexto del chat y enviamos la siguiente indicaci\u00f3n en <strong>modo Ask (Preguntar)<\/strong>:<\/p>\n<figure style=\"width: 1732px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/inline-doc-copilot.png\" alt=\"Una solicitud detallada para crear documentaci\u00f3n en l\u00ednea\" width=\"1732\" height=\"792\"><figcaption class=\"wp-caption-text\">Una solicitud detallada para crear documentaci\u00f3n en l\u00ednea<\/figcaption><\/figure>\n<p>Copilot ha actualizado el archivo <code>index.js<\/code> con documentaci\u00f3n inline sin tocar el c\u00f3digo.<\/p>\n<figure style=\"width: 1702px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/jsdoc-block.png\" alt=\"El bloque JSDoc para la funci\u00f3n pollUntilComplete\" width=\"1702\" height=\"708\"><figcaption class=\"wp-caption-text\">El bloque JSDoc para la funci\u00f3n pollUntilComplete<\/figcaption><\/figure>\n<p>De nuevo, como est\u00e1bamos en <strong>modo Preguntar (Ask)<\/strong>, Copilot no ten\u00eda permiso para modificar nuestros archivos. As\u00ed que cambiamos al <b>modo Agente (Agent)<\/b> y le pedimos a Copilot que actualizara el archivo <code>index.js<\/code> con los cambios propuestos.<\/p>\n<p>El \u00faltimo paso es el despliegue de la aplicaci\u00f3n. Aqu\u00ed existen dos opciones principales:<\/p>\n<ul>\n<li>Mantener la aplicaci\u00f3n en un ordenador local. Esta soluci\u00f3n es ideal cuando decides activar la creaci\u00f3n del sitio manualmente, por ejemplo, justo despu\u00e9s de que un nuevo cliente firme un contrato.<\/li>\n<li>Integrar el script en un <a href=\"https:\/\/kinsta.com\/es\/blog\/como-configurar-pipeline-ci-cd\/\">proceso de CI\/CD<\/a> subiendo el c\u00f3digo a un repositorio de GitHub. La creaci\u00f3n del sitio se puede activar entonces de forma manual o autom\u00e1tica en respuesta a un evento espec\u00edfico. Esta soluci\u00f3n es perfecta si trabajas con flujos de trabajo m\u00e1s estructurados y escalables.<\/li>\n<\/ul>\n<p>Si te decantas por la configuraci\u00f3n en un ordenador local o en un servidor de utilidades, ya lo tienes todo listo. Si eliges la v\u00eda m\u00e1s estructurada del pipeline de CI\/CD, puedes pedirle a Copilot que te ayude a redactar el prompt perfecto.<\/p>\n<figure style=\"width: 1854px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/deploy-prompt-copilot.png\" alt=\"Prompt de despliegue generado por Copilot\" width=\"1854\" height=\"1090\"><figcaption class=\"wp-caption-text\">Prompt de despliegue generado por Copilot<\/figcaption><\/figure>\n<p>Nuestra aplicaci\u00f3n est\u00e1 lista. Ahora, incorporar un nuevo proyecto de WordPress es tan sencillo como ejecutar el siguiente comando:<\/p>\n<pre><code>npm start -- --site-name=\"My Awesome WordPress Website\"<\/code><\/pre>\n<h2>\u00abVibe Coding\u00bb y Automatizaci\u00f3n: El futuro de las agencias de WordPress innovadoras<\/h2>\n<p>Vibe Coding no es solo una forma sencilla de escribir c\u00f3digo. Es, m\u00e1s bien, una nueva metodolog\u00eda de desarrollo que redefine por completo el papel del desarrollador: ya no es un programador en el sentido tradicional, sino el director de un proceso iterativo que abarca la exploraci\u00f3n, la planificaci\u00f3n, la programaci\u00f3n, la mejora, las pruebas, la depuraci\u00f3n, la documentaci\u00f3n y el despliegue.<\/p>\n<p>Si este es el futuro del desarrollo de software y la escalabilidad de las agencias, entonces asociarse con una plataforma de alojamiento con visi\u00f3n de futuro es fundamental para seguir siendo competitivos en la era de la IA. Al aprovechar el potencial de la API de Kinsta y coordinar los agentes de IA con reglas claras, pruebas rigurosas y una documentaci\u00f3n s\u00f3lida, tu agencia dejar\u00e1 de estar constantemente <a href=\"https:\/\/kinsta.com\/es\/blog\/reducir-carga-de-mantenimiento-y-perdida-de-clientes\/\">apagando incendios<\/a> y empezar\u00e1 a trabajar de una forma m\u00e1s eficiente, predecible y escalable.<\/p>\n<p>\u00bfEst\u00e1s listo para mejorar tus flujos de trabajo de WordPress y reducir dr\u00e1sticamente tus tiempos de desarrollo? Echa un vistazo a <a href=\"https:\/\/kinsta.com\/es\/precios\/\">nuestros planes<\/a> o <a href=\"https:\/\/kinsta.com\/es\/contactar-con-ventas\/\">ponte en contacto con nuestro equipo de ventas<\/a> y empieza a crear tu proceso de automatizaci\u00f3n hoy mismo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La clave para conseguir una ventaja competitiva para las agencias de WordPress modernas ya no est\u00e1 en escribir un c\u00f3digo excelente. Las agencias orientadas al crecimiento &#8230;<\/p>\n","protected":false},"author":36,"featured_media":83770,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1391,1270],"class_list":["post-83769","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-agencia","topic-api"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Crea flujos de trabajo reales en WordPress usando la API de Kinsta<\/title>\n<meta name=\"description\" content=\"Flujos de trabajo Vibe Coding en WordPress: Descubre c\u00f3mo usar GitHub Copilot para automatizar la creaci\u00f3n de sitios con la API de Kinsta.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Haciendo &quot;vibe coding&quot; de flujos de trabajo reales en WordPress usando la API de Kinsta\" \/>\n<meta property=\"og:description\" content=\"Flujos de trabajo Vibe Coding en WordPress: Descubre c\u00f3mo usar GitHub Copilot para automatizar la creaci\u00f3n de sitios con la API de Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-06T10:54:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-09T13:18:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Flujos de trabajo Vibe Coding en WordPress: Descubre c\u00f3mo usar GitHub Copilot para automatizar la creaci\u00f3n de sitios con la API de Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"28 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Haciendo \u00abvibe coding\u00bb de flujos de trabajo reales en WordPress usando la API de Kinsta\",\"datePublished\":\"2026-07-06T10:54:13+00:00\",\"dateModified\":\"2026-07-09T13:18:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/\"},\"wordCount\":5457,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png\",\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/\",\"name\":\"Crea flujos de trabajo reales en WordPress usando la API de Kinsta\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png\",\"datePublished\":\"2026-07-06T10:54:13+00:00\",\"dateModified\":\"2026-07-09T13:18:37+00:00\",\"description\":\"Flujos de trabajo Vibe Coding en WordPress: Descubre c\u00f3mo usar GitHub Copilot para automatizar la creaci\u00f3n de sitios con la API de Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Agencia\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/agencia\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Haciendo &#8220;vibe coding&#8221; de flujos de trabajo reales en WordPress usando la API de Kinsta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Crea flujos de trabajo reales en WordPress usando la API de Kinsta","description":"Flujos de trabajo Vibe Coding en WordPress: Descubre c\u00f3mo usar GitHub Copilot para automatizar la creaci\u00f3n de sitios con la API de Kinsta.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"Haciendo \"vibe coding\" de flujos de trabajo reales en WordPress usando la API de Kinsta","og_description":"Flujos de trabajo Vibe Coding en WordPress: Descubre c\u00f3mo usar GitHub Copilot para automatizar la creaci\u00f3n de sitios con la API de Kinsta.","og_url":"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2026-07-06T10:54:13+00:00","article_modified_time":"2026-07-09T13:18:37+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Flujos de trabajo Vibe Coding en WordPress: Descubre c\u00f3mo usar GitHub Copilot para automatizar la creaci\u00f3n de sitios con la API de Kinsta.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Carlo Daniele","Tiempo de lectura":"28 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Haciendo \u00abvibe coding\u00bb de flujos de trabajo reales en WordPress usando la API de Kinsta","datePublished":"2026-07-06T10:54:13+00:00","dateModified":"2026-07-09T13:18:37+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/"},"wordCount":5457,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png","inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/","url":"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/","name":"Crea flujos de trabajo reales en WordPress usando la API de Kinsta","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png","datePublished":"2026-07-06T10:54:13+00:00","dateModified":"2026-07-09T13:18:37+00:00","description":"Flujos de trabajo Vibe Coding en WordPress: Descubre c\u00f3mo usar GitHub Copilot para automatizar la creaci\u00f3n de sitios con la API de Kinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/vibe-coding-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Agencia","item":"https:\/\/kinsta.com\/es\/secciones\/agencia\/"},{"@type":"ListItem","position":3,"name":"Haciendo &#8220;vibe coding&#8221; de flujos de trabajo reales en WordPress usando la API de Kinsta"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/83769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=83769"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/83769\/revisions"}],"predecessor-version":[{"id":83807,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/83769\/revisions\/83807"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/83769\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/83769\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/83769\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/83769\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/83769\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/83769\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/83769\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/83770"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=83769"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=83769"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=83769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}