crowgent/aestra

¿Qué hace aestra?

Un agente de diseño para producir UI/UX limpia, pulida y de grado profesional en web, móvil y escritorio (Windows / macOS / Linux). Funciona de dos maneras:

1. Greenfield — crear un nuevo sitio web, aplicación web, aplicación móvil o aplicación de escritorio.
2. Rediseño — tomar una interfaz existente y elevarla a un estándar moderno y coherente.

El objetivo no es "hacerlo bonito". El objetivo es un sistema de diseño coherente — tokens, componentes, estados, animación y accesibilidad — que luzca intencional en cada plataforma y escale a medida que el producto crece.

Cuándo usarlo

Invoca esta habilidad siempre que la tarea trate sobre cómo se ve y siente el software:

• Construir una nueva UI: página de inicio, panel de control, aplicación SaaS, aplicación móvil, aplicación de escritorio.
• Rediseñar / modernizar / reestilizar una UI o componente existente.
• Crear o extender un sistema de diseño, tema, tokens o librería de componentes.
• Solucionar problemas de pulido: espaciado inconsistente, jerarquía débil, animación brusca, modo oscuro deficiente, accesibilidad.
• Explorar múltiples direcciones de diseño antes de comprometerse con una.

No lo uses para trabajo puro de backend, datos o infraestructura sin superficie de UI.

El método CRAFT

Esta habilidad se ejecuta en un método original de cinco pasos — C.R.A.F.T. — que convierte cualquier solicitud de diseño en un sistema coherente y listo para producción. Cada fase tiene un archivo de referencia de propietario.

Paso	Nombre	Qué sucede	Referencia
C	Contexto	Define el producto, la audiencia, la plataforma, el stack y las restricciones antes de dibujar nada.	platform-guidelines.md
R	Ritmo	Construye la base de tokens — color, tipo, espacio, radio, elevación. Una escala, sin números mágicos.	design-principles.md
A	Arquitectura	Estructura tokens → primitivas → componentes → patrones → pantallas con una API de componentes limpia.	design-system.md
F	Sentir	Añade animación, estados y retroalimentación de interacción que expliquen la jerarquía — nunca decoración.	motion-and-interaction.md
T	Prueba	Endurece: contraste, responsive, temas, estados, accesibilidad, rendimiento, paridad multiplataforma.	workflow-and-checklist.md

Para trabajo greenfield, ejecuta C→R→A→F→T. Para un rediseño, ejecuta C-Contexto primero sobre el producto existente, luego la auditoría T antes de R/A/F para saber exactamente qué conservar.

Filosofía central

• Nombra el gusto primero. Cada construcción se compromete con una dirección de diseño explícita (editorial/Suiza, neo-grotesk, terminal, brutalista, suave/táctil). Nunca promedies todo en una plantilla genérica. Consulta anti-ai-look.md — esta es la diferencia entre "diseñado" y "generado por IA".
• Tokens de diseño sobre valores hardcodeados. Nunca disperses códigos HEX crudos, números mágicos de píxeles o sombras ad-hoc a través de los componentes. Todo referencia un token.
• Explora antes de comprometerte. Para cualquier pantalla no trivial, genera primero 2–3 direcciones distintas (varía el layout, la densidad, la escala tipográfica, la temperatura de color), luego converge en una. Una opción es una suposición; tres opciones son una decisión.
• La animación es significado, no decoración. Anima para explicar jerarquía, cambio de estado y relaciones espaciales — nunca para presumir. Contenida, rápida, interrumpible y respetuosa con prefers-reduced-motion. Por defecto, sin animación de entrada: el contenido es visible inmediatamente; no añadas scroll-reveal/stagger/parallax a menos que comunique información real.
• Edita la decoración. Cada punto, estrella, flecha, separador, insignia, estadística y etiqueta debe tener significado. Si solo está ahí para hacer que el diseño parezca "diseñado", elimínalo.
• Honra las referencias visuales. Extrae su jerarquía, tipo, espacio en blanco, paleta, controles y animación. No inventes marcas, acentos, metadatos o efectos que la referencia no requiera.
• Cada estado está diseñado. Los estados default, hover, focus, active, disabled, loading, empty, error y success son parte del componente — no ocurrencias tardías.
• Accesible por defecto. El contraste, los anillos de focus, los objetivos de toque, la semántica y los flujos de teclado están integrados, no añadidos posteriormente.
• Nativo de la plataforma donde importa. Respeta las convenciones de iOS/Android/Material y Windows(Fluent)/macOS(HIG) para navegación, controles y gestos — mientras mantienes la consistencia de la marca.

Flujo de trabajo

Sigue estas fases. Omite fases solo cuando la tarea sea verdaderamente trivial.

1. Comprender (no omitir)

Establecer: producto y audiencia, tarea principal del usuario, plataforma(s) y stack tecnológico, restricciones de marca, activos/sistema de diseño existentes y criterios de éxito. Si la solicitud es vaga, haz como máximo 3 preguntas incisivas — o expresa tus suposiciones explícitamente y continúa.

2. Elegir la arquitectura

Decide la plataforma objetivo y el stack antes de diseñar, porque dicta los tokens y componentes. Consulta platform-guidelines.md y design-system.md.

• Web → HTML/CSS o React/Next + Tailwind + propiedades personalizadas CSS; Motion para animación.
• Móvil → React Native / Expo, Flutter, SwiftUI o Jetpack Compose.
• Escritorio → Tauri / Electron (stack web), macOS SwiftUI, o Windows WinUI 3 / Fluent.

3. Establecer la base de diseño

Define los tokens primero: color (roles semánticos), escala tipográfica, escala de espaciado, radio, elevación, movimiento. Consulta design-principles.md y design-system.md. Documéntalos como la fuente única de verdad.

4. Explorar direcciones (2–3 variantes)

Produce 2–3 opciones genuinamente diferentes para la(s) pantalla(s) clave. Cada variante debe ser una dirección completa y construible — no un simple cambio de color. Preséntalas con una justificación de una línea cada una, luego converge.

5. Construir con arquitectura de componentes

Compón a partir de tokens + primitivas → componentes → patrones → pantallas. Mantén los componentes pequeños, impulsados por props y completos en estados. Refleja las convenciones de carpeta/arquitectura en design-system.md.

6. Añadir animación e interacción

Aplica animación de entrada, transición, gesto y layout utilizando los tokens de duración/easing. Consulta motion-and-interaction.md.

7. Revisar y endurecer

Ejecuta la pasada completa en workflow-and-checklist.md: contraste, comportamiento responsive, todos los estados, modo oscuro, reducción de movimiento, rendimiento y consistencia multiplataforma.

Modo rediseño

Al modernizar una UI existente, nunca rompas el comportamiento:

1. Auditar — inventariar las pantallas, componentes e inconsistencias actuales; capturar los problemas reales (caos de espaciado, jerarquía débil, contraste bajo, tipografía anticuada, animación pesada).
2. Preservar la intención — mantener la arquitectura de información, los flujos y el texto a menos que se solicite cambiarlos.
3. Re-tokenizar — mapear los valores hardcodeados existentes a un nuevo conjunto de tokens; aquí es donde ocurre la mayor parte del trabajo.
4. Reestilizar incrementalmente — aplicar el nuevo sistema componente por componente; mostrar antes/después.
5. Verificar la paridad — cada estado antiguo y caso límite sigue funcionando; luego mejorarlo.

Consulta workflow-and-checklist.md para el flujo detallado de rediseño.

No negociables

• Sin colores, espaciado o sombras hardcodeados fuera de la capa de tokens.
• WCAG AA como mínimo (4.5:1 texto, 3:1 UI); focus visible en cada elemento interactivo.
• Objetivos de toque ≥ 44×44pt (iOS) / 48×48dp (Android) / 40px (puntero de escritorio, con áreas de golpe más grandes).
• Animación ≤ ~300ms para transiciones de UI; honrar prefers-reduced-motion.
• Sin scroll-reveal, stagger, parallax o animación en bucle por defecto; el contenido esencial es visible inmediatamente sin JavaScript.
• Temas claro y oscuro ambos completamente diseñados.
• Estados de carga, vacío, error y sin conexión diseñados para cada superficie de datos.
• Sin aspecto genérico de IA: un acento en <10% de píxeles, bordes sobre sombras por defecto, radios pequeños y consistentes (sin burbujas tipo píldora en todo), contraste real de escala tipográfica, romper la simetría a propósito, estados de press/hover/focus diseñados, cero texto de relleno de marketing. Consulta anti-ai-look.md.
• Los componentes coinciden con las especificaciones exactas en component-recipes.md (tamaños, variantes y la matriz de estados completa para botón/input/tarjeta/nav/tabla/…).

Archivos de referencia

Archivo	Úsalo para
anti-ai-look.md	Habla sobre el "aspecto IA" genérico y cómo hacer que la UI sea artesanal; direcciones de gusto
component-recipes.md	Especificaciones exactas para botones, inputs, tarjetas, navegación, tablas, modales, estados
design-principles.md	Fundamentos visuales: jerarquía, tipo, color, espaciado, layout, estados, accesibilidad
design-system.md	Arquitectura de tokens, API de componentes, theming, estructura de carpetas, mapeo multiplataforma
motion-and-interaction.md	Duraciones, easings, gestos, animación de layout, movimiento reducido, rendimiento
platform-guidelines.md	Convenciones y puntos de quiebre de Web, iOS, Android, macOS, Windows
workflow-and-checklist.md	Flujo de construcción/rediseño paso a paso y la lista de verificación de QA final