CrocoBuilder + IA: AI Assistant, MCP y AI Skills en WordPress (guía con cupón)
Pedirle a una IA que te genere una página de WordPress suele acabar en un bloque de código que luego tienes que pegar, ajustar y mantener a mano. CrocoBuilder, el constructor de Crocoblock, plantea otra cosa: la IA trabaja con los mismos componentes, estilos y variables que usas tú, y tú revisas el resultado. En esta guía verás qué es, cómo conectar un proveedor de IA, cómo crear un componente y una página con el AI Assistant, cómo se conecta un agente externo por MCP, qué dice el vídeo de las AI Skills y cuánto cuesta, con un cupón del 10 %.
En la academia tienes el Curso de WordPress con IA, y en el blog una guía de MCP para WordPress. Si ya conoces MCP, esta guía va directa a cómo lo aplica CrocoBuilder.
Qué es CrocoBuilder
CrocoBuilder es un constructor de WordPress de Crocoblock que su fabricante define como «AI-native»: un constructor frontend pensado para desarrolladores, agencias y creadores técnicos que quieren controlar el HTML, el CSS y los componentes. Según el fabricante, cada elemento del editor se corresponde con un único nodo del DOM, sin contenedores ocultos (lo que llaman Atomic DOM), y las clases, variables y estilos se gestionan en una sola interfaz.
Los componentes se construyen con HTML, CSS y JS, con propiedades editables, y su código se puede tocar a mano: según Crocoblock, las ediciones manuales no se pisan con actualizaciones posteriores de la IA. Es un producto independiente de Elementor, y no tiene versión gratuita. Si buscas el producto histórico de Crocoblock para Elementor, lo tienes en nuestra guía de Crocoblock para Elementor: es otro enfoque.
La idea que repite el vídeo es «la IA genera y tú controlas»: puedes pedir cambios con instrucciones, y también abrir el código o el panel visual y retocar lo que ha hecho.
Las tres piezas: AI Assistant, MCP y AI Skills
| Pieza | Qué es | Dónde se usa |
|---|---|---|
| AI Assistant | Chat con IA integrado en el propio constructor, para crear y modificar componentes y páginas con lenguaje natural. | Dentro de CrocoBuilder, en el editor. |
| MCP | El protocolo que permite a un agente externo (Claude, Codex, Cursor, GitHub Copilot…) leer y modificar tu proyecto. | Desde la herramienta del agente, por ejemplo VS Code. |
| AI Skills | Según el vídeo, instrucciones y conocimiento que enseñan al agente cómo se trabaja correctamente con CrocoBuilder. | Junto al agente que conectas por MCP. |
En el vídeo se resume así: las AI Skills aportan conocimiento y contexto, y MCP aporta la conexión y el acceso. En la web oficial de Crocoblock, a 27 de octubre de 2026, he podido confirmar el AI Assistant y la conexión MCP, pero no he encontrado una página dedicada a las «AI Skills»; por eso esa parte va atribuida al vídeo. Sí es habitual en las configuraciones MCP añadir un fichero de «skills» para el agente, y el propio blog de Crocoblock lo menciona en términos generales.
Paso 1: conecta un proveedor de IA
Abre un editor con CrocoBuilder
En Páginas, pasa el ratón sobre una página y pulsa Edit with Croco. En la barra superior verás los botones de IA y de código.
Instala un conector
Al pulsar el botón de IA, el asistente te pide un proveedor. Pulsa Open Connectors (también está en Ajustes → Conectores), instala el de OpenAI y pega tu clave de API. Crocoblock indica que el asistente puede conectarse a OpenAI o a Anthropic; en el vídeo se usa OpenAI.
Elige el modelo
Al recargar, el editor muestra el proveedor conectado y puedes seleccionar entre los modelos disponibles.
La IA no viene incluida: usas tu propia clave del proveedor y el coste lo marca el proveedor, no CrocoBuilder. En el vídeo se crea una clave que caduca a los 30 días; es una buena costumbre para pruebas. No compartas la clave ni la dejes en capturas.
Paso 2: crea un componente con el AI Assistant
Abre el Component Builder
En Tools → Component Builder pulsa para añadir un componente HTML/CSS nuevo y guárdalo con Crear componente.
Escribe el prompt
En el vídeo se pide una tarjeta de servicio. Se recomienda escribir los prompts en inglés porque la IA los entiende mejor, aunque funcionan también en español. La IA genera el HTML, el CSS y las propiedades editables (por ejemplo icono, título, descripción, texto y URL del botón o color de acento).
Refina con prompts sucesivos
No hace falta empezar de cero: pides «hazla más moderna y minimalista» o «añade una animación al pasar el ratón» y la IA modifica el componente existente.
Revisa el código en modo Dev
Cambia de la vista de IA a Dev y verás las propiedades, la plantilla HTML y el CSS del componente. Puedes editar cualquier valor a mano (en el vídeo, un tamaño de 22 a 24) y guardar. El componente queda en Todos los componentes, listo para reutilizarlo.
Paso 3: genera y modifica una página entera
Con el mismo asistente puedes montar una página. En el vídeo se pide una landing para una agencia de marketing digital: la IA primero planifica la composición y luego la construye, con vista previa a la derecha. Terminó con cuatro secciones y en poco tiempo.
Lo interesante viene después, porque el proceso no acaba al generar la página:
- Reutiliza lo que ya tienes. Puedes pedirle que use los componentes de botón existentes en todos los botones, o que cree una sección de tres columnas con el componente que creaste antes.
- Respeta el sistema de diseño. Según el fabricante, el asistente lee tus variables y clases antes de generar. En el vídeo se explica que, si cambias una variable de color, lo que depende de ella se actualiza de forma coherente.
- Se edita a mano. Puedes arrastrar componentes desde el panel de widgets, cambiar un título desde las propiedades o la tipografía desde los estilos, igual que en cualquier otro contenido del constructor.
En el vídeo, la página generada se veía ajustada al ancho por defecto. Se arregla en el icono de configuración, en Template: elige Full width (también hay Canvas y Default) y guarda.
Paso 4: conecta un agente externo por MCP
Hasta aquí la IA trabaja dentro del constructor. Con MCP (Model Context Protocol) un agente externo puede interactuar con tu proyecto de WordPress. En la web oficial, Crocoblock lo presenta como una conexión para agentes como Claude o Codex, y en su página de MCP muestra también Gemini, Cursor y Windsurf; la de la IA añade VS Code con GitHub Copilot Agent. Según su FAQ, la funcionalidad MCP está incluida en la suscripción. Si quieres entender MCP desde cero, ya lo tienes explicado en MCP para WordPress.
Activa el servidor MCP
En el escritorio de WordPress ve a CrocoBuilder → Dashboard, entra en la sección de IA y MCP y pulsa Enable MCP Server. Se abren las instrucciones para conectar tu cliente (Codex, Claude Code, VS Code…).
Configura el cliente
En el vídeo se usa VS Code: con Ctrl+Shift+P abres la configuración MCP del usuario, pegas el fragmento que te da CrocoBuilder, sustituyes el valor por tu token, inicias el servidor desde la lista de servidores MCP y listo. Copia las instrucciones de tu propio panel, que son las vigentes.
Prueba primero con lecturas
Pide al agente que liste los componentes disponibles y que describa uno sin cambiar nada. Si ve tu componente, la conexión funciona.
Pide cambios con confirmación
En el vídeo se pide cambiar solo el título de un componente y que el agente muestre qué va a modificar y espere confirmación. Tras aceptar, el cambio aparece en CrocoBuilder.
El token da acceso a tu proyecto: trátalo como una contraseña y no lo publiques. Antes de dejar que un agente modifique nada, haz una copia de seguridad. Crocoblock indica que los cambios de la IA pasan por una revisión previa (dry-run) antes de aplicarse, y en el vídeo el agente pide confirmación; mantén esa confirmación activada.
Qué aportan las AI Skills
Un modelo de IA, por sí solo, no conoce necesariamente cómo está organizado CrocoBuilder. Según el vídeo, las AI Skills le dan ese contexto: cómo crear y modificar componentes, trabajar con el sistema de diseño, construir páginas y seguir las buenas prácticas del constructor.
La demostración del vídeo muestra el efecto. Al pedir una nueva tarjeta de servicio «siguiendo el sistema de diseño existente», el agente detecta que ya existe el componente Modern Service Card, entiende que puede reutilizarlo y pregunta por los datos que faltan. Con el título, la descripción y el botón, añade una cuarta instancia a la página de inicio sin tocar el original.
Ejemplo completo: una sección de servicios
La demostración final del vídeo encadena todo lo anterior y sirve de plantilla para tus propios encargos:
Pide un análisis antes de construir
Describe la sección (título «Nuestros servicios», intro y tres tarjetas con título, descripción y botón) y añade: «antes de hacer cualquier cambio, analiza el proyecto y dime qué componentes y patrones puedo reutilizar».
Resuelve las dudas del agente
El agente avisa de que la portada ya tenía dos secciones de servicios y pregunta si la nueva sustituye o se añade. Tú decides.
Reutiliza el componente y revisa
Indícale que use Modern Service Card como base. Después abre la página en CrocoBuilder y comprueba textos y estilos: en el vídeo los botones quedaron con un enlace provisional que debes sustituir por tu destino real.
Precios y cupón del 10 %
Según la web de Crocoblock a 27 de octubre de 2026, CrocoBuilder se contrata como suscripción independiente y tiene garantía de devolución de 30 días. Los precios están en dólares:
| Plan | Precio | Qué incluye |
|---|---|---|
| CrocoBuilder (1 sitio) | 79 $ al año | 1 año de actualizaciones y soporte. MCP incluido, según su FAQ. |
| All-Inclusive Plus | 249 $ al año | 23 JetPlugins, plantillas y 1 año de actualizaciones y soporte. |
| Lifetime | 999 $ pago único | Los mismos plugins y plantillas, con actualizaciones y soporte de por vida. |
Con el código DAVIDCROCO10 tienes un 10 % de descuento, válido para todos los planes según la descripción del vídeo. En el vídeo se indica que caduca el 31 de octubre de 2026, así que, si lees esto más tarde, comprueba que sigue vigente. Puedes ver los planes y aplicar el cupón en la página de precios de Crocoblock.
Preguntas frecuentes
¿CrocoBuilder tiene versión gratuita?
No. Según la web de Crocoblock, no hay versión gratuita; se vende por suscripción (desde 79 $ al año por un sitio) o pago único, con 30 días de garantía.
¿Necesito pagar la IA aparte?
Para el AI Assistant, usas tu propia clave de un proveedor como OpenAI, y el uso lo cobra el proveedor. Si conectas un agente externo, también pagas por su servicio.
¿Qué agentes se pueden conectar por MCP?
Crocoblock muestra compatibilidad con Claude, Codex, Gemini, Cursor y Windsurf, y menciona VS Code con GitHub Copilot Agent. En el vídeo se usa VS Code.
¿La IA puede romper mi web?
Puede equivocarse, como cualquier herramienta. Por eso conviene tener copia de seguridad, revisar lo que propone y pedir confirmación antes de cada cambio, como se hace en el vídeo.
En resumen
- CrocoBuilder es un constructor de Crocoblock pensado para trabajar con IA, componentes reutilizables y control del código.
- El AI Assistant crea y modifica componentes y páginas dentro del editor, con tu propia clave de API.
- Con MCP, un agente externo como el de VS Code puede leer y cambiar tu proyecto; pide siempre confirmación.
- Según el vídeo, las AI Skills dan al agente el contexto para reutilizar tus componentes en lugar de inventar.
- Desde 79 $ al año, sin versión gratuita, 30 días de garantía y 10 % con DAVIDCROCO10.
¿Quieres automatizar WordPress con IA?
Curso de WordPress con IA
Aprende a trabajar con IA en tu WordPress de forma práctica y con control.
Esta página incluye un enlace de afiliado a Crocoblock: si compras a través de él, a mí me corresponde una comisión, y con el código DAVIDCROCO10 tienes un 10 % de descuento.
Respuestas