Designsystem i kode for tre verktøy

Tre verktøy for designere: WCAG-sjekken, Oppstartsboka og kurset Designsystem i kode. Oppstartsboka og kurset er fortsatt under arbeid.

Problemstilling

Når flere designere bygger med Claude, får produktene ofte hver sin stil. Det samme skjer når én designer jobber alene. Verktøyene mine hadde egne farger, knapper, felt og avstander. Det samme skjemafeltet så forskjellig ut i hvert verktøy. For brukerne betyr det at de må lære seg hvert verktøy på nytt. Jeg ville at verktøyene skulle høre sammen, og at nye verktøy skulle få det samme utseendet.

Løsning

Jeg laget et designsystem i kode som jeg kan bruke i alt jeg lager. Jeg skisserer først uten å tenke på stil. Så legger jeg designsystemet over. Rammen sørger for at like ting står på samme sted hver gang. Når jeg trenger noe nytt, legger jeg det til i systemet, og alle verktøyene får det.

Systemet

Systemet har fire deler: tokens, komponenter, mønstre og retningslinjer. Det har over 360 tokens for farger, avstander og fonter, 60 komponenter bygget av tokenene, og felles mønstre for oppsett og navigasjon. Retningslinjene sier hvordan delene skal brukes. Kontrasten er sjekket etter WCAG 2.2.

Se stilguiden til designsystemet

Temaer. Hvert verktøy er et tema av samme system. Temaet bytter bare noen få tokens: egen farge, lys flate og sterk farge. Knapper, felt og statusfarger er like overalt. Et nytt verktøy får hele rammen ved å velge én farge.

Mønstre. Toppmeny med meny og visningsvalg, sidemeny med kapitler, tittelkort og knappene forrige og neste. Hver side har bare sitt eget innhold i midten.

Tilgjengelighet. Kontrasten er sjekket etter WCAG. Fokus er synlig, klikkflatene er minst 24 px, og overskrifter og etiketter er ekte. Brukeren kan velge lys eller mørk modus, større tekst, lettlest skrift og engelsk.

Retningslinjer. Underveis ble valgene til regler. Eksempler står inni feltet, ikke under. Er alle felt valgfrie, merkes ingen. Datoer bruker alltid samme datovelger. Grønt svar står alltid før rødt.

Samarbeid med utviklere. Fordi systemet er bygget i kode, vet jeg hvordan tokens og komponenter blir brukt av utviklerne. Navnene på tokenene er de samme i designet og i koden.

Slik bruker jeg Claude

Jeg tar designvalgene, og Claude skriver koden. Jeg beskriver hva jeg vil ha, Claude bygger det, og jeg sjekker resultatet i nettleseren og ber om endringer. For at Claude skal følge designet mitt, har jeg satt opp fire ting.

Tokens. Alle farger, avstander og fonter har faste navn i én fil. Claude bruker bare disse og skriver aldri egne verdier inn i koden.

Regler i CLAUDE.md. En huskelapp Claude leser før hver oppgave: bruk komponentene, bruk bare tokens, følg WCAG 2.2 AA og spør før du lager noe nytt.

En skill med designet. Hele systemet er beskrevet som en oppskrift. Da får alt Claude lager designet mitt, også i andre prosjekter.

Versjoner i Git. Hver endring lagres som en egen versjon. Da kan alt spores og angres, og det er lett å se hva som er endret.

Resultat

Tre verktøy som ser ut og fungerer som ett produkt. De deler de samme komponentene og reglene, og et nytt verktøy får hele rammen fra første dag. Når jeg trenger noe nytt, legger jeg det til i systemet, og resten følger med.