La biblioteca de casos prácticos de diseño
Dieciocho ejemplos de diseño con IA generados con OpenDesign y publicados como código real, presentaciones o prototipos de aplicaciones. Cada uno describe el encargo, el modelo y las decisiones de diseño, y termina con una instrucción que puedes reutilizar.
18 casos prácticos · dos series · 10 modelos
Casos prácticos
Filtra los proyectos por tipo de resultado, finalidad, serie o modelo que los generó.
Sitios web
Kimi Careers por OpenDesign
Una página de empleo narrada a través de ocho escenas lunares, con transiciones vinculadas al desplazamiento y un proceso de solicitud ilustrado en cuatro pasos.
Ejemplo de hackathon
Sitios web
Bianjing After Dark por OpenDesign
Un recorrido nocturno interactivo por una Bianjing imaginaria de la era Song, que combina una ciudad fluvial siempre presente, poesía, faroles y capítulos de ritmo multilingüe.
LLM Arena · GPT 6 Sol
Sitios web
Bianjing After Dark por OpenDesign
Sigue un río iluminado por faroles a través de cinco capítulos de Bianjing After Dark, desde la puerta de la ciudad y el mercado nocturno hasta la poesía y el lanzamiento de faroles.
LLM Arena · Claude Opus 5.5
Paneles de control
Halcyon Cove por OpenDesign
Organiza un día con seis paradas en Halcyon Cove: vincula lugares guardados, ubicaciones en el mapa y tiempos a pie en un solo panel.
LLM Arena · Claude Opus 5
Aplicaciones
Abyssal Log por OpenDesign
Una colección de especímenes marinos vinculada a misiones de buceo. Cada registro desconocido explica la tarea y el progreso necesarios para descubrirlo.
LLM Arena · Claude Opus 5
Paneles de control
Life System por OpenDesign
Una puntuación semanal, métricas del mapa corporal, ritmos diarios y cinco experimentos en un panel de escritorio, explicados mediante cuatro vistas de detalle con anotaciones.
Ejemplo de hackathon
Sitios web
Ember & Pepper por OpenDesign
Platos estrella y detalles de visita, junto con un cuadro de reserva para quienes estén listos para reservar.
LLM Arena · GPT 5.6 Sol
Aplicaciones
Harbor Skirmish por OpenDesign
Una pequeña isla costera con rutas por las azoteas, tres espacios para armas y una divertida interfaz en primera persona.
LLM Arena · GPT 6 Astra
Presentaciones
Agent-Native Workspace por OpenDesign
Una historia de producto en tres diapositivas: una tesis inicial, un concepto de aplicación móvil complementaria y una sala de control empresarial.
Ejemplo de hackathon
Aplicaciones
Solara Bay por OpenDesign
Seis paradas con horarios en la ficticia Solara Bay, con un mapa ilustrado, tiempos estimados a pie y avisos útiles sobre la ruta.
LLM Arena · GPT 5.6 Sol
Aplicaciones
Abyssal Atlas por OpenDesign
Una colección de especímenes vinculada a una cola de inmersiones: registros bloqueados, dos filas de filtros y recuentos de progreso explican qué descubrir a continuación.
LLM Arena · Grok 4.6
Sitios web
Yàn Huǒ por OpenDesign
Presentación del hot pot con un menú de especialidades y precios, una galería del restaurante y detalles para la visita antes de reservar.
LLM Arena · Qwen 3.8 Max
Sitios web
Second Spring por OpenDesign
Una rama caída interactiva da paso a relatos del bosque, un plan de restauración y formas simuladas de colaborar.
LLM Arena · DeepSeek V4.1 Flash
Sitios web
Second Spring por OpenDesign
Haz crecer una capa de musgo sobre un tronco caído y explora los relatos del suelo del bosque y formas simuladas de ayudar.
LLM Arena · Claude Fable 5.1
Gráficos
iPhone Inside por OpenDesign
Capas separadas de un teléfono conceptual, con ajustes preestablecidos de cámara, un control deslizante y un panel con ocho grupos de ensamblaje.
LLM Arena · GPT Astra
Aplicaciones
Harbor Skirmish por OpenDesign
Una llamativa pantalla de título de la isla da paso a una experiencia en primera persona con paneles de estado enmarcados y controles de armas numerados.
LLM Arena · DeepSeek V4.1 Flash
Gráficos
Tom Goodman por OpenDesign
Un currículum ficticio que combina experiencia con gráficos de competencias y trabajos destacados, en un orden de lectura a dos columnas y con una maquetación de impresión independiente.
Ejemplo de hackathon
Gráficos
Maya Rowan por OpenDesign
Un portfolio ficticio que reúne proyectos en tarjetas tipo póster, una práctica en tres etapas, notas de trabajo y contacto.
Ejemplo de hackathon
Quita los filtros para ver todos los proyectos o explora otro tipo de trabajo.
Se usa la paginación en lugar del desplazamiento infinito para que se pueda acceder a todos los proyectos con el teclado y los rastreadores web.
Comunidad
Un hackatón comunitario que acaba de terminar y una serie de evaluaciones en la que diez modelos respondieron a los mismos encargos.
Los diseñadores publicaron en X productos creados con OpenDesign, con una publicación y un enlace a la comunidad por participación. Las participaciones se clasificaron según los «Me gusta».
Seis encargos, cada uno respondido por dos modelos. Cada página indica el modelo y la tarea, para poder comparar las respuestas en paralelo.
Filtra los casos prácticos anteriores por tipo de resultado y abre uno que se parezca a lo que quieres crear. Lee el encargo, el modelo que se usó y las decisiones de diseño que explica; después, anota qué conservarías y qué cambiarías.
Indica el tipo de resultado, las pantallas o secciones, el contenido de ejemplo y la interacción más importante. Especifica qué información es real y cuál es provisional para que el diseño no invente datos.
Crea el diseño de un sitio web para una panadería de barrio ficticia. Incluye una sección principal con los productos horneados de hoy, un menú dividido entre mañana y tarde, el horario de apertura y un formulario para hacer pedidos por adelantado con campos provisionales claramente etiquetados. Mantén la navegación literal, crea todos los encabezados como texto real e incluye un diseño móvil fácil de leer.
Elige el modelo en el que confías para el diseño y los textos. Para ver cómo responden dos modelos al mismo encargo, ejecútalo en LLM Arena primero, como hicieron los casos prácticos de Arena de esta página.
Pide cambios sección por sección: jerarquía, espaciado, estados y textos. Comprueba el diseño en móvil y el estado de movimiento reducido antes de aplicar un efecto a toda la página.
Exporta el diseño terminado como HTML y usa Compartir en OpenDesign para obtener un enlace. Ábrelo en otra ventana del navegador y comprueba que se carguen la versión prevista y sus recursos antes de enviarlo.
Empieza
Gratis, de código abierto y ejecutándose en tu propio equipo con tus propias claves. Prepara un encargo, elige un modelo y publica un sitio web, una app, un panel o una presentación que puedas compartir.
Versiones de escritorio para macOS y Windows. Gratis y de código abierto con licencia Apache-2.0.
