---
title: "voxcog: designsystem i kod och användartester"
description: "Hur voxcogs gränssnitt fick ett designsystem i kod och en användarstudie där fem av sjutton fynd föll när de prövades mot koden. Levererad augusti 2026."
url: https://torn.studio/sv/arbete/voxcog-designsystem-och-anvandartester
locale: sv
published: 2026-08-31
updated: 2026-08-26
---

# voxcog: designsystem i kod och användartester

> **Kort svar:** Torn Studio byggde voxcogs gränssnitt på ett designsystem i kod med tokens i OKLCH och en dokumenterad regeluppsättning. En användarstudie gav sjutton fynd; elva höll, ett delvis och fem föll när de prövades mot koden. Tolv ändringar gick i produktion.

**Kund:** voxcog · **Levererat:** 2026-08-26

**Studions relation till kunden:** voxcog är en produkt Torn Studio har byggt och äger en del av. Studion stod för produktledning, arkitektur och bygge fram till överlämningen i augusti 2026.

## Uppdraget

voxcog behövde ett gränssnitt som höll ihop över ett fyrtiotal vyer byggda av en person på några månader, och behövde veta vilka av de rapporterade problemen som var verkliga innan något byggdes om.

## Det som gjorde det svårt

- Ett gränssnitt byggt i hög takt av en person driver isär visuellt om varje vy får bestämma sina egna färger och avstånd.
- En användarstudie levererar fynd blandade med önskemål, och att bygga allt som rapporteras är det snabbaste sättet att bygga fel saker.
- Produkten skulle vara redo att lanseras, vilket kräver att både tomma tillstånd och juridiska ytor är färdiga.

## Siffror som går att räkna efter

| Siffror som går att räkna efter | | |
| --- | --- | --- |
| 17 | fynd i en användarstudie | Elva höll, ett delvis, fem föll när de prövades mot komponenten de pekade på. Bedömningen ligger kvar i repot med skälet för varje avslag. |
| 12 | ändringar i produktion från studien | De fem avslagna finns kvar i dokumentet med motiveringen, så nästa läsare ser vad som prövades och föll. |
| 373 | testfiler | Placerade bredvid koden de testar. Utvärderingarna av agenten ligger bland dem och körs som egna kommandon. |
| 300 | raders tak per fil | Regeln som håller komponenter delbara. Den står i repots egen instruktionsfil och gäller allt nytt. |

## Så gjordes det

### Tokens som enda källa för det visuella

Färg, typografi, radier och skuggor deklareras som tokens i OKLCH och används genom variabler. Regeln skrevs ned som en egen referens, så en ny vy ärver systemet och hämtar sina värden därifrån.

### Varje fynd prövades mot koden först

De sjutton fynden i studien från april 2026 lästes ett i taget mot komponenten de pekade på. Elva höll, ett höll delvis och fem visade sig beskriva något som redan fungerade eller en funktion som inte fanns.

### Tomma tillstånd som är vägledning

De tunna tomma tillstånden skrevs om till korta guider som förklarar vad ytan är till för och ger nästa steg. Verktygsrader göms helt när listan är tom, så en förstagångsanvändare möter en instruktion.

### Datahämtning som ett mönster

All klientsidig läsning lades om till ett gemensamt cachningslager med nyckelfabrik och delad felhantering. Uppdateringsknapparna kunde tas bort, eftersom listorna nu vet själva när de är inaktuella.

**Teknik:** React 19, Next.js 16, Tailwind CSS v4, shadcn/ui, OKLCH, TanStack Query, Playwright

## Vad beviset räcker till

Det här visar ett gränssnitt som håller ihop och ett arbetssätt som skiljer verkliga problem från önskemål. Det visar ingen konverteringssiffra: voxcog lämnades över före lansering, så det finns ingen trafik att mäta mot.

## Vanliga frågor

### Varför prövar ni användarfynd mot koden innan ni bygger?

För att en studie blandar verkliga fel med önskemål och med saker som redan fungerar. Fem av sjutton fynd i den här rundan föll vid kontrollen, och att bygga dem hade kostat tid och gjort gränssnittet sämre.

### Vad är skillnaden mellan ett designsystem och en komponentbibliotek?

Biblioteket är komponenterna. Systemet är reglerna som avgör vad som får finnas: vilka färger som existerar, vilka avstånd som är tillåtna och vad som händer när något saknas. Reglerna är det som håller ihop en produkt som växer fort.

### Varför OKLCH som färgrymd?

OKLCH är perceptuellt jämnt, vilket gör att en skala med jämna steg också ser jämn ut och att kontrasten går att räkna på. En mörk variant blir en omdefinition av ljushet i samma system.

### Vad menas med att ett tomt tillstånd är vägledning?

Att ytan förklarar vad den är till för och ger ett nästa steg när det finns noll rader att visa. En förstagångsanvändare möter en instruktion, och verktygsrader för sökning och filtrering göms tills det finns något att söka i.

### Kan ni bygga ett designsystem åt vår befintliga produkt?

Ja. Arbetet börjar med att inventera de värden som redan används, samla dem till en tokenuppsättning och sedan flytta vy för vy. Systemet levereras som kod i ert repo och som en skriven referens.

### Hur många vyer omfattade gränssnittsarbetet?

Ett fyrtiotal vyer fördelade på chatt, dokument, signaler, uppgifter, arbetsytor och en publik intervjudel. Alla delar samma tokenuppsättning och samma komponentbibliotek.