Radix Themes
Una referencia práctica para interfaces de productos: colores adaptables al tema, una escala de nueve niveles para tipografía y espaciado, estados de componentes y una guía completa para agentes.
Explora paletas, tipografía, componentes, composición y guías de diseño completas. Compara estilos visuales, consulta sus reglas e incorpora la referencia adecuada a tu próximo proyecto.
Una referencia práctica para interfaces de productos: colores adaptables al tema, una escala de nueve niveles para tipografía y espaciado, estados de componentes y una guía completa para agentes.

Crea una composición práctica para controlar cantidades con la unidad base de 16 px de Mozaic, controles uniformes de 48 px, importaciones SCSS reales y clases BEM. El planificador de estanterías permite observar los límites, los errores tipados y un resumen local de materiales.

Explora Spectrum v3 de React mediante una tabla de recursos creativos seleccionables y un inspector de ajustes preestablecidos de exportación. Conoce los temas de Provider y la escala de entrada, las propiedades de estilo compatibles, las colecciones con claves y las diferencias entre la versión 3 y la implementación más reciente de Spectrum 2.

Crea transacciones de servicio más largas con el espaciado concreto de AgDS, sus propiedades adaptables y su modelo de estado de TaskList. Prueba un flujo de preparación en el que el paso de revisión se habilita solo cuando se completan los requisitos previos.

Explora el tema Alaska de Auro con tokens semánticos reales para color y tipografía, tipografía basada en clases y el componente de vuelo nativo. Dos registros de vuelo originales muestran el filtrado y la selección locales, sin representar inventario de aerolíneas ni permitir reservas.

Usa los componentes web nativos y los tokens de diseño publicados de Alberta para crear una lista de preparación completa, con opciones accesibles, progreso calculado y comentarios de revisión transparentes.

Usa el contrato real de Switch de código abierto de Amsterdam, con un tema neutro completo, etiquetas accesibles y preferencias de lectura que se aplican al instante.

Crea un selector de secciones de informes con el componente Transfer controlado de Arco. Explora sus escalas reales de espaciado y tamaño, las convenciones de variables de CSS, las superficies semánticas y la diferencia entre seleccionar filas y moverlas.

Ariakit ofrece componentes React sin estilos, con un estado compartido explícito y partes accesibles que se pueden combinar. Su combobox separa el texto introducido de la selección confirmada, por lo que resulta útil para selectores basados en búsquedas; el buscador de referencias de abajo muestra esa diferencia con resultados agrupados y no disponibles.

Crea un tablero de planificación de incidencias con tokens semánticos de Atlassian, una escala de espaciado de ocho píxeles, las API reales de Button, Lozenge y Toggle, y la configuración de estilos requerida para Compiled. Consulta una incidencia, filtra el tablero y mueve un elemento de trabajo local sin confundir la selección con el estado.

Una guía de configuración de Cloudscape con tokens reales de actualización visual, espaciado que se adapta a la densidad, API controladas para formularios y un asistente funcional de dos pasos para crear recursos.

Crea un flujo de revisión bancaria con identidad de marca usando los módulos Angular de Backbase, la exportación de temas semánticos y estados de revisión explícitos. Compara las API web con las dimensiones nativas documentadas por separado.

Bits UI ofrece componentes headless de Svelte que se componen mediante partes nativas y el estado de Svelte 5. El ejemplo combina una casilla de verificación con estado mixto calculado, secciones de acordeón que se expanden de forma independiente y un diálogo de revisión basado en portal, e incluye toda la configuración de estilos.

Usa Bootstrap 5.3.8 con su escala de espaciado real, colores semánticos, cuadrícula adaptable y API de componentes. Prueba un formulario de reservas funcional, un resumen de errores, un filtro de tabla, un modal y un selector de modo de color; después, reutiliza el código documentado.

Crea un formulario de preferencias de recordatorios al estilo de B.C. con tokens semánticos reales, controles Aria nativos de React, campos de contacto condicionales y validación completa.

Crea un escritorio editorial con la estructura real de campos y controles de Bulma, columnas adaptables, modificadores de color semánticos y variables de CSS, con el código de validación completo.

Explora la tipografía, los tokens semánticos y los componentes web nativos de GC Design System mediante una guía de preparación completa y con búsqueda, comportamientos de divulgación y estados vacíos.

Implementa la cuadrícula editorial, la tipografía actual y los componentes Expandables nativos de CFPB con una hoja de trabajo de lectura funcional, API de paquetes verificadas y límites de identidad explícitos.

Una referencia de Chakra UI v3 para tokens, funciones semánticas del color, recetas y componentes de formulario compuestos. Examina las escalas reales de espaciado y tipografía; después, prueba un formulario nativo de perfil de espacio de trabajo con validación, una simulación de error al guardar y opciones de apariencia clara y oscura.

Implementa CMS Core con variables de tema versionadas, API reales del componente Review y un flujo funcional de edición y revisión que conserva las respuestas del usuario y el foco.

Una cola de revisión de CoreUI creada con las variables reales del tema 5.9, pestañas nativas, selección múltiple con casillas y una notificación persistente que permite deshacer la última operación de archivado local.

Un estudio de invitaciones nativo de CSS que muestra los temas semánticos 5 de daisyUI, colores de contenido emparejados, grupos de botones de opción, controles de rango, validación del navegador y un paso de revisión con un diálogo real.

Crea una búsqueda de dispositivos con ámbito definido mediante DDS v3: colores semánticos, escala tipográfica adaptable, espaciado basado en tokens y una composición InputGroup cuyo filtrado corresponde a la aplicación.

Explora el tema DKFDS de Dinamarca, las escalas Sass reales y los patrones accesibles para tablas mediante una comparación completa de recursos con ordenación numérica, búsqueda enviada y recuperación del estado vacío.

Implementa una secuencia de servicios fácil de leer con la tipografía real, la estructura adaptable de Stepper y el estado de formulario local recuperable de Bootstrap Italia.

Explora las funciones reales del tema, los modos de tamaño y el comportamiento nativo de los campos de Designsystemet mediante un editor completo de encargos con contador de caracteres y estado de presentación conservado.

Comprende la tipografía, la cuadrícula y el componente de acordeón API concretos del sistema del Estado francés dentro de su ámbito institucional. Compara los comportamientos de divulgación vinculados e independientes en un ejemplo educativo claramente neutral.

Estudia las escalas de color y espaciado de LocalTapiola en Duet mediante un flujo de trabajo de intervalo de fechas, con valores de fecha ISO, validación explícita del intervalo, métodos de foco de componentes y un límite claramente diferenciado para el selector de código abierto.

Crea un explorador de registros de Elastic UI con las escalas verificadas de Borealis, controles nativos de tabla y búsqueda, filtros de gravedad, eventos guardados localmente y el código fuente completo de React.

Usa el modelo Transfer real de Element Plus, sus filtros y sus opciones deshabilitadas para crear un espacio de trabajo de selección de módulos, con colores, tamaños tipográficos y dimensiones de controles verificados.

Consulta el contrato de tabla de datos de Soul junto con su espaciado de seis píxeles, sus funciones de color por capas y su tipografía Inter compacta. Compara la selección múltiple, la notación de datos ausentes y las filas de resumen; después, examina los puntos de entrada verificados del paquete privado de React.

Una referencia práctica de Calcite para herramientas espaciales que requieren precisión: superficies semánticas y acciones azules, paneles de inspección compactos, API reales para entradas y un ejemplo completo de revisión local de sitios.

Examina las funciones de color, tipografía y espaciado de EC en Europa mediante un encargo completo con acordeón nativo, navegación por teclado, opción para abrir todo y una alternativa legible sin JavaScript.

Una composición con acordeón y panel lateral nativos de Flowbite 4, con alias semánticos del tema verificados, una lista de equipaje persistente y un flujo accesible para añadir notas sobre materiales de forma local.

Un estante de lectura nativo de Fomantic UI con valores compilados del tema verificados, módulos jQuery para menús desplegables y valoraciones, compatibilidad explícita con el teclado y una lista de selección local persistente.

Un espacio de trabajo funcional de comprobación de Foundation que utiliza XY Grid, validadores personalizados de Abide, confirmación de Reveal, ajustes Sass reales y código completo de integración local.

Un cuaderno de bocetos nativo de Framework7 con acciones swipeout reales, valores explícitos del tema de iOS, un activador de acciones accesible mediante teclado y una lista filtrada que conserva los estudios completados hasta que se restablece.

Una guía de Pajamas para flujos de trabajo técnicos: tokens semánticos reales, tipografía y espaciado fluidos, un inspector de canalización por etapas, mensajes de error fáciles de leer y una simulación de reintento explícitamente local.

Crea una lista de verificación para un kit de campo con los creadores reales de Button e Input de gluestack, colores semánticos explícitos de v5 y el código fuente completo de React Native Web. Examina la validación, las acciones de teclado, la identidad estable de los elementos y el progreso de preparación calculado localmente.

Explora los roles de color reales, los espacios para tarjetas y la paginación nativa de Gov Design System CE mediante un kit completo de lectura con seis recursos, que incluye estados explícitos de enfoque y página.

Crea un recorrido de preguntas y comprobación de respuestas al estilo GOV.UK con la escala tipográfica v6 actual, espaciado adaptable, colores funcionales, validación vinculada e integración concreta con Frontend.

Conoce HarvardSites como plataforma editorial: compara estilos de sitio, elige combinaciones tipográficas documentadas y crea páginas universitarias con componentes de contenido diseñados para cada propósito.

Headless UI proporciona componentes de interacción React sin estilos para diálogos, listas desplegables y conmutadores. Esta guía se centra en combinar su comportamiento nativo de enfoque, selección y ventanas emergentes con CSS convencional, usando como ejemplo práctico un flujo para compartir documentos.

Combina grupos de selección nativos de HDS, colores semánticos para mensajes y resúmenes de errores vinculados en un flujo completo de revisión y corrección local.

Una referencia de HeroUI v3 con variables CSS semánticas reales, controles compuestos de React, superficies claras y oscuras, y una receta funcional para exportar imágenes.

Modela una reserva de capacidad con las primitivas de diseño de Grommet, campos de formulario controlados e indicadores numéricos. Usa deliberadamente la escala del tema y distingue el tema base de Grommet del tema de HPE, que se instala por separado.

Crea páginas universitarias con la escala real de tokens de Rivet, la anatomía de componentes de HTML y las interacciones de teclado nativas. Explora una página compacta de detalles de un taller con pestañas accesibles para la información de la visita.

Crea un formulario de mantenimiento empresarial con estados reales de entrada de IDS, alias de tema y un identificador de recurso exacto. Inspecciona los tokens del tema público actual, un paquete de Web Components fijado en una versión concreta y un flujo local de borradores con validación y restablecimiento.

Una interfaz nativa de Ionic para las preferencias de lectura, con roles de color verificados, geometría de controles deslizantes para iOS y Material, comportamiento real de segmentos y conmutadores, y un artículo que responde a las preferencias de fuente, tamaño y papel.

Crea interfaces japonesas accesibles para servicios públicos con los roles tipográficos de DADS, tokens semánticos y la anatomía nativa de componentes de HTML. Prueba una consulta de recibo funcional con errores de formato, un resultado sin coincidencias y un registro de estado que se puede revisar.

Crea un panel para compartir dirigido a creadores, con contexto claro del curso, acciones de copia evidentes y mensajes fiables sobre el portapapeles. Explora la anatomía de los componentes Rails de Sage, sus especificaciones tipográficas publicadas y la capa de tokens Pine, más reciente y cargada externamente.

Crea una interfaz nativa de KERN con tipografía verificada, temas semánticos, paneles desplegables y un flujo de confirmación reversible.

Una guía de Orbit centrada en viajes, con colores y espaciado reales del producto, opciones nativas de equipaje, un desglose de precios coherente y un flujo local completo de revisión.

Kobalte proporciona componentes sin interfaz para Solid, incluidos campos numéricos con valores sin formato y formateados por separado, la anatomía compuesta de casillas de verificación y botones con estado de pulsación. Esta guía conecta esas primitivas con las señales de Solid mediante una herramienta para ajustar recetas, con cantidades derivadas y controles de ingredientes que se pueden restablecer.

Analiza el lenguaje de interfaz operativa de Maersk mediante roles reales del tema claro, escalas para titulares y texto, radios anidados e identificación de referencias. Una consulta de envío de ejemplo muestra la coincidencia exacta de referencias y un historial de eventos accesible, sin afirmar que se accede a datos logísticos en tiempo real.

Una referencia de Mantine 9 basada en una tabla nativa de participantes y un panel lateral de planificación. Inspecciona las escalas reales del tema, conecta useForm con TextInput, Select, Checkbox y DatePickerInput, y prueba la validación antes de añadir un registro local.

Los generadores de tiendas y acciones de Melt UI añaden comportamiento accesible al marcado de Svelte que controlas. Esta guía usa @melt-ui/svelte 0.86.6 para conectar generadores de radio, controles deslizantes y conmutadores mediante sus atributos, acciones y tiendas escribibles; es una opción distinta de la API más reciente de runas API.

Conoce los flujos de trabajo de WordPress compatibles con Forty-Two, su paleta web y sus patrones de directorio de personas mediante un ejemplo funcional de filtros por cargo e investigación.

Crea un espacio de trabajo con Fluent UI React v9 que incluya tokens semánticos reales, las escalas web de tipografía y espaciado, pestañas controladas y un diálogo de acceso con validación. Compara los valores del tema, inspecciona la anatomía de los componentes y prueba una interacción local antes de usar el ejemplo completo de React.

Crea un tablero de entregas funcional con tokens de Vibe 4 y controles de React. Distingue los colores semánticos de acción de las etiquetas del tablero, explora los pasos de espaciado con nombre y las abreviaturas tipográficas, y conoce la configuración explícita de CSS que necesita una aplicación nueva.

Crea una interfaz de investigación donde los números se alineen, los colores de los activos mantengan su significado y la tipografía siga siendo legible. Explora las constantes de MDS, la adopción de Vue 3, la transición a Morningstar Intrinsic y un cuaderno de asignaciones ficticio que se puede ordenar.

Una guía editorial de Protocol con pilas tipográficas, escalas de espaciado y contenedores reales, una página de lectura adaptable con ilustraciones y un ejemplo completo de formulario nativo de CSS.

Un banco de trabajo de tablas nativo de Naive UI con valores verificados del objeto de tema, selección de filas, expansión, ordenación, paginación y una acción local para revisar lotes.

Usa los tokens ax reales de Aksel v8, la densidad de tabla nativa y una estructura semántica para los encabezados. Ordena y selecciona registros ficticios de seguimiento mientras comparas los temas claro y oscuro.

Usa la tipografía de NHS.UK, espaciado adaptable, opciones de radio agrupadas y detalles contextuales para crear un recorrido claro de preferencias de cita.

Crea una interfaz de servicio público con componentes reales de colaboradores y un tema explícito. Esta referencia usa Utrecht CSS para mostrar la correspondencia entre tokens, la estructura de una lista de datos y dos temas originales con el mismo flujo de edición.

Examina los tokens del tema Therapy de Nord y los contratos de Web Component mediante un borrador de solicitud de sala: roles de color reales, campos de tamaño adaptable, validación explícita y resultados preparados localmente.

Explora los tokens de diseño de NSW, la tipografía Public Sans y pestañas nativas accesibles mediante el teclado con una guía completa del taller y una lista de lectura local independiente.

Crea un compositor de informes completo con Nuxt UI 4.11.3, componentes reales de Vue, referencias semánticas al tema, validación de entradas y un comportamiento explícito para borradores locales.

Crea una respuesta a una encuesta que no pueda contradecirse: casillas nativas de ONS, respuestas mutuamente excluyentes, referencias exactas a tipos y colores, y un flujo local completo de revisión.

Crea una guía extensa al estilo de Ontario con tipografía real, valores publicados de espaciado y color, comportamiento nativo de acordeón y el código fuente completo de la versión correspondiente.

Estudia la paleta real, los roles semánticos, el espaciado y los límites de densidad de Oracle JET 19 Redwood con una hoja de revisión de existencias editable y original.

Examina los tokens semánticos reales, los paquetes de temas y el comportamiento nativo de Offcanvas de Orange OUDS 1.4 mediante un estudio comparativo adaptable completo.

Un editor de catálogos nativo de Oruga con etiquetas temáticas que se pueden buscar y quitar, límites de vocabulario aplicados, los tokens reales de un tema opcional y una tarjeta dinámica que refleja las etiquetas seleccionadas.

Crea un espacio de trabajo de datos denso con Blueprint: tokens verificados de tipografía e intención, una tabla de conjuntos de datos seleccionable, un panel de revisión y el código fuente completo de React.

Explora el sistema de contenido de Bolt con la marca Pega: tipografía fluida, espaciado horizontal y vertical por separado, y una composición de acordeón en Twig para una página editorial de recursos.

Pico CSS aplica estilos a HTML semántico con una escala tipográfica adaptable basada en rem y variables de tema. Sus distribuciones estándar, sin clases y condicionales tienen distintos ámbitos de integración; esta guía usa la compilación estándar para un formulario de preferencias de lectura con comportamiento nativo de divulgación y diálogo.

Examina la cuadrícula Bootstrap 3 de Poncho, sus colores semánticos de acción y sus paneles de servicio totalmente interactivos mediante un directorio de actividades funcional.

Explora Porsche Design System v4 con espaciado fluido, esquemas de color CSS, tipografía Porsche Next y un configurador con dos opciones. La referencia incluye expresiones reales de tokens y una entrada Vite completa que usa los eventos actuales de controles segmentados.

Un planificador de sesiones nativo de Preline con pestañas vinculadas, un complemento de entrada numérica con límites, alias de temas instalados, escalas reales de Tailwind y una estimación local de materiales que se actualiza según la sesión seleccionada.

Una implementación de PrimeVue con versión fijada del ecosistema Prime UI: un árbol de documentos con tema Aura y referencias reales al preajuste, expansión controlada, filtrado, selección y fijación local.

Pure CSS es una hoja de estilos modular para cuadrículas, formularios, botones, menús y tablas, sin un entorno de ejecución para widgets. Esta guía muestra cómo se combinan su módulo opcional de cuadrícula adaptable y los elementos semánticos nativos en un catálogo de equipos filtrable, con la ordenación y la selección implementadas explícitamente.

Un flujo guiado nativo de Quasar con valores reales de marca y espaciado, validación de QForm, un creador de informes en tres pasos, opciones de formato con botones de radio y una agenda dinámica de cuarenta y cinco minutos.

Explora la implementación de Bootstrap de Queensland mediante un selector ilustrado de recursos completo, con roles de tema reales, estilo nativo para casillas y un diálogo accesible de revisión.

Crea un compositor completo de planes de concentración con React Native Elements 5.0.0: roles de tema reales, entradas y selecciones controladas, validación, confirmación local y una compilación web probada.

Un calendario de revisión nativo de React Suite con variables verificadas de CSS v6, marcadores en las celdas de fecha, una agenda para el día seleccionado, validación modal y reglas explícitas para la programación local.

Usa PatternFly para crear un espacio de trabajo de operaciones: referencias semánticas a tokens, tarjetas de servicio seleccionables, selección masiva de tres estados, revisión del alcance y código nativo completo de React.

Crea un selector de preparación de pedidos concreto con Cedar, mosaicos nativos de Vue, valores reales de tokens, navegación completa con teclado y una composición adaptable de productos.

Explora los roles de color reales de Ripple, su escala de espaciado de 14 pasos y sus referencias tipográficas adaptables mediante una cronología completa de taller con divulgación progresiva, progreso y enfoque del teclado en el siguiente paso.

Aplica las pautas públicas de diseño de Sainsbury’s a un flujo completo de selección de franja de recogida: paleta y referencias de tamaño reales, opciones de radio accesibles, resumen actualizado y comentarios locales claros.

Una guía de Lightning para gestionar registros densos: espaciado, tipografía y colores semánticos reales; un espacio de trabajo editable para casos; validación de campos y un historial de actividad que refleja los cambios locales.

Descubre la estructura de visualización e interacción de One UI, las pautas de márgenes de 24dp y el requisito de escalado de texto al 200% mediante una vista previa original y completa de las preferencias de lectura, con apariencia oscura y una opción explícita para restaurar la configuración.

Usa el tema Horizon de SAP Fiori mediante UI5 Web Components: parámetros de tema reales, densidad de contenido explícita, estados de valor semánticos y una composición de solicitud de compra con validación local.

Aplica los roles tipográficos adaptables, de espaciado y de color del Gobierno escocés mediante un campo nativo con contador de caracteres que conserva el texto que supera el límite y permite corregirlo.

Conoce Braid mediante una composición original de búsqueda de empleo: variables limitadas al tema, cuatro puntos de ruptura reales, texto contextual, tonos de botón diferenciados y un campo controlado que explica la validación en lugar de desactivar la acción.

Una referencia de Evergreen con valores de tema reales, entrada controlada de etiquetas, coincidencia de reglas en tiempo real, una vía para recuperarse de un estado vacío y un diálogo de revisión nativo.

Crea una configuración secuencial del espacio de trabajo con los Steps básicos recomendados por Semi, Input y Switch controlados, tokens de tema reales y una elección explícita entre los paquetes React 18 y React 19.

Una guía de Intergalactic con tokens semánticos y de gráficos actuales, controles de filtrado nativos, comparación con una escala fija, detalles de la selección y un conjunto de datos de ejemplo completo y reproducible.

Explora las referencias exactas de espaciado, radio y tipografía de Horizon Workspace mediante un flujo local completo de revisión de solicitudes, con conservación de borradores, validación, filtros de estado y opciones de recuperación.

Concreta Anvil2 con su modelo de tokens de tres niveles, valores de roles verificados para los modos claro y oscuro, y una interacción completa de asignación de servicios con estados sincronizados de técnico, hora y revisión.

Inspecciona eventos industriales con un vocabulario de severidad explícito, roles de color adaptados al tema y iX Event List API. Esta guía crea un cuaderno local de equipos sin confundir un registro revisado con una alarma de máquina resuelta.

Usa los SGDS Web Components actuales con tokens adaptables reales, temas de día y de noche, y controles nativos de cantidades con límites que mantienen sincronizado un plan local.

Compara los temas Cerberus, Mint y Rose reales de Skeleton 5.0.1 mediante un espacio de lectura completo, con inspección de tokens en tiempo real, combinaciones de superficies oscuras y estado local reversible.

Inspecciona los tokens públicos reales de Seeds para color, espaciado, tipografía de producto y bordes mediante una cola editorial completa, con selección múltiple, estados vacíos con filtros y opción para deshacer.

Compón páginas editoriales académicas con el preset de Tailwind de Decanter, una escala tipográfica adaptable y bordes de pantalla fluidos. Explora tarjetas de eventos originales con filtros de temas funcionales y resúmenes expandibles.

Una guía de Circuit con tokens semánticos exactos, propiedades de validación nativas, un editor completo de artículos para comerciantes y una vista previa ilustrada para clientes.

Crea formularios legibles para los servicios públicos finlandeses con Source Sans 3, tokens de espaciado explícitos y un patrón recuperable de selección de documentos.

Un diario de proyecto nativo de Tabler con variables de tema reales de 1.6, tarjetas de cronología, contexto de datagrid, validación modal y una composición clara/oscura que admite puntos de control locales.

Explora las categorías reales de tokens v5 de Tamagui y sus temas azules claro y oscuro mediante un panel de hábitos completo con componentes nativos, validación, progreso y recuperación de estados vacíos.

Crea un editor compacto de políticas de API con TDesign React: roles de tema concretos, su escala de tamaños de dos píxeles, registro de campos Form y una composición tipada de Table.
Crea una interfaz de descubrimiento de servicios con las primitivas documentadas de Thumbprint v2: tarjetas compactas de proveedores, detalles comparativos fáciles de leer, estados de selección claros y una lista de preselección persistente.

Redacta una notificación con el tema y los contratos de botones de Paste, una escala de espaciado verificada y una distinción clara entre editar, revisar y enviar un mensaje.

UIkit combina un framework de CSS, personalización con Less y componentes de JavaScript controlados por atributos. En el planificador de talleres siguiente, Switcher, Accordion y la cuadrícula adaptable funcionan en conjunto para ilustrar dónde termina el comportamiento nativo de los componentes y dónde empieza el estado de selección de la aplicación.

Explora los tokens publicados de color y espaciado de UNDP, pestañas nativas operables con el teclado y un ejemplo completo de lectura de talleres con progreso de revisión local.

Conecta los tokens de espaciado de USWDS, los roles de tema, las tablas semánticas y los acordeones nativos en una comparación de oportunidades con búsqueda.

Crea recorridos de servicio claros con los tokens semánticos de VA y la Process List nativa: explicaciones visibles de cada paso, etiquetas de estado significativas y detalles complementarios que mantienen legible el recorrido principal.

Un flujo móvil de selección de dirección creado con Vant 4: variables reales de CSS, identidad de dirección controlada, validación de campos, cambio de tema y guardado explícitamente local.

Usa Nova CSS de Visa para crear una preferencia clara de formato de extracto, con controles de opción nativos, un encabezado de color alternativo y un resumen para revisar. Examina los valores exactos del tema 1.6.5, el espaciado escalable y la integración completa de la hoja de estilos.

Examina la base web de Volvo Cars, centrada en HTML, sus tokens reales del modo claro y el estilo nativo de las tarjetas seleccionables mediante un ejemplo completo de plan de equipaje, con opciones independientes, cambio de tema y restablecimiento.

Una hoja de evaluación nativa de Vuestic, con preajustes de modo claro y oscuro verificados en el código fuente, etiquetas de valoración accesibles, validación de áreas de texto, un promedio calculado y un estado guardado que conserva la evaluación completada.

Crea interfaces de lectura adaptables con tipografía fluida, roles de color semánticos y contenido plegable nativo que sigue siendo legible sin JavaScript.

Examina los tokens semánticos reales de Web Awesome en elementos personalizados nativos, incluidos los cambios de radio y espaciado con alcance definido, el estilo de shadow-DOM, el comportamiento de selección y la validación de entradas.

Usa la estructura real de SearchInput de Codex, su jerarquía de acciones y sus tokens orientados a la lectura. Busca en un índice local de artículos, consulta un resultado y vuelve a la misma posición de lectura.

Usa los roles de tema y la sintaxis de tokens reales de Wanda en un espacio de trabajo completo para leer comentarios, con filtros por tema, contexto de evidencia desplegable y un cuaderno local persistente.

Crea un plan de aprendizaje local con el FormField compuesto, el TextInput controlado y el PrimaryButton de Canvas Kit, y distingue las fuentes actuales de tokens semánticos de los ejemplos de migración antiguos de space.x4.

Una guía de Garden para tareas de soporte, con alias de tema reales, escalas tipográficas y de radio, un compositor de respuestas completo, borradores locales que respetan la visibilidad y recuperación de campos.
Mercado de viajes. Acento coral cálido, protagonismo de la fotografía e interfaz redondeada.
Gestión de proyectos. Minimalismo extremo, precisión y acento morado.
Sistema sereno, casi monocromático, anclado en un negro azulado profundo, con abundante espacio en blanco y tipografía editorial.
Electrónica de consumo. Espacio en blanco prémium, SF Pro e imágenes cinematográficas.
Infraestructura de pagos. Degradados morados característicos y elegancia de peso 300.
Banca digital. Interfaz oscura y elegante, tarjetas con degradados y precisión fintech.
Efecto de vidrio esmerilado con capas translúcidas, desenfoque sutil y bordes luminosos que aportan profundidad y elegancia moderna.
Transferencia de dinero. Acento verde brillante, estilo cercano y claro.
Automoción eléctrica. Reducción radical, fotografía a pantalla completa e interfaz casi inexistente.
Plataforma de aprendizaje de idiomas. Verde búho vibrante, sombras marcadas y diversión gamificada.
Plataforma centrada en el código. Densidad funcional, precisión en azul sobre blanco y bases de Primer.
Interfaz conversacional centrada en la IA, con controles mínimos, resultados claros y flujos de tareas delegadas para procesos con agentes de IA.
Híbrido de hoja de cálculo y base de datos. Estética de datos estructurados, colorida y cercana.
Sistema de diseño estructurado y orientado a empresas que prioriza la claridad, la coherencia y la eficiencia en aplicaciones web con gran densidad de datos.
Panel de aplicación con estética morada, navegación en la barra superior, diseños basados en tarjetas y flujos de trabajo pensados primero para desarrolladores.
«El navegador que navega por ti». Superficies translúcidas, calidez de degradados y diseño centrado en la barra lateral.
Estilo expresivo y de alto contraste, con tipografía creativa y colores atrevidos para crear interfaces visualmente impactantes.
Un sistema visual de calidad editorial, basado en el collage: lienzo de papel cálido, imágenes surrealistas de yeso y arquitectura, tipografía de gran formato, filetes finos, marcadores de sección en números romanos y pequeñas anotaciones editoriales. Inspirado en el nivel de producción de revistas impresas de alta gama (Monocle, Apartamento, IDEA), adaptado a un sitio web funcional.
Diseño de cuadrícula modular con bloques tipo tarjeta, jerarquía clara, espaciado generoso y contraste visual sutil para crear interfaces organizadas y fáciles de recorrer.
Plataforma de intercambio de criptomonedas. Acento amarillo intenso sobre un fondo monocromático, con la urgencia de un parqué bursátil.
Automoción de lujo. Superficies oscuras de categoría prémium y estética de ingeniería alemana de precisión.
Submarca de alto rendimiento automovilístico. Superficies de cabina casi negras, acentos tricolores de BMW M y geometría de ingeniería precisa.
Gran impacto visual con tipografía de trazos gruesos, colores de alto contraste y composiciones imponentes.
Estética cruda y anti-diseño inspirada en la arquitectura de hormigón, con elementos sin adornos, composiciones discordantes y minimalismo funcional.
Marca de hiperdeportivos. Fondo negro cinematográfico, austeridad monocromática y tipografía monumental para titulares.
Interfaz acogedora inspirada en una cafetería, con tonos cálidos, tipografía suave y composiciones despejadas para una experiencia de navegación relajada.
Plataforma de programación de código abierto. Interfaz limpia y neutra, con una sencillez pensada para desarrolladores.
Plataforma de creación visual. Degradado violeta y azul intenso, espaciado generoso y formas amables.
Marca de infraestructura empresarial. Superficies oscuras que inspiran confianza, el azul de Cisco como señal distintiva y claridad técnica.
Asistente de IA de Anthropic. Toque terracota cálido y composición editorial despejada.
Agencia creativa. Formas orgánicas, degradados suaves y composiciones con dirección artística.
Formas suaves, redondeadas y tridimensionales que imitan la arcilla moldeable, con elementos hinchados y divertidos, y superficies coloridas.
Diseño centrado en la sencillez, con abundante espacio en blanco, tipografía legible y una paleta de colores limitada para reducir el ruido visual.
Base de datos de analítica rápida. Estilo de documentación técnica con acentos amarillos.
Lenguaje de componentes compacto y semántico para aplicaciones web modernas: superficies neutras en capas, tipografía Inter precisa, controles accesibles, roles de color automáticos para modos claro y oscuro, y paletas de gráficos adecuadas a cada tarea.
Plataforma de IA empresarial. Degradados vibrantes y estética de panel rica en datos.
Plataforma de intercambio de criptomonedas. Identidad visual azul y despejada, centrada en la confianza y con un aire institucional.
Paletas vibrantes de alto contraste y degradados para crear experiencias de usuario atractivas, memorables y modernas.
Plataforma de integración de herramientas. Estética oscura y moderna con iconos de integración coloridos.
Minimalismo contemporáneo con cuadrículas tipo bento, compatibilidad con el modo oscuro y diseños accesibles de alto rendimiento.
Diseño profesional alineado con la marca, con cuadrículas estructuradas, composiciones minimalistas y patrones empresariales coherentes.
Estética futurista de ciencia ficción, con temas oscuros, acentos de neón vibrantes y elementos espaciales inmersivos.
Diseño lúdico y lleno de personalidad, con tipografía expresiva y gráficos llamativos para páginas de destino y proyectos creativos.
Editor de código centrado en la IA. Interfaz oscura y elegante con acentos en degradado.
Estética oscura de plataforma en la nube, con cuadrículas modulares, paneles de aspecto vítreo y una jerarquía de datos clara para paneles de productividad.
Plataforma de voz y chat. Tonos morados intensos, superficies pensadas primero para el modo oscuro y toques de color divertidos.
Técnica de representación con patrones de puntos que simula tonos usando una paleta limitada para lograr imágenes nostálgicas, retro y de alto contraste.
Estilo de dibujo a mano, con garabatos, tipografía manuscrita y trazos imperfectos para un aire lúdico e informal.
Diseño teatral de alto contraste, con composiciones atrevidas, imágenes inmersivas y estructuras poco convencionales que captan la atención.
Composición editorial inspirada en revistas, con tipografía serif refinada, cuadrículas estructuradas y una experiencia de lectura elegante.
Estética refinada y armoniosa, con tipografía delicada, paletas mínimas y composiciones pulidas que transmiten sofisticación.
Plataforma de voz con IA. Interfaz oscura y cinematográfica, con estética de ondas de audio.
Estilo dinámico y vibrante, con bordes gruesos, formas geométricas, colores de alto contraste y tipografía expresiva que transmite movimiento y vitalidad.
Diseño empresarial limpio y de alto contraste para flujos de trabajo basados en datos, con patrones intuitivos de arrastrar y soltar y composiciones estructuradas.
React Plataforma nativa. Tema oscuro, espaciado entre letras reducido y enfoque en el código.
Diseño vibrante y lleno de personalidad, con colores llamativos, gráficos lúdicos y composiciones dinámicas que equilibran creatividad y estructura.
Estética fantástica inspirada en videojuegos, con imágenes impactantes y de alta calidad, paletas de colores ricas y elementos temáticos inmersivos.
Automoción de lujo. Estilo editorial de claroscuro, acentos en rojo Ferrari y negro cinematográfico.
Herramienta de diseño colaborativo. Multicolor vibrante, con un estilo lúdico pero profesional.
Estilo minimalista bidimensional, con colores vibrantes, tipografía limpia y sin efectos tridimensionales para lograr interfaces rápidas y fáciles de usar.
Creador de sitios web. Negro y azul intensos, con prioridad al movimiento y al diseño.
Diseño cercano e intuitivo, con elementos redondeados, abundante espacio en blanco y paletas suaves de colores pastel.
Diseño orientado al futuro, con tipografía inspirada en la tecnología, composiciones modernas y una estética elegante centrada en la innovación.
Transiciones de color suaves y superficies llenas de degradados para crear interfaces modernas y lúdicas con profundidad visual.
Automatización de infraestructura. Estética empresarial pulcra en blanco y negro.
Pantalla de visualización frontal de un avión de combate o helicóptero. Verde fosforescente sobre un fondo casi negro, datos superpuestos en mayúsculas y geometría angular. Claridad absoluta a gran velocidad y altitud.
Centro de la comunidad de aprendizaje automático. Acento amarillo soleado, identidad monoespaciada y estilo alegre y recargado.
Tecnología empresarial. Sistema de diseño Carbon y paleta azul estructurada.
Mensajería para clientes. Paleta azul amigable y patrones de interfaz conversacionales.
Sistema editorial inspirado en el papel: fondo de pergamino cálido, acento azul tinta y jerarquía basada en tipografía serif. Creado para currículos, documentos de una página, informes técnicos, portafolios, presentaciones y cualquier pieza que deba parecer impresa en papel de alta calidad, no una interfaz. Multilingüe por diseño (EN · zh-CN · ja).
Trading de criptomonedas. Interfaz oscura con acentos morados y paneles con gran densidad de datos.
Marca de superdeportivos. Superficies negras auténticas, acentos dorados y tipografía dramática en mayúsculas.
Diseño centrado en la conversión que elimina obstáculos y guía a los usuarios hacia la acción con claridad, confianza y rapidez.
Diseño lúdico y minimalista, con colores vivos, formas redondeadas, bordes 3D táctiles e ilustraciones amigables para crear interfaces accesibles.
Vídeo asíncrono de Loom. Morado como color principal, superficies amigables y diseño centrado en el vídeo. Limpio y profesional, sin parecer corporativo.
Creador de aplicaciones full stack con IA. Degradados lúdicos y estética amigable para desarrolladores.
Estética oscura de alta gama, con encabezados llamativos, paleta monocromática y un aire prémium para experiencias de marcas de lujo.
Red global de pagos. Fondo color crema cálido, formas ovaladas orbitales y calidez editorial.
Material Design de Google, con superficies en capas, temas dinámicos, movimiento integrado y patrones adaptables para varias plataformas.
Tienda de tecnología. Fotografía como protagonista, superficies binarias claras y oscuras y llamadas a la acción en azul Meta.
Diseño depurado que prioriza el espacio en blanco, la tipografía limpia y el uso moderado del color para ofrecer máxima claridad y concentración.
Proveedor de modelos de IA. Interfaz oscura y llamativa con acentos de neón.
Plataforma de documentación. Limpia, con acentos verdes y optimizada para la lectura.
Colaboración visual. Acento amarillo brillante y estética de lienzo infinito.
Supervisión de misiones espaciales y aeroespaciales. Centro de control oscuro, telemetría ámbar y precisión monoespaciada. La claridad funcional ante todo.
Proveedor de modelos de lenguaje grandes de pesos abiertos. Minimalismo de inspiración francesa, con tonos morados.
Estilo editorial contemporáneo, con tipografía serif, paletas minimalistas y composiciones limpias para productos digitales refinados.
Base de datos documental. Identidad de marca con una hoja verde y enfoque en la documentación para desarrolladores.
Diseño inspirado en la estética matricial, con tipografía monoespaciada, alto contraste, gran densidad y un aire de cultura hacker.
Interpretación moderna del brutalismo, con bordes gruesos, colores de acento vivos y composiciones crudas de alto contraste sobre superficies cálidas.
Efectos de resplandor de neón eléctrico y combinaciones de colores de alto contraste para interfaces llamativas que captan la atención.
Elementos de interfaz suaves y en relieve, con sombras interiores y exteriores sobre superficies monocromáticas que crean un aspecto táctil e integrado.
Un estilo predeterminado limpio y orientado al producto. Úsalo cuando el encargo no requiera una atmósfera específica: ideal para herramientas B2B, paneles y páginas de utilidades.
Comercio minorista deportivo. Interfaz monocromática, tipografía enorme en mayúsculas y fotografía a sangre.
Espacio de trabajo todo en uno. Minimalismo cálido, encabezados serif y superficies suaves.
Computación con GPU. Energía verde y negra, con una estética de potencia técnica.
Ejecuta modelos de lenguaje grandes de forma local. Enfoque centrado en la terminal y simplicidad monocromática.
Plataforma de programación con IA. Tema oscuro centrado en los desarrolladores.
Diseño inspirado en los salones recreativos retro, con tipografías de píxel, bordes punteados, colores lúdicos de alto contraste y estética de videojuegos de 8 bits.
Diseño con textura de papel e inspiración impresa, pocos colores, tipografía serif y sans serif limpia y superficies táctiles.
Motor de búsqueda conversacional con IA. Fondo oscuro profundo, tipografía nítida, un único acento violeta y jerarquía de información densa.
Diseño con profundidad espacial, vistas isométricas, puntos de fuga y elementos en capas que guían la atención con un realismo tridimensional.
Descubrimiento visual. Acento rojo, cuadrícula tipo mosaico e imágenes como protagonistas.
Tienda de consolas de videojuegos. Diseño de tres superficies, tipografía de visualización con autoridad discreta y escala cian al pasar el cursor.
Analítica de producto. Identidad lúdica con un erizo e interfaz oscura pensada para desarrolladores.
Estética prémium inspirada en Apple, con espaciado preciso, tipografía moderna y un lenguaje visual refinado y pulido.
Diseño pulido y listo para empresas, con tipografía moderna, composiciones estructuradas e identidad visual confiable.
Lenguaje visual inspirado en la impresión para libros, revistas e informes, con retículas editoriales y tipografía expresiva.
Lanzador de productividad. Interfaz oscura elegante con acentos de degradado vibrantes.
Estilo moderno y minimalista, cuidadosamente seleccionado, con elegante tipografía serif y paletas discretas y sofisticadas.
Automoción francesa. Degradados aurora vibrantes, tipografía NouvelR y energía contundente.
Ejecuta modelos de ML mediante API. Lienzo blanco y limpio, con el código como protagonista.
Correo electrónico con API. Tema oscuro minimalista con detalles monoespaciados.
Diseño nostálgico con tipografía de inspiración vintage, paletas retro de alto contraste y elementos visuales evocadores.
Generación de vídeo con IA. Interfaz oscura cinematográfica y diseño repleto de contenido multimedia.
CMS headless. Acento rojo y diseño editorial centrado en el contenido.
Supervisión de errores. Panel oscuro y denso en datos, con acentos rosa y morado.
Diseño inspirado en Shadcn/ui, con componentes limpios y minimalistas, paleta monocromática y patrones que priorizan las utilidades.
Plataforma de comercio electrónico. Estética cinematográfica con predominio de tonos oscuros, acento verde neón y tipografía ultraligera.
Diseño directo y sin adornos, con tipografía limpia, colores neutros y composiciones intuitivas que no distraen.
Imitación del mundo real con superficies texturizadas, efectos 3D y metáforas físicas familiares para crear interfaces digitales intuitivas.
Plataforma de comunicación laboral. Berenjena como color principal, logotipo con una paleta de varios acentos y superficies claras con barra lateral oscura: cálido y acogedor.
Estética minimalista moderna, con líneas limpias, paleta de colores intencionada, interacciones sutiles y espaciado uniforme.
Tecnología espacial. Blanco y negro contundentes, imágenes a sangre y estética futurista.
Amplios espacios en blanco, relleno uniforme y composiciones basadas en cuadrículas para crear interfaces limpias, legibles y desahogadas.
Reproducción de música en streaming. Verde vibrante sobre fondo oscuro, tipografía contundente y diseño centrado en las carátulas de los álbumes.
Marca global de cafeterías. Sistema de verdes de cuatro niveles, fondo color crema cálido y botones totalmente redondeados.
Diseño narrativo que combina imágenes, texto e interacción para guiar a los usuarios por experiencias atractivas y emocionalmente impactantes.
Alternativa de código abierto a Firebase. Tema verde esmeralda oscuro y diseño centrado en el código.
Cliente de correo electrónico rápido. Interfaz oscura prémium, pensada para el uso del teclado, con resplandor morado.
Diseño inspirado en los juegos clásicos de bloques, con colores alegres, tipografía de gran formato y composiciones compactas y llenas de energía.
Medio editorial de tecnología. Acentos verde menta ácido y ultravioleta, tipografía Manuka de gran formato y módulos de historias con estética de cartel rave.
Infraestructura de IA de código abierto. Diseño técnico con estética de planos.
Sistema de diseño editorial y técnico. Fondo neutro, un único acento bermellón, esquinas angulosas, tipografía Geist, sombras marcadas y composición estructurada.
Superficie: web Un sistema cósmico prémium, oscuro y con efecto de vidrio que captura la sobrecogedora emoción de un eclipse solar: superficies de obsidiana, reflejos ámbar de «corona» y acentos atmosféricos cian.
Terminal de negociación financiera al estilo de Bloomberg. Solo tema oscuro, alta densidad de datos y señales de compra y venta en cian y coral. Todo se lee de un vistazo a dos metros de distancia.
Plataforma de movilidad. Blanco y negro contundentes, tipografía compacta y energía urbana.
Despliegue de frontend. Precisión en blanco y negro y tipografía Geist.
Diseño alegre y colorido, con tipografía lúdica y contundente, acentos cálidos y energía visual dinámica.
Nostalgia de las décadas de 1950 a 1990, con toques esqueumórficos, texturas granuladas, paletas retro y tipografía de estilo píxel.
Marca global de telecomunicaciones. Tipografía monumental en mayúsculas y franjas de sección en rojo Vodafone.
Framework para agentes de IA. Fondo negro absoluto, acento esmeralda y estética nativa de terminal.
Estética de revista protagonizada por tipografía serif. Acento terracota sobre papel blanco cálido, ideal para textos extensos, contenido editorial y páginas de marketing centradas en la marca.
Terminal moderno. Interfaz oscura al estilo de un IDE, con comandos en bloques.
Plataforma de colaboración. Tipografía Momentum, sistema de acciones en azul y gama de acentos para varios usuarios.
Creador visual de sitios web. Estética refinada de sitio de marketing con acentos azules.
Lenguaje visual de marca para los miniprogramas de WeChat, las cuentas oficiales y las extensiones de su ecosistema abierto.
Revista de tecnología. Densidad de periódico sobre fondo blanco, tipografía serif personalizada de gran formato, destacados monoespaciados y enlaces azul tinta.
Laboratorio de IA de Elon Musk. Monocromo contundente y minimalismo futurista.
Plataforma social de contenido generado por usuarios sobre estilo de vida. Rojo de marca distintivo, radios generosos y enfoque centrado en el contenido.
Plataforma de automatización. Naranja cálido e ilustraciones amigables como protagonistas.
No hay sistemas coincidentes. Prueba con otro nombre o categoría.
De la referencia a la interfaz
Ve más allá del color de acento. Compara la tipografía, el espaciado, los componentes y la composición con el tipo de interfaz que estás creando.
Proporciona a tu agente las reglas de diseño y una tarea concreta. Mantén juntas la fuente y las restricciones existentes de tu proyecto.
Comprueba el contenido real, los estados de los componentes, el uso del teclado y una pantalla estrecha antes de aplicar este enfoque a todo el proyecto.
Tu propio lenguaje visual
Empieza con un sitio que te inspire o un diseño que ya hayas creado. Convierte sus decisiones visuales en un sistema que puedas revisar, perfeccionar y reutilizar.

Añade un enlace en Design Systems. OpenDesign lee los estilos y recursos disponibles para organizar la paleta, la tipografía y las reglas reutilizables. Revisa el resultado y mejóralo con tu Agent.
Elige Crear sistema de diseño en el menú Más de tu proyecto. OpenDesign crea un nuevo proyecto a partir de los archivos existentes y pide a tu Agent que extraiga las reglas visuales, los componentes y los patrones.
Revisa las reglas, los tokens de estilo y las vistas previas de UI. Perfecciona el paquete generado antes de usarlo como punto de partida para tu próximo diseño.
Conecta tu flujo de trabajo
Compara OpenDesign con otras herramientas y elige un flujo que encaje con tu forma de crear e iterar.
Comparar herramientasAgentExplora guías de diseño para agentes de programación, desde preparar el brief hasta revisar la interfaz.
Ver guías de AgentSkillsDescubre Skills reutilizables para tareas concretas de diseño y da a tu Agent una forma de trabajar más precisa.
Explorar SkillsCrea con OpenDesign
Elige una guía, prepara instrucciones claras para tu agente y crea tu próxima interfaz con OpenDesign.