Treinta interfaces de muestra, generadas desde un script
Los clientes preguntan cómo se verá el sistema. Describirlo nunca funciona. Construimos treinta interfaces de muestra — y aprendimos que lo difícil es que se vean realmente distintas.
Toda propuesta choca con la misma pared. Escribes «un tablero de despacho con posiciones en vivo y alertas de SLA», el cliente asiente, y ninguno de los dos está imaginando la misma pantalla. La brecha solo se cierra cuando pueden ver algo.
Así que construimos una interfaz de muestra estática por cada tipo de plataforma que entregamos — treinta, desde una consola de pagos hasta un punto de venta de restaurante o una vista SCADA de línea. Están en este sitio bajo /demos, y son generadas: un script de Python controla los datos, los widgets y los temas.
La primera versión falló
Publicamos las treinta compartiendo un mismo shell oscuro, cambiando solo el color de acento por página. El veredicto llegó en cinco palabras: se ven casi iguales. Y era cierto. Un expediente médico y un terminal de cripto no pueden ser creíblemente la misma barra lateral azul con otro tono.
La solución no fue más colores. Fue aceptar que un tema son tres decisiones distintas — paleta, tipografía y densidad — y que el layout es una cuarta decisión encima de todas.
Los tokens hacen posibles los temas claros
La reescritura convirtió cada color dentro de una muestra en una custom property de CSS. Nada tiene un hex fijo, así que una sola clase de skin cambia toda la interfaz de casi negro a blanco clínico y cada widget la sigue — incluidos los verdes y ámbares de estado, que necesitan valores distintos sobre blanco que sobre azul marino.
.frame{
--f-bg:#050915; --f-panel:rgba(8,13,32,.6);
--f-tx:#EAF0FF; --f-line:rgba(130,160,230,.14);
}
.frame.sk-clinical{
--f-bg:#F3F6FA; --f-panel:#FFFFFF;
--f-tx:#16233A; --f-line:#DBE3EE;
--ok:#128A4C; /* the dark-theme green is invisible on white */
}El layout importa más que el color
Seis arquetipos estructurales lograron más que veintisiete paletas. Un punto de venta se renderiza en un marco de tablet con botones grandes. Una app de técnico, en un marco de teléfono. Un sistema de rastreo hace del mapa toda la pantalla y flota sus paneles encima. Un terminal de trading elimina la barra lateral por una cinta de cotizaciones y una grilla densa.
Cada cifra y nombre de empresa en esas muestras es inventado, y cada página lo dice en ambos idiomas. Una muestra que insinúa un cliente que no tienes es otro tipo de mentira.
El generador tiene unas 3,000 líneas y produce 870 KB de HTML estático sin más JavaScript que el cambio de idioma. Agregar un sistema treinta y uno es una entrada en una lista.