Diseñar frontends sofisticados con GPT-5.4

• OpenAI publicó técnicas prácticas de prompting y guías de diseño para elevar las capacidades de desarrollo frontend de GPT-5.4
• La comprensión de imágenes, la completitud funcional y la capacidad de uso de computadora (Computer Use) son los ejes clave de mejora, lo que permite generar resultados visualmente más sofisticados y ambiciosos que con modelos anteriores
• Señala el problema de que, si el prompt es ambiguo, el modelo tiende a regresar a patrones de alta frecuencia de sus datos de entrenamiento y quedarse en diseños genéricos, y presenta técnicas concretas para superarlo
• Se destacan 4 consejos prácticos clave: definir el sistema de diseño, proporcionar referencias visuales, estructurar una narrativa y configurar un nivel de razonamiento bajo
• También publicó como open source un paquete de prompts independiente, frontend-skill, que puede usarse de inmediato en agentes de código como Codex

---

Mejoras del modelo

• GPT-5.4 se enfoca en tres mejoras sustanciales para tareas de frontend:
  • Refuerzo de la comprensión de imágenes
  • Generación de apps y sitios web más completos
  • Mejora en la capacidad de usar herramientas para inspeccionar, probar y verificar su propio trabajo

• Comprensión de imágenes y uso de herramientas

  • Fue entrenado para usar de forma nativa la búsqueda de imágenes y herramientas de generación de imágenes, por lo que puede realizar razonamiento visual directamente en el proceso de diseño
  • Para obtener los mejores resultados, recomienda indicarle al modelo que primero genere un moodboard o varias opciones visuales antes de elegir los assets finales
  • Es posible guiarlo hacia referencias visuales potentes describiendo explícitamente los atributos que debe capturar la imagen, como estilo, paleta de colores, composición y atmósfera
  • Presenta un patrón de prompt que especifica que, por defecto, se prioricen imágenes subidas o pregeneradas y, si no existen, se creen nuevos visuales con la herramienta de generación de imágenes

• Mejora en la completitud funcional

  • Fue entrenado para desarrollar aplicaciones más completas y funcionalmente sólidas
  • Es más estable en tareas de larga duración y ahora puede implementar en 1 o 2 turnos juegos o experiencias de usuario complejas que antes no eran posibles

• Computer Use y verificación

  • GPT-5.4 es el primer modelo principal entrenado para Computer Use, con capacidad de navegar interfaces de forma nativa
  • Combinado con Playwright, puede inspeccionar páginas renderizadas, probar varios viewports, recorrer los flujos de la app y detectar problemas de estado y navegación
  • Si se le proporcionan herramientas o skills de Playwright, aumenta significativamente la probabilidad de que GPT-5.4 genere interfaces sofisticadas y funcionalmente completas
  • Gracias a su mejor comprensión de imágenes, también puede validar visualmente el resultado y comprobar si coincide con la UI de referencia proporcionada

Inicio rápido de consejos prácticos

• Si solo se van a adoptar unas pocas prácticas, conviene comenzar con estas 4:
  • Empezar con un nivel de razonamiento bajo (low reasoning level)
  • Definir de antemano el sistema de diseño y sus restricciones, como tipografía, paleta de colores y layout
  • Establecer barandales visuales con referencias visuales o moodboards, por ejemplo adjuntando capturas de pantalla
  • Definir por adelantado una narrativa o estrategia de contenido para guiar la generación de contenido del modelo
• Prompt inicial
  • When doing frontend design tasks, avoid generic, overbuilt layouts.
  • Al hacer tareas de diseño frontend, evita layouts genéricos y sobrecargados
  • Use these hard rules:
  • Aplica estas reglas estrictas:
    • One composition: The first viewport must read as one composition, not a dashboard (unless it's a dashboard).
    • El primer viewport debe leerse como una sola composición, no como un dashboard, salvo que efectivamente sea un dashboard
    • Brand first: On branded pages, the brand or product name must be a hero-level signal, not just nav text or an eyebrow. No headline should overpower the brand.
    • En páginas de marca, el nombre de la marca o del producto debe ser una señal de nivel hero, no solo texto de navegación o un eyebrow. Ningún titular debe opacar a la marca
    • Brand test: If the first viewport could belong to another brand after removing the nav, the branding is too weak.
    • Si, al quitar la navegación, el primer viewport podría pertenecer a otra marca, entonces el branding es demasiado débil
    • Typography: Use expressive, purposeful fonts and avoid default stacks (Inter, Roboto, Arial, system).
    • Usa tipografías expresivas y con intención, y evita las pilas tipográficas por defecto (Inter, Roboto, Arial, system)
    • Background: Don't rely on flat, single-color backgrounds; use gradients, images, or subtle patterns to build atmosphere.
    • No dependas de fondos planos de un solo color; usa gradientes, imágenes o patrones sutiles para construir atmósfera
    • Full-bleed hero only: On landing pages and promotional surfaces, the hero image should be a dominant edge-to-edge visual plane or background by default. Do not use inset hero images, side-panel hero images, rounded media cards, tiled collages, or floating image blocks unless the existing design system clearly requires it.
    • En landing pages y superficies promocionales, la imagen hero debe ser por defecto un plano visual full-bleed (edge-to-edge) o un fondo dominante. No uses imágenes hero insertadas, heroes en panel lateral, tarjetas multimedia redondeadas, collages en mosaico ni bloques de imagen flotantes, salvo que el sistema de diseño existente lo exija claramente
    • Hero budget: The first viewport should usually contain only the brand, one headline, one short supporting sentence, one CTA group, and one dominant image. Do not place stats, schedules, event listings, address blocks, promos, "this week" callouts, metadata rows, or secondary marketing content in the first viewport.
    • El primer viewport normalmente debe contener solo la marca, un titular, una breve frase de apoyo, un grupo de CTA y una imagen dominante. No coloques estadísticas, horarios, listados de eventos, bloques de dirección, promociones, llamados de “esta semana”, filas de metadatos ni contenido secundario de marketing en el primer viewport
    • No hero overlays: Do not place detached labels, floating badges, promo stickers, info chips, or callout boxes on top of hero media.
    • No pongas overlays sobre el hero: no coloques etiquetas sueltas, badges flotantes, stickers promocionales, chips informativos ni cajas de callout sobre el contenido multimedia hero
    • Cards: Default: no cards. Never use cards in the hero. Cards are allowed only when they are the container for a user interaction. If removing a border, shadow, background, or radius does not hurt interaction or understanding, it should not be a card.
    • Por defecto, no uses tarjetas. Nunca uses tarjetas en el hero. Solo se permiten cuando son el contenedor de una interacción del usuario. Si quitar el borde, la sombra, el fondo o el radio no afecta la interacción ni la comprensión, entonces no debería ser una tarjeta
    • One job per section: Each section should have one purpose, one headline, and usually one short supporting sentence.
    • Una tarea por sección: cada sección debe tener un propósito, un titular y por lo general una breve frase de apoyo
    • Real visual anchor: Imagery should show the product, place, atmosphere, or context. Decorative gradients and abstract backgrounds do not count as the main visual idea.
    • Las imágenes deben mostrar el producto, el lugar, la atmósfera o el contexto. Los gradientes decorativos y los fondos abstractos no cuentan como la idea visual principal
    • Reduce clutter: Avoid pill clusters, stat strips, icon rows, boxed promos, schedule snippets, and multiple competing text blocks.
    • Reduce el ruido visual: evita grupos de pills, franjas de estadísticas, filas de íconos, promociones en caja, fragmentos de horarios y múltiples bloques de texto compitiendo entre sí
    • Use motion to create presence and hierarchy, not noise. Ship at least 2-3 intentional motions for visually led work.
    • Usa movimiento para crear presencia y jerarquía, no ruido. Implementa al menos 2 o 3 movimientos intencionales en trabajos guiados por lo visual
    • Color & Look: Choose a clear visual direction; define CSS variables; avoid purple-on-white defaults. No purple bias or dark mode bias.
    • Elige una dirección visual clara, define variables CSS y evita los defaults de morado sobre blanco. Sin sesgo hacia el morado ni hacia el modo oscuro
    • Ensure the page loads properly on both desktop and mobile.
    • Asegúrate de que la página cargue correctamente tanto en desktop como en móvil
    • For React code, prefer modern patterns including useEffectEvent, startTransition, and useDeferredValue when appropriate if used by the team. Do not add useMemo/useCallback by default unless already used; follow the repo's React Compiler guidance.
    • En código React, prefiere patrones modernos como useEffectEvent, startTransition y useDeferredValue cuando corresponda y si el equipo los usa. No agregues useMemo/useCallback por defecto salvo que ya se estén usando; sigue la guía de React Compiler del repositorio
    • Exception: If working within an existing website or design system, preserve the established patterns, structure, and visual language.
    • Excepción: si trabajas dentro de un sitio web o sistema de diseño existente, conserva los patrones, la estructura y el lenguaje visual establecidos

Técnicas para lograr mejores diseños

• Empezar por los principios de diseño

  • Define restricciones como un solo titular H1, máximo 6 secciones, máximo 2 tipografías, un color de acento y un CTA principal por encima del pliegue

• Proporcionar referencias visuales

  • Las capturas de referencia o moodboards ayudan a inferir el ritmo del layout, la escala tipográfica, el sistema de espaciado y el tratamiento de imágenes
  • Incluye un ejemplo donde GPT-5.4 genera su propio moodboard para revisión del usuario, inspirado en la cultura cafetera de NYC y la estética Y2K

• Estructurar la página como narrativa

  • Estructura típica de una página de marketing:
    • Hero — establece la identidad y la promesa
    • Supporting imagery — expresa el contexto o entorno
    • Product detail — explica la propuesta
    • Social proof — aporta credibilidad
    • Final CTA — convierte el interés en acción

• Indicar cumplimiento del sistema de diseño

  • Conviene impulsar el establecimiento de un sistema de diseño claro al inicio de la construcción
  • Definir los tokens de diseño clave: background, surface, primary text, muted text, accent
  • Definir los roles tipográficos: display, headline, body, caption
  • En la mayoría de los proyectos web, comenzar con el stack de React y Tailwind suele ser efectivo, y GPT-5.4 muestra un rendimiento particularmente fuerte con estas herramientas
  • Al trabajar con animaciones, overlays y capas decorativas, se recomienda incluir guías de comportamiento de layout seguro para que los elementos UI fijos o flotantes no se superpongan con contenido clave como texto y botones

• Bajar el nivel de razonamiento

  • En sitios web simples, más razonamiento no siempre significa mejores resultados
  • Los niveles de razonamiento bajo (low) y medio (medium) suelen producir resultados frontend más sólidos
  • Esto permite que el modelo sea más rápido, enfocado y menos proclive a sobrepensar, además de dejar más margen para diseños más ambiciosos

• Construir la base del diseño con contenido real

  • Proporcionar copy real, contexto del producto y objetivos claros del proyecto es una de las formas más simples de mejorar los resultados frontend
  • Ese contexto ayuda a elegir la estructura correcta del sitio, construir una narrativa más clara por sección y redactar mensajes más convincentes en lugar de placeholders genéricos

Paquete de prompts Frontend Skill

• Para ayudar a aprovechar GPT-5.4 en tareas frontend generales, se publicó en GitHub el [frontend-skill](https://github.com/openai/skills/…) dedicado
• Proporciona una guía sólida sobre estructura, gusto y patrones de interacción, para generar por defecto diseños más sofisticados, intencionales y agradables
• Puede instalarse dentro de la app de Codex con el comando $skill-installer frontend-skill

• Estructura central de Frontend Skill

  • Working Model: antes de construir, redactar primero tres cosas: una tesis visual (atmósfera, materialidad, energía), un plan de contenido (hero, support, detail, final CTA) y una tesis de interacción (2 o 3 ideas de movimiento)
  • Beautiful Defaults: empezar por la composición, no por los componentes. Preferir heroes full-bleed, hacer que la marca o el nombre del producto sea el texto más grande, que el copy pueda escanearse en pocos segundos y usar por defecto layouts sin tarjetas
  • Secuencia base para Landing Pages: Hero → Support → Detail → Final CTA
    • Reglas del hero: una sola composición, imagen full-bleed, prioridad para la marca, sin tarjetas, franjas de estadísticas ni nubes de logos en el hero
    • Presupuesto de viewport: si hay un header fijo, debe caber dentro del viewport inicial sumado al hero
  • Apps: por defecto, contención al estilo Linear — jerarquía de superficies sobria, tipografía y espaciado fuertes, pocos colores y tarjetas solo cuando haya interacción
  • Imagery: las imágenes deben cumplir un rol narrativo, y se prefieren fotografías con sensación de realidad sobre gradientes abstractos u objetos 3D falsos. Debe haber un ancla visual real en el primer viewport
  • Copy: escribir en el lenguaje del producto, no como comentario de diseño. El titular debe transmitir significado, y si la página mejora al eliminar 30% del copy, seguir eliminando
  • Utility Copy: en dashboards, apps y herramientas de administración, por defecto usar copy utilitario en lugar de copy de marketing: primero dirección, estado y acción
  • Motion: movimiento para presencia y jerarquía, no ruido. Implementar al menos 2 o 3 movimientos intencionales, como secuencias de entrada del hero, efectos ligados al scroll y transiciones de hover o reveal. Se prefiere Framer Motion
  • Hard Rules: sin tarjetas por defecto, una idea dominante por sección, no más de 2 tipografías, no más de 1 color de acento, sin copy de relleno
  • Litmus Checks: comprobar si la marca queda clara en la primera pantalla, si hay un ancla visual fuerte, si el titular por sí solo permite entender la página, si cada sección cumple solo un rol, si las tarjetas realmente son necesarias y si el movimiento mejora la jerarquía

Resultados de ejemplo

• Presenta ejemplos generados con Frontend Skill en tres categorías: landing pages, juegos y dashboards, cada una con múltiples demos en video

Puntos clave

• GPT-5.4 puede generar interfaces frontend de alta calidad cuando el prompt incluye restricciones de diseño claras, referencias visuales, una narrativa estructurada y un sistema de diseño definido
• Los proyectos creados completamente con GPT-5.4 en agentes de código como Codex pueden enviarse a la galería de OpenAI para ser exhibidos

[ndrgrd]

Siendo sinceros, cuando ves los frontends de los servicios con LLM, son tan lentos, les faltan tantas funciones y la interacción es tan incómoda que este tipo de artículos solo me dan risa.

[click]

Lo uso por KakaoTalk ChatGPT Pro, pero siento que todos los diseños frontend que hace GPT se ven apagados.

[slowandsnow]

No usen gpt para frontend bajo ninguna circunstancia. Es lo peor. Compárenlo con opus usando el mismo prompt.

[frogbam]

El diseño frontend suele quedar bastante flojo con GPT, así que hice que lo generara otro modelo; ojalá que con este salga algo decente.

[angrybird0]

Tengo curiosidad por saber qué diferenciación tendrá frente a frontend-design de Claude.
Creo que sería difícil compararlos en términos de quién hace mejor diseño frontend, pero seguramente lo importante es el hecho de que también salió en Codex, ¿no?