Ely Diseño

---
name: ely-design-systems
description: Define or refine frontend visual systems through art direction, semantic tokens, typography, spacing, and consistent component styling. Use for a new visual language, brand translation, or fragmented UI styling; not primarily for layout behavior or component logic.
---

# Ely Diseño

Convertir una dirección visual en decisiones reutilizables que se sostengan entre páginas y estados. Respetar la marca, el producto, el framework y las elecciones explícitas del usuario; no imponer un estilo, una fuente ni una biblioteca.

## Elegir una dirección que sirva al contenido

Revisar primero las pantallas reales, los estilos globales, el tema de la biblioteca existente y los activos de marca. Distinguir una convención deliberada de una inconsistencia. Para una intervención puntual, resolver el problema local sin convertirla en un rediseño completo.

Si falta dirección, inferirla del público, la tarea y el contenido disponible. Expresarla en decisiones concretas: densidad, jerarquía, carácter tipográfico, contraste entre superficies y uso de imagen. Evitar adjetivos como “premium” sin especificar qué cambia en pantalla. Elegir una composición representativa con contenido real antes de extender el sistema; una muestra de colores aislados no demuestra jerarquía.

Establecer qué elemento debe verse primero, qué información permite decidir y qué acción sigue. Una marca puede requerir neutralidad, exuberancia, una estética industrial o calidez editorial: la coherencia importa más que una preferencia de la skill.

## Traducir la dirección a reglas pequeñas

- Reutilizar tokens, variables o configuración del tema existentes. Agregar una capa paralela solo si existe una frontera real que la justifique.
- Separar valores de referencia de roles de interfaz: `surface`, `text-muted`, `action`, `border`, `focus`. Crear tokens de componente cuando su comportamiento visual diverja de un rol compartido; no generar un token por declaración CSS.
- Definir pares completos: texto/superficie, acción/etiqueta y sus estados. Evaluar contraste sobre el fondo efectivo, incluidas transparencias e imágenes. El color no debe ser la única diferencia entre error, selección y éxito.
- Establecer roles tipográficos con tamaño, peso, interlineado y ancho de lectura apropiados al contenido. Comprobar acentos, cifras, cadenas largas y la fuente de respaldo. Una escala matemática es un punto de partida, no una obligación para todas las jerarquías.
- Asignar espacio según relaciones: dentro de un control, entre elementos de un grupo y entre secciones. Conservar diferencias significativas; normalizar números por sí solo puede destruir agrupaciones útiles.
- Definir radios, bordes y elevación por función. Reservar profundidad para jerarquías espaciales que la necesiten; no aplicarla indiscriminadamente.

Leer [references/token-decisions.md](references/token-decisions.md) cuando haya que estructurar tokens, resolver temas o migrar estilos dispersos. Incluye criterios para evitar alias excesivos y cambios globales inesperados.

Si se necesitan temas, mapear los mismos roles a cada tema en lugar de invertir colores mecánicamente. Mantener visibles foco, estados y contenido de gráficos. No añadir un selector de tema por iniciativa propia.

## Aplicar y comprobar

Aplicar primero las reglas a una parte representativa del alcance: una composición de contenido, controles y al menos un estado de feedback si existen. Comparar jerarquía, legibilidad y consistencia en el navegador; después extender a las demás superficies solicitadas.

Revisar que un cambio compartido no deteriore consumidores ya existentes. Corregir una excepción local en su contexto cuando tenga una razón válida, en vez de expandir el sistema para justificarla. Documentar brevemente las decisiones difíciles de inferir desde el código; evitar un manual que duplique los tokens.

Entregar la dirección elegida, dónde se implementó y qué se revisó realmente. No atribuir mejoras de conversión o legibilidad medidas sin evidencia.

Para una escena de scroll, esta skill define el lenguaje visual de sus composiciones; una skill de animación disponible puede resolver su secuencia. La estructura adaptable y la lógica de componentes son trabajos distintos: usar apoyo especializado solo cuando el alcance lo requiera. Esta skill funciona por sí sola y no autoriza publicación ni cambios externos.