Aplicación de escritorio
Diseño de Panel Personal
Life System coloca una puntuación semanal, métricas de mapa corporal, ritmos diarios y cinco experimentos en un panel de escritorio. Explora el diseño en detalle.
Ideas de Diseño para
- Paneles de Planificación PersonalUn resumen semanal junto a decisiones abiertas y prioridades.
- Rastreadores de Hábitos y ActividadPatrones diarios emparejados con promedios semanales.
- Rastreadores de ExperimentosUna hipótesis, objetivo y medida de progreso para cada ensayo.
Aspectos Destacados del Panel
- Un Resumen, Cuatro Niveles de DetalleUna puntuación, barras de dominio, promedios semanales y bucles abiertos comparten el carril oscuro.
- Ocho Métricas Alrededor de un Mapa CorporalLos indicadores de enfoque, movimiento y recuperación se ubican junto a una figura central.
- Cinco Experimentos, Seis CamposLas filas separan la hipótesis, la métrica, el objetivo, el progreso y el estado.
Vista Previa del Diseño de Panel Personal
1 / 4Cómo Está Organizado Este Panel Personal
Life System es un concepto de panel de escritorio construido alrededor de un espacio de trabajo único y denso. Su estrecho carril oscuro responde a "¿Qué necesita mi atención?"; los paneles blancos más grandes contienen las lecturas detrás de ese resumen. Esto es lo que cada área contiene realmente.
| Área | Qué Hay en Pantalla | Qué Observar |
|---|---|---|
| Carril de Resumen | Puntuación del sistema 82/100; seis barras de dominio; cuatro promedios semanales; ocho bucles abiertos. | El carril va desde una puntuación general hasta elementos específicos sin terminar. "Decisiones 3" es más accionable que 82 solo. |
| Sistema Humano | Ocho indicadores para enfoque, mente, corazón, energía, movimiento, nutrición, recuperación y longevidad. | Las etiquetas se ubican alrededor de la figura, por lo que los números permanecen legibles sin ser superpuestos sobre la anatomía. |
| Ritmos Diarios | Siete días de barras de energía, enfoque y recuperación; un gráfico separado de fases del sueño. | Las barras agrupadas comparan tres series dentro de cada día. El gráfico de sueño, en cambio, divide un total en partes. |
| Experimentos | Cinco ensayos con hipótesis, métrica, objetivo, progreso y estado. | La tabla hace visibles la pregunta y su medida prevista juntas, en lugar de reducir cada ensayo a una barra de progreso. |
Lectura de Puntuaciones en Contexto
El panel utiliza varios tipos de números, pero no todos significan lo mismo. Una puntuación necesita una escala; un cambio necesita un período de comparación; una duración necesita una unidad. Life System proporciona parte de ese contexto y deja otras partes sin resolver.
82/100 y +6 Responden Preguntas Diferentes
El resumen muestra la puntuación actual y etiqueta el cambio como "vs últimos 7 días". Mantén esa comparación junto a la puntuación al adaptar este diseño. Las seis barras de dominio no documentan cómo se calcula el 82.
Las Horas y Puntuaciones Necesitan Etiquetas Diferentes
Los promedios semanales muestran Trabajo Profundo como 4,6 h/día, Sueño como 7h 18m y Recuperación como 74%. Conservar esas unidades importa más que hacer que los tres números parezcan idénticos.
Un Rastreador de Experimentos con Seis Campos
Lee la fila de Trabajo Profundo en la tabla: un ensayo nombrado, "Los bloques aumentan el rendimiento", la métrica de Trabajo Profundo, un objetivo de +25%, 80% de progreso y En curso. La elección de diseño útil es separar estos campos. La debilidad es que los últimos tres pueden parecer tres versiones del mismo resultado.
| Valor Mostrado | Qué Te Dice | Qué Falta Todavía |
|---|---|---|
| Objetivo +25% | El aumento previsto en Trabajo Profundo. | El valor inicial y el período de medición. Un aumento del 25% necesita una línea base. |
| 80% de Progreso | Se muestra un valor de progreso para el ensayo. | Si esto significa tiempo transcurrido, sesiones completadas o avance hacia el objetivo. El prototipo no lo define. |
| En curso | La fila tiene una etiqueta de estado positivo. | La regla detrás de ese juicio. Las cinco filas de muestra usan este estado, por lo que la pantalla no demuestra un estado fuera de curso. |
Inspecciona el Panel en Tres Pasadas
Usa las cuatro vistas de galería anteriores para examinar el mismo espacio de trabajo a diferentes escalas. Son recortes de detalle, no cuatro páginas de aplicación separadas.
Traza el Resumen hasta un Detalle
Encuentra Recuperación en el carril de resumen: su promedio de siete días es 74%. Abre Sistema Humano y localiza Recuperación nuevamente: el titular es 75/100, con la misma lectura semanal del 74% debajo. El indicador más grande distingue una puntuación de su medida de apoyo; el carril conserva solo la lectura compacta.
Compara Dos Formas de Mostrar Patrones
Regresa al resumen y encuentra Ritmo de Energía y Arquitectura del Sueño. Uno agrupa energía, enfoque y recuperación por día; el otro divide el sueño en fases. Si reutilizas cualquiera de los gráficos, conserva su agrupación y etiquetas, no solo su acento verde.
Lee un Ensayo Antes de su Barra de Progreso
Abre Experimentos y lee primero la hipótesis. Luego encuentra la métrica y el objetivo que lo pondrían a prueba. Finalmente inspecciona el progreso y el estado. Este orden revela exactamente qué definiciones el rastreador todavía necesita antes de que los datos reales puedan reemplazar las muestras.
Qué Demuestra Este Diseño de Panel
Life System demuestra un diseño de información de escritorio, no un servicio de seguimiento personal conectado. El código suministrado utiliza lecturas de muestra. Sus botones de rango de tiempo cambian el estado seleccionado; no recalculan las puntuaciones ni los gráficos.
Referencia de Diseño, No Mediciones Validadas
Las lecturas de salud y cognitivas son contenido ilustrativo de la interfaz. No se proporciona ninguna fórmula de puntuación, integración de datos en tiempo real ni evidencia para las hipótesis de los experimentos. Las etiquetas de privacidad y sincronización en pantalla no son verificación de esas capacidades.
Un Ejemplo Oficial de OpenDesign
Este caso fue preparado como un ejemplo oficial del hackathon, no como una presentación de participante ni ganador de un premio. Estudia el diseño y previsualiza el diseño original; confirma los permisos de reutilización antes de redistribuir sus activos.
Cómo Crear un Diseño de Panel Personal en OpenDesign
Describe el Espacio de Trabajo y Sus Datos
Comienza con la pregunta diaria que tu panel debe responder. Para un diseño inspirado en Life System, solicita un carril de resumen, patrones semanales y una tabla de experimentos. Especifica datos de muestra y unidades legibles antes de solicitar ilustraciones decorativas.
Prompt sugeridoCrea un diseño de panel personal para una revisión semanal. Usa un carril de resumen oscuro y estrecho junto a paneles de detalle blancos. Incluye horas semanales de trabajo profundo, duración del sueño, decisiones abiertas, un gráfico de actividad de siete días y una tabla de experimentos con hipótesis, métrica, línea base, objetivo, sesiones completadas y resultado. Usa datos de muestra etiquetados. Mantén el logro del objetivo separado de la finalización del ensayo. No impliques que los sensores de salud o las integraciones de cuentas en tiempo real están conectados.
Refina una Métrica del Resumen al Detalle
Pide a OpenDesign que lleve una lectura semanal del carril a su panel de detalle sin cambiar su unidad ni período de tiempo. Si agregas una puntuación separada, etiquétala por separado. Mantén las ilustraciones en segundo plano hasta que las etiquetas y los períodos de comparación sean legibles.
Prueba la Tabla y Pantallas Más Pequeñas
Solicita un experimento en curso, un objetivo no alcanzado y un ensayo sin resultado todavía. Verifica que el texto de estado explique cada estado y que el progreso cuente sesiones en lugar de implicar éxito. En una pantalla estrecha, convierte la tabla en filas etiquetadas y confirma que los controles principales sigan siendo utilizables.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Diseño de sitio web de empleo
Un estudio de empleo de Kimi construido a partir de ocho escenas lunares, con transiciones vinculadas al desplazamiento y un proceso de solicitud ilustrado.
Sitio web
Diseño de portafolio creativo
El portafolio ficticio de Maya Rowan conecta proyectos, métodos de trabajo y notas.
Sitio web
Diseño de presentación de producto
Un pitch de espacio de trabajo nativo para agentes en 3 diapositivas.
Diapositivas
Diseño de sitio web de currículum
El currículum ficticio de Tom Goodman combina experiencia con gráficos de capacidades y trabajos seleccionados. Explora su orden de lectura en dos columnas, tarjetas de trabajo compactas y una maquetación de impresión independiente.
Sitio web