¿Qué hace Diseño de Frontend para Astrale?
Construye el Dominio como una interfaz de producto enfocada, no como una landing page. Los Dominios viven dentro de la GUI de Astrale y heredan su capa exterior circundante. No añadas un héroe, un área de presentación grande, un encabezado de página redundante ni espacio vacío antes del contenido útil.
Aplica este skill junto con las guías de Vista de astrale-domain. Reutiliza el lenguaje visual de la aplicación anfitriona
y los primitivos existentes del proyecto a menos que la tarea establezca una dirección diferente.
Planifica la Arquitectura de la Información
Antes de escribir código de UI, esboza mentalmente un wireframe de alto nivel o en una nota temporal. Identifica:
- la tarea principal del usuario;
- las secciones y subsecciones principales;
- los vínculos lógicos entre ellas;
- su importancia relativa;
- qué información pertenece junta;
- el contenedor correcto para cada subsección.
Haz de cada sección una unidad lógica coherente. Deja que la arquitectura de la información y la prioridad de la tarea impulsen el diseño, el orden, el espacio y el peso visual. Coloca el estado y los controles cerca del contenido al que afectan.
Mantén la Interfaz Sobria
Evita la estética generada por IA (AI-slop). No conviertas cada elemento en una tarjeta, anides contenedores sin una necesidad real de agrupación, ni hagas que las tarjetas se eleven al pasar el ratón. Usa el hover solo para aclarar la interacción y proporciona la misma claridad para usuarios de teclado y táctil.
Prefiere un número reducido de regiones fuertes, una jerarquía clara, espaciado compacto y controles consistentes. No añadas degradados decorativos, píldoras, métricas sobredimensionadas, animación ni texto ornamental por defecto. Cada elemento visual debe comunicar estructura, estado, prioridad o capacidad de acción.
Haz Precisos los Estados de Interacción
Modela los estados relevantes de inicial, carga, vacío, listo, enviando, éxito, fallo, no autorizado y deshabilitado antes de considerar completo un flujo.
- Muestra la carga en el ámbito que realmente está esperando: dentro de un botón enviado para una acción local, o con un esqueleto de página para el contenido inicial de la página. Nunca muestres varios indicadores de carga para una sola acción.
- Evita envíos duplicados. Conserva la entrada del usuario en caso de fallo y coloca comentarios accionables cerca del control o contenido afectado.
- Maneja la creación con claridad: muestra que la acción tuvo éxito, inserta el resultado donde el usuario lo espera y mueve el foco solo cuando hacerlo ayude a la siguiente tarea.
- Maneja la eliminación con claridad: distingue la eliminación reversible de la destructiva y confirma solo cuando la consecuencia lo amerite.
- Usa actualizaciones optimistas de listas cuando el resultado sea predecible. Revierte en caso de fallo, muestra el fallo y reconcilia la interfaz con el estado confirmado del Kernel.
- Cierra un menú desplegable abierto cuando el usuario haga clic fuera de él o presione Escape. Soporta la navegación por teclado, expón el elemento seleccionado y devuelve el foco al disparador cuando sea apropiado.
- Haz que las etiquetas y valores largos formen parte de las pruebas de diseño. Ajusta el texto cuando la lectura sea importante; trunca solo en espacio fijo real y proporciona acceso al valor completo. Nunca dejes que el texto cubra acciones adyacentes.
- Mantén los diálogos, menús, formularios y acciones en línea utilizables con teclado. Usa foco visible, controles semánticos, etiquetas correctamente asociadas y anuncios de estado o error accesibles.
- Haz que los estados de hover, deshabilitado, pendiente, éxito y error sean visualmente distintos sin depender solo del color.
Reduce el Texto de Forma Deliberada
Conserva solo el texto que ayude al usuario a comprender el estado, decidir o actuar. Preserva las etiquetas necesarias, los comentarios y el texto de accesibilidad. Elimina introducciones, repeticiones, ayuda obvia, texto decorativo y descripciones que simplemente repiten un encabezado o control.
Después de la implementación, realiza una revisión dedicada a la reducción de texto. Lee cada cadena visible en contexto y elimínala a menos que la interfaz se vuelva más difícil de entender, decidir o actuar.
Verifica el Resultado
Ejecuta los flujos de tareas reales con datos representativos, vacíos, largos, de carga y de fallo. Comprueba la creación, eliminación, reversión, el comportamiento de clic fuera y Escape, el orden del teclado, los diseños estrechos y los comentarios visibles. Luego revisa toda la pantalla una vez más y elimina tarjetas, efectos, texto y espacio redundantes antes del contenido útil.