voxcog: sistema de diseño en código y pruebas con usuarios
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.
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.
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
- 17hallazgos 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.
- 12cambios 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.
- 373archivos de prueba
- Colocados junto al código que cubren. Las evaluaciones del agente están entre ellos y se ejecutan como comandos propios.
- 300lí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.
Evidencia
En qué se apoya este artículo — una medición nuestra, una fuente fechada o una decisión y lo que costó.
- Medición
Cuántos de diecisiete problemas de interfaz reportados eran reales
Objeto medido: la app de voxcog, informe de investigación del 2 de abril de 2026
Método: Cada hallazgo se leyó frente al componente que señalaba antes de tocar código, y el resultado se anotó como aguanta, en parte o cae.
Resultado: 11 aguantaron, 1 en parte, 5 cayeron
- Decisión
Los cinco hallazgos descartados se anotaron junto con el motivo del descarte.
Lo que costó: La ronda publicó doce cambios donde se pedían diecisiete, y las ideas de función del informe quedaron fuera como hipótesis.
- Decisión
Todo lo visual se expresa como tokens en OKLCH y se usa mediante variables.
Lo que costó: Un coste inicial de una vez y una regla que sostener: un color nuevo exige un token nuevo antes de poder usarse.
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.
Cuéntanos qué quieres construir
Treinta minutos, sin coste, y una respuesta directa sobre si somos el estudio adecuado.