Comentario
Cómo creé un sistema de diseño de WordPress impulsado por un agente de IA conectado a través de SSH.
Un experimento para estructurar Gutenberg, crear componentes reutilizables e implementar correcciones específicas mediante un agente conectado a un entorno local y a WordPress.
Un experimento que va más allá de la generación de HTML
Durante los últimos días, he estado realizando un experimento que está transformando profundamente mi forma de trabajar con WordPress, Gutenberg y el diseño web asistido por IA. El objetivo no era simplemente pedirle a una IA que generara HTML, sino crear un verdadero flujo de trabajo de producción.
- Gestiona la producción con un agente especializado.
- Estructuración de un sistema de diseño Gutenberg reutilizable.
- Normaliza automáticamente páginas HTML complejas.
- Primero, trabaje y realice pruebas localmente.
- A continuación, implemente las correcciones validadas en el servidor mediante SSH y WP-CLI.
El resultado deseado
Transformar una serie de tareas técnicas en un sistema coherente y controlable, con la estructura suficiente para ser reutilizado en múltiples páginas de WordPress.
La idea inicial: resolver un problema estructural.
El principal problema de Gutenberg no siempre radica en el diseño. Surge principalmente cuando los mockups o el HTML se convierten en una acumulación de grupos y bloques difíciles de comprender.
- Los grupos se vuelven rápidamente ilegibles.
- Los bloques tienen nombres poco acertados y las estructuras resultan inconsistentes.
- Las páginas son difíciles de mantener y actualizar.
- Los bloques HTML personalizados pueden romperse con mayor facilidad.
- Cada modificación futura requerirá más tiempo y precaución.
La idea era, por lo tanto, crear un sistema capaz de estandarizar las páginas, imponer una jerarquía coherente, producir componentes reutilizables y preservar un diseño homogéneo sin que Gutenberg se volviera rígido.
Un buen sistema de diseño no se trata solo de mejorar el aspecto de las páginas. También debe hacerlas más legibles en el editor y más fáciles de mantener.
La arquitectura puesta en práctica
El sistema se basa en cinco elementos complementarios. Cada uno conserva una función específica en el flujo de trabajo.
1. Visual Studio Code como entorno de control
Todo el proceso se gestiona desde Visual Studio Code mediante Codex, varios agentes especializados y funcionalidades personalizadas de WordPress. El editor se convierte en un espacio central para leer archivos, preparar cambios y realizar el seguimiento de su validación.
2. Un agente especializado de WordPress
Creé un agente dedicado llamado Agente de Etchenet-WordPress. Está diseñado para comprender Gutenberg, modificar plantillas y bloques, trabajar en temas o extensiones, manipular estructuras complejas y aplicar un sistema de diseño.
- Está conectado a mi entorno local.
- También puede acceder al servidor dentro del marco definido por la conexión SSH.
3. Habilidades cargadas según el contexto
El verdadero cambio reside en las habilidades. Aportan capacidades especializadas en WordPress, Gutenberg, políglotas, UI/UX, normalización, validación o traducción.
Ya no hablamos simplemente de un chatbot generalista, sino de un sistema modular que moviliza diferentes habilidades en función de la tarea.
4. Trabajo local y validación
Toda la experimentación comienza localmente. El agente puede modificar páginas, corregir bloques, reestructurar Gutenberg, normalizar secciones, probar componentes, comprobar si hay conflictos y limpiar estructuras.
Por mi parte, puedo realizar pruebas de inmediato, comparar los resultados, revisarlos, validarlos o solicitar una corrección gradual. Este paso ofrece una gran comodidad antes de cualquier intervención en la producción.
5. Conexión SSH y WP-CLI
Una vez validadas las pruebas, el agente puede aplicar actualizaciones específicas al servidor en producción mediante SSH, WP-CLI, comandos remotos y, cuando sea necesario, sincronización controlada de archivos.
El despliegue no debería ser automático por defecto.
El principio sigue siendo validar localmente, identificar con precisión el objetivo, guardar lo que se va a modificar y limitar la intervención en la producción al alcance aprobado.
El sistema de diseño de Gutenberg obtuvo
La normalización de Gutenberg es uno de los aspectos más interesantes de este experimento. Se basa en convenciones que el agente puede reconocer y reutilizar.
- Una nomenclatura clara para grupos y secciones.
- Una jerarquía coherente y contenedores estandarizados.
- Componentes, tarjetas y botones reutilizables.
- Secciones transparentes e insignias uniformes.
- Convenciones de diseño adaptable comunes a todos los componentes.
El objetivo es transformar Gutenberg en un sistema de diseño verdaderamente mantenible, sin eliminar la posibilidad de modificar cada elemento de contenido desde el editor.
Por qué este método es importante
Antes de la estandarización
- Cada página se convirtió en un caso especial.
- Las estructuras se deterioraron a medida que se realizaban las modificaciones.
- Los bloques se estaban volviendo difíciles de leer y mantener.
- Los desarrollos futuros requerirían más tiempo.
Con un sistema compartido
- Las páginas siguen una estructura estandarizada.
- Los componentes siguen siendo reutilizables e identificables.
- El agente aplica las convenciones de manera regular.
- Las soluciones se pueden implementar gradualmente.
De este modo, resulta posible industrializar parte del trabajo sin perder la flexibilidad de Gutenberg.
Las herramientas utilizadas
- Código de Visual Studio trabajar en proyectos y sus archivos.
- Códice para interacciones con agentes y tareas técnicas.
- WordPress y Gutenberg para la gestión de contenidos.
- WP-CLI para operaciones de línea de comandos de WordPress.
- EL Manual de WordPress para políglotas para reglas de traducción y localización.
Lo que aprendí de este experimento
La inteligencia artificial no reemplaza al desarrollador ni al diseñador web. En este flujo de trabajo, se convierte en un asistente estructural, un normalizador, un operador, un validador y un acelerador.
En combinación con agentes, habilidades, SSH, WP-CLI, trabajo local y Gutenberg, abre principalmente la posibilidad de construir un sistema de trabajo coherente, mantenible y escalable en torno a WordPress.
Lo más impresionante no es la generación automatizada en sí, sino la capacidad de organizar herramientas, reglas y validaciones para producir un resultado duradero.
¿Quieres estructurar tu sitio de WordPress de forma más sostenible?
Etchenet puede ayudarte a clarificar tus bloques de Gutenberg, armonizar tus componentes y asegurar tu método de actualización.