Método · Design Extrapolation
Un solo diseño de portada, un sitio completo con CMS, en unas 25 horas de ingeniería
Design Extrapolation: construir las páginas que el diseñador nunca dibujó, dentro de su propio sistema, directamente en código. Aplicado al relanzamiento del sitio de una consultora boutique.
~25 h
Horas de ingeniería registradas, de una portada aprobada a un sitio completo con CMS
1 → 5
Una página diseñada extrapolada a cinco plantillas de página, sin un segundo mockup
~20
Imágenes generadas con IA que se leen como una sola dirección de arte. Sin fotos de stock
15
Problemas encontrados y priorizados en la auditoría SEO antes de mover un solo artículo
01
El problema
Una consultora que le vende sofisticación a compradores corporativos estaba atrapada en un sitio de plantilla que le restaba. Los fundadores apenas podían editarlo, sus artículos arrastraban años de deuda SEO heredada, y no querían llamar a un desarrollador cada vez que cambiaba una frase.
Un rediseño convencional diseña todas las páginas antes de empezar a desarrollar, y cada cambio vuelve a pasar por mockups. La firma necesitaba el acabado de un sitio a la medida y el control total de su contenido después del lanzamiento, sin pagar por un equipo multidisciplinario.
02
Por qué era difícil
- Solo había una página diseñada. Nosotros, Contacto, el archivo de artículos con filtros y paginación, la plantilla de artículo, los estados de éxito y toda la coreografía de scroll había que inventarlos en código y que igual parecieran salidos del diseño original.
- El titular se anima palabra por palabra, con una palabra destacada. Hacerlo editable para personas no técnicas sin romper la animación requería un modelo de contenido, no solo un campo de texto.
- Los formularios genéricos de un CMS confunden a quien no es técnico, y nada les impide publicar metadatos que los buscadores van a cortar.
- Sin fotos de stock ni presupuesto para una sesión, cada imagen principal, tarjeta e imagen para compartir tenía que sentirse como una sola dirección de arte.
- Después de la primera revisión, se eliminó una página completa y se rediseñó otra alrededor de agendar llamadas.
03
Qué construimos
Primero se diseñó una sola portada maestra que define el sistema visual: color, tipografía, espaciado, componentes y movimiento. A partir de ahí, un ingeniero trabajando con un agente de código de IA construyó todas las demás páginas y componentes directamente en código de producción, junto con el CMS, el generador de imágenes y la migración SEO.
04
Dónde está la innovación
01
Extrapolar el diseño, no replicarlo
La página maestra es la única fuente de verdad. En lugar de hacer mockups de cada página, el agente de código de IA trabaja dentro de sus tokens y patrones e infiere componentes que nunca existieron en el diseño, como tarjetas de artículo, filtros, paginación y el formulario de contacto, para que se sientan parte del sistema. El ingeniero toma las decisiones de arquitectura, experiencia y gusto; la IA cierra la distancia entre la decisión y el código.
02
Un sistema de marca convertido en prompt estructurado
El generador de imágenes nunca recibe un prompt libre. Cada pedido se envuelve en una especificación de marca: identidad, tono, paleta con notas de uso, técnica y una lista explícita de lo que hay que evitar, más un preset para cada espacio, desde la imagen principal hasta la imagen para redes. Cada resultado queda marcado como generado con IA para saber su origen.
03
Un CMS con la forma de la página
Cada página del CMS se organiza en los mismos bloques que ve el visitante, con sus mismos nombres, así que los fundadores recorren el CMS como recorren el sitio. Campos a la medida muestran contadores de caracteres en vivo y no dejan guardar títulos y descripciones SEO que los buscadores cortarían, y un campo de medios permite buscar, explorar y subir imágenes sin salir de la página.
04
Texto editable que conserva su animación
El titular animado es un solo campo con una marca en línea para la palabra destacada. El componente lee esa marca y arma la animación palabra por palabra a partir de ella, así que los fundadores pueden reescribir el titular y la coreografía se ajusta sola.
05
Una migración tratada como auditoría SEO
El contenido anterior se extrajo y se auditó antes de mover nada: problemas priorizados de crítico a bajo, títulos reescritos para que quepan, descripciones cargadas de palabras clave reemplazadas. Hoy los metadatos de cada página salen del CMS, y el sitio incluye un sitemap construido desde su contenido y un llms.txt para asistentes de IA.
05
Dirección de arte y SEO, como código
Dos partes del proyecto que normalmente dependen de que alguien recuerde las reglas se convirtieron en sistemas que las hacen cumplir: el estilo de marca de cada imagen generada y los límites de los metadatos de búsqueda de cada página.
Cada pedido de imagen, envuelto en la marca
La estructura de la especificación por la que pasa cada imagen generada. Los valores están generalizados.
Pedido de imagen
Especificación de marca + preset por espacio
- Identidad
- Voz y tono
- Paleta
- Fija, con notas de uso
- Técnica
- Un solo estilo de ilustración
- Formato
- Preset por espacio
Siempre excluido
- Texto dentro de las imágenes
- Clichés de fotos de stock
- Rostros fotorrealistas
Metadatos de búsqueda, antes y después de la migración
Largo en caracteres. Los buscadores cortan los títulos cerca de 60 y las descripciones cerca de 160; el CMS ya no deja guardar nada más largo.
06
Resultados
- Un sitio completo a la medida construido en unas 25 horas de ingeniería registradas, a partir de una sola portada aprobada.
- Cinco plantillas de página, un par de docenas de componentes de interfaz y la coreografía de scroll, sin un solo mockup previo.
- Un CMS que los fundadores recorren como recorren el sitio, con campos que no aceptan metadatos de búsqueda fuera de límite.
- Cerca de veinte imágenes con IA coherentes con la marca, incluidas las de redes, y ninguna foto de stock.
- Todos los artículos migrados con su SEO limpio, más un sitemap construido desde el contenido y un llms.txt para asistentes de IA.
- Una página eliminada y otra rediseñada después de la primera revisión, resueltas en una sola sesión de trabajo, porque nada vivía en mockups.
- Trece guías de edición y arquitectura entregadas junto con el sitio.
07
Lo que aprendimos en el camino
El diseño maestro es lo que hace que funcione
La extrapolación con IA es tan buena como el sistema del que parte. Con una portada maestra sólida, el agente produce componentes que se sienten diseñados. Sin ella, produce resultados genéricos muy rápido.
Saber cuándo descartar lo que generó la IA
Se generaron videos de fondo, se evaluaron contra el diseño y se quitaron. Un mapa incrustado se reemplazó por una ilustración generada que encaja en el sistema. La velocidad no sirve de nada si el resultado no pertenece.
Las horas no son todo el calendario
La ingeniería tomó unas 25 horas, pero el calendario corrió varias semanas, incluida una pausa larga esperando contenido. Cuando la producción se vuelve así de rápida, el cuello de botella pasa al contenido y a las decisiones, y ahí es donde hay que planificar.
Stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- GSAP
- CMS headless basado en Git
- Campos de CMS a la medida
- Modelos de imagen de Gemini
- Resend
- Vercel
- llms.txt
- Agente de código de IA
¿Necesita un sitio que su equipo pueda manejar de verdad?
Convertimos un diseño sólido en un sitio completo y un CMS que su equipo puede administrar, sin meses de mockups de por medio.
Agende su discovery sessionLa identidad del cliente, su marca, textos y visuales se omiten por acuerdos de confidencialidad. Las horas vienen del registro de ingeniería y no incluyen el tiempo de diseño.