# Sistema de diseño Radix Themes ## Vista previa del sistema de diseño Radix Themes Explora un espacio de trabajo de proyecto, un formulario de configuración y los estados de los componentes, todos con las mismas reglas visuales. ### Proyectos Avancemos juntos con el trabajo. ### Configuración del espacio de trabajo Gestiona cómo colabora tu equipo. ### Un siguiente paso claro ### Haz visible el estado ● Listo para revisión ## Tokens del sistema de diseño Radix Themes Referencia de trabajo con fuentes enlazadas. Los valores describen la escala base documentada; el color, el radio y la sombra se resuelven según el tema activo. ### Roles de color | Token | Uso | | --- | --- | | --accent-1⧉ | Fondo de página | | --accent-2⧉ | Fondo sutil | | --accent-3⧉ | Superficie interactiva | | --accent-4⧉ | Estado de interacción al pasar el cursor | | --accent-5⧉ | Superficie seleccionada | | --accent-6⧉ | Borde sutil | | --accent-7⧉ | Borde interactivo | | --accent-8⧉ | Borde marcado | | --accent-9⧉ | Relleno sólido | | --accent-10⧉ | Estado de relleno sólido al pasar el cursor | | --accent-11⧉ | Texto complementario | | --accent-12⧉ | Texto de alto contraste | | --gray-1⧉ | Fondo de página | | --gray-2⧉ | Fondo sutil | | --gray-3⧉ | Superficie interactiva | | --gray-4⧉ | Estado de interacción al pasar el cursor | | --gray-5⧉ | Superficie seleccionada | | --gray-6⧉ | Borde sutil | | --gray-7⧉ | Borde interactivo | | --gray-8⧉ | Borde marcado | | --gray-9⧉ | Relleno sólido | | --gray-10⧉ | Estado de relleno sólido al pasar el cursor | | --gray-11⧉ | Texto complementario | | --gray-12⧉ | Texto de alto contraste | ### Espaciado | Token | Base | Escala | | --- | --- | --- | | --space-1⧉ | 4px | | | --space-2⧉ | 8px | | | --space-3⧉ | 12px | | | --space-4⧉ | 16px | | | --space-5⧉ | 24px | | | --space-6⧉ | 32px | | | --space-7⧉ | 40px | | | --space-8⧉ | 48px | | | --space-9⧉ | 64px | | ### Radio y elevación | Token | Resolución | | --- | --- | | --radius-1⧉ | Configuración del radio del tema | | --radius-2⧉ | Configuración del radio del tema | | --radius-3⧉ | Configuración del radio del tema | | --radius-4⧉ | Configuración del radio del tema | | --radius-5⧉ | Configuración del radio del tema | | --radius-6⧉ | Configuración del radio del tema | | --shadow-1⧉ | Escala de sombras del tema | | --shadow-2⧉ | Escala de sombras del tema | | --shadow-3⧉ | Escala de sombras del tema | | --shadow-4⧉ | Escala de sombras del tema | | --shadow-5⧉ | Escala de sombras del tema | | --shadow-6⧉ | Escala de sombras del tema | ### Tipografía | Nivel | Tamaño de fuente | Altura de línea | Espaciado entre letras | Muestra | | --- | --- | --- | --- | --- | | 1 | 12px | 16px | 0.0025em | Diseño en detalle | | 2 | 14px | 20px | 0em | Diseño en detalle | | 3 | 16px | 24px | 0em | Diseño en detalle | | 4 | 18px | 26px | -0.0025em | Diseño en detalle | | 5 | 20px | 28px | -0.005em | Diseño en detalle | | 6 | 24px | 30px | -0.00625em | Diseño en detalle | | 7 | 28px | 36px | -0.0075em | Diseño en detalle | | 8 | 35px | 40px | -0.01em | Diseño en detalle | | 9 | 60px | 60px | -0.025em | Diseño en detalle | ### Puntos de interrupción adaptables | Nombre | Ancho mínimo | Application | | --- | --- | --- | | inicial | 0px | Diseño base | | xs | 520px | Primer cambio de diseño opcional | | sm | 768px | Distribución para tabletas | | md | 1024px | Diseños multicolumna más amplios | | lg | 1280px | Lienzo amplio para el contenido | | xl | 1640px | Diseños extrapanorámicos | Referencia: Color · Espaciado · Tipografía · Radio · Sombras · Puntos de interrupción ## Guía completa del sistema de diseño Radix Themes Nueve capítulos para tu próxima interfaz de producto. Orientación original de OpenDesign, con las referencias numéricas oficiales separadas arriba. Reglas visuales, comportamiento de los componentes, orientación adaptable y una instrucción para agentes. ## Tema visual y atmósfera del sistema de diseño Radix Themes ### Una interfaz de trabajo, no un tablero de inspiración > Radix Themes es una referencia útil para productos en los que las personas leen, toman decisiones, introducen información y retoman tareas pendientes. Su carácter visual se basa en un espaciado medido, superficies discretas, una jerarquía tipográfica clara y estados de componentes coherentes y repetibles. Usa esta guía para crear un espacio de trabajo de proyecto, un área de cuenta, una pantalla de configuración o un flujo de revisión de datos. El objetivo es crear una pantalla de trabajo coherente con contenido real, no una colección de componentes atractivos dispuestos sin una tarea concreta. ### Elige el punto de partida adecuado Para una aplicación React, empieza con el paquete Radix Themes real y usa sus componentes antes de crear reemplazos personalizados. Para un concepto visual en otra pila tecnológica, toma estos principios como referencia y describe el resultado como una propuesta inspirada en el sistema. Radix Themes y Radix Primitives son puntos de partida distintos: esta guía trata sobre la biblioteca Themes, que incluye estilos. Una guía de OpenDesign no convierte una maqueta arbitraria de HTML en una implementación nativa de Radix. ### Diseña en torno a una tarea concreta 1. Elige una acción principal para la primera pantalla, como crear un proyecto o guardar la configuración de la cuenta. 2. Coloca antes de la acción la información necesaria para tomar esa decisión. 3. Distingue visualmente la navegación, los metadatos de los elementos, los campos editables y los mensajes de respuesta. 4. Al diseñar, usa títulos largos realistas, distintos valores de estado y un estado vacío. 5. Una pantalla que solo funciona con tres etiquetas breves de marcador de posición aún no ofrece un sistema utilizable. ### Tono y contenido Usa etiquetas descriptivas breves, verbos específicos y explicaciones directas. Un botón debe describir lo que ocurrirá a continuación: Guardar cambios, Invitar a un miembro o Crear proyecto. Reserva los encabezados para el tema de una sección; evita convertir cada pequeño control en un eslogan publicitario. Si una acción falla, explica qué puede corregir la persona y conserva su trabajo. Estas son recomendaciones editoriales OpenDesign para aplicar la referencia, no APIs adicionales proporcionadas por Radix. ## Paleta de colores y roles del sistema de diseño Radix Themes ### Separa el color de marca de su significado Elige una gama de acento para las acciones principales, los controles seleccionados y algunos puntos de énfasis. No reutilices ese acento como única señal de errores, advertencias o éxitos. Un acento de marca verde puede coexistir con un mensaje de éxito, pero el mensaje también necesita texto explícito y un icono adecuado. Define primero el rol semántico y luego el tratamiento visual; así, la interfaz seguirá siendo legible cuando cambien los temas o los colores de marca. ### Usa el tema en lugar de definir colores directamente en las pantallas La configuración oficial de Theme expone accentColor y grayColor. Elígelos en la raíz para que los componentes compartan las mismas decisiones. En los componentes personalizados, usa las variables CSS del tema actual en lugar de copiar un color de una captura de pantalla. La referencia de tokens que aparece a continuación incluye un conjunto de trabajo compacto. Un token es un rol dentro de un tema configurado; no garantiza que un valor hexadecimal se mantenga igual en el modo claro, el modo oscuro y todas las opciones de acento. Revisa con tu equipo las últimas novedades. ### Jerarquía de superficies y bordes Empieza con un fondo de página discreto. Da a las tarjetas y los paneles editables una superficie distinta solo cuando agrupen tareas relacionadas. Usa separadores para las filas que pertenecen a una misma lista. Evita añadir a cada elemento un borde, una sombra, un fondo teñido y una insignia al mismo tiempo. En una pantalla de configuración, un único panel con filas separadas suele ser más claro que seis tarjetas flotantes. Mantén la jerarquía visible con un contraste bajo, sin atenuar el texto esencial. ### Apariencia clara y oscura Usa la opción oficial de apariencia para los componentes nativos y comprueba ambos modos con el mismo contenido. No crees una pantalla oscura invirtiendo los colores sin más ni reutilizando las sombras del modo claro. Comprueba por separado las superposiciones, los campos inactivos, los separadores, las filas seleccionadas y el texto sobre los acentos. El estudio interactivo de esta página muestra un pequeño conjunto de opciones de tema; el entorno de pruebas oficial es la referencia para toda la biblioteca y su comportamiento nativo. ### Contraste y señales redundantes Comprueba las combinaciones finales de primer plano y fondo después de cambiar el acento o la superficie. Combina el color con texto en estados como Pendiente, Completado y Fallido. Añade una marca de verificación u otra distinción visible a las opciones seleccionadas. No des por sentado que una biblioteca de componentes accesibles hace accesible cualquier combinación de contenido o tema: las etiquetas, la anidación, los elementos personalizados CSS y el orden de la información también influyen en que se pueda usar la pantalla completa. ## Reglas tipográficas del sistema de diseño Radix Themes ### Una jerarquía de lectura bien definida Da a la pantalla un título claro y distingue después los encabezados de sección, el texto del cuerpo, las etiquetas de los campos y los metadatos complementarios. Usa la menor cantidad de tamaños que permita explicar esas relaciones. En las pantallas de producto con mucha información, las etiquetas legibles son más importantes que una tipografía de gran tamaño para titulares. Mantén cada párrafo descriptivo cerca del control que explica y deja las etiquetas visibles después de que el campo reciba un valor. El texto del marcador de posición es una indicación, no un sustituto de la etiqueta del campo. ### Escala tipográfica y grosor Radix documenta una escala tipográfica de nueve pasos, con tamaños de fuente, alturas de línea y espaciados entre letras emparejados. La tabla de referencia de esta página conserva esos valores en la escala base. Elige cada paso como una combinación completa en lugar de mezclarlo con una altura de línea que no le corresponda. Usa un grosor normal para el texto del cuerpo y uno mayor para los encabezados o las etiquetas seleccionadas. Si pones todo en negrita, la jerarquía desaparece; si aclaras demasiado todo el texto secundario, la pantalla resulta difícil de leer. Mantén juntos el resumen del proyecto, las decisiones y los próximos pasos. ### Elección de fuentes y alternativas Radix Themes usa de forma predeterminada una pila de fuentes del sistema. Conserva esa pila cuando la portabilidad sea más importante que una tipografía de marca específica, o configura una fuente con licencia mediante el mecanismo de personalización documentado. El sitio OpenDesign que lo rodea usa Albert Sans; eso no convierte a Albert Sans en la fuente oficial de Radix. En aplicaciones multilingües, prueba etiquetas representativas en chino, japonés y coreano, así como etiquetas largas en idiomas europeos, con las fuentes alternativas reales. ### Números, código y ajuste de línea Mantén alineadas las columnas numéricas para poder comparar los valores verticalmente. Usa un estilo monoespaciado para el código, los identificadores y los tokens cuando importen los límites entre caracteres. Deja que los títulos y las descripciones se ajusten de forma natural; no recortes instrucciones importantes solo para mantener la misma altura en las tarjetas. Para una cadena que realmente no tenga espacios, como un ID, ofrece un ajuste de línea controlado o una acción para copiarla. En móviles, conserva todo el significado aunque cambie la composición. ### La longitud del contenido también forma parte del diseño Prueba un nombre de proyecto largo, el rol de un miembro que ocupe dos líneas y una acción traducida antes de considerar reutilizable un componente. Siempre que sea posible, permite que los botones se expandan en lugar de asignarles a todos un ancho fijo. Mantén los párrafos del cuerpo en una medida cómoda de lectura y usa listas o tablas cuando la persona necesite comparar datos paralelos. No dividas el texto explicativo en muchas tarjetas decorativas pequeñas solo para que la página parezca más diseñada. ## Radix Themes Estilos y estados de los componentes del sistema de diseño ### Botones y jerarquía de acciones Dentro de un mismo grupo de acciones, identifica la decisión principal y destácala con el tratamiento visual más destacado. Las acciones secundarias deben ser fáciles de encontrar sin competir en igualdad de condiciones. Separa las acciones destructivas de las confirmaciones habituales. Durante el envío, evita operaciones duplicadas e indica el progreso de forma visible; al terminar, muestra el resultado real. Si no es evidente en el formulario por qué un botón está deshabilitado, explícalo cerca del botón. ### Campos de entrada y formularios - Coloca una etiqueta persistente encima o junto a cada campo de entrada. - Mantén el texto de ayuda junto al campo correspondiente y vincula los mensajes de validación al campo, en lugar de mostrarlos únicamente en un aviso genérico. - Conserva los valores introducidos cuando falla la validación. - Agrupa los campos relacionados bajo un encabezado de sección significativo. - Usa el tipo de campo y el valor de autocompletado adecuados para que el navegador y las herramientas de asistencia ayuden a la persona a completar la tarea. Una etiqueta de acción clara. Un anillo exterior visible. Explica la espera. Confirma el resultado. ### Tarjetas, listas y tablas Usa una tarjeta para un objeto independiente con un resumen y una acción significativos. Usa una lista para una secuencia de registros similares y una tabla cuando las personas necesiten comparar atributos entre registros. Muestra campos reales, como responsable, hora de actualización y estado, en lugar de fragmentos decorativos de gráficos. Una tarjeta no debe ser clicable de una forma que compita con los enlaces o botones anidados; elige un destino de enlace claro y conserva el comportamiento habitual del teclado. ### Navegación y selección Mantén la navegación global separada de las pestañas de página y los filtros locales. El destino activo debe poder identificarse sin depender únicamente del color de énfasis. Usa enlaces para navegar y botones para realizar cambios en el lugar. Si implementas un patrón de pestañas, incluye su comportamiento con el teclado; de lo contrario, usa un grupo claramente etiquetado de botones corrientes. No hagas que una fila de elementos span con estilo visual parezca interactiva si no se puede usar. ### Menús, cuadros de diálogo y superposiciones Al implementar un producto React, usa el componente nativo de la biblioteca para los comportamientos complejos. Un cuadro de diálogo necesita un título, una forma clara de cerrarlo, una gestión adecuada del foco y la devolución del foco al control que lo activó. Evita crear un modal a partir de una tarjeta con posición absoluta si no incluye esos comportamientos. Limita el cuadro de diálogo a una sola decisión; los flujos de edición más largos suelen funcionar mejor en una página propia que en una superposición cada vez más abarrotada. ### Estados de carga, vacío, error y éxito - Diseña cada estado en función de la misma tarea real. - Una lista de proyectos vacía debería explicar cómo crear el primer proyecto. - Un estado de carga debería conservar suficiente estructura para evitar un salto brusco. - Un error debería ofrecer una acción siguiente útil y no borrar el trabajo completado. - Un mensaje de éxito debería indicar qué ha cambiado. - Los botones de muestra estáticos de esta página ilustran la apariencia; no demuestran el comportamiento de esos estados en producción. ## Radix Themes Diseño de maquetación, espaciado y densidad del sistema de diseño ### Usa una escala de espaciado compartida La escala de espaciado documentada tiene nueve pasos base: 4, 8, 12, 16, 24, 32, 40, 48 y 64 píxeles. Usa pasos pequeños dentro de controles estrechamente relacionados y pasos más grandes entre secciones independientes. Mantén una relación visual clara entre un encabezado y su contenido. No distribuyas el espacio en blanco de manera uniforme solo para llenar la pantalla: la proximidad debe comunicar qué elementos de información están relacionados. ### La densidad depende de la tarea > Un directorio de recursos necesita mostrar suficientes entradas para facilitar la comparación. Un formulario de configuración necesita espacio para etiquetas, ayuda y errores. Una página de lectura necesita una longitud de línea cómoda y un índice visible. Elige la densidad según la tarea en lugar de aplicar el mismo tamaño de tarjeta en todas partes. Radix también ofrece un ajuste de escala que modifica conjuntamente las dimensiones relacionadas; evalúa la legibilidad y las áreas interactivas resultantes antes de establecer una escala compacta como predeterminada para el producto. Ofrece al equipo un punto de partida compartido. ### Comportamiento de la cuadrícula y el contenedor Empieza con un contenedor de página y define después el contenido principal y cualquier columna auxiliar. Mantén los textos largos en una columna legible aunque el lienzo exterior sea ancho. En pantallas más estrechas, coloca el contenido auxiliar debajo del contenido principal o convierte una columna larga en un control de navegación local accesible. Conserva el orden del contenido en el código para que el flujo móvil y el orden del teclado tengan sentido sin depender de la distribución de la cuadrícula de escritorio. ### Filas antes que tarjetas anidadas Para una referencia compacta de tokens, coloca el nombre, el valor y el uso en una sola línea fácil de recorrer con la vista. En un catálogo, mantén juntos el título, la categoría, la descripción y el destino. Las cajas anidadas repetidas añaden ruido visual y ocupan un ancho que debería aprovechar el contenido. Prefiere un separador fino entre filas relacionadas; reserva los paneles delimitados para cambios de contexto reales, como una vista previa en vivo o un ejemplo de código. ### Mantén visible el contenido importante No reduzcas una guía detallada a resúmenes breves solo para acortar la página. Incluye una tabla de contenidos y subtítulos claros para que las personas puedan ir directamente a la sección pertinente. Si un filtro o acordeón cambia lo que se muestra, el estado vacío y el seleccionado deben quedar claros. Evita las listas internas con desplazamiento independiente salvo que resuelvan una necesidad real de interacción; para una colección larga de recursos, normalmente es más fácil desplazarse por la página. ## Radix Themes Radio, profundidad y movimiento del sistema de diseño ### El radio expresa una relación Radix ofrece ajustes de radio de borde con nombre y un comportamiento contextual de los componentes. Elige un ajuste en el nivel del tema en lugar de asignar el mismo radio arbitrario a todos los elementos. Un botón, una casilla de verificación y un panel grande cumplen funciones estructurales distintas. Mantén sus formas relacionadas sin borrar esas diferencias. Si tu componente personalizado usa un token de radio, pruébalo junto a un botón y un campo nativos antes de decidir que pertenece al mismo sistema. ### La elevación explica las capas Usa la profundidad para distinguir una superposición de la página que hay debajo, o un panel interactivo de un lienzo despejado. Radix ofrece una escala de sombras de seis niveles. Evita tratar el índice de sombra como una clasificación decorativa de popularidad para las tarjetas. Un catálogo denso suele funcionar solo con bordes. Revisa las sombras en ambas apariencias; un desenfoque pensado para el modo claro, aplicado a una superficie oscura, puede desaparecer o crear un halo que sugiera una profundidad equivocada. ### El movimiento debe aclarar los cambios Usa transiciones breves para explicar una selección, una apertura, el progreso o el paso entre estados relacionados. No retrases el contenido con una animación de entrada. Evita el movimiento continuo de fondo en una pantalla de trabajo. Respeta las preferencias de movimiento reducido y asegúrate de que el estado final siga siendo legible cuando se eliminen las transiciones. Las decisiones de duración en una implementación personalizada corresponden a la aplicación; esta guía no inventa un token oficial de duración de Radix si no se ha verificado que exista. ### Interacción sin adornos Un tratamiento al pasar el cursor debe reforzar que el elemento se puede usar. El tratamiento de foco debe seguir siendo claramente visible frente a las superficies adyacentes. Evita mover tanto una fila densa al pasar el cursor que la información se desplace mientras alguien la lee. En las pantallas táctiles, las acciones esenciales deben estar disponibles sin pasar el cursor. El efecto funciona cuando ayuda a entender el control, no cuando llama la atención sobre la animación en sí. ## Radix Themes Buenas prácticas y errores que evitar en el sistema de diseño ### Sí: crea una pantalla completa Crea una pantalla con su navegación real, contenido significativo, acción principal y al menos un estado excepcional. Revisa la pantalla antes de extraer decenas de componentes reutilizables. Registra decisiones deliberadas, como el color de énfasis, la densidad, los niveles tipográficos y el texto del estado vacío. Así, un agente de programación cuenta con instrucciones concretas y resulta más fácil detectar desviaciones en iteraciones posteriores. ### Sí: mantén la coherencia entre los elementos nativos y los personalizados Da preferencia a los componentes existentes de la biblioteca para los comportamientos que ya admite. Usa variables del tema en las envolturas personalizadas y comprueba estas en ambas apariencias. Conserva las etiquetas y la semántica HTML al aplicar estilos. Si el proyecto ya tiene un sistema de diseño, compáralo con esta referencia antes de sustituirlo; una segunda capa de tema sin control puede generar más incoherencias de las que elimina. ### No: intentes recrear una marca cambiando los colores Cambiar solo el color de énfasis no crea una interfaz coherente. El espaciado, la tipografía, la jerarquía del contenido, los patrones de interacción y las decisiones de diseño adaptable conforman gran parte de la identidad visual. No afirmes que existe una integración oficial solo porque una maqueta se parezca a la biblioteca. Evita copiar marcas registradas, recursos exclusivos o afirmaciones comerciales de otro producto en la pantalla de un producto nuevo. ### No: sacrifiques el significado para lograr una captura más limpia No elimines texto explicativo, etiquetas de campos, mensajes de error ni metadatos útiles solo para reducir el desorden visual. Primero, mejora la agrupación y la jerarquía. No recurras a leyendas pequeñas y de bajo contraste como atajo para aumentar la densidad. Muestra el contenido tal como es: un párrafo realista, un nombre de archivo largo o un mensaje de estado de varias líneas forman parte de la interfaz, no son inconvenientes que haya que ocultar. ## Radix Themes Comportamiento adaptable y accesible del sistema de diseño ### Adapta la estructura antes de reducirla Cuando la pantalla se estreche, reduce el número de columnas, acorta el recorrido hasta la acción principal y coloca la información secundaria en el flujo de lectura habitual. No reduzcas un panel de control de escritorio como si fuera una sola imagen para llamarlo diseño móvil. Mantén disponible el mismo contenido mediante el ajuste de línea, la disposición en columna o un tratamiento de tabla adecuado. Conserva el texto descriptivo de los enlaces para que el destino se entienda incluso fuera de su tarjeta de escritorio. ### Usa los puntos de ruptura documentados con intención Los nombres oficiales de los puntos de ruptura son initial, xs, sm, md, lg y xl. Sus anchuras mínimas son 0, 520, 768, 1024, 1280 y 1640 píxeles. Considéralos herramientas disponibles, no cambios de diseño obligatorios en cada nivel. Añade un punto de ruptura cuando el contenido necesite otra disposición. Prueba también una anchura entre los puntos de ruptura con nombre, además de cada punto de ruptura, para detectar diseños frágiles en anchos intermedios. Próximos pasos de tu equipo. Próximos pasos de tu equipo. ### Teclado y foco - Todas las acciones importantes deben poder realizarse con el teclado. - Haz que el estado de foco visible se distinga del estado al pasar el cursor y asegúrate de que siga visible cuando un contenedor recorte su contenido. - Evita los valores positivos de tabindex, que pueden alterar el orden de los controles de forma impredecible. - Cuando cambien los resultados de un filtro, mantén el foco en el control y comunica el número de resultados de forma concisa. - Al cerrar un cuadro de diálogo modal, devuelve el foco a un lugar adecuado en vez de dejar a la persona al principio del documento. ### Etiquetas, áreas de interacción y texto de asistencia Asigna a las acciones que solo muestran un icono un nombre accesible que describa la acción, no la forma del icono. Haz que las áreas de interacción táctil sean cómodas aunque el icono visible sea pequeño. Excluye los iconos decorativos del árbol de accesibilidad. Comunica las actualizaciones, como los cambios guardados o el número de resultados de búsqueda, sin anunciar repetidamente contenido que no guarda relación. Si un estado usa tanto un icono como texto, evita que un lector de pantalla repita el mismo mensaje. ### Valida con contenido real - Comprueba la pantalla en un ordenador de escritorio, una tableta y un teléfono estrecho. - Incluye texto que pueda expandirse, una imagen que no esté disponible, una lista vacía y un identificador largo sin espacios. - Prueba la página con el movimiento reducido y la navegación con teclado. - Revisa ambas apariencias después de cualquier cambio importante de color. - Las comprobaciones automatizadas pueden detectar problemas estructurales, pero no pueden determinar si la jerarquía, la densidad del contenido y el carácter visual general satisfacen las necesidades previstas del producto. ## Guía de prompts e implementación de agentes para el sistema de diseño Radix Themes ### Prepara el contexto del proyecto 1. Indica al agente de programación qué se está creando, quién lo usará, cuál es la acción principal y qué archivos existentes definen el diseño actual. 2. Adjunta esta guía como referencia en lugar de pedirle que imite una captura de pantalla no especificada. 3. Si usas React, indica que se deben priorizar los componentes nativos de Radix Themes. 4. Si usas otra pila tecnológica, pide una interpretación claramente identificada y revisa el trabajo de interacción adicional que requerirá. ### Especifica una primera versión completa Pide una pantalla funcional con contenido real y unos pocos estados. Especifica la navegación, los campos, los metadatos del objeto y el resultado esperado de la acción principal. Incluye en la solicitud el foco del teclado, un estado vacío, la validación y un diseño para pantallas estrechas. Indica las restricciones que deben mantenerse, como un encabezado existente, un contrato de datos de producción o un bloque de contenido aprobado previamente. ### Revisa en un orden que permita detectar problemas reales 1. Primero, comprueba que la pantalla permita realizar la tarea prevista. 2. Después, compara la jerarquía de la información, el espaciado, la tipografía y los colores con la referencia elegida. 3. Por último, prueba los estados interactivos y los diseños adaptables. 4. No aceptes un cambio visual solo porque la página compile o la captura de pantalla se vea ordenada. 5. Comprueba que el contenido más extenso, los errores y las acciones repetidas sigan funcionando después de los ajustes visuales. ### Amplía a partir de decisiones explícitas Cuando funcione la primera pantalla, registra la configuración del tema, los roles tipográficos, las opciones de espaciado y los patrones de componentes que deban repetirse. Pide al agente que aplique esas decisiones a la siguiente pantalla sin reescribir silenciosamente el contenido aprobado. Si una pantalla nueva necesita un patrón distinto, documenta el motivo y comprueba que la pantalla anterior mantenga la coherencia. Amplía a partir de comportamientos verificados, en lugar de generar una gran colección de páginas superficialmente similares. ### Alcance conocido y límites de las fuentes Esta es una guía de aplicación elaborada por OpenDesign, no una especificación oficial de Radix ni una garantía de compatibilidad con todos los frameworks. La referencia numérica se basa en la documentación de Radix enlazada. El espacio de trabajo ilustrado y las muestras de componentes son estudios locales de HTML/CSS. Consulta la documentación del paquete instalado para conocer las API actuales y revisa la licencia del repositorio de origen antes de distribuir código de terceros. La guía descargable contiene estas recomendaciones originales, no una copia redistribuida de la biblioteca. ## Configuración de agentes para el sistema de diseño Radix Themes Descarga la guía, asigna a tu agente una pantalla concreta y revisa el resultado antes de ampliarlo. ### Un prompt que puedes adaptar ``` Lee DESIGN-radix-themes.md antes de hacer cambios. Crea un espacio de trabajo adaptable para un equipo de diseño pequeño con componentes nativos de Radix Themes siempre que sea posible. Incluye una lista de proyectos con responsable y estado, un flujo para crear proyectos y la configuración del espacio de trabajo. Usa un color de acento verde, una jerarquía de superficies neutras, una escala tipográfica clara y un espaciado uniforme. Conserva la navegación y el contenido existentes del sitio. Incluye estados de carga, vacío, validación y éxito; un indicador visible del foco del teclado; y un diseño para pantallas estrechas. Explica cualquier desviación respecto a la guía. Empieza con una pantalla completa antes de ampliar el sistema. ``` ### Configuración de React Ejecuta el comando de instalación en el terminal del proyecto y después añade las importaciones y el wrapper Theme a la aplicación. Carga la hoja de estilos una sola vez en la raíz de la aplicación. ``` npm install @radix-ui/themes // App.jsx import '@radix-ui/themes/styles.css'; import { Theme, Button } from '@radix-ui/themes'; export default function App() { return ( ); } ``` ## Fuentes y alcance del sistema de diseño Radix Themes Esta es una guía de aplicación de OpenDesign para Radix Themes, no una publicación oficial de Radix. El nuevo recurso incluye una guía descargable; todavía no es un plugin publicado de OpenDesign. La vista previa es un estudio original de HTML/CSS y no sustituye el comportamiento nativo de la biblioteca. - Documentación oficial Instalación, API de componentes y configuración del tema. - Playground oficial Componentes nativos y sus estados compatibles. - Repositorio de origen Implementación, versiones y licencia. ## Recursos relacionados con el sistema de diseño Radix Themes ### Linear Gestión de proyectos. Minimalismo extremo, precisión y acento morado. ### GitHub Plataforma centrada en el código. Densidad funcional, precisión en azul sobre blanco y bases de Primer. ### Shadcn Diseño inspirado en Shadcn/ui, con componentes limpios y minimalistas, paleta monocromática y patrones que priorizan las utilidades. - [Probar los componentes nativos de Radix](https://www.radix-ui.com/themes/playground) - [Color](https://www.radix-ui.com/themes/docs/theme/color) - [Espaciado](https://www.radix-ui.com/themes/docs/theme/spacing) - [Tipografía](https://www.radix-ui.com/themes/docs/theme/typography) - [Radio](https://www.radix-ui.com/themes/docs/theme/radius) - [Sombras](https://www.radix-ui.com/themes/docs/theme/shadows) - [Puntos de interrupción](https://www.radix-ui.com/themes/docs/theme/breakpoints) - [Documentación oficial Instalación, API de componentes y configuración del tema.](https://www.radix-ui.com/themes/docs/overview/getting-started) - [Playground oficial Componentes nativos y sus estados compatibles.](https://www.radix-ui.com/themes/playground) - [Repositorio de origen Implementación, versiones y licencia.](https://github.com/radix-ui/themes) - [LinearProductividad y SaaSGestión de proyectos. Minimalismo extremo, precisión y acento morado.Explorar el sistema de diseño](https://open-design.ai/plugins/design-system-linear-app/) - [GitHubHerramientas para desarrolladoresPlataforma centrada en el código. Densidad funcional, precisión en azul sobre blanco y bases de Primer.Explorar el sistema de diseño](https://open-design.ai/plugins/design-system-github/) - [ShadcnModerno y minimalistaDiseño inspirado en Shadcn/ui, con componentes limpios y minimalistas, paleta monocromática y patrones que priorizan las utilidades.Explorar el sistema de diseño](https://open-design.ai/plugins/design-system-shadcn/)