kasonye/ui-aesthetics-skill

Estética de UI

Intención

Usa este skill para que la salida de UI web se sienta más profesional, estable y de grado de producto.

Objetivos por defecto:

• preservar el alcance solicitado por el usuario y el volumen de contenido
• producir una composición equilibrada antes de añadir decoración
• hacer que la jerarquía sea legible de un vistazo
• mantener el color contenido pero con aspecto caro
• usar sombras, desenfoque, brillo y realces solo cuando aclaren la profundidad
• mantener el movimiento corto, suave y útil
• hacer que los componentes se sientan precisos antes de que se sientan estilizados
• mantener los estados, el movimiento y la profundidad dentro de un sistema coherente

Este skill es independiente del framework. No juzgues solo la composición de la página, sino también la precisión de los componentes, el comportamiento de los estados, la gramática del movimiento y la disciplina de la profundidad. Lidera con criterio de diseño, luego implementa.

Enrutamiento de Tareas

Clasifica la solicitud antes de actuar:

1. Generación Úsalo cuando el usuario quiera una nueva página, sección o componente.
2. Revisión Úsalo cuando el usuario quiera crítica, hallazgos o un diagnóstico de por qué la UI se siente débil.
3. Refactorización Úsalo cuando el usuario quiera reescribir directamente la implementación existente.
4. Pulido de Componentes Úsalo cuando la estructura sea aceptable pero los controles, tarjetas, tablas, modales o superposiciones aún se sientan genéricos o baratos.
5. Refinamiento de Estados / Movimiento Úsalo cuando hover, focus, pressed, selected, loading, success, error o las transiciones se sientan ruidosos, débiles o teatrales.
6. Refinamiento de Profundidad / Iluminación Úsalo cuando las sombras, los realces, el brillo, el desenfoque o la separación del modo oscuro necesiten una disciplina más estricta.

Si la solicitud mezcla revisión y refactorización, diagnostica primero, luego elige la profundidad de reescritura antes de editar.

Innegociables

• Respeta exactamente el alcance solicitado: un componente sigue siendo un componente, un conjunto de tarjetas sigue siendo un módulo acotado, una sección sigue siendo una sección y una página se convierte en página solo cuando se pide.
• Decide la tesis visual antes de tocar la implementación.
• Fija el tipo de artefacto antes de estilizar: no conviertas indicaciones de tarjeta, widget, modal, panel o sección en páginas de aterrizaje o paneles de control completos.
• Haz que el diseño, el espaciado y la jerarquía tipográfica carguen con la mayor parte de la calidad.
• Prefiere la agrupación espacial sobre el marco predeterminado cuando el espaciado pueda transmitir la relación.
• Trata "premium" como moderación, consistencia y precisión, no como ruido visual.
• Usa menos contenedores, menos acentos y menos ideas simultáneas.
• Si el artefacto solicitado es una página, por defecto crea una composición a pantalla completa que ocupe el ancho del viewport en lugar de un lienzo centrado pequeño.
• Para páginas de plataforma, marketplace, comercio electrónico o tipo portal, usa un esqueleto de página de ancho completo por defecto y restringe el contenido interno intencionalmente en lugar de atrapar toda la experiencia dentro de un panel centrado.
• Por defecto, preserva la densidad de información del usuario y el volumen de copia.
• No añadas copia de héroe, párrafos de marketing, navegación, pie de página, secciones de características, insignias o grupos de CTA a menos que la solicitud los requiera.
• Mantén las tarjetas comunes concisas. Prefiere etiquetas fuertes, valores y texto de apoyo compacto sobre textos inventados.
• Por defecto, prefiere superficies neutras nítidas o ligeramente frías; no uses crema, beige, marfil o blanco cálido como señal automática de premium.
• Mantén el pulido de componentes subordinado a la composición de la página.
• Trata los controles relacionados como miembros de un mismo sistema geométrico y de comportamiento.
• Mantén los estados predeterminados visualmente tranquilos; reserva un énfasis más fuerte para los estados de interacción y semánticos.
• Prefiere diseños equilibrados y estables sobre la tensión, la asimetría o la provocación visual.
• No introduzcas asimetría o contraste exagerado solo para evitar parecer una plantilla.
• Distingue el estado seleccionado persistente de la retroalimentación transitoria activa o presionada.
• Usa profundidad solo cuando explique la superposición de capas, la separación de materiales o el foco.
• Trata el brillo como excepcional, no como estructural.
• Haz que el móvil sea un diseño recomponido, no un escritorio comprimido.
• Mantén el resultado listo para enviar y mantenible.

Orden de Prioridad

Trabaja en este orden a menos que la tarea requiera claramente una secuencia diferente:

1. Alcance solicitado y límites del artefacto
2. Composición y equilibrio estructural
3. Ritmo de espaciado y densidad de información
4. Tipografía y ajuste de copia
5. Artesanía de componentes
6. Estados de interacción y comportamiento
7. Sistema de color y moderación semántica
8. Indicadores de profundidad: borde, sombra, desenfoque, realce
9. Movimiento, retroalimentación y transiciones

Si la página aún falla en escala de grises, la estructura no está resuelta.

Flujo de Trabajo

Generación

1. Identifica el tipo de artefacto solicitado y el alcance duro: componente simple, conjunto de componentes, sección o página completa.
2. Infiere el rol, la audiencia y la densidad dentro de ese alcance en lugar de expandirlo.
3. Nombra la impresión deseada en una frase corta como claridad de producto serena, pulido empresarial o precisión silenciosa.
4. Elige un bloque primario estable y módulos de apoyo antes de escribir el marcado.
5. Si la solicitud es para una tarjeta o componente, usa solo el lienzo circundante mínimo necesario para presentarlo claramente.
6. Preserva el volumen de copia a menos que el usuario solicite diseño de contenido. Ajusta la redacción si es necesario, pero no inventes texto explicativo adicional.
7. Si la solicitud es para una página, deja que el diseño exterior abarque el viewport por defecto en lugar de flotar como una losa centrada y estrecha.
8. Para páginas de plataforma o comercio electrónico, expande primero el esqueleto de la página: deja que la navegación, el marco héroe, los carriles de categorías, las zonas de campaña y los flujos de productos respiren a través del viewport antes de enmarcar módulos individuales como tarjetas.
9. Define la lógica de color: neutros primero, acento después.
10. Haz que las métricas de los componentes, los estados y el comportamiento se sientan sistematizados antes de añadir pulido.
11. Añade profundidad y movimiento solo después de que la composición estática funcione.
12. Haz explícito el comportamiento de escritorio y móvil cuando el artefacto solicitado realmente abarque ambos.

Lee references/design-principles.md cuando la dirección visual aún sea vaga. Lee references/color-system.md cuando la paleta se sienta ruidosa, plana o barata. Lee references/component-aesthetics.md cuando la solicitud se centre en controles, formularios, tarjetas, tablas o superposiciones. Lee references/interaction-states.md cuando el comportamiento de hover, focus, active, selected, loading, success o error importe. Lee references/motion-principles.md para la disciplina general del movimiento. Lee references/motion-patterns.md cuando las transiciones, el comportamiento hover o el movimiento de revelación necesiten más control. Lee references/depth-lighting-system.md cuando las sombras, los realces, el brillo, el desenfoque o la lógica de elevación del modo oscuro necesiten un control más estricto. Lee references/style-archetypes.md cuando el usuario pida una personalidad visual más específica.

Revisión

1. Comienza con el fallo estructural más grande, no con trivialidades de CSS.
2. Explica si el problema es de jerarquía, densidad, calidad de componente, comportamiento de estados, paleta, profundidad o movimiento.
3. Vincula cada hallazgo con la legibilidad, la confianza, el enfoque o la claridad de la acción.
4. Prefiere correcciones directas sobre el lenguaje de gusto genérico.

Usa references/review-rubric.md para estructurar los hallazgos. Usa references/anti-patterns.md cuando la UI se sienta generada por IA o superficialmente premium. Usa references/color-system.md cuando la debilidad principal sea la disciplina de la paleta o el mal uso del acento. Usa references/component-aesthetics.md cuando la debilidad principal sea la calidad de los controles, tarjetas, tablas o superposiciones. Usa references/interaction-states.md cuando la debilidad principal sea el comportamiento de hover, focus, active, selected, loading o error. Usa references/motion-principles.md y references/motion-patterns.md cuando la debilidad principal sea la calidad de la animación, el tiempo o el comportamiento de retroalimentación. Usa references/depth-lighting-system.md cuando la debilidad principal sea la niebla de sombras, el mal uso del brillo, la superposición débil o la profundidad del modo oscuro.

Refactorización

1. Elige pulido ligero, reestructuración media o reconstrucción completa.
2. Arregla el diseño y la agrupación antes que la cosmética de componentes.
3. Despoja el estilo débil hasta la estructura en escala de grises cuando la jerarquía no esté clara.
4. Reconstruye las métricas de los componentes y la lógica de estado antes de añadir pulido.
5. Reintroduce solo el color, la profundidad y el movimiento que la interfaz todavía necesite.
6. Reconstruye la versión móvil intencionalmente si la estructura de escritorio no se traduce.
7. Indica el nivel de reescritura, el fallo principal y la dirección prevista antes de editar.

Usa references/rewrite-playbook.md antes de cambios visuales amplios. Usa references/component-aesthetics.md antes de reescrituras amplias de controles o superposiciones. Usa references/interaction-states.md antes de cambiar el comportamiento entre estados. Usa references/color-system.md antes de reescribir una paleta ruidosa. Usa references/motion-principles.md y references/motion-patterns.md antes de añadir o simplificar transiciones. Usa references/depth-lighting-system.md antes de añadir o eliminar lógica de elevación, brillo o realce.

Política de Anti-Patrones

Rechaza las salidas que se basen en:

• inflación del alcance que convierte una solicitud de componente en una página completa, un shell de panel de control o un diseño de aterrizaje
• inflación de copia decorativa que añade descripciones de relleno, insignias, estadísticas o bloques de CTA no solicitados
• diseños a nivel de página atrapados dentro de shells centrados innecesariamente estrechos sin una razón de contenido
• páginas de plataforma o comercio electrónico encerradas en una tarjeta centrada de gran tamaño en lugar de usar un esqueleto de página de ancho completo
• diseños de plantilla de héroe centrado apilado con cuadrícula de tarjetas
• diseños inestables o asimétricos forzados utilizados para crear tensión
• módulos de igual peso sin un orden de lectura claro
• demasiadas superficies, trazos, píldoras y radios
• neutros crema, beige, marfil o blanco cálido utilizados como un atajo predeterminado para "premium"
• colores de acento fuertes sobre neutros inestables
• estados predeterminados que ya gastan demasiado énfasis
• comportamiento hover, presionado o de revelación que convierte la interacción en coreografía
• estados seleccionados que parecen retroalimentación de clic
• brillo, sombra, desenfoque o degradados utilizados para fingir sofisticación
• animación que se llama la atención a sí misma en lugar de guiar la percepción
• sistemas de profundidad donde todo flota a la vez
• tratamientos visuales fuertes diseñados para impresionar antes de aclarar
• diseños móviles que simplemente colapsan columnas sin recomponer el énfasis

Lee references/anti-patterns.md cuando el resultado se sienta pulido pero aún barato.

Autocrítica

Antes de la salida final, verifica:

• ¿El resultado se mantuvo dentro del alcance solicitado por el usuario sin inventar una página a su alrededor?
• ¿La primera lectura es obvia en tres segundos?
• ¿El diseño aún se siente creíble y bien equilibrado sin degradados y sombras?
• Si esto es una página, ¿la composición realmente ocupa el ancho de la pantalla por defecto?
• Si esto es una página de plataforma o comercio electrónico, ¿el esqueleto exterior se expande a través del viewport mientras solo las áreas de contenido interno permanecen restringidas?
• ¿La copia se mantuvo tan corta como la tarea lo permite, especialmente en tarjetas comunes?
• ¿Los neutros son lo suficientemente tranquilos y consistentes para que el color de acento signifique algo?
• ¿La paleta evitó recurrir por defecto a señales de lujo cremosas o blancas cálidas sin una razón de contenido?
• ¿Los controles relacionados comparten alturas, lógica de relleno y disciplina de radio compatibles?
• ¿Los estados predeterminados son lo suficientemente silenciosos como para dejar espacio para los estados de focus, active y error?
• ¿Los estados seleccionados y presionados son claramente distintos?
• ¿Los componentes se ven relacionados sin tener todos el mismo peso?
• ¿Las sombras y los realces describen profundidad en lugar de crear niebla?
• En UI oscura, ¿la profundidad proviene de la jerarquía de superficies y la definición de bordes antes que del desenfoque y la sombra?
• ¿El brillo es lo suficientemente raro como para seguir significando algo?
• ¿Los tiempos de movimiento se sienten controlados y breves?
• ¿El movimiento refuerza la lógica de interacción en lugar de convertirse en coreografía?
• ¿La composición se mantuvo equilibrada en lugar de volverse buscadora de atención?
• ¿El primer viewport móvil preserva el mismo mensaje o acción principal?
• ¿La mejora eliminó ruido en lugar de añadir más estilo?

Referencias

• Reglas de diseño básicas: references/design-principles.md
• Reglas del sistema de color: references/color-system.md
• Reglas de artesanía de componentes: references/component-aesthetics.md
• Reglas de estados de interacción: references/interaction-states.md
• Reglas de movimiento: references/motion-principles.md
• Reglas de patrones de movimiento: references/motion-patterns.md
• Reglas de profundidad e iluminación: references/depth-lighting-system.md
• Arquetipos de estilo: references/style-archetypes.md
• Patrones de fallo: references/anti-patterns.md
• Estructura de revisión: references/review-rubric.md
• Profundidad de reescritura y contrato de salida: references/rewrite-playbook.md
• Ejemplos de criterio destilado: references/distilled-examples.md