Saltar al contenido principal

Habilidad de Estética del Sistema de Diseño

La habilidad de Estética del Sistema de Diseño es un enfoque guiado para refinar la identidad visual de tu sitio. Te ayuda a tomar decisiones consistentes sobre tipografía, color, espaciado y tokens de movimiento que definen tu sistema de diseño.

¿Qué es Estética del Sistema de Diseño?​

Estética del Sistema de Diseño es una habilidad estructurada que cubre:

  • Tipografía: Familias de fuentes, tamaños, grosores y alturas de línea
  • Color: Paletas primarias, secundarias, de acento y neutras
  • Espaciado: Escalas de padding, margen y gap
  • Bordes: Tokens de radio y ancho
  • Sombras: Tokens de elevación y profundidad
  • Movimiento: Animaciones y transiciones

Estas decisiones se capturan en el archivo theme.json de tu tema, creando un sistema visual cohesivo.

¿Por qué usar Estética del Sistema de Diseño?​

Consistencia​

Un sistema de diseño garantiza:

  • Que todo el texto utilice la misma escala tipográfica
  • Que los colores se utilicen de manera uniforme en todo el sitio
  • Que el espaciado siga un patrón predecible
  • Que las animaciones se sientan unificadas

Eficiencia​

En lugar de tomar decisiones de diseño página por página, tú:

  • Defines los tokens una sola vez
  • Los aplicas en todas partes
  • Los actualizas globalmente cambiando un solo valor

Flexibilidad​

Puedes:

  • Ajustar todo tu sistema de diseño rápidamente
  • Experimentar con diferentes estéticas
  • Mantener la coherencia de la marca mientras evolucionas

Activando la Habilidad de Estética del Sistema de Diseño​

Activación Manual​

Puedes iniciar la habilidad en cualquier momento:

"Ayúdame a refinar mi sistema de diseño"

o

"Me gustaría mejorar la estética de mi sitio"

o

"Guíame a través de las decisiones del sistema de diseño"

Sugerencias Automáticas​

Los agentes pueden sugerir usar la habilidad cuando:

  • Pides cambios de diseño
  • Solicitas un rediseño "moderno" o "profesional"
  • Quieres mejorar la consistencia visual
  • Te estás preparando para lanzar tu sitio

El Proceso de Estética del Sistema de Diseño​

Paso 1: Tipografía​

El agente pregunta sobre tus elecciones de fuentes:

¿Cuál es tu estilo tipográfico preferido?
- Serif (tradicional, elegante)
- Sans-serif (moderno, limpio)
- Monospace (técnico, enfocado en código)

Para la fuente de los encabezados:
- ¿Quieres una fuente de encabezado distinta, o usar la misma que el texto del cuerpo?
- Preferencia: audaz, elegante, juguetón, minimalista?

Para la fuente del cuerpo:
- La legibilidad es clave. ¿Prefieres:
  - Texto más grande y con más espacio
  - Texto compacto y eficiente
  - Tamaño estándar

Luego, el agente define:

  • Fuente de encabezado: Fuente principal para títulos y encabezados
  • Fuente de cuerpo: Fuente para párrafos y texto del cuerpo
  • Fuente monospace: Fuente para código y contenido técnico
  • Escala de tamaño: Tamaños predefinidos (pequeño, base, grande, XL, etc.)
  • Escala de peso: Pesos de fuente (regular, medio, audaz, etc.)
  • Altura de línea: Espaciado entre líneas para mejorar la legibilidad

Paso 2: Paleta de Colores​

Definamos tu paleta de colores.

Color primario (el color de tu marca):
- Actual: [muestra color existente]
- Cambiar a: [selector de color o código hexadecimal]

Color secundario (color de soporte):
- Actual: [muestra color existente]
- Cambiar a: [selector de color o código hexadecimal]

Color de acento (destacados y CTAs):
- Actual: [muestra color existente]
- Cambiar a: [selector de color o código hexadecimal]

Paleta neutra (grises para texto, bordes, fondos):
- Claro: [color]
- Medio: [color]
- Oscuro: [color]

El agente crea una paleta completa que incluye:

  • Colores primarios, secundarios y de acento
  • Grises neutros (claro, medio, oscuro)
  • Colores semánticos (éxito, advertencia, error)
  • Estados de pasar el ratón (hover) y activos

Paso 3: Espaciado​

¿Cuánto espacio de respiración quieres?

Preferencia de escala de espaciado:
- Compacto (diseños ajustados y eficientes)
- Normal (espaciado equilibrado)
- Amplio (espacio en blanco generoso)

Esto afecta:
- El *padding* dentro de botones y tarjetas
- Los márgenes entre secciones
- El *gap* entre elementos de la cuadrícula

El agente define tokens de espaciado:

  • Unidad base (típicamente 4px u 8px)
  • Escala: xs, sm, md, lg, xl, 2xl
  • Valores específicos para padding, margen y gap

Paso 4: Bordes y Sombras​

Profundidad y definición visual:

Preferencia de radio de borde:
- Nítido (sin redondeo)
- Sutil (radio pequeño)
- Redondeado (radio medio)
- Muy redondeado (radio grande)

Profundidad de la sombra:
- Plano (sin sombras)
- Sutil (sombras ligeras)
- Pronunciado (sombras fuertes)

El agente crea:

  • Tokens de radio de borde (para botones, tarjetas, campos de entrada)
  • Tokens de sombra para diferentes niveles de elevación
  • Tokens de ancho de borde

Paso 5: Movimiento y Animación​

¿Cómo debe sentirse tu sitio cuando es interactivo?

Preferencia de animación:
- Mínima (sin animaciones)
- Sutil (transiciones suaves)
- Juguetona (animaciones notables)

Animaciones específicas:
- Transiciones de página: desvanecer, deslizar o ninguna?
- Pasar el ratón sobre el botón (*hover*): escala, cambio de color o ambos?
- Estados de carga: *spinner*, esqueleto o barra de progreso?

El agente define:

  • Duraciones de transición (rápido, normal, lento)
  • Funciones de suavizado (easing): ease-in, ease-out, ease-in-out
  • Keyframes de animación para interacciones comunes

Aplicando Estética del Sistema de Diseño​

Aplicación Automática​

Después de completar la habilidad, el agente:

  1. Actualiza el theme.json de tu tema con todos los tokens
  2. Aplica el sistema de diseño a tu tema activo
  3. Regenera los estilos de bloques para que coincidan con el nuevo sistema
  4. Activa el tema actualizado

Aplicación Manual​

También puedes editar theme.json directamente:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#0066CC",
          "name": "Primary",
          "slug": "primary"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "name": "Body",
          "slug": "body"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        {
          "size": "0.5rem",
          "name": "Small",
          "slug": "sm"
        }
      ]
    }
  }
}

Visualizando tu Sistema de Diseño​

Preguntar al Agente​

"Muéstrame mi sistema de diseño"

o

"¿Cuáles son mis *tokens* de diseño actuales?"

El agente mostrará tu tipografía, colores, espaciado y otros tokens.

Ver theme.json​

Abre /wp-content/themes/[theme-name]/theme.json en un editor de texto para ver las definiciones de tokens sin procesar.

Actualizando tu Sistema de Diseño​

Actualizaciones Rápidas​

Pídele al agente cambios específicos:

"Haz el color primario más oscuro"

o

"Aumenta la escala de espaciado en un 20%"

o

"Cambia la fuente de encabezado a una serif"

Rediseño Completo​

Vuelve a ejecutar la habilidad de Estética del Sistema de Diseño:

"Vamos a rediseñar todo mi sistema de diseño"

Esto te guiará a través de todas las decisiones de nuevo, comenzando con tus valores actuales.

Actualizaciones Parciales​

Actualiza aspectos específicos:

"Solo actualiza la paleta de colores, mantén todo lo demás"

Mejores Prácticas del Sistema de Diseño​

Consistencia​

  • Usa los mismos tokens en todas partes
  • No crees colores o tamaños aislados
  • Haz referencia a tokens en lugar de codificar valores fijos

Nomenclatura​

Usa nombres claros y semánticos:

  • ✓ primary, secondary, accent

  • ✗ blue, color-1, main

  • ✓ heading-lg, body-sm

  • ✗ font-size-24, text-large

Escalabilidad​

Diseña tu sistema para que pueda crecer:

  • Usa unidades relativas (rem, em) en lugar de píxeles
  • Crea escalas (xs, sm, md, lg, xl) en lugar de valores arbitrarios
  • Planifica futuras adiciones

Documentación​

Documenta tu sistema de diseño:

  • Por qué elegiste colores específicos
  • Cuándo usar cada token
  • Excepciones y casos límite

Patrones Comunes del Sistema de Diseño​

Minimalista Moderno​

  • Tipografía sans-serif (Inter, Helvetica)
  • Paleta de colores limitada (2-3 colores)
  • Espaciado generoso
  • Sombras sutiles
  • Animaciones suaves y rápidas

Cálido y Amigable​

  • Mezcla de serif y sans-serif
  • Paleta de colores cálidos (naranjas, grises cálidos)
  • Esquinas redondeadas
  • Sombras suaves
  • Animaciones juguetonas

Corporativo Profesional​

  • Sans-serif limpio (Roboto, Open Sans)
  • Paleta neutra con color de acento
  • Espaciado estructurado
  • Sombras mínimas
  • Transiciones sutiles

Creativo y Audaz​

  • Tipografía distintiva
  • Paleta de colores audaz
  • Espaciado variado
  • Sombras fuertes
  • Animaciones notables

Solución de Problemas​

Mis cambios de sistema de diseño no se muestran

  • Borra la caché de tu navegador
  • Vuelve a generar tu sitio si usas un generador estático
  • Verifica que theme.json sea JSON válido
  • Asegúrate de que el tema esté activo

Los colores se ven diferentes en diferentes páginas

  • Revisa si hay CSS conflictivo en los plugins
  • Verifica que todas las páginas usen el mismo tema
  • Borra cualquier plugin de caché

Quiero volver a un sistema de diseño anterior

  • Pregúntale al agente: "Muéstrame el historial de mi sistema de diseño"
  • Edita manualmente theme.json con los valores anteriores
  • Vuelve a ejecutar la habilidad con diferentes elecciones

Próximos Pasos​

Después de definir tu sistema de diseño:

  1. Revisa tu sitio: Visita tu sitio para ver el nuevo diseño
  2. Refinar aún más: Realiza ajustes usando la habilidad de nuevo
  3. Crear plantillas: Construye plantillas de bloques personalizadas usando tus tokens de diseño
  4. Documentar: Comparte tu sistema de diseño con los miembros del equipo