SHIUI
SHIUI es un kit de componentes de UI reutilizables con estilo 2D plano: solo tres colores, líneas de 1.5px y sin sombras; los componentes se pueden probar directamente en la página y copiar su código fuente.
Acerca de SHIUI
SHIUI es un kit de componentes de UI reutilizables con un estilo visual 2D plano inspirado en el diseño de carteles de la bandera de Japón: utiliza solo tres colores (blanco papel #e5e3dc, negro tinta #2a2926, rojo bermellón #e14d2a), líneas uniformes de 1.5px y no emplea sombras en ningún momento. Según el sitio web oficial, actualmente incluye 111 elementos interactivos y 24 bloques, que son realmente funcionales en la página de exhibición: se pueden pulsar, voltear, cerrar, etc., y cada tarjeta permite copiar directamente la sentencia de importación o el código fuente completo correspondiente. También ofrece tokens de diseño (sistema de colores) que se pueden copiar con un clic, ideal para aplicarlo directamente en los proyectos.
Ideal para
Mejores casos de uso
Construir un sistema visual plano y sobrio para interfaces en inglés, copiando y usando directamente el código fuente de los componentes
Cuando se necesitan normativas unificadas de color y líneas, copiar los tokens de diseño en tres colores como base del proyecto
Antes de elegir un componente, probar los efectos de interacción —pulsar, voltear, cerrar, etc.— directamente en las tarjetas del sitio web oficial
Funciones
Catálogo de componentes interactivo
Según el sitio web oficial, incluye 111 elementos interactivos y 24 bloques; cada tarjeta se puede pulsar, voltear o cerrar realmente en la página.
Copia con un clic de la sentencia de importación o del código fuente
Cada tarjeta de componente permite copiar directamente la sentencia de importación o el código fuente completo, lo que facilita su uso en los proyectos.
Tokens de diseño en tres colores
Ofrece tokens en tres colores (Paper, Sumi y Shu) que se pueden copiar con un clic desde el sitio web oficial, para unificar el uso de colores, líneas y acentos de la interfaz.
Estilo visual plano tipo cartel
Adopta un sistema visual 2D plano con líneas uniformes de 1.5px y sin sombras, y se muestra en el sitio web oficial en forma de componentes.
Ventajas
- Los componentes se muestran de forma realmente interactiva en el sitio web oficial: lo que ves es lo que obtienes
- Permite copiar directamente la sentencia de importación o el código fuente completo, con un bajo coste de integración
- Ofrece tokens de diseño de tres colores que se pueden copiar, con un estilo uniforme
Limitaciones
- El kit de componentes está orientado a interfaces en inglés: los textos de la interfaz están diseñados principalmente con la composición en inglés en mente