Durante varios días, he estado realizando un experimento que está cambiando profundamente mi forma de trabajar con WordPress, Gutenberg y el diseño web asistido por IA.
El objetivo no era simplemente generar HTML con IA.
El objetivo era mucho más ambicioso:
- crear un flujo de trabajo de producción verdaderamente impulsado por agentes; ;
- Estructurar un sistema de diseño Gutenberg reutilizable; ;
- Normalizar automáticamente páginas HTML complejas; ;
- trabajar localmente; ;
- A continuación, implemente las correcciones en el servidor en producción mediante SSH y WP-CLI.
Y, sinceramente, el resultado es impresionante.
La idea inicial
Durante mucho tiempo, el principal problema de Gutenberg no ha sido realmente el diseño.
El verdadero problema es la estructura.
Al convertir maquetas o HTML a Gutenberg:
- Los grupos se vuelven rápidamente ilegibles; ;
- Los bloques están mal nombrados; ;
- Las estructuras son inconsistentes; ;
- Las páginas se vuelven difíciles de mantener; ;
- Los bloques HTML personalizados se rompen fácilmente; ;
- y las modificaciones futuras se convierten en una pesadilla.
La idea era, por lo tanto, crear un sistema capaz de:
- normalizar automáticamente las páginas; ;
- imponer una estructura coherente; ;
- crear componentes reutilizables; ;
- mantener un diseño coherente; ;
- y lograr que las páginas sean realmente mantenibles en Gutenberg.
La arquitectura puesta en práctica
El sistema se basa en varios elementos.
1. Visual Studio Code
Todo el sistema se controla desde:
- Código de Visual Studio
- Códice
- varios agentes especializados
- Habilidades personalizadas de WordPress
Visual Studio Code se está convirtiendo prácticamente en una cabina de pilotaje de inteligencia artificial.
2. Agentes especializados
He creado un agente dedicado para WordPress:
Agente de Etchenet-WordPress
Este agente es capaz de:
- comprender Gutenberg; ;
- modificar las plantillas; ;
- trabajar en los bloques; ;
- manipular estructuras complejas; ;
- trabajar en el tema; ;
- para trabajar en los complementos; ;
- generar componentes reutilizables; ;
- Aplicar un sistema de diseño.
Pero lo más importante:
- Está conectado a mi entorno local; ;
- y a mi servidor vía SSH.
3. Habilidades
El verdadero cambio proviene de las habilidades.
Las habilidades te permiten añadir capacidades especializadas al agente:
- WordPress; ;
- Gutenberg; ;
- Políglotas; ;
- Interfaz de usuario/Experiencia de usuario; ;
- normalización; ;
- Estructura de Gutenberg; ;
- validaciones; ;
- traducciones; ;
- etc.
Ya no estamos hablando simplemente de un chatbot.
Estamos hablando de un sistema modular capaz de incorporar habilidades especializadas según el contexto.
4. Trabajo local
Inicialmente, toda la experimentación se realiza a nivel local.
Este es probablemente el punto más importante del flujo de trabajo.
El agente:
- modifica las páginas; ;
- corrige los bloqueos; ;
- Reestructura Gutenberg; ;
- estandariza las secciones; ;
- prueba los componentes; ;
- comprueba si hay conflictos; ;
- limpia las estructuras.
Y puedo:
- Prueba inmediatamente; ;
- volver; ;
- comparar ;
- para validar; ;
- corregir gradualmente.
Es un cambio enorme en cuanto a comodidad.
5. Conexión SSH y WP-CLI
Una vez que las pruebas se hayan validado localmente, el agente podrá intervenir directamente en el servidor real.
El sistema utiliza:
- SSH; ;
- WP-CLI; ;
- sincronización de archivos; ;
- comandos remotos; ;
- actualizaciones dirigidas.
En términos concretos:
- Lo apruebo a nivel local; ;
- A continuación, el agente aplica los cambios al servidor.
Es extremadamente potente.
El sistema de diseño de Gutenberg
El aspecto más fascinante de este experimento es probablemente la normalización de Gutenberg.
Hemos creado:
- una nomenclatura de grupos; ;
- una jerarquía coherente; ;
- componentes reutilizables; ;
- reglas estructurales; ;
- contenedores estandarizados; ;
- secciones transparentes; ;
- patrones de mapas; ;
- botones uniformes; ;
- insignias; ;
- convenciones responsivas.
El objetivo:
Transformar Gutenberg en un sistema de diseño verdaderamente mantenible.
Por qué esto es importante
Este flujo de trabajo cambia por completo la forma en que se producen los sitios web de WordPress.
Antes :
- Cada página se convirtió en un caso especial; ;
- Las estructuras se estaban deteriorando; ;
- Los bloques se volvieron ilegibles; ;
- Las modificaciones posteriores resultaron costosas.
AHORA :
- Las páginas están estandarizadas; ;
- Las estructuras permanecen limpias; ;
- Los componentes son reutilizables; ;
- El agente aplica las convenciones automáticamente; ;
- Las correcciones se fueron difundiendo gradualmente.
Y lo más importante:
Podemos industrializar el trabajo sin perder la flexibilidad de Gutenberg.
Las herramientas utilizadas
Código de Visual Studio
Códice
WordPress
WP-CLI
Manual de WordPress para políglotas
https://make.wordpress.org/polyglots/handbook
Lo que aprendí de este experimento
Estamos entrando en una nueva forma de trabajar.
La IA no reemplaza al desarrollador ni al diseñador web.
Pero se convierte en:
- un asistente estructural; ;
- un estandarizador; ;
- un operador; ;
- un validador; ;
- un acelerador de flujo de trabajo.
Y combinados:
- a los agentes; ;
- a las habilidades; ;
- a través de SSH; ;
- a WP-CLI; ;
- al trabajo local; ;
- y a Gutenberg; ;
… esto abre unas posibilidades realmente extraordinarias.
En definitiva, lo más impresionante no es la generación.
Se trata de la capacidad de construir un sistema de trabajo verdaderamente coherente, mantenible y escalable en torno a WordPress.