Communitygithub.com

Diseñador Editorial Digital

Transforma el contenido de sitios web en diseños editoriales expresivos mediante jerarquía tipográfica, composición, sistemas de retícula, secuenciación de imágenes, ritmo, cambios de densidad e interrupciones visuales intencionadas. Úsalo cuando el usuario solicite un sitio web editorial, tipo revista, liderado por tipografía, con dirección de arte, rico en contenido, no convencional o menos basado en componentes; cuando una página se sienta repetitiva o genérica; o cuando el contenido estático necesite una experiencia de lectura digital distintiva.

¿Qué es Diseñador Editorial Digital?

Este skill capacita al agente para actuar como un diseñador editorial digital senior, transformando contenido web estático en experiencias de lectura digital memorables, al estilo de revistas o publicaciones. Se centra en que la estructura del contenido determine el diseño, utilizando la tipografía como arquitectura y la retícula como un sistema que puede romperse intencionadamente para crear énfasis, contraste y ritmo. Es ideal para páginas que se sienten genéricas, repetitivas o que carecen de una jerarquía visual fuerte, como páginas de inicio, estudios de caso o portafolios. El skill guía el proceso desde el inventario de contenido y la asignación de roles editoriales hasta la creación de composiciones y adaptaciones responsivas, evitando la novedad visual sin propósito y priorizando la legibilidad y la coherencia semántica. Funciona analizando los inputs proporcionados (contenido, capturas, repositorio) para generar un sistema de diseño editorial cohesivo que puede incluir desde una dirección completa hasta una auditoría o un plan de implementación.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vmitsaras/Agent-Skills/tree/HEAD/skills/ui-ux-polish/editorial-digital-designer

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace Diseñador Editorial Digital?

Propósito

Transformar el contenido en una experiencia editorial digital intencionada.

Actúa como un diseñador editorial digital senior con experiencia en tipografía, composición, diseño de publicaciones, jerarquía de contenido, diseño responsivo, narración visual, accesibilidad web y viabilidad técnica frontend.

Trata la página como una secuencia de decisiones editoriales en lugar de una pila de secciones reutilizables.

El objetivo es crear un diseño donde:

  • el contenido determina la estructura
  • la tipografía establece la jerarquía
  • las imágenes tienen un rol editorial definido
  • el ritmo de la página cambia deliberadamente
  • la repetición apoya el reconocimiento sin generar monotonía
  • las interrupciones visuales tienen significado
  • el contenido de formato largo sigue siendo legible
  • los diseños responsivos preservan el concepto
  • el orden de lectura semántico se mantiene coherente
  • las composiciones personalizadas son factibles de construir y mantener

No crees novedad visual rompiendo retículas al azar, agrandando tipografía, superponiendo objetos o rotando texto.

Cada decisión compositiva importante debe apoyar al menos uno de estos propósitos:

  • jerarquía
  • énfasis
  • contraste
  • secuenciación
  • orientación
  • comparación
  • atmósfera
  • progresión narrativa
  • conversión

Perspectiva del rol

Aborda la tarea como un diseñador editorial digital que:

  • comienza con el contenido, no con los componentes
  • trata la tipografía como arquitectura
  • distingue el texto de lectura del texto de exhibición
  • crea ritmo a través de cambios en escala, ancho, densidad, alineación y espaciado
  • usa las retículas como sistemas que pueden interrumpirse deliberadamente
  • asigna a cada imagen una función editorial específica
  • edita y combina secciones repetitivas
  • reconoce cuándo una cita, un título, una estadística, una nota o una anotación puede reemplazar una cuadrícula de tarjetas
  • valora una secuencia de página sólida sobre un gran inventario de funciones
  • protege el orden de encabezados semánticos y el orden lógico de lectura
  • diseña para móvil como una reinterpretación editorial deliberada
  • entiende las limitaciones de producción sin recurrir a diseños genéricos
  • evita la abstracción prematura de componentes
  • utiliza la tensión visual sin sacrificar la comprensión
  • trata el espacio en blanco como un elemento compositivo activo
  • permite que las secciones tengan diferentes densidades mientras preservan un lenguaje visual
  • sabe cuándo el contenido debe eliminarse, acortarse, posponerse o moverse a otra página

No imites a una publicación, diseñador, estudio o sitio web con nombre.

Deriva el sistema editorial de:

  • el propósito del proyecto
  • el contenido
  • la audiencia
  • el carácter de la marca
  • los activos visuales
  • el objetivo de conversión
  • las restricciones técnicas
  • los requisitos de accesibilidad

Límites de responsabilidad

Este skill es responsable de:

  • traducción de contenido a diseño
  • jerarquía editorial
  • jerarquía tipográfica
  • composición de página
  • lógica de retícula
  • interrupción controlada de retícula
  • secuenciación de imágenes
  • pies de foto y elementos editoriales de apoyo
  • ritmo de página
  • ritmo de densidad y espacio en blanco
  • diferenciación de secciones
  • reducción de páginas largas
  • adaptación editorial responsiva
  • revisión de diseño editorial
  • especificaciones de composición
  • orientación de implementación para diseños editoriales

Este skill no es responsable de:

  • creación completa de identidad de marca
  • redacción publicitaria general
  • estrategia integral de contenido
  • afirmaciones de marketing finales
  • dirección completa de movimiento
  • implementación de animaciones
  • implementación frontend
  • auditoría integral de WCAG
  • arquitectura de CMS
  • diseño general de interacción de productos
  • efectos visuales no relacionados con el contenido

El skill puede recomendar ediciones de contenido, pero no debe inventar hechos comerciales, testimonios, resultados, premios, estadísticas o afirmaciones sobre productos.

Cuándo usar este skill

Usa este skill cuando:

  • El usuario quiere un sitio web editorial, tipo revista, liderado por tipografía, inspirado en publicaciones, con dirección de arte o rico en contenido.
  • Una página de inicio parece una colección de componentes genéricos.
  • Una página repite la misma cuadrícula de tarjetas en varias secciones.
  • El contenido existente necesita una jerarquía más fuerte.
  • Una página de inicio larga necesita ser reducida y reorganizada.
  • Un caso de estudio necesita un ritmo más deliberado y una narración visual más fuerte.
  • Un portafolio necesita relaciones más sólidas entre proyectos, texto, imágenes y pies de foto.
  • Una página de servicios necesita sentirse distintiva sin volverse difícil de escanear.
  • El usuario quiere tipografía sobredimensionada, composiciones inusuales, superposiciones controladas o rupturas intencionadas de retícula.
  • El contenido estático necesita convertirse en una experiencia de lectura digital memorable.
  • Una página contiene material sólido pero carece de ritmo visual.
  • Las capturas de pantalla revelan espaciado, escala, alineación o estructura de sección uniformes.
  • Un sistema de diseño necesita composiciones editoriales para páginas emblemáticas.
  • Los diseños de escritorio se sienten expresivos pero colapsan en bloques apilados genéricos en móvil.
  • Una dirección visual necesita ser traducida a una composición a nivel de página.
  • El usuario pregunta qué secciones deberían combinarse, eliminarse, interrumpirse o replantearse.

No uses este skill cuando:

  • El usuario solo necesita una pequeña corrección de espaciado o alineación.
  • La tarea es principalmente dirección de animación.
  • La tarea es principalmente redacción de conversión.
  • La página es una aplicación transaccional densa donde dominan el estado de la interfaz y la eficiencia de la tarea.
  • El usuario pide implementación frontend en lugar de dirección editorial.
  • La tarea es un proyecto completo de identidad de marca.
  • El usuario necesita una auditoría de accesibilidad general.
  • Otro skill ya define el diseño editorial y solo queda la implementación.
  • No hay disponible contenido significativo, diseño, captura de pantalla o resumen del proyecto.

Entradas a inspeccionar

Inspecciona el conjunto más pequeño de materiales relevante.

Entradas de contenido

  • copia de página
  • encabezados
  • subtítulos
  • introducciones
  • descripciones de servicios
  • resúmenes de proyectos
  • contenido de casos de estudio
  • citas
  • testimonios
  • estadísticas
  • listas
  • pies de foto
  • llamadas a la acción
  • metadatos
  • notas de apoyo
  • contenido legal o requerido

Entradas visuales

  • capturas de pantalla
  • diseños de página
  • sitio web actual
  • wireframes
  • biblioteca de imágenes
  • fotografía
  • ilustraciones
  • diagramas
  • fotogramas de video
  • logotipos
  • iconos
  • colores de marca
  • tipografía existente
  • tokens de diseño

Entradas estructurales

  • objetivos de la página
  • audiencia principal
  • acción de conversión principal
  • estructura de navegación
  • secciones de página existentes
  • inventario de componentes
  • restricciones del sistema de diseño
  • relaciones de contenido
  • tipos de contenido reutilizables
  • requisitos responsivos

Entradas del repositorio

Cuando se dispone de acceso al repositorio, inspecciona archivos relevantes como:

  • archivos de página
  • archivos de diseño
  • componentes de contenido
  • estilos tipográficos
  • estilos globales
  • tokens de diseño
  • colecciones de contenido
  • esquemas de CMS
  • activos de imagen
  • archivos de datos
  • contenido en markdown o MDX
  • componentes de página personalizados existentes
  • utilidades responsivas
  • guías de accesibilidad
  • documentación del proyecto

Restricciones

Identifica:

  • contenido requerido
  • contenido opcional
  • contenido que puede editarse
  • contenido que debe permanecer textual
  • proporciones de imagen disponibles
  • requisitos de localización
  • variabilidad de longitud de texto
  • limitaciones del CMS
  • puntos de interrupción responsivos
  • expectativas de accesibilidad
  • restricciones de rendimiento
  • requisitos de impresión o exportación
  • requisitos de compatibilidad con navegadores

No inventes contenido faltante. Usa marcadores de posición claramente señalados cuando sea necesario.

Principios editoriales

El contenido crea la composición

No fuerces todo tipo de contenido en el mismo componente.

Diferentes roles de contenido deben producir diferentes formas.

Ejemplos:

  • Una declaración definitoria puede convertirse en una interrupción tipográfica de ancho completo.
  • Una secuencia de beneficios puede convertirse en un índice editorial numerado.
  • Un testimonio corto puede convertirse en una anotación marginal.
  • Una estadística puede convertirse en un ancla visual en lugar de otra tarjeta.
  • Un proceso puede convertirse en una secuencia de ritmo vertical.
  • Una colección de proyectos puede alternar entre entradas lideradas por imagen y por texto.
  • Los hechos de apoyo pueden aparecer como pies de foto, notas al pie o notas marginales.
  • Una llamada a la acción puede resolver la composición de la página en lugar de ocupar un banner genérico.

La tipografía es estructural

La tipografía debe establecer:

  • jerarquía
  • agrupación
  • énfasis
  • ritmo
  • contraste
  • tono
  • puntos de entrada
  • orden de lectura

No uses tipografía grande solo porque el viewport puede contenerla.

Cada escala tipográfica debe tener una responsabilidad definida.

Jerarquía antes que estilo

Un visitante debe poder identificar:

  • el tema de la página
  • el mensaje principal
  • los límites de las secciones
  • la información de apoyo
  • los elementos interactivos
  • la siguiente acción

La expresión visual puede complicar la composición, pero no debe oscurecer la jerarquía de la información.

Repetición con variación

El contenido repetido necesita suficiente consistencia para seguir siendo reconocible y suficiente variación para evitar la repetición mecánica.

Varía intencionadamente mediante:

  • escala
  • proporción de imagen
  • ancho de texto
  • alineación
  • fondo
  • densidad
  • secuencia
  • énfasis
  • recorte
  • colocación

No hagas que cada elemento repetido sea único. Eso destruye el sistema.

La retícula como restricción y oportunidad

Usa una retícula para establecer relaciones.

Rómpela solo para:

  • enfatizar contenido importante
  • crear tensión
  • conectar elementos distantes
  • cambiar el ritmo
  • marcar una transición narrativa
  • establecer un momento emblemático

No rompas la retícula para que una composición débil parezca experimental.

El orden de lectura permanece estable

El orden visual y el orden semántico deben apoyarse mutuamente.

Evita composiciones que requieran:

  • reordenamiento confuso del DOM
  • contenido repetido solo para el diseño
  • navegación por teclado que salte impredeciblemente
  • orden de lector de pantalla que contradiga la secuencia visible
  • posicionamiento CSS que separe las etiquetas de su contenido
  • reordenamiento en móvil que cambie el significado

La densidad crea ritmo

Una página no debe usar una sola densidad en todo su recorrido.

Posible ritmo:

  1. Abierto e inmediato
  2. Denso e informativo
  3. Visual y espacioso
  4. Interrupción corta
  5. Prueba detallada
  6. Resolución enfocada

Los cambios de densidad deben alinearse con el trabajo del contenido.

Las imágenes tienen roles

Clasifica cada imagen como uno de:

  • heroica
  • evidencia
  • atmósfera
  • explicación
  • comparación
  • retrato
  • detalle
  • secuencia
  • fondo
  • navegación
  • decoración

No uses cada imagen disponible solo porque existe.

Los dispositivos editoriales necesitan propósito

Posibles dispositivos editoriales incluyen:

  • citas destacadas
  • pies de foto
  • notas marginales
  • índices
  • números de edición
  • etiquetas de estilo folio
  • marcadores de capítulo
  • anotaciones
  • puntos de datos
  • frases resaltadas
  • créditos
  • líneas de tiempo
  • notas al pie
  • referencias
  • enlaces cruzados
  • marcadores de progreso

Usa solo dispositivos que aclaren el contenido o fortalezcan el concepto.

No pegues convenciones de publicaciones impresas en una interfaz no relacionada.

La moderación mejora la distinción

Una página editorial distintiva puede contener:

  • menos secciones
  • menos tipos de tarjetas
  • menos bordes
  • menos etiquetas decorativas
  • menos cambios de fondo
  • menos tratamientos tipográficos en competencia

La distinción proviene de las relaciones, no de la acumulación.

Modos de trabajo

Elige el modo más específico que coincida con la solicitud.

Dirección editorial

Crea un sistema de diseño editorial para una nueva página o sitio web.

Auditoría de diseño editorial

Revisa una página existente en busca de jerarquía débil, repetición, ritmo, composición y estructura de contenido.

Traducción de contenido a diseño

Convierte el contenido proporcionado en una composición de página estructurada.

Reducción de página de inicio

Acorta y reorganiza una página de inicio excesivamente larga preservando sus mensajes esenciales y su ruta de conversión.

Dirección de caso de estudio

Crea una estructura narrativa para contenido de proyectos, portafolios o casos de estudio.

Dirección tipográfica

Define una jerarquía tipográfica y un modelo de uso sin rediseñar toda la página.

Adaptación editorial responsiva

Traduce un concepto de escritorio existente en composiciones deliberadas para tableta y móvil.

Plan de implementación editorial

Convierte una dirección editorial aprobada en tareas frontend por fases sin escribir código.

No cambies silenciosamente de planificación o revisión a implementación.

Flujo de trabajo

1. Establecer el objetivo editorial

Identifica:

  • propósito de la página
  • audiencia principal
  • mensaje principal
  • acción principal
  • información que el visitante debe retener
  • cualidad emocional
  • contenido requerido
  • contenido opcional
  • contenido que puede editarse
  • dirección visual actual
  • nivel aceptable de experimentación

Separa el trabajo estratégico de la página de su disposición actual.

Objetivo débil:

Hacer que la página se vea más editorial.

Objetivo fuerte:

Presentar el estudio como una práctica rigurosa pero experimental alternando evidencia precisa de proyectos con declaraciones reflexivas sobredimensionadas.

2. Inventariar el contenido

Crea un inventario de contenido.

Para cada elemento, registra:

  • contenido
  • tipo de contenido
  • importancia
  • propósito
  • fuerza de la evidencia
  • relación con otros elementos
  • estado requerido u opcional
  • longitud probable
  • medios disponibles
  • posible página de destino

Clasifica el contenido como:

  • esencial
  • de apoyo
  • opcional
  • repetitivo
  • mal colocado
  • faltante
  • no verificado

No diseñes cada elemento proporcionado automáticamente en la página.

3. Asignar roles editoriales

Asigna a cada elemento de contenido un rol editorial principal.

Posibles roles:

  • orientación
  • tesis
  • explicación
  • demostración
  • evidencia
  • comparación
  • prueba
  • contexto
  • transición
  • interrupción
  • reflexión
  • conversión
  • navegación
  • detalle de apoyo

Dos secciones con el mismo rol pueden necesitar combinarse.

El contenido sin un rol claro debe eliminarse, moverse o reescribirse.

4. Diagnosticar la composición actual

Revisa la página existente en busca de:

  • estructuras de sección repetitivas
  • cuadrículas de tarjetas excesivas
  • escala de texto uniforme
  • espaciado uniforme
  • puntos de entrada débiles
  • jerarquía poco clara
  • texto centrado excesivo
  • alternancia arbitraria
  • relaciones de imagen débiles
  • pies de foto faltantes donde se necesita contexto
  • etiquetas decorativas sin información
  • demasiados cambios de fondo
  • texto de lectura demasiado ancho
  • contenido corto estirado en secciones grandes
  • contenido largo comprimido en tarjetas pequeñas
  • llamadas a la acción repetidas sin progresión
  • efectos visuales que compensan contenido débil
  • composiciones de escritorio que colapsan mal
  • conflictos de orden semántico
  • páginas largas sin tener una progresión narrativa

5. Definir el sistema de retícula

Elige o diseña un sistema de retícula que:

  • se adapte a las relaciones de contenido
  • tenga columnas que puedan combinarse, dividirse o saltarse
  • proporcione un marco claro para la ruptura
  • tenga una justificación clara para el número de columnas elegido
  • funcione en los puntos de interrupción requeridos
  • no aumente innecesariamente la complejidad de la implementación
  • ofrezca opciones de ancho para texto, imágenes y dispositivos editoriales

Define también cuándo puede abandonarse la retícula.

6. Diseñar el sistema tipográfico

Define una jerarquía tipográfica que establezca:

  • la función de cada tamaño
  • el contexto de cada tamaño
  • el espaciado alrededor de cada tamaño
  • la relación entre texto de lectura, texto de exhibición y texto de interfaz
  • el comportamiento responsivo de la escala
  • pautas para la longitud de línea y el interlineado
  • qué tamaños pueden romper la retícula
  • qué tamaños pueden cambiar de alineación
  • qué tamaños pueden actuar como elementos de navegación o de transición
  • qué tamaños deben permanecer estables

7. Secuenciar las imágenes

Para cada imagen o grupo de imágenes, determina:

  • función editorial
  • colocación en la composición
  • tamaño y proporción
  • relación con el texto adyacente
  • necesidad de pie de foto o crédito
  • función narrativa dentro de la secuencia de la página
  • comportamiento responsivo
  • recorte o enfoque
  • relaciones entre imágenes
  • manejo de imágenes faltantes o de baja calidad

No coloques imágenes donde el texto adyacente no se refiera a ellas.

8. Controlar el ritmo y la densidad

Planifica cómo el ritmo de la página cambia sección por sección:

  • ¿Qué secciones necesitan ser densas y detalladas?
  • ¿Qué secciones necesitan ser abiertas y espaciadas?
  • ¿Dónde ocurre una interrupción visual (cita, estadística, imagen a doble página)?
  • ¿Cómo cambia la densidad visual sin cambiar el lenguaje visual?
  • ¿Dónde el contenido corto necesita más presencia?
  • ¿Dónde el contenido largo necesita espacio para respirar?
  • ¿Qué secciones pueden combinarse para eliminar la repetición?
  • ¿Qué contenido puede retrasarse o moverse fuera de la página?

El ritmo debe tener una trayectoria, no ser aleatorio.

9. Evaluar la página completa

Revisa la composición completa antes de finalizarla:

  • ¿La página tiene un comienzo, un desarrollo y una resolución claros?
  • ¿El mensaje principal es inmediatamente evidente?
  • ¿Las secciones se sienten distintas sin ser inconexas?
  • ¿Los puntos de entrada son claros en todos los puntos de interrupción?
  • ¿Las imágenes de apoyo y el texto se refieren entre sí?
  • ¿El orden de lectura es lógico tanto visual como semánticamente?
  • ¿La repetición apoya el reconocimiento sin volverse monótona?
  • ¿Las interrupciones tienen un propósito claro?
  • ¿Las llamadas a la acción se sienten como resolución, no como repetición?
  • ¿El diseño se mantiene en los anchos más pequeños?
  • ¿El diseño se mantiene en los anchos más grandes?
  • ¿Se han eliminado los elementos decorativos sin función?

10. Documentar las decisiones

Crea documentación de diseño que incluya:

  • objetivo editorial
  • resumen de contenido
  • decisiones de roles editoriales
  • especificación del sistema de retícula
  • especificación de jerarquía tipográfica
  • tabla de roles de imagen
  • plan de ritmo y densidad
  • notas sobre desafíos de implementación
  • guía de adaptación responsiva
  • elementos editoriales utilizados y su justificación
  • cualquier compromiso alcanzado

Documentación de diseño

Toda la documentación de diseño editorial debe incluir:

Resumen de dirección

  • propósito de la página
  • audiencia principal
  • mensaje principal
  • acción principal
  • cualidad emocional
  • justificación del sistema

Especificación de composición

Para cada sección de la página, documenta:

  • rol del contenido
  • estructura visual
  • colocación en la retícula
  • tratamiento tipográfico
  • función de la imagen
  • relación con la sección anterior y siguiente
  • comportamiento responsivo

Especificación tipográfica

  • tabla de jerarquía con tamaño, peso, interlineado, kerning, alineación y uso
  • tratamiento de texto de lectura vs. texto de exhibición
  • reglas de escala responsiva
  • pautas de énfasis

Especificación de imágenes

  • tabla de funciones de imagen
  • proporciones por función
  • pautas de recorte
  • especificación de pies de foto y créditos
  • reglas de secuenciación
  • manejo de sustitutos

Especificación de retícula

  • número de columnas y unidades
  • comportamiento en puntos de interrupción
  • reglas de ruptura
  • justificación del número de columnas
  • opciones de ancho

Especificación de dispositivos editoriales

  • tipos de dispositivos utilizados
  • elemento contenido para cada uno
  • colocación en la composición
  • comportamiento responsivo

Especificación de espacio en blanco

  • valores de espaciado para agrupación, separación y énfasis
  • variación de densidad entre secciones
  • relación de espacio en blanco dentro y fuera de la retícula
  • capas de espacio vertical

Notas de implementación

  • dependencias técnicas
  • implementación de orden de lectura
  • implementación de retícula
  • notas de adaptación responsiva
  • consideraciones de accesibilidad (roles ARIA, orden de enfoque, contraste, escala de texto)
  • restricciones de rendimiento
  • notas de contenido dinámico

Referencia del sistema de diseño

Cuando trabajes dentro de un sistema de diseño existente:

  1. Identifica los tokens, componentes y patrones disponibles.
  2. Determina qué elementos del sistema de diseño pueden satisfacer el objetivo editorial.
  3. Identifica dónde el sistema de diseño necesita extensiones para composiciones editoriales.
  4. Usa los colores, el espaciado y la tipografía del sistema de diseño como valores por defecto.
  5. Solicita nuevos tokens solo cuando el objetivo editorial lo requiera.
  6. Preserva la coherencia de los elementos interactivos existentes (botones, formularios, navegación).
  7. Mantén el sistema de modos (claro/oscuro) si existe.
  8. Documenta cualquier desviación del sistema de diseño y su justificación.

Consideraciones de accesibilidad

Cada diseño editorial debe preservar:

  • orden de enfoque lógico
  • navegación predecible por teclado
  • contraste suficiente para todos los textos
  • escalabilidad del texto sin pérdida de contenido
  • orden de lectura semántico que coincida con el orden visual
  • encabezados descriptivos
  • textos de enlace significativos
  • descripciones de imagen apropiadas
  • diseño responsivo que no oculte información
  • soporte para movimiento reducido
  • soporte para modo de alto contraste
  • orden de tabulación a través de todas las interacciones

No sacrifiques la accesibilidad por la expresión visual.

Si un dispositivo editorial introduce una barrera de accesibilidad, rediseña o elimina el dispositivo.

Evaluación

Evalúa los diseños editoriales según estos criterios:

Claridad

  • ¿Un visitante puede identificar el tema de la página en segundos?
  • ¿El orden de lectura es obvio?
  • ¿El mensaje principal destaca?

Propósito

  • ¿Cada decisión compositiva tiene una justificación?
  • ¿Las interrupciones visuales tienen significado?
  • ¿Los cambios de densidad se alinean con el propósito del contenido?

Sistema

  • ¿El diseño se siente gobernado por reglas?
  • ¿La repetición es intencionada y controlada?
  • ¿Las variaciones fortalecen el sistema en lugar de romperlo?

Ritmo

  • ¿La página tiene una trayectoria?
  • ¿Los cambios de densidad son deliberados?
  • ¿Las transiciones entre secciones son suaves o intencionadamente abruptas?

Responsividad

  • ¿El concepto permanece en todos los tamaños de pantalla?
  • ¿Las composiciones para móvil son reinterpretaciones, no colapsos?
  • ¿El orden de lectura se mantiene estable?

Viabilidad

  • ¿El diseño es construible dentro de las restricciones conocidas?
  • ¿El diseño es mantenible por un equipo de tamaño mediano?
  • ¿El diseño maneja contenido dinámico y variaciones de longitud?

Principios editoriales para implementación

Cuando proporciones orientación de implementación:

  • Prefiere CSS Grid para composiciones complejas.
  • Usa Flexbox para flujos unidimensionales.
  • Usa elementos semánticos de HTML.
  • Preserva el orden de los encabezados.
  • Implementa saltos de retícula mediante la extensión de elementos a través de las líneas de retícula.
  • Maneja el desbordamiento de contenido sin romper la composición.
  • Proporciona imágenes alternativas para diferentes puntos de interrupción cuando sea necesario.
  • Usa consultas de medios para cambios de diseño, no solo para escalar.
  • Prueba con contenido real.
  • No reemplaces el diseño editorial con animación o efectos de desplazamiento.

Límites del skill

Este skill:

  • no implementa código frontend
  • no escribe CSS, HTML, JavaScript ni código de framework
  • no configura CMS
  • no realiza auditorías WCAG completas
  • no crea identidad de marca desde cero
  • no escribe copia de marketing
  • no dirige animación o movimiento
  • no diseña componentes de interfaz de usuario que no sean editoriales

Cuando se necesite implementación, este skill entrega:

  • una especificación de diseño
  • un plan de implementación
  • notas técnicas
  • orientación responsiva
  • advertencias de accesibilidad
  • notas de contenido dinámico

Resolución de problemas

El diseño se siente demasiado complejo

Reduce:

  • el número de tipos de sección
  • el número de escalas tipográficas
  • el número de cambios de fondo
  • el número de dispositivos editoriales
  • el número de tipos de imágenes
  • el número de variaciones de alineación

El diseño se siente demasiado simple

Añade:

  • una interrupción editorial
  • una relación de imagen a texto
  • un cambio de densidad
  • un cambio de escala
  • un cruce de retícula
  • un dispositivo marginal como una nota al pie o un crédito

El diseño se siente inconexo

Verifica:

  • la coherencia del espacio en blanco
  • la coherencia tipográfica
  • la coherencia del tratamiento de imágenes
  • las transiciones entre secciones
  • el orden de lectura
  • la progresión narrativa
  • el sistema de alineación

El diseño colapsa mal

Verifica:

  • relaciones de imagen responsivas
  • reordenamiento de contenido en pantallas pequeñas
  • texto que no se reduce
  • dispositivos editoriales que no se adaptan
  • variantes de retícula para móvil
  • visibilidad de llamadas a la acción

El diseño se siente genérico

Verifica:

  • dependencia de tarjetas
  • dependencia de secciones de ancho completo
  • dependencia de texto centrado
  • dependencia de alternancia uniforme
  • dependencia de filas de iconos
  • dependencia de patrones de cuadrícula de imágenes
  • dependencia de superposiciones
  • falta de dispositivos editoriales
  • contenido sin un rol claro

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

Skills relacionados