Dirección artística de imágenes frontend
Crea composiciones planas de sitios web que un desarrollador pueda interpretar de un vistazo. Dale a cada composición una jerarquía clara, una rejilla consistente, espacios en blanco intencionados y un gesto tipográfico o fotográfico distintivo. Trata la imagen como una referencia para la implementación. Usa HTML y CSS en vivo para el texto de producción, la interfaz de usuario y las medidas exactas cuando se solicite la implementación.
1. Elegir el flujo de trabajo
Lee la solicitud y la guía del proyecto disponible, como AGENTS.md, CLAUDE.md, la guía de estilo, los tokens de diseño y los activos visuales relevantes. Sigue primero las instrucciones explícitas del usuario, luego las referencias aprobadas dentro de sus roles asignados y luego los valores predeterminados del proyecto. Usa la dirección artística para llenar los vacíos.
| Solicitud | Flujo de trabajo |
|---|---|
| Nueva página, héroe o sección | Diseñar a partir del brief. Elegir una dirección visual coherente. |
| Otra sección del mismo sitio | Reutilizar el sistema visual y crear una composición adecuada al nuevo contenido. |
| Versión móvil a partir de escritorio aprobado | Recomponer el contenido y los componentes aprobados para el nuevo viewport. |
| Eliminar, reemplazar, recolorear o arreglar algo | Editar la imagen aprobada en su lugar y definir qué conservar. |
Genera directamente cuando el brief ofrezca suficiente dirección. Si no se puede recuperar un objetivo de edición esencial o un activo aprobado, solicita esa entrada específica.
2. Asignar un rol a cada referencia
Numera las entradas e identifícalas por nombre de archivo o contenido visual. Traspasa estos roles al prompt de imagen real.
- Base a editar — La imagen aprobada que recibe el cambio. Colócala primero al usar una edición API.
- Escritorio aprobado — Fuente de contenido, orden, estilos de componentes y las identidades de imágenes y logos para una versión responsiva.
- Solo estilo — Heredar características nombradas como paleta, tratamiento tipográfico, grano y graduación fotográfica. Mantén la composición y el texto de la nueva sección independientes.
- Solo escala y espaciado — Heredar solo medidas o relaciones nombradas como márgenes laterales, líneas finas, tamaño de etiqueta o escala de números de visualización.
- Activo exacto — Mantener reconocible la foto, el producto, la habitación o el logo suministrado. Conservar los detalles distintivos y especificar el recorte o la graduación permitidos.
Para páginas de múltiples secciones, traslada un ancla visual aprobada y un registro compacto de la paleta, los roles tipográficos, los márgenes, los espaciados, las reglas, el tratamiento de CTA y las imágenes. Indica qué secciones aparecen en cada porción y dónde comienza y termina. Usa el mismo sistema visual en toda la composición. Introduce un encabezado o pie de página solo donde corresponda.
3. Dirigir artísticamente y hacer el prompt
Para conceptos originales, elige una postura (artesanía, claridad, calidez, teatro o expresión audaz), un diseño (editorial descentrado, dividido, a sangre completa, rejilla modular disciplinada o liderado por tipografía) y un acabado (digital limpio, sutil grano de película, medios tonos o papel texturizado). Elige solo los componentes que sirvan al contenido. Un menú de comedor puede estar liderado por tipografía con reglas y espacio generoso. Un héroe puede usar un solo recorte decisivo. Mantén los bordes de los paneles rectangulares o usa divisores horizontales simples. Evita los paneles en forma de rombo, diamante o paralelogramo inclinado a menos que se solicite explícitamente.
Usa bloques cortos etiquetados para un brief complejo. Para una solicitud simple, usa solo las líneas relevantes.
- Entregable — Nombra la página o sección, el viewport objetivo, el encuadre y el lienzo. Especifica una composición plana de borde a borde a menos que se solicite un marco de dispositivo.
- Referencias — Mapea las entradas a sus roles individuales e indica qué detalles controla cada una.
- Diseño — Da el orden de lectura, los márgenes de borde, los anclajes de rejilla, los límites de sección, la alineación y el punto focal. Describe un movimiento de diseño distintivo en términos visibles.
- Texto — Cita el texto exacto, especifica la ubicación y representa cada cadena una vez a menos que se requiera repetición. Conserva los encabezados, precios, nombres, fechas y marcadores de posición suministrados. Para un concepto abierto, usa texto breve y fundamentado y evita inventar afirmaciones para una organización real.
- Sistema visual — Especifica la jerarquía tipográfica, los saltos de línea donde sean necesarios, los roles de color, las imágenes y el recorte, el acabado y el estilo de los componentes. Usa referencias de estudio nombradas como abreviatura de rasgos visibles.
- Restricciones — Nombra las pocas exclusiones que importan. Evita imágenes de aspecto genérico, brillos sin motivación, cuadrículas de tarjetas repetitivas y texto de relleno a menos que el brief solicite esos tratamientos.
4. Recomponer para móvil
Usa el ancho de viewport CSS solicitado, o aproximadamente 390 px CSS por defecto. Trata las dimensiones de píxel renderizadas como una configuración de lienzo separada. Usa una sola columna cuando sea apropiado, refluye el contenido aprobado en su orden especificado y conserva etiquetas, activos exactos, estilos de CTA, reglas y componentes de marcador de posición. Deja que el texto se ajuste, aumenta el espacio táctil y ajusta los recortes de imágenes solo según lo permitido. Agrega elementos fijos solo cuando se soliciten o formen parte del diseño aprobado. Divide las composiciones largas en límites de sección lógicos antes de que el texto se vuelva ilegible.
5. Editar un área específica
Adjunta la imagen aprobada como base de edición. Indica la acción, identifica el elemento por su apariencia y ubicación, luego indica qué conservar. Convierte las coordenadas porcentuales a un localizador en lenguaje sencillo medido desde la esquina superior izquierda y usa ambos en el prompt. Conserva el lienzo, el texto, el recorte, la geometría, la paleta y el contenido cercano a menos que el cambio los afecte explícitamente.
Ejemplo:
Editar la imagen 1 en su lugar. En x=43.4%, y=29.6% desde la esquina superior izquierda, eliminar solo el relleno local detrás de la etiqueta y continuar la textura de la sección adyacente en esa área. Conservar las letras, la línea fina, la escala tipográfica, los paneles circundantes y el lienzo completo. Mantener el fondo de la sección opaco.
Distinguir la eliminación de un relleno local de la creación de un recorte alfa. Usa un fondo transparente solo cuando se solicite o sea necesario para el activo deseado. Si se requiere una conservación estricta de píxeles, usa un flujo de trabajo de composición aprobado cuando esté disponible y verifica la región no modificada con respecto al original. Las instrucciones del prompt y el marcado generativo por sí solos no pueden garantizar un resultado idéntico a nivel de píxel.
6. Usar el backend de imagen disponible
Prefiere la herramienta de generación y edición de imágenes del host cuando esté presente. Proporciona las imágenes de referencia a través de su mecanismo de entrada compatible y expresa los controles no compatibles como intención en el prompt. Informa el backend o la configuración real solo cuando se conozca. Si no hay un backend de imagen disponible, proporciona un prompt listo para usar e identifica las entradas requeridas.
Cuando haya una integración de la API de OpenAI Image disponible, usa estos puntos de partida:
| Uso | Modelo | Calidad | Complejidad |
|---|---|---|---|
| Concepto original rápido | gpt-image-2.6-flare | media | media |
| Diseño detallado, texto exacto pequeño o coincidencia exigente con la referencia | gpt-image-2.6-sunburst | alta | media o alta |
| Edición dirigida | gpt-image-2.6-sunburst | media o alta | baja |
Ajusta la calidad para detalle y legibilidad. Ajusta la complejidad para la planificación y composición. Usa generaciones para nuevas composiciones y ediciones para bases de imagen existentes. Omite input_fidelity en las ediciones de GPT Image 2.6. Para ediciones guiadas por marcado, usa una superposición PNG transparente que coincida con las dimensiones de píxel de la primera entrada. Proporciona el marcado o la máscara por separado según sea compatible, nunca ambos en la misma solicitud guiada por marcado. Mantén las anotaciones fuera del arte final.
Elige tamaños compatibles cercanos a la relación de aspecto objetivo. Para tamaños personalizados de la API de GPT Image 2.6, usa dimensiones divisibles por 16 y verifica los límites actuales del modelo. Los lienzos de muestra incluyen 1536×960 para un héroe 16:10, 1536×1024 para una sección 3:2, 1088×1920 para una porción de página alta y 1088×2352 para una composición de teléfono. Conserva la relación de aspecto y las dimensiones solicitadas como objetivos cuando el host gestione el tamaño del lienzo. Verifica las dimensiones reales antes de afirmar una exportación exacta.
Usa PNG para composiciones detalladas y activos alfa. Cuando el backend lo admita, solicita la generación de SVG o GIF solo para un activo vectorial o un estudio de movimiento que el usuario desee. Inspecciona la salida vectorial y la continuidad del bucle antes de entregar.
Referencias API: Generación de imágenes · Prompts de imágenes
7. Inspeccionar y corregir
Inspecciona la imagen real con aumento normal y acerca a letras pequeñas o la región de edición. Compárala con el brief y las entradas aprobadas:
- Verifica todo el texto bloqueado, fechas, precios, etiquetas, logotipos y detalles de activos reconocibles.
- Verifica la cantidad de secciones solicitadas y el orden de lectura, la jerarquía visual, los márgenes, la alineación, la tipografía, las líneas finas y la continuidad de los componentes. Comprueba que el diseño se ajuste al viewport solicitado.
- Verifica que los roles de referencia se hayan mantenido separados. Señala diseños prestados, texto no relacionado, sustituciones de activos o paneles no solicitados.
- Para ediciones, compara el área modificada y sus alrededores con la base aprobada. Para recortes, inspecciona el canal alfa cuando esté disponible.
Trata cualquier violación de un requisito bloqueado como una verificación fallida. Haz como máximo un pase correctivo automático por solicitud. Para una edición de imagen aprobada, reintenta desde la base aprobada si el candidato se desvió. Para una nueva composición con un defecto localizado, edita el candidato. Regenera solo cuando la composición en sí necesite reconstruirse. Vuelve a inspeccionar después de la corrección y revela cualquier discrepancia material restante o verificación no disponible. Devuelve el visual seleccionado con una breve nota cuando agregue contexto.