Casos reales
@amset/ui no nació para una web de demostración: sale de las aplicaciones de AMSET. Estas son tres pantallas de la aplicación real, capturadas en producción, y lo que hay de la biblioteca en cada una.
El asistente
La pantalla principal de AMSET: una esfera que escucha, una barra para escribir la petición, los agentes en marcha a un lado y el historial al otro.
Lo que hay de @amset/ui
Los botones de las dos barras, la barra de petición y la búsqueda del historial son Button y TextField. Los ajustes, las máquinas, las cuentas y el resto de ventanas son Dialog: hay veintidós montados en esta pantalla, cerrados, y cada uno trae su foco y su Escape de la plataforma. La esfera y el aspecto de cada panel son de la propia aplicación.
- Button
- TextField
- Dialog
Empresa: el tablero de tickets
El trabajo de la empresa en cinco columnas, del backlog a hecho, con su búsqueda, sus filtros y las cifras de arriba. Es donde se llevan las tareas de AMSET.
Lo que hay de @amset/ui
Cada tarjeta lleva su Button, con el foco visible y el teclado de la plataforma sin escribir nada, y también los de la barra de arriba: son más de trescientos en la pantalla real. El buscador es un TextField. Las columnas, su luz de color y las cifras son de la aplicación.
- Button
- TextField
El Camino: tu día
La pantalla de entrada de cada día: la fecha, lo siguiente de la agenda, las tareas de hoy, la semana y lo que viene después, filtrable por categoría.
Lo que hay de @amset/ui
Las tareas se añaden con un TextField y se filtran con un SegmentedGroup (todas, pendientes, completadas): un grupo de radios de verdad, con sus flechas. «Todas las categorías» es un Select, los bloques son Card y las acciones, Button. Las tarjetas de cada día y el reloj son de la aplicación.
- Button
- Card
- SegmentedGroup
- Select
- TextField
Mismo componente, otra cara
La aplicación de AMSET es azul eléctrico sobre negro, con otra tipografía y otras formas, y usa los mismos componentes que cualquier proyecto. No los ha tocado por dentro: su aspecto sale de un fichero de configuración y de npx amset-ui theme, que genera el CSS con el contraste ya comprobado. Este es el trozo que define sus colores:
export default { palette: { brand: '#00D4FF', error: '#FF2255', success: '#00FF88', neutral: '#00020A', }, colors: { dark: { background: 'rgb(0, 2, 10)', ink: 'rgb(230, 250, 255)', accent: 'rgb(0, 212, 255)', }, }, base: { font: "'Rajdhani', sans-serif" },}Y para tu aplicación
Lo mismo se puede montar desde cero en un minuto: npx amset-ui create crea un proyecto de Next o de Vite con la biblioteca puesta, y npx amset-ui add copia pantallas enteras (el panel de gestión, el alta de cliente, la factura, los ajustes) hechas solo con estos componentes.