--- title: "voxcog: sistema de diseño en código y pruebas con usuarios" description: "Cómo la interfaz de voxcog obtuvo un sistema de diseño en código y una ronda de investigación donde cinco de diecisiete hallazgos cayeron al contrastarlos." url: https://torn.studio/es/trabajos/voxcog-sistema-de-diseno-y-pruebas-con-usuarios locale: es published: 2026-08-31 updated: 2026-08-26 --- # voxcog: sistema de diseño en código y pruebas con usuarios > **Respuesta breve:** Torn Studio levantó la interfaz de voxcog sobre un sistema de diseño en código, con tokens en OKLCH y un conjunto de reglas documentado. Una ronda de investigación dio diecisiete hallazgos; once aguantaron, uno en parte y cinco cayeron al contrastarlos con el código. Se publicaron doce cambios. **Cliente:** voxcog · **Entregado:** 2026-08-26 **La relación del estudio con el cliente:** voxcog es un producto que Torn Studio construyó y en el que el estudio tiene una participación. El estudio llevó la gestión de producto, la arquitectura y la construcción hasta la entrega en agosto de 2026. ## El encargo voxcog necesitaba una interfaz coherente a lo largo de unas cuarenta vistas construidas por una persona en pocos meses, y necesitaba saber cuáles de los problemas reportados eran reales antes de rehacer nada. ## Lo que lo hizo difícil - Una interfaz construida a gran velocidad por una persona se dispersa visualmente cuando cada vista elige sus propios colores y espaciados. - Una ronda de investigación entrega fallos reales mezclados con deseos, y construir todo lo reportado es la vía más rápida a construir lo que no toca. - El producto tenía que estar listo para lanzar, y eso exige que los estados vacíos y las superficies legales sean trabajo terminado. ## Cifras que se pueden contar | Cifras que se pueden contar | | | | --- | --- | --- | | 17 | hallazgos en una ronda con usuarios | Once aguantaron, uno en parte, cinco cayeron al contrastarlos con el componente que señalaban. La valoración sigue en el repositorio con el motivo de cada descarte. | | 12 | cambios publicados desde esa ronda | Los cinco descartados siguen en el documento con su motivo, así que la siguiente persona ve qué se probó y se dejó fuera. | | 373 | archivos de prueba | Colocados junto al código que cubren. Las evaluaciones del agente están entre ellos y se ejecutan como comandos propios. | | 300 | líneas de techo por archivo | La regla que mantiene divisibles los componentes. Está en el propio archivo de instrucciones del repositorio y rige todo lo nuevo. | ## Cómo se hizo ### Tokens como única fuente visual Color, tipografía, radios y sombras se declaran como tokens en OKLCH y se usan mediante variables. La regla se escribió como referencia propia, de modo que una vista nueva hereda el sistema y toma de ahí sus valores. ### Cada hallazgo se contrastó primero con el código Los diecisiete hallazgos de la ronda de abril de 2026 se leyeron uno a uno frente al componente que cada uno señalaba. Once aguantaron, uno aguantó en parte y cinco resultaron describir algo que ya funcionaba o una función inexistente. ### Estados vacíos que dan dirección Los estados vacíos escuetos se reescribieron como guías breves que explican para qué sirve la superficie y ofrecen un paso siguiente. Las barras de herramientas quedan ocultas mientras la lista está vacía, así que quien llega por primera vez encuentra una instrucción. ### La obtención de datos como un solo patrón Toda la lectura en cliente pasó a una capa de caché compartida con fábrica de claves y manejo de errores común. Los botones de refrescar salieron, porque ahora las listas saben por sí solas cuándo están obsoletas. **Tecnología:** React 19, Next.js 16, Tailwind CSS v4, shadcn/ui, OKLCH, TanStack Query, Playwright ## Hasta dónde llega esta prueba Esto demuestra una interfaz coherente y un método que separa problemas reales de deseos. De conversión no dice nada: voxcog se entregó antes del lanzamiento, así que no hay tráfico contra el que medir. ## Preguntas frecuentes ### ¿Por qué contrastáis los hallazgos con el código antes de construir? Porque una ronda mezcla fallos reales con deseos y con cosas que ya funcionan. Cinco de diecisiete hallazgos cayeron en la comprobación, y construirlos habría costado tiempo y empeorado la interfaz. ### ¿Qué diferencia hay entre un sistema de diseño y una librería de componentes? La librería son los componentes. El sistema son las reglas que deciden qué puede existir: qué colores hay, qué espaciados se permiten y qué ocurre cuando algo falta. Las reglas son lo que sostiene un producto que crece rápido. ### ¿Por qué OKLCH como espacio de color? OKLCH es perceptualmente uniforme, así que una escala de pasos regulares también se ve regular y el contraste se puede calcular. Una variante oscura se convierte en una redefinición de la luminosidad dentro del mismo sistema. ### ¿Qué significa que un estado vacío dé dirección? Que la superficie explica para qué sirve y ofrece un paso siguiente cuando hay cero filas que mostrar. Quien entra por primera vez encuentra una instrucción, y la búsqueda y los filtros quedan ocultos hasta que haya algo que buscar. ### ¿Podéis construir un sistema de diseño para nuestro producto actual? Sí. El trabajo empieza inventariando los valores ya en uso, reuniéndolos en un conjunto de tokens y migrando después vista por vista. El sistema se entrega como código en tu repositorio y como referencia escrita. ### ¿Cuántas vistas abarcó el trabajo de interfaz? Unas cuarenta vistas repartidas entre chat, documentos, señales, tareas, espacios de trabajo y una parte pública de entrevistas. Todas comparten el mismo conjunto de tokens y la misma librería de componentes.