ai for designersApril 17, 202610 min read

Prompt Engineering para Diseñadores: De los Briefs Vagos al Output de IA Usable

Las cinco partes de un prompt que produce trabajo que un diseñador puede entregar. Ejemplos trabajados en generación de imágenes, prototipado de UI y agentes de código.

By Boone
XLinkedIn
prompt engineering for designers
Hero: La mano de un diseñador con un brief anotado a papel a la izquierda que se disuelve en texto de prompt estructurado a la derecha, composición editorial
Hero: La mano de un diseñador con un brief anotado a papel a la izquierda que se disuelve en texto de prompt estructurado a la derecha, composición editorial

Si tu output de IA parece fotografía de stock, tu prompt se lee como un deseo.

Ese es el problema central de cómo la mayoría de los diseñadores aprendieron a usar las herramientas de IA. "Hazme una imagen hero para una startup fintech" no es un prompt. Es un vibe. Un prompt es lo que dirías si estuvieras haciendo el briefing a un ilustrador freelance que cobra 400 dólares la hora y hace preguntas precisas.

Los diseñadores ya saben hacer esto. Escribiste briefs en la escuela. Escribes briefs en el trabajo cada semana. Sabes cómo se ve la claridad, la referencia y la restricción cuando están escritas. Los prompts de IA son la misma habilidad, con una audiencia diferente.

Un prompt es un brief de diseño en prosa

Deja de pensar en los prompts como palabras mágicas. Piénsalos como el primer párrafo de un brief creativo, más las especificaciones finales al pie.

Un buen brief le dice al creador quién es, para qué es el objeto, cuáles son las reglas, qué referenciar y cómo es el entregable. Si falta cualquiera de esos elementos, obtienes trabajo que técnicamente está en la zona pero emocionalmente está desviado. Pídele a un junior que "diseñe un logo para una cafetería" y obtienes doce granos de café. Pídele que "diseñe un logo para una cafetería de tercera ola orientada a freelancers, usando un wordmark, sans geométrico, sin pictogramas, inspirado en la austeridad de Blue Bottle" y llegas a algún lado.

Los prompts funcionan igual. El instinto de ser vago porque el modelo es inteligente es el error más caro en el trabajo de diseño asistido por IA. Ser específico no es pedante. Es todo el juego.

Un buen prompt se lee como un brief de diseño. Un mal prompt se lee como un deseo.

Las cinco partes que tiene todo prompt usable

Todo prompt que produce output de diseño entregable tiene cinco partes. Puedes memorizarlas, puedes ponerlas en una plantilla, puedes imprimirlas en un post-it. Las partes:

  1. Rol. ¿Quién finge ser la IA? ("Eres un ilustrador editorial senior con diez años de experiencia en The New Yorker.")
  2. Contexto. ¿Para qué es el objeto, y para quién? ("Esta imagen es el hero de un post de blog sobre diseñadores que aprenden a trabajar con herramientas de IA. La audiencia son diseñadores profesionales, early adopters, escépticos pero curiosos.")
  3. Restricciones. ¿Cuáles son las reglas? ("Editorial, no corporativo. Sin computadoras visibles. Sin fotografía de stock. Color plano, silueta fuerte, alto contraste, bajo detalle.")
  4. Referencias. ¿Cómo debe verse o sentirse? ("Líneas de Saul Steinberg cruzadas con la austeridad de los pósteres de turismo suizo de los años 60. Paleta de color de la marca: fondo #080404, acento #ff6434.")
  5. Especificación de output. ¿Cuáles son las especificaciones del entregable? ("Relación de aspecto 16:9, 1200x630, PNG, sin texto dentro de la imagen.")

Omite el rol y obtienes output mediocre. Omite el contexto y obtienes output dirigido a nadie. Omite las restricciones y obtienes lo que el modelo supone que quieres, que generalmente es fotografía de stock. Omite las referencias y el output deriva hacia los datos de entrenamiento dominantes. Omite la especificación de output y obtienes las dimensiones equivocadas.

Parte del promptQué haceQué pasa si la omites
RolEstablece el gusto y el nivel de experienciaOutput genérico
ContextoLe dice al modelo para qué es el trabajoResuelve el problema equivocado
RestriccionesDefine qué evitarObtienes los clichés que odias
ReferenciasAncla la dirección visual o tonalDeriva hacia los promedios de entrenamiento
Especificación de outputControla el formato y el entregableDimensiones incorrectas, formato incorrecto
Un diagrama etiquetado que muestra las cinco partes de un prompt organizadas como un brief creativo con frases de ejemplo bajo cada sección
Un diagrama etiquetado que muestra las cinco partes de un prompt organizadas como un brief creativo con frases de ejemplo bajo cada sección

Ejemplo trabajado: generación de imagen para un hero visual

La versión vaga que todo diseñador ha escrito al menos una vez:

"Imagen hero para un post de blog sobre prompt engineering para diseñadores."

Lo que obtienes: un diseñador frente a una laptop, o un cerebro brillante, o un robot sosteniendo un lápiz, o alguna combinación de los tres. Stock. Muerto.

La versión estructurada:

Eres un ilustrador editorial que ha trabajado para The New Yorker y Wired durante diez años. Crea una imagen hero para un post de blog titulado "Prompt Engineering para Diseñadores". La audiencia son diseñadores profesionales que son escépticos del hype de IA pero listos para usar las herramientas en serio.

Composición: el brief en papel de un diseñador a la izquierda del encuadre, dibujado a mano con anotaciones, disolviéndose o resolviéndose en texto de prompt limpio y tipeado a la derecha. Implica la traducción entre brief de oficio y prompt estructurado.

Estilo: editorial, color plano, silueta fuerte, alto contraste, bajo detalle. Textura de papel aceptable. Sin computadoras. Sin robots. Sin cerebros. Sin esferas brillantes.

Referencias: líneas de Saul Steinberg para el brief. Austeridad del póster de turismo suizo para el lado del prompt. Paleta de marca: fondo #080404, acento #ff6434, neutro #d0d3d8.

Output: 1200x630, sin texto dentro de la imagen.

Lo que obtienes: una imagen hero que puedes realmente entregar, no regenerar cuatro veces.

La diferencia no es talento. Es estructura.

Ejemplo trabajado: prototipo de UI en v0 o Lovable

Vago:

"Construye una landing page para una agencia de diseño."

Lo que obtienes: una plantilla con sabor a Tailwind con gradiente de stock, tres cards de características, un hero de stock, y copy que se lee como cualquier otra agencia en internet.

Estructurado:

Construye una landing page para Brainy, un estudio de diseño conocido por 2M+ seguidores en Instagram y Threads. Audiencia: fundadores de empresas SaaS de series A a C que necesitan servicios de marca, web y diseño. Han visto todos los sitios de agencias. Rebotan si parece una plantilla.

Layout: hero de una columna con un titular en negrita de una línea y un único CTA, seguido de una franja de desplazamiento horizontal de logos de clientes, seguido de un explicador de tres partes sobre los servicios (marca, web, contenido) usando un patrón bento-grid, seguido de una sección de testimonios con tres citas, seguido de un footer de contacto simple.

Restricciones: sin gradientes, sin imágenes de stock, sin ilustraciones hero genéricas. Solo modo oscuro, fondo #080404. Acento #ff6434. Tipografía: un sans-serif para todo, negrita para titulares, light para el cuerpo. Todo usa una escala de espaciado de 4px.

Referencias: la austeridad de espaciado de Linear. El peso tipográfico de Vercel. El patrón de sección bento-grid de Apple. No es un clon de ninguno de ellos.

Output: responsivo, mobile-first, componentes shadcn.

La misma herramienta. Output completamente diferente.

Cuatro iteraciones del mismo prompt hero, cada una visiblemente más refinada que la anterior, mostrando la mejora de vago a estructurado
Cuatro iteraciones del mismo prompt hero, cada una visiblemente más refinada que la anterior, mostrando la mejora de vago a estructurado

Ejemplo trabajado: agente de código construyendo un componente

Vago:

"Hazme un componente Button."

Lo que obtienes: un Button. Una variante. Sin accesibilidad. Sin estado de foco. Colores que no pediste.

Estructurado:

Eres un ingeniero senior de sistemas de diseño. Construye un componente Button en nuestro design system.

Contexto: este Button reemplaza nuestros estilos de botón ad-hoc dispersos en doce páginas de marketing. Necesita soportar variantes primaria, secundaria y ghost, tres tamaños (sm, md, lg), y estados loading, disabled y focus.

Restricciones: usa nuestros tokens existentes de tokens.css (no introduzcas colores nuevos). El anillo de foco debe ser 2px offset --color-accent. Nunca uses px para el espaciado, siempre usa tokens --space. La tipografía es siempre --font-sans con --text-sm o --text-base según el tamaño. El estado loading muestra un spinner y deshabilita los clics.

Referencias: primitivos de Radix UI para patrones de accesibilidad. Nuestro componente Card existente en /components/Card.tsx como referencia de estructura de archivo.

Output: TypeScript, Tailwind, story de Storybook que ejercita cada variante y estado. Tests que cubren los comportamientos disabled, loading y focus.

Dale esto a un agente de código y obtienes un Button real. Dale "hazme un Button" y obtienes algo que reescribirás a mano.

La biblioteca de restricciones que todo diseñador debería robar

Las restricciones son el arma secreta. También son la parte que los diseñadores menos usan. Copia esta biblioteca, pega las filas relevantes en tus prompts, ajusta para tu marca.

DominioRestricciones a incluir
IlustraciónColor plano, silueta fuerte, alto contraste, bajo detalle, sin texto en la imagen, sin computadoras/teléfonos/robots/cerebros a menos que sea explícitamente requerido, editorial no corporativo
Generación de estilo fotográficoSin apariencia de foto de stock, sin iluminación brillante, sin renders 3D a menos que se solicite, composición natural, imperfecciones del mundo real bienvenidas
Generación de UIUsa componentes existentes, sin colores nuevos fuera de tokens, mobile-first, accesibilidad requerida (estados de foco, ratios de contraste), sin gradientes a menos que la marca lo requiera
TipografíaUn sans-serif para UI, serif solo si la marca lo requiere, no más de tres pesos en una composición, sin texto justificado, sin mayúsculas corridas de más de 4 palabras
ColorUsa tokens no hex, nunca texto blanco sobre negro puro, nunca rojo puro sobre verde puro, contraste mínimo 4.5:1 para texto de cuerpo
LayoutEscala de espaciado de 4px u 8px, nunca centrar el copy de cuerpo, nunca justificación completa, máximo 75 caracteres por línea, anclar imágenes a la izquierda a menos que la composición lo exija
CódigoTypeScript estricto, exports con nombre no por defecto, sin nuevas dependencias sin preguntar, cobertura de tests para cada componente nuevo

Úsalos como bloques listos para pegar. Al principio te parecerá ridículo. Luego te darás cuenta de que el output mejoró el doble de la noche a la mañana.

Una biblioteca de restricciones basada en cards organizada por dominio de diseño, como una hoja de trucos personal del diseñador
Una biblioteca de restricciones basada en cards organizada por dominio de diseño, como una hoja de trucos personal del diseñador

Si quieres más análisis de flujos de trabajo con IA, navega el resto de Brainy Papers. Si quieres una biblioteca de prompts real construida para la marca de tu equipo, no tu historial aleatorio de ChatGPT, contrata a Brainy.

Cómo iterar sin empezar de cero

El peor hábito en el prompt engineering es borrar el prompt completo y reescribirlo cuando el output no está bien. Nueve de cada diez veces, el prompt estaba cerca. Una variable estaba mal.

Itera con precisión quirúrgica. Cambia una cosa a la vez.

  1. Ejecuta el prompt una vez. Nota qué está mal.
  2. Identifica cuál de las cinco partes está fallando. Si el output es demasiado genérico, las referencias son débiles. Si tiene los elementos equivocados, las restricciones no incluyen un "sin X." Si está dirigido a la audiencia equivocada, el contexto es delgado.
  3. Edita solo esa parte. No reescribas todo.
  4. Ejecuta de nuevo. Compara con el primer output. ¿Mejor, peor, igual?
  5. Repite. Tres a cinco rondas generalmente llegan al objetivo.

Relacionado: el deterioro de contexto es real. Si estás iterando en el mismo chat y el output empeora en lugar de mejorar, la sesión está contaminada. Abre un nuevo chat, pega el mejor prompt actual, sigue adelante.

Los tres errores que garantizan basura

Tres patrones que veo cada semana, cada uno mata la calidad del output.

Error 1: "Hazlo mejor." El modelo no sabe qué significa mejor para ti. "Mejor" significa el promedio del modelo de mejor, que es regresión a la media. Sé específico. "Haz el contraste de color más fuerte." "Haz la composición más asimétrica." "Elimina la mitad del detalle del fondo."

Error 2: Pedir cinco opciones a la vez. Obtienes cinco opciones mediocres en lugar de una buena. Pide una. Itera. Acepta la primera buena.

Error 3: No dar referencias. Las referencias anclan el gusto del modelo. Sin ellas, obtienes el promedio de los datos de entrenamiento. Con tres referencias bien elegidas, obtienes algo en el vecindario de lo que querías.

Preguntas frecuentes

¿El prompt engineering es una habilidad real o hype?

Es una habilidad real, y es la misma habilidad que escribir un buen brief creativo. Si puedes hacer el briefing a un freelancer, puedes hacer el prompting a un modelo. El hype es llamarlo "engineering". La realidad es llamarlo "instrucciones claras."

¿Qué herramienta tiene el mejor manejo de prompts?

Para imágenes, Midjourney y Gemini Pro funcionan mejor con prompts de texto detallados. Para UI, v0 y Lovable responden bien a restricciones estructuradas. Para código, Claude Code y Cursor son los más fuertes, especialmente con un CLAUDE.md bien escrito. La herramienta importa menos que la calidad del prompt.

¿Debería usar una biblioteca de prompts?

Sí. Construye una. Organiza por caso de uso. Cada vez que domines un prompt, guárdalo. Cada vez que uno falle, anota por qué. En tres meses tendrás una biblioteca más valiosa que cualquier suscripción a una herramienta.

¿Cuánto debe durar un prompt?

Lo suficientemente largo como para cubrir las cinco partes, lo suficientemente corto como para que cada oración esté haciendo trabajo. La mayoría de los míos tienen entre 100 y 300 palabras. Más corto que eso y estás subespecificando. Mucho más largo y probablemente te estás repitiendo.

¿Necesito aprender trucos técnicos de prompting como temperatura o top_p?

No para la mayoría del trabajo de diseño. Esos viven en llamadas a API, no en interfaces de chat. Primero domina las cinco partes. Puedes preocuparte por los parámetros cuando estés haciendo llamadas a API.

Escríbelo como si lo dijeras en serio

Cada prompt vago es un desvío de diez minutos que produce basura. Cada prompt estructurado es una inversión de diez minutos que se entrega.

Escribe el rol, el contexto, las restricciones, las referencias y la especificación de output. Itera una variable a la vez. Guarda los que funcionan.

Ya sabes cómo escribir un brief. El modelo es un junior en el otro extremo.

Escríbelo como si lo dijeras en serio.

Need a prompt library that ships your brand, not generic AI output? Brainy builds it with you.

Get Started