Recursos / Sistemas de diseño

Sistemas de diseño,
Listos para tu agente.

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.

152 Guías existentes126 Guías nuevasDESIGN.md + referencias de tokens

Explora sistemas de diseño y estilos visuales

278 entradas en el catálogo

De la referencia a la interfaz

Crea una pantalla con un sistema de diseño

01

Compara el sistema completo

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.

02

Lee y comparte la guía

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.

03

Revísalo antes de ampliarlo

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

Extrae un sistema de diseño con OpenDesign

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.

Un sitio web y un lienzo de diseño se convierten en una ficha de colores, tipografía, espaciado y componentes.

Desde un sitio web

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.

Desde un diseño propio

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.

Una base para seguir diseñando

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.

  • DESIGN.md
  • CSS / Tokens
  • UI Kit

Conecta tu flujo de trabajo

Lleva tu sistema de diseño más lejos

Crea con OpenDesign

Dale vida a tu sistema de diseño.

Elige una guía, prepara instrucciones claras para tu agente y crea tu próxima interfaz con OpenDesign.