Codificación de Adobe Edge Delivery Blocks con IA: Deja que los robots cocinen

style

border-bottom-glow

Ahora mismo está pasando todo un lío en el mundo de los desarrollos.

Tienes a los evangelistas de la IA que pidieron a un modelo que convirtiera su sitio WordPress chapucero a React y ahora creen que han alcanzado la iluminación. Tienes convencido a la gente del apocalipsis de los boomers de que nadie sabrá programar en 5 años y que internet implosionará. Y luego están los callados que usan IA para enviar herramientas internas sin avisar a nadie en 12 minutos y se van a casa temprano.

No estoy en ninguno de esos bandos. Estoy en el grupo de: la IA es una herramienta. Úsalo. Es un autocompleto elegante con delirios de competencia.

Esta publicación es para mostrar cómo utilicé la IA para programar un nuevo bloque de Adobe Edge Delivery Services (EDS) y, lo que es más importante, cómo arreglé lo que falló.

Aprende de un agricultor

Crecí en una granja. La lógica de la granja es sencilla:

Si algo se rompe, lo arreglas.

No hay Amazon, solo graneros viejos llenos de tanta cosa que se están inclinando. No tienes el lujo de pedir un reemplazo ni tiempo para aprender a hacer una réplica perfecta. Coges restos de metal al azar, un martillo más antiguo que la Guerra Civil y quizá algo de cinta americana. Haz que funcione. Improvisar, adaptarse, superar.

Por eso los graneros acumulan 150 años de herramientas y objetos "potencialmente útiles". Mi padre decía: "Nunca sabes cuándo puedes necesitar eso."

Aquí está el punto:

No necesitas saber cómo forjar un implemento desde cero. Pero SÍ necesitas saber lo suficiente para arreglarlo cuando se estropee.

Lo mismo ocurre con el código generado por IA.

La IA puede generar el implemento. Solo necesitas entenderlo lo suficiente para repararlo, ajustarlo y mejorarlo.

¿Qué es realmente la codificación de vibra?

La codificación de vibración es el flujo de trabajo que todos estamos admitiendo poco a poco que hacemos:

Describe más o menos lo que quieres -> deja que la IA cocina -> arregle el caos -> nave.

No es "ingeniería rápida". No es "desarrollo impulsado por IA". Literalmente son vibraciones + contexto + gusto + tú.

Lo llamo "codificación de vibración" porque es lo que parece: no estás escribiendo especificaciones ni siguiendo un esquema rígido de pruebas. Conectas con la IA, consigues algo al 80% y luego usas tu juicio y experiencia para que sea realmente bueno. Es improvisación colaborativa con un compañero muy seguro de sí mismo pero a veces equivocado (los dos lo somos).

Mis tres reglas de la codificación de vibracionalismo

Explica el trabajo como si estuvieras enseñando a alguien que sabe HTML pero tiene la memoria de un pez dorado.
Sé verboso. Explícalo demasiado. Finge que estás escribiendo instrucciones de IKEA.
Deja que el modelo haga el corte preliminar.
La forma está ahí, solo tienes que lijarla.
Arregla las partes dudosas usando tus habilidades reales.
El modelo hará algo maldito eventualmente.

Mi experiencia con modelos y generación de código

Estoy haciendo todo esto en Windsurf, porque indicar + código en el mismo espacio de trabajo es un 'chef's kiss. Hay otros IDE con IA integrada como Cursor o VSCode con GitHub Copilot : elige tu veneno. Windsurf ha tenido precios competitivos y me ha funcionado de fábrica.

Claude Soneto 4.5: Rey de ofrecer primeros borradores útiles sin perder de vista la realidad. No he hecho muchas pruebas con Opus porque Sonnet es más rápido y funciona para lo que necesito.

GPTs: Geniales para tareas de lenguaje natural como explicar cosas y escribir documentos, pero en mi experiencia tardan demasiado y no siguen bien las indicaciones.

DeepSeek: Confío en él igual que confío en un mapache en mi cocina.

Grok: Prometedor pero aún no hay aportaciones de imagen para Windsurf, así que está en el banquillo.

Géminis 2.5: Lo he probado. Lo tengo en bucle: "Añadiré la tarea a mi lista de tareas para mantenerte informado de mi progreso. Empezaré creando los archivos. Crearé primero el archivo blog-featured-hero.js. Después de eso, crearé el archivo blog-featured-hero.css.". En el momento de escribir esto, Gemini 3 no estaba disponible, pero se dice que está escupiendo fuego, así que tendré que probar eso a continuación.

Si realmente quieres sacar tu lado Terry Davis, puedes optar por el autoalojamiento con un equipo decente (la VRAM es la rey pero puedes descargar algo de procesamiento a RAM si lo necesitas, es bastante lento, pero funciona). Recomiendo empezar con Ollama - CLI o GUI (https://ollama.com/), añadir algunos modelos personalizados (he tenido suerte con gemma3:27b con tareas de lenguaje natural - https://ollama.com/library/gemma3), y usar un plugin en VS Code como Continue (https://github.com/continuedev/continue). No tendrás toda la funcionalidad de los IDE integrados, pero al menos sabes hacia dónde van tus datos. No, esto no es un anuncio.

Por qué el EDS y la IA van juntos como el PB y la mermelada

Los bloques EDS son ideales para el dibujo con IA porque:

Los bloques son literalmente HTML + CSS + JS vanilla.
Esto es en lo que se entrenan los LLMs. ¿Les vas a dar HTML y contexto en bruto? Hacen brrrr.
El EDS tiene patrones claros.
Los modelos están literalmente hechos para detectar patrones. Es lo que hacen.
Tú (sí, TÚ) controlas el pulido final.
La IA te da un 80%. Tu cerebro te da el último 20% que hace que no sea embarazoso.

Buenos prompts con ejemplos claros = mejor resultado.

Vale, vamos a construir este bloque de héroes

Quiero crear un nuevo bloque de héroes destacados en el blog para nuestro blog con:

Imagen de fondo de ancho completo
Un carrusel de imágenes a la izquierda
Una tarjeta de cristal difuminado con título + subtítulos + descripción + botón "Leer más"
Responsive + accesible
Sigue los patrones del EDS para que el yo del futuro no odie al yo del pasado

Así es como es el bloque bruto de Autoría de Documentos:

EDS convierte eso en HTML pre-decoración en bruto así:

<div class="blog-featured-hero block" data-block-name="blog-featured-hero" data-block-status="loaded">
    <div>
        <div>
            <picture>
                <source type="image/webp" srcset="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
                <source type="image/webp" srcset="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=750&amp;format=webply&amp;optimize=medium">
                <source type="image/jpeg" srcset="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=2000&amp;format=jpg&amp;optimize=medium" media="(min-width: 600px)">
                <img loading="eager" alt="" src="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=750&amp;format=jpg&amp;optimize=medium" width="5464" height="3640">
            </picture>
        </div>
    </div>
    <div>
        <div>
            <p>
                <a href="/en/blog/adaptto-2025-recap" title="">
                    <picture>
                        <source type="image/webp" srcset="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
                        <source type="image/webp" srcset="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=750&amp;format=webply&amp;optimize=medium">
                        <source type="image/png" srcset="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
                        <img loading="lazy" alt="" src="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=750&amp;format=png&amp;optimize=medium" width="2862" height="1583">
                    </picture>
                </a>
            </p>
            <h3 id="">
                <picture>
                  <source type="image/webp" srcset="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
                  <source type="image/webp" srcset="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=750&amp;format=webply&amp;optimize=medium">
                  <source type="image/jpeg" srcset="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=2000&amp;format=jpg&amp;optimize=medium" media="(min-width: 600px)">
                  <img loading="lazy" alt="" src="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=750&amp;format=jpg&amp;optimize=medium" width="1768" height="877">
                </picture>
              </h3>
            <p>
                <picture>
                    <source type="image/webp" srcset="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
                    <source type="image/webp" srcset="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=750&amp;format=webply&amp;optimize=medium">
                    <source type="image/jpeg" srcset="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=2000&amp;format=jpg&amp;optimize=medium" media="(min-width: 600px)">
                    <img loading="lazy" alt="" src="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=750&amp;format=jpg&amp;optimize=medium" width="1776" height="1184">
                </picture>
            </p>
        </div>
    </div>
    <div>
        <div>
            <h3 id="recap-of-adaptto-2025---the-hard-core-aem-developers-conference"><a href="/en/blog/adaptto-2025-recap" title="Recap of adaptTo() 2025 - the hard-core AEM Developers Conference">Recap of adaptTo() 2025 - the hard-core AEM Developers Conference</a></h3>
        </div>
    </div>
    <div>
        <div>
            <p>Highlights, New Releases, and Takeaways</p>
        </div>
    </div>
    <div>
        <div>
            <p>A recap of the top sessions of the adaptTo() 2025 Conference, with everything you should catch up on to further your AEM career.&nbsp; AI refactoring for cloud migrations, Edge Workers for EDS, a replacement for the Groovy console, a deep
                dive on <a href="https://blog.arborydigital.com/en/blog/what-is-document-authoring-for-edge-delivery" title="Document Authoring (DA)">Document Authoring (DA)</a>, as well as a presentation from our own on the <a href="https://blog.arborydigital.com/en/podcast/solving-china-web-performance"
                title="China Web Performance Problem">China Web Performance Problem</a> - what are you waiting for, let's dive in!</p>
        </div>
    </div>
</div>

El Prompt

Aquí tienes la versión limpia de lo que le di de comer a Claude (incluida la captura de pantalla de DA):

Create an Adobe Edge Delivery Services (EDS) block using vanilla JavaScript and CSS.

## Block Requirements
**Name**: blog-featured-hero
**Purpose**: Featured blog hero with background image and content overlay

## Learn from Existing Blocks
Examine css and js file in /blocks/hero/, /blocks/columns/, /blocks/blog-post-hero/,
and /blocks/carousel/ for EDS patterns.

## Raw HTML from EDS (before our JS/CSS decoration)
[raw html here]

## Your Task
Transform this raw HTML into:
- Row 1 image becomes full-width background
- Overlay container with:
  - LEFT: Row 2 images as carousel with minimal navigation icons, no background just chevrons
  - RIGHT (glass card): Row 3 Title/Link, Row 4 Subtitle, Row 5 Description,
    Button "Read More" linking to Row 3 URL

## JavaScript Requirements
Parse the block's child divs (rows) and reconstruct into the layout above.
Use vanilla JavaScript only - no frameworks.
Handle missing rows gracefully.

## CSS Requirements
- Mobile responsive (stack on small screens)
- glass background on card
- high contrast mode

Generate blog-featured-hero.js and blog-featured-hero.css files.

El primer borrador de la IA

Claude echó ambos expedientes. ¿Y sinceramente? Fue bastante sólido.

Lo que fue bueno

La disposición era básicamente correcta
El carrusel funcionaba
Lógica de imagen de fondo: manejado
Apilamiento responsivo: gestionado

¿Qué necesitaba manos humanas?

Aun así, tenía problemas:

Pulido visual: Los colores no coincidían y la tipografía podría renovarse
Problemas de experiencia de usuario: Carousel no se reproducía automáticamente, no había transiciones de crucero en enlaces o botones
Rendimiento: Imagen de fondo cargando incorrectamente
Disposición: Columna izquierda alineada verticalmente con la parte superior del div

Así que me puse a trabajar.

Pulir el bloque (donde realmente ganas tu nómina)

Estilos globales predominantes

Una cosa que he notado: Claude no recuerda tu cascada. Genera reglas que tienen todo el sentido, hasta que tus estilos globales llegan y los desmantelan.

EDS tiene ancho máximo global + acolchado que limita las secciones a unos 1200px. El primer borrador de Claude no tenía esto en cuenta, así que el héroe no estaba realmente sangrando por completo. En lugar de !importantsalir, aumenté la especificidad añadiendo main a los selectores:

/* My fix - higher specificity wins */
main .blog-featured-hero-container {
  width: 100%;
  padding: 0;
  margin: 0;
}

main .blog-featured-hero-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

main .blog-featured-hero {
  position: relative;
  width: 100%;
  min-height: 500px;
  overflow: hidden;
}

Héroe = sangrado total. Cascada = no contaminada.

Pulido visual: colores, tipografía, botones

Cambié los verdes de la marca, ajusté la tipografía y de nuevo solucioné algunos problemas de especificidad con el botón de leer más. Quería que el botón tuviera un aspecto un poco más estilizado que nuestra opción global. También añadí ease-in-out transiciones en el hover, como Dios quiso.

/* Read More button */
.featured-content-card .featured-read-more {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--link-hover-color);
  color: white;
  text-decoration: none;
  border-radius: var(--border-radius);
  text-transform: uppercase;
  font-family: var(--heading-font-family);
  letter-spacing: -1px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}

.featured-content-card .featured-read-more:hover {
  background-color: var(--link-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

Solución UX: Sincronización del carrusel

Para arreglar que el carrusel no se reproduzca automáticamente, añadí lógica a:

El avance automático se desliza cada 5 segundos
Pausa al pasar el cursor y enfoca el teclado
Reiniciar tras la navegación manual
Navegación con teclas de flecha

La reproducción automática solo se ejecuta si hay varias diapositivas, y toda la lógica de pausa/reanudar garantiza una experiencia de usuario fluida sin interrumpir la interacción del usuario.

let autoplayInterval = null;

const startAutoplay = () => {
  if (autoplayInterval) return;
  
  autoplayInterval = setInterval(() => {
    const currentSlide = parseInt(carousel.dataset.activeSlide || '0', 10);
    showSlide(carousel, currentSlide + 1);
  }, 5000);
};

const stopAutoplay = () => {
  if (autoplayInterval) {
    clearInterval(autoplayInterval);
    autoplayInterval = null;
  }
};

// Pause on hover and focus
carousel.addEventListener('mouseenter', stopAutoplay);
carousel.addEventListener('mouseleave', startAutoplay);
carousel.addEventListener('focusin', stopAutoplay);
carousel.addEventListener('focusout', startAutoplay);

// Arrow key navigation
carousel.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft') handlePrev();
  if (e.key === 'ArrowRight') handleNext();
});

startAutoplay();

Rendimiento

Después de construir el bloque, pasé la página por Lighthouse. La puntuación de rendimiento fue 99 (estamos hablando de EDS), pero aún quedaban algunas optimizaciones menores que hacer.

La imagen de fondo necesitaba cargar primero, pero sin ninguna pista de prioridad, la empujaban por la cascada. La solución fue decirle al navegador que esta imagen es importante:

if (bgPicture) {
  const bgImg = bgPicture.querySelector('img');
  if (bgImg) {
    bgImg.setAttribute('fetchpriority', 'high');
    bgImg.setAttribute('loading', 'eager');
  }
  backgroundContainer.appendChild(bgPicture);
}

fetchpriority="high" Indica al navegador que priorice esta imagen sobre otras y loading="eager" asegura que cargue inmediatamente en lugar de esperar a que esté a punto de entrar en el viewport.

En el carrusel, hice lo contrario: solo la primera diapositiva carga con entusiasmo, mientras que el resto se carga perezosamente porque no se ven de inmediato.

Distribución

Arreglé la alineación vertical con align-items: center porque el contenedor usa flexión y los niños necesitaban estar centrados verticalmente.

.featured-carousel .featured-carousel-slides {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  align-items: center;
}

Estos son los detalles que separan "funciona" de "en realidad es bueno".

Resultado final

Tienes una pinta de cleee.

La IA me dio un 80%. Mis ajustes lo han llevado al 100%.

¿Quieres probar esto tú mismo?

Empieza poco a poco. Elige un bloque sencillo, quizá una cuadrícula de cartas o un control deslizante de testimonios. Alimenta a Claude (o a tu modelo preferido) con esta estructura:

Dile a la IA que revise 2-4 ejemplos de bloques similares de tu base de código
Pega el HTML en bruto con el que trabajas
Describe la transformación de la disposición en inglés sencillo
Pide JS y CSS vanilla (sin frameworks)

Luego abre la consola del navegador y pruébalo realmente. Busca:

Problemas de tiempo (comprueba si hay tiempos de espera acumulados)
Cambios de distribución/problemas de rendimiento (Lighthouse los detectará)
Desajustes de color/espaciado (tus ojos los captarán)

Arregla lo que está roto. Enviadlo. Repito.

Nota al margen

No soy el más listo en Javascript, pero ¿sabes quién lo es? Internet y eso es en lo que se han entrenado las IAs. Así que si alguna vez te quedas atascado o no tienes ni idea de lo que está pasando, confía un poco en la IA para que te enseñe. Pero recuerda comprobar si personas reales han resuelto el problema en el pasado o cómo. Podrías estar sobreingeniando una pala. Si la solución de IA parece extrañamente compleja, probablemente lo sea.

Reflexiones finales

La generación de código por IA no va a desaparecer, y cada nuevo modelo se vuelve más rápido y mejor. Eso es genial para trabajos rutinarios de envíos. Tener un entendimiento profundo de cómo funciona un sistema es más importante que nunca.

La IA es una herramienta. No magia. Úsalo como tal.

Aprende cómo funciona el tractor. Deja que el robot fabrique las piezas para arreglarlo.

¿Quieres profundizar en los servicios de entrega en Edge?
Descubre cómo puede transformar tu entrega de contenido consultando nuestro blog sobre Autoría de Documentos para Edge Delivery o escuchando nuestro podcast en YouTube.

Sobre el autor

Frank Townsend

Desarrollador de Front End y Ninja de A/V en Arbory Digital

Frank tiene una sólida experiencia en desarrollo y diseño web. Antes de unirse a Arbory, adquirió experiencia trabajando en InstantOrder en diseño y desarrollo antes de dedicarse a trabajos freelance. Ansioso por nuevas oportunidades, Frank se trasladó a Arbory Digital, donde valora el ambiente colaborativo y dinámico. Fuera del trabajo, los hobbies de Frank incluyen la carpintería, la fotografía, la videografía, la agricultura, la organización de giras para el Always Loretta Show y otros proyectos paralelos.

Contacta con Frank en LinkedIn