¿Qué hace Alfabetización Visual: Enseñar a la IA a Ver como un Diseñador?
La IA no solo necesita instrucciones. Necesita modelos enseñables de la experiencia humana.
Qué Es Esto
Alfabetización Visual es un marco de razonamiento (no una plantilla de prompt, no una guía de formato, no una utilidad CSS). Enseña a la IA a tomar decisiones de diseño visual modelando cómo los humanos perciben la información.
El problema que resuelve: la IA puede generar un diseño. No puede decirte si el diseño funciona. No nota una jerarquía plana, un ritmo roto, un énfasis conflictivo o una sobrecarga cognitiva. Este marco le proporciona esas percepciones como principios de razonamiento explícitos.
Esto Aumenta el Juicio Humano. No lo Reemplaza.
La Alfabetización Visual enseña a la IA a razonar sobre diseño para que los humanos puedan tomar mejores decisiones más rápido, no para que la IA tome decisiones sola.
El objetivo es una colaboración:
- La IA proporciona análisis estructurado, razonamiento perceptivo y marcos de diagnóstico
- Los humanos proporcionan intención, gusto, contexto, conocimiento de la audiencia y juicio final
Una IA que puede puntuar un diseño de 0 a 5 en ocho dimensiones es útil. Una IA que anula la decisión informada de un diseñador porque obtuvo una puntuación más baja en una rúbrica no lo es.
Usa este marco para agudizar tu pensamiento, no para externalizarlo.
La Premisa
La IA no posee intuición visual. No puede reconocer instantáneamente si una página se siente equilibrada, abarrotada, inacabada, confusa o elegante. Esta intuición debe traducirse a principios de razonamiento explícitos.
Enseñar alfabetización visual a la IA significa enseñarle no solo cómo formatear información, sino cómo los humanos perciben la información.
El cambio es de formato a percepción.
El Principio Central
Cada decisión visual debe ser explicable en términos de cómo un humano percibirá y procesará la información.
Si no puedes explicar por qué una elección visual ayuda a un humano a entender, es decoración. Si puedes explicarlo en términos de cognición, es diseño.
Inicio Rápido
1. Copia la habilidad a tu proyecto
# Clona el repositorio
git clone https://github.com/amberhoward/visual-literacy.git
# Copia al directorio de habilidades de tu proyecto
cp -r visual-literacy/.opencode/skills/visual-literacy ./tu-proyecto/.opencode/skills/
2. Dile a tu IA que la use
En tu prompt o mensaje de sistema:
Usa la habilidad visual-literacy para evaluar y razonar sobre el diseño de este documento.
3. Ve la diferencia
Antes (instrucción de formato):
"Haz los encabezados más grandes y añade más espacio en blanco."
Después (razonamiento perceptivo):
"La jerarquía visual es insuficiente: el lector no puede escanear e identificar la estructura de la información. El espaciado entre secciones no relacionadas no las diferencia del espaciado dentro de las secciones. Aumenta el contraste entre encabezado y cuerpo. Usa un espaciado entre secciones de 2-3 veces el espaciado dentro de la sección para señalar la distancia conceptual."
Cuándo Usar Esta Habilidad
Usa esta habilidad cuando:
- Crear cualquier documento, informe o presentación
- Diseñar interfaces o diseños
- Evaluar o criticar diseños existentes
- Tomar decisiones sobre espaciado, jerarquía, agrupación o énfasis
- Traducir una instrucción de formato en una decisión perceptiva
- Depurar por qué algo "se siente mal" pero no puedes nombrar por qué
- Realizar una revisión de diseño o auditoría de UX
Los Tres Modos
Modo 1: Diseño (Proactivo)
Al crear algo nuevo, razona a través de las decisiones visuales usando las heurísticas antes de producir la salida. No esperes a que te pregunten por qué elegiste un diseño en particular.
Cómo usarlo: Pide a la IA que recorra su razonamiento visual antes de generar el diseño:
Antes de diseñar esta página, recorre tu razonamiento perceptivo:
1. ¿Cuál es la estructura de la información?
2. ¿Cómo percibirá esto un humano?
3. ¿Qué carga cognitiva estoy poniendo sobre el lector?
4. ¿La estructura visual comunica intención?
Luego genera el diseño basado en ese razonamiento.
Modo 2: Crítica (Evaluativa)
Al revisar trabajo existente, diagnostica los problemas usando el marco perceptivo. Nombra qué está mal, por qué está mal y qué principio cognitivo se está violando.
Cómo usarlo: Proporciona una captura de pantalla, código o descripción y pide una crítica estructurada:
Usando la rúbrica de evaluación de visual-literacy, critica este diseño.
Puntúa cada dimensión de 0 a 5, identifica los niveles de gravedad y proporciona
recomendaciones de corrección específicas con fundamento perceptivo.
Modo 3: Traducción (Instructiva)
Cuando se te dé una instrucción de formato, tradúcela a la intención perceptiva detrás de ella. Luego ejecuta el objetivo perceptivo, no la instrucción literal.
Cómo usarlo: Da una instrucción de formato y pide la traducción:
Quiero "añadir más espacio en blanco a esta página." Usando la guía de traducción
de formato a percepción, explica la intención perceptiva detrás de esta instrucción
y luego ejecútala correctamente.
Proceso de Razonamiento Perceptivo
Antes de tomar cualquier decisión visual, recorre esta secuencia:
1. ¿Cuál es la estructura de la información?
- ¿Cuál es el contenido principal?
- ¿Cuál es la jerarquía de importancia?
- ¿Qué se agrupa lógicamente?
- ¿Qué debe leerse en secuencia vs. qué se puede escanear?
2. ¿Cómo percibirá esto un humano?
- ¿Dónde irá el ojo primero? ¿Es el lugar correcto?
- ¿Puede el lector escanear y encontrar lo que necesita en menos de 5 segundos?
- ¿Los conceptos relacionados están visualmente conectados?
- ¿Hay una ruta clara a través del contenido?
3. ¿Qué carga cognitiva estoy poniendo sobre el lector?
- ¿Cuántas decisiones debe tomar el lector en cada punto?
- ¿Le estoy pidiendo que retenga información en la memoria de trabajo?
- ¿Puede recuperar su lugar fácilmente si es interrumpido?
- ¿La densidad es apropiada para el tipo de contenido?
4. ¿La estructura visual comunica intención?
- ¿Cada elemento gana su espacio?
- ¿El espaciado comunica relación o accidente?
- ¿Los patrones se repiten con propósito o inconsistencia?
- ¿La página se siente completa, no abandonada?
El Marco Heurístico
Ocho categorías, 24 heurísticas, un sistema de prioridad.
| Categoría | Cantidad | Pregunta Central |
|---|---|---|
| Jerarquía | 3 | ¿El ojo sabe dónde mirar primero? |
| Agrupación | 3 | ¿Los elementos relacionados están visualmente conectados? |
| Ritmo | 3 | ¿Puede el lector formar expectativas? |
| Énfasis | 3 | ¿La información importante destaca? |
| Equilibrio | 2 | ¿El peso visual se distribuye intencionadamente? |
| Completitud | 3 | ¿La página se siente resuelta? |
| Flujo | 3 | ¿Hay una ruta clara a través del contenido? |
| Moderación | 3 | ¿Cada elemento gana su espacio? |
Consulta referencias/heurísticas-diseño.md para el catálogo completo con fundamento perceptivo, violaciones y métodos de diagnóstico.
Orden de prioridad cuando las heurísticas entran en conflicto:
- Jerarquía: el lector debe saber qué es más importante
- Agrupación: el lector debe saber qué pertenece junto
- Flujo: el lector debe saber a dónde ir después
- Énfasis: el lector debe saber qué importa más
- Ritmo: el lector debe poder formar expectativas
- Equilibrio: el diseño debe sentirse estable
- Completitud: la página debe sentirse resuelta
- Moderación: cada elemento debe ganar su lugar
Principios Perceptivos
La base de la ciencia cognitiva. No son reglas de diseño, sino hechos sobre cómo el cerebro humano procesa la información visual.
| Principio | Qué Explica |
|---|---|
| Gestalt (Proximidad, Similitud, Cierre, Continuidad, Figura-Fondo, Región Común) | Cómo el cerebro agrupa información automáticamente |
| Memoria de Trabajo (7±2 de Miller, Agrupación Cognitiva) | Cuánto puede manejar el cerebro a la vez |
| Procesamiento Preatentivo | Qué ve el cerebro antes del pensamiento consciente |
| Patrones de Lectura (Patrón F, Patrón Z, Diagrama de Gutenberg) | Cómo se mueve el ojo a través de una página |
| Señal vs. Ruido | Qué debe filtrar el cerebro |
| Divulgación Progresiva | Cómo el cerebro construye comprensión en capas |
| Consistencia | Cómo el cerebro forma y usa predicciones |
| Afordancia | Cómo la forma visual comunica función |
Consulta referencias/principios-perceptivos.md para la base completa.
Rúbrica de Evaluación
Puntúa cualquier diseño de 0 a 5 en 8 dimensiones. Total: /40.
| Dimensión | Qué Mide |
|---|---|
| Jerarquía (0-5) | ¿Puede el lector identificar la importancia sin leer? |
| Agrupación (0-5) | ¿Las pertenencias a grupos son inequívocas? |
| Ritmo (0-5) | ¿Puede el lector formar expectativas sobre el diseño? |
| Énfasis (0-5) | ¿La atención del lector va al lugar correcto? |
| Flujo (0-5) | ¿El ojo se mueve a través del contenido de forma natural? |
| Equilibrio (0-5) | ¿El peso visual se distribuye intencionadamente? |
| Completitud (0-5) | ¿La página se siente resuelta? |
| Moderación (0-5) | ¿Cada elemento gana su espacio? |
| Puntuación Total | Calificación |
|---|---|
| 0-10 | Crítico: se necesita un rediseño importante |
| 11-18 | Problemas significativos: varias dimensiones necesitan trabajo |
| 19-25 | Funcional: se necesitan mejoras específicas |
| 26-32 | Bueno: listo para producción con pulido |
| 33-38 | Excelente: solo son posibles refinamientos menores |
| 39-40 | Excepcional: enseña esto como ejemplo |
Consulta referencias/rúbrica-evaluación.md para obtener orientación sobre la puntuación, clasificación de gravedad (P0-P3) y recomendaciones de corrección.
Resolución de Conflictos
Cuando las heurísticas tiran en direcciones opuestas:
| Conflicto | Resolución |
|---|---|
| Jerarquía vs. Minimalismo | Minimalismo significa pocos tratamientos, no ninguno. Crea la máxima jerarquía con los mínimos medios. |
| Completitud vs. Espacio en Blanco | La completitud proviene de la estructura, no de la densidad. 60% contenido / 40% espacio en blanco puede sentirse completo. |
| Consistencia vs. Énfasis | La consistencia es el valor predeterminado. El énfasis es la excepción. Rómpelo deliberadamente, con moderación y de manera significativa. |
| Densidad vs. Descanso | Alterna secciones densas y dispersas. Proporciona anclas de escaneo para pausar. |
| Convención vs. Diferenciación | Sigue las convenciones para la estructura. Diferénciate a través del contenido y el tratamiento sutil. |
Consulta referencias/conflictos-heurísticos.md para el marco de resolución completo.
Traducción de Formato a Percepción
| Instrucción | Intención Perceptiva |
|---|---|
| "Añade más espacio en blanco" | La distancia visual no refleja las relaciones conceptuales. |
| "Haz los encabezados más grandes" | La jerarquía es insuficiente para el escaneo. |
| "Divide el párrafo" | El fragmento visual supera los límites de la memoria de trabajo. |
| "Haz que resalte" | El elemento necesita más énfasis en relación con su importancia. |
| "Simplifica esto" | La carga cognitiva es demasiado alta para el tipo de contenido. |
| "Hazlo más profesional" | Las señales visuales no coinciden con el nivel de autoridad del contenido. |
Consulta referencias/formato-a-percepción.md para el diccionario de traducción completo.
La Arquitectura
Esta habilidad sigue una arquitectura de razonamiento de seis capas:
Modelo Mental → Cómo perciben los expertos este dominio
↓
Principios Perceptivos → La ciencia cognitiva que explica por qué
↓
Heurísticas → Reglas prácticas
↓
Resolución de Conflictos → Qué hacer cuando las reglas se contradicen
↓
Rúbrica de Evaluación → Puntuación estructurada para la calidad
↓
Capa de Traducción → Convertir instrucciones ingenuas en razonamiento experto
Esta arquitectura es independiente del dominio. La alfabetización visual es la primera aplicación. Las mismas seis capas podrían enseñar cognición experta a la IA en arquitectura, medicina, educación, liderazgo o cualquier campo donde la experiencia tácita resista la articulación.
Requisitos de Salida
Al usar esta habilidad, siempre:
- Nombra el principio perceptivo detrás de cada decisión visual
- Explica el efecto cognitivo de las elecciones de diseño
- Diagnostica los problemas en términos de principios violados, no preferencias estéticas
- Puntúa los diseños usando la rúbrica de evaluación al criticar
- Traduce las instrucciones de formato a percepción cuando se te pida implementar comentarios
Antipatrones
Nunca:
- Elijas un diseño porque "se ve profesional" sin explicar por qué
- Añadas elementos decorativos que no sirvan a la comprensión
- Trates el espaciado, la tipografía o el color como elecciones estéticas arbitrarias
- Te saltes el paso de razonamiento porque "simplemente se siente bien"
- Apliques heurísticas mecánicamente sin considerar el contenido específico
La Prueba de Fuego
Después de producir cualquier diseño visual, pregúntate:
"¿Puedo explicar cada decisión de espaciado, cada elección tipográfica, cada agrupación y cada énfasis en términos de cómo un humano percibirá y procesará esta información?"
Si es así, el diseño es razonado. Si no, es decoración.