{"id":7856,"date":"2026-05-27T14:07:19","date_gmt":"2026-05-27T14:07:19","guid":{"rendered":"https:\/\/etchenet.com\/?p=7856"},"modified":"2026-05-27T14:17:53","modified_gmt":"2026-05-27T14:17:53","slug":"comment-jai-cree-un-design-system-wordpress-pilote-par-un-agent-ia-connecte-en-ssh","status":"publish","type":"post","link":"https:\/\/etchenet.com\/es\/comment-jai-cree-un-design-system-wordpress-pilote-par-un-agent-ia-connecte-en-ssh\/","title":{"rendered":"C\u00f3mo cre\u00e9 un sistema de dise\u00f1o de WordPress impulsado por un agente de IA conectado a trav\u00e9s de SSH."},"content":{"rendered":"<p class=\"wp-block-paragraph\">Durante varios d\u00edas, he estado realizando un experimento que est\u00e1 cambiando profundamente mi forma de trabajar con WordPress, Gutenberg y el dise\u00f1o web asistido por IA.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El objetivo no era simplemente generar HTML con IA.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El objetivo era mucho m\u00e1s ambicioso:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>crear un flujo de trabajo de producci\u00f3n verdaderamente impulsado por agentes; ;<\/li>\n\n\n\n<li>Estructurar un sistema de dise\u00f1o Gutenberg reutilizable; ;<\/li>\n\n\n\n<li>Normalizar autom\u00e1ticamente p\u00e1ginas HTML complejas; ;<\/li>\n\n\n\n<li>trabajar localmente; ;<\/li>\n\n\n\n<li>A continuaci\u00f3n, implemente las correcciones en el servidor en producci\u00f3n mediante SSH y WP-CLI.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Y, sinceramente, el resultado es impresionante.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">La idea inicial<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Durante mucho tiempo, el principal problema de Gutenberg no ha sido realmente el dise\u00f1o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El verdadero problema es la estructura.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Al convertir maquetas o HTML a Gutenberg:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Los grupos se vuelven r\u00e1pidamente ilegibles; ;<\/li>\n\n\n\n<li>Los bloques est\u00e1n mal nombrados; ;<\/li>\n\n\n\n<li>Las estructuras son inconsistentes; ;<\/li>\n\n\n\n<li>Las p\u00e1ginas se vuelven dif\u00edciles de mantener; ;<\/li>\n\n\n\n<li>Los bloques HTML personalizados se rompen f\u00e1cilmente; ;<\/li>\n\n\n\n<li>y las modificaciones futuras se convierten en una pesadilla.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">La idea era, por lo tanto, crear un sistema capaz de:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>normalizar autom\u00e1ticamente las p\u00e1ginas; ;<\/li>\n\n\n\n<li>imponer una estructura coherente; ;<\/li>\n\n\n\n<li>crear componentes reutilizables; ;<\/li>\n\n\n\n<li>mantener un dise\u00f1o coherente; ;<\/li>\n\n\n\n<li>y lograr que las p\u00e1ginas sean realmente mantenibles en Gutenberg.<\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">La arquitectura puesta en pr\u00e1ctica<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">El sistema se basa en varios elementos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Visual Studio Code<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Todo el sistema se controla desde:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u00f3digo de Visual Studio<\/li>\n\n\n\n<li>C\u00f3dice<\/li>\n\n\n\n<li>varios agentes especializados<\/li>\n\n\n\n<li>Habilidades personalizadas de WordPress<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Visual Studio Code se est\u00e1 convirtiendo pr\u00e1cticamente en una cabina de pilotaje de inteligencia artificial.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">2. Agentes especializados<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">He creado un agente dedicado para WordPress:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Agente de Etchenet-WordPress\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Este agente es capaz de:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>comprender Gutenberg; ;<\/li>\n\n\n\n<li>modificar las plantillas; ;<\/li>\n\n\n\n<li>trabajar en los bloques; ;<\/li>\n\n\n\n<li>manipular estructuras complejas; ;<\/li>\n\n\n\n<li>trabajar en el tema; ;<\/li>\n\n\n\n<li>para trabajar en los complementos; ;<\/li>\n\n\n\n<li>generar componentes reutilizables; ;<\/li>\n\n\n\n<li>Aplicar un sistema de dise\u00f1o.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Pero lo m\u00e1s importante:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Est\u00e1 conectado a mi entorno local; ;<\/li>\n\n\n\n<li>y a mi servidor v\u00eda SSH.<\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">3. Habilidades<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">El verdadero cambio proviene de las habilidades.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Las habilidades te permiten a\u00f1adir capacidades especializadas al agente:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>WordPress; ;<\/li>\n\n\n\n<li>Gutenberg; ;<\/li>\n\n\n\n<li>Pol\u00edglotas; ;<\/li>\n\n\n\n<li>Interfaz de usuario\/Experiencia de usuario; ;<\/li>\n\n\n\n<li>normalizaci\u00f3n; ;<\/li>\n\n\n\n<li>Estructura de Gutenberg; ;<\/li>\n\n\n\n<li>validaciones; ;<\/li>\n\n\n\n<li>traducciones; ;<\/li>\n\n\n\n<li>etc.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Ya no estamos hablando simplemente de un chatbot.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Estamos hablando de un sistema modular capaz de incorporar habilidades especializadas seg\u00fan el contexto.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">4. Trabajo local<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Inicialmente, toda la experimentaci\u00f3n se realiza a nivel local.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este es probablemente el punto m\u00e1s importante del flujo de trabajo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El agente:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>modifica las p\u00e1ginas; ;<\/li>\n\n\n\n<li>corrige los bloqueos; ;<\/li>\n\n\n\n<li>Reestructura Gutenberg; ;<\/li>\n\n\n\n<li>estandariza las secciones; ;<\/li>\n\n\n\n<li>prueba los componentes; ;<\/li>\n\n\n\n<li>comprueba si hay conflictos; ;<\/li>\n\n\n\n<li>limpia las estructuras.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Y puedo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Prueba inmediatamente; ;<\/li>\n\n\n\n<li>volver; ;<\/li>\n\n\n\n<li>comparar ;<\/li>\n\n\n\n<li>para validar; ;<\/li>\n\n\n\n<li>corregir gradualmente.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Es un cambio enorme en cuanto a comodidad.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">5. Conexi\u00f3n SSH y WP-CLI<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez que las pruebas se hayan validado localmente, el agente podr\u00e1 intervenir directamente en el servidor real.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El sistema utiliza:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>SSH; ;<\/li>\n\n\n\n<li>WP-CLI; ;<\/li>\n\n\n\n<li>sincronizaci\u00f3n de archivos; ;<\/li>\n\n\n\n<li>comandos remotos; ;<\/li>\n\n\n\n<li>actualizaciones dirigidas.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">En t\u00e9rminos concretos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lo apruebo a nivel local; ;<\/li>\n\n\n\n<li>A continuaci\u00f3n, el agente aplica los cambios al servidor.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Es extremadamente potente.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">El sistema de dise\u00f1o de Gutenberg<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">El aspecto m\u00e1s fascinante de este experimento es probablemente la normalizaci\u00f3n de Gutenberg.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hemos creado:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>una nomenclatura de grupos; ;<\/li>\n\n\n\n<li>una jerarqu\u00eda coherente; ;<\/li>\n\n\n\n<li>componentes reutilizables; ;<\/li>\n\n\n\n<li>reglas estructurales; ;<\/li>\n\n\n\n<li>contenedores estandarizados; ;<\/li>\n\n\n\n<li>secciones transparentes; ;<\/li>\n\n\n\n<li>patrones de mapas; ;<\/li>\n\n\n\n<li>botones uniformes; ;<\/li>\n\n\n\n<li>insignias; ;<\/li>\n\n\n\n<li>convenciones responsivas.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">El objetivo:<br>Transformar Gutenberg en un sistema de dise\u00f1o verdaderamente mantenible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Por qu\u00e9 esto es importante<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Este flujo de trabajo cambia por completo la forma en que se producen los sitios web de WordPress.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Antes :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cada p\u00e1gina se convirti\u00f3 en un caso especial; ;<\/li>\n\n\n\n<li>Las estructuras se estaban deteriorando; ;<\/li>\n\n\n\n<li>Los bloques se volvieron ilegibles; ;<\/li>\n\n\n\n<li>Las modificaciones posteriores resultaron costosas.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">AHORA :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Las p\u00e1ginas est\u00e1n estandarizadas; ;<\/li>\n\n\n\n<li>Las estructuras permanecen limpias; ;<\/li>\n\n\n\n<li>Los componentes son reutilizables; ;<\/li>\n\n\n\n<li>El agente aplica las convenciones autom\u00e1ticamente; ;<\/li>\n\n\n\n<li>Las correcciones se fueron difundiendo gradualmente.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Y lo m\u00e1s importante:<br>Podemos industrializar el trabajo sin perder la flexibilidad de Gutenberg.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Las herramientas utilizadas<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3digo de Visual Studio<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/code.visualstudio.com\" target=\"_blank\" rel=\"noopener\">https:\/\/code.visualstudio.com<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3dice<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/openai.com\" target=\"_blank\" rel=\"noopener\">https:\/\/openai.com<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WordPress<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\" target=\"_blank\" rel=\"noopener\">https:\/\/wordpress.org<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WP-CLI<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/wp-cli.org\" target=\"_blank\" rel=\"noopener\">https:\/\/wp-cli.org<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Manual de WordPress para pol\u00edglotas<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/make.wordpress.org\/polyglots\/handbook\" target=\"_blank\" rel=\"noopener\">https:\/\/make.wordpress.org\/polyglots\/handbook<\/a><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Lo que aprend\u00ed de este experimento<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Estamos entrando en una nueva forma de trabajar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La IA no reemplaza al desarrollador ni al dise\u00f1ador web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pero se convierte en:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>un asistente estructural; ;<\/li>\n\n\n\n<li>un estandarizador; ;<\/li>\n\n\n\n<li>un operador; ;<\/li>\n\n\n\n<li>un validador; ;<\/li>\n\n\n\n<li>un acelerador de flujo de trabajo.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Y combinados:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>a los agentes; ;<\/li>\n\n\n\n<li>a las habilidades; ;<\/li>\n\n\n\n<li>a trav\u00e9s de SSH; ;<\/li>\n\n\n\n<li>a WP-CLI; ;<\/li>\n\n\n\n<li>al trabajo local; ;<\/li>\n\n\n\n<li>y a Gutenberg; ;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u2026 esto abre unas posibilidades realmente extraordinarias.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En definitiva, lo m\u00e1s impresionante no es la generaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se trata de la capacidad de construir un sistema de trabajo verdaderamente coherente, mantenible y escalable en torno a WordPress.<\/p>","protected":false},"excerpt":{"rendered":"<p>Depuis plusieurs jours, je m\u00e8ne une exp\u00e9rimentation qui change profond\u00e9ment ma fa\u00e7on de travailler sur WordPress, Gutenberg et le webdesign assist\u00e9 par intelligence artificielle. L\u2019objectif n\u2019\u00e9tait pas simplement de g\u00e9n\u00e9rer du HTML avec une IA. L\u2019objectif \u00e9tait beaucoup plus ambitieux : Et honn\u00eatement, le r\u00e9sultat est impressionnant. L\u2019id\u00e9e de d\u00e9part Depuis longtemps, le principal probl\u00e8me [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7860,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_svbs_page_enabled":false,"_svbs_page_video_id":0,"_svbs_page_video_url":"","_svbs_page_overlay_color":"#020617","_svbs_page_overlay_opacity":0.45,"_svbs_page_scroll_range":0,"_svbs_page_scroll_range_desktop":0,"_svbs_page_scroll_range_tablet":0,"_svbs_page_scroll_range_mobile":0,"_svbs_page_start_time":0,"_svbs_page_end_time":0,"_svbs_page_mobile_behavior":"enabled","_svbs_page_z_index":0,"footnotes":""},"categories":[83,82,84],"tags":[],"class_list":["post-7856","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ia","category-wordpress"],"_links":{"self":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/posts\/7856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/comments?post=7856"}],"version-history":[{"count":4,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/posts\/7856\/revisions"}],"predecessor-version":[{"id":7868,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/posts\/7856\/revisions\/7868"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/media\/7860"}],"wp:attachment":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/media?parent=7856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/categories?post=7856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/tags?post=7856"}],"curies":[{"name":"gracias","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}