Designsystem i en tid av AI
Vi kan bygga snabbare, men bygger vi bättre?
Det har blivit betydligt enklare att gå från idé till något som faktiskt fungerar. AI kan hjälpa oss att utforska design, skriva kod, skapa innehåll och lösa problem som tidigare krävde betydligt mer tid. För oss som arbetar med design och utveckling innebär det nya möjligheter – och ett helt annat tempo.
Men snabbare produktion är inte automatiskt bättre produktion.
När det blir enklare att skapa blir det också enklare att skapa för mycket. Fler varianter, fler speciallösningar och fler beslut som fungerar bra var för sig, men som inte nödvändigtvis fungerar tillsammans. En lösning kan se bra ut och fungera perfekt idag, men ändå vara svår att vidareutveckla när webbplatsen växer eller behoven förändras.
Det är därför vi på Atom Agency tycker att design systems och tydliga ramverk har blivit ännu viktigare.
Ett bra system skapar en gemensam grund för hur en webbplats är designad och byggd. Det hjälper oss att fatta konsekventa beslut, återanvända det som redan fungerar och utveckla nya delar utan att varje gång börja från ett tomt papper.
När AI blir en del av processen får systemet dessutom en ny roll. Det hjälper inte längre bara människor att arbeta konsekvent tillsammans. Det ger oss också något att styra AI med – och något att bedöma resultatet mot.
För den viktiga frågan är inte bara vad AI kan skapa.
Hur vet vi att det AI skapar faktiskt är bra, genomtänkt och hållbart över tid?
Hastighet är inte samma sak som skalbarhet
AI har gjort det möjligt att ta fram lösningar på väldigt kort tid. En ny sektion, en funktion eller till och med en hel sida kan gå från idé till färdig lösning betydligt snabbare än tidigare.
Men det finns en viktig skillnad mellan att bygga snabbt och att bygga skalbart.
En webbplats består sällan av isolerade delar. Typografi, färger, avstånd, knappar, formulär och återkommande komponenter behöver hänga ihop. När samma problem löses på olika sätt på olika delar av webbplatsen växer komplexiteten snabbt, även om varje enskild lösning fungerar.
Det här är inget problem som uppstod med AI. Det har alltid varit en central del av bra webbdesign och webbutveckling. Skillnaden är att AI kan accelerera både bra och dåliga arbetssätt.
För oss handlar skalbarhet därför inte främst om hur stor en webbplats kan bli. Det handlar om hur enkelt den kan utvecklas vidare utan att bli mer komplicerad för varje förändring.
Det kräver en gemensam struktur. Ett system som hjälper oss att återanvända beslut istället för att fatta nya varje gång, och som gör det tydligt vad som är en del av webbplatsens visuella och tekniska språk.
Det är här ett design system kommer in.
Design system skapar struktur och ett gemensamt språk
Ett design system är i grunden ett gemensamt språk för hur en digital produkt ska se ut och fungera. Istället för att fatta samma beslut om och om igen definierar vi dem en gång och skapar ett system som går att återanvända.
På en grundläggande nivå handlar det om sådant som färger, typografi, avstånd, knappar, formulär och hur innehåll placeras på sidan. För den som arbetar närmare design och utveckling kan samma struktur beskrivas genom exempelvis design tokens, CSS variables, components, grids, spacing systems och naming conventions.
Termerna är mindre viktiga än principen bakom dem: ett beslut ska helst ha en tydlig plats i systemet.
Om en primär knapp används på tjugo olika ställen ska vi exempelvis inte ha tjugo separata knappar som råkar se likadana ut. De bör bygga på samma component och samma regler. När designen förändras kan vi då förändra systemet istället för att leta efter varje enskild förekomst.
Samma tanke kan appliceras på betydligt mer än knappar. En webbplats kan ha återanvändbara regler för allt från rubrikstorlekar och färger till sidsektioner, animationer och responsivt beteende. Ju tydligare dessa relationer är, desto enklare blir webbplatsen att utveckla, underhålla och förändra över tid.
Ett bra design system innebär däremot inte att varje sida måste se likadan ut. Systemet ska inte bestämma exakt vad vi får designa. Det ska ge oss väl definierade byggstenar och principer som gör att vi kan skapa variation utan att tappa helheten.
Det är också därför design systems traditionellt har varit så värdefulla när flera personer arbetar med samma produkt. Designers och utvecklare behöver inte tolka varje beslut från början, eftersom det redan finns ett gemensamt språk att utgå från.
Och idag är det inte längre bara människor som behöver förstå det språket.
När AI blir en del av design- och utvecklingsteamet
När AI används som en del av design- och utvecklingsprocessen förändras också sättet vi arbetar på. Vi använder inte längre bara verktyg för att utföra en specifik uppgift. Vi kan beskriva ett problem, diskutera olika lösningar, ge feedback och tillsammans arbeta oss fram till ett resultat.
På Atom Agency ser vi därför AI framför allt som en collaborator.
Det betyder inte att vi lämnar över design- eller utvecklingsarbetet till AI. Tvärtom blir vår egen kunskap och våra beslut minst lika viktiga. För att kunna bedöma ett förslag behöver vi förstå vad som är en bra lösning, varför den fungerar och hur den passar in i helheten.
Det gäller särskilt när AI används för att skapa något. En lösning kan vid första anblick se helt rätt ut, men ändå bryta mot principerna som resten av webbplatsen bygger på. Den kanske introducerar nya färger eller avstånd, skapar en ny component där en redan finns, eller löser samma typ av problem på ett helt annat sätt än tidigare.
Därför blir samarbetet bättre ju mer AI förstår om sammanhanget den arbetar i.
Istället för att bara beskriva vad vi vill skapa kan vi ge AI information om hur vi arbetar. Vilka components som redan finns. Hur vårt designsystem är uppbyggt. Vilka regler och conventions vi följer. Vad som får förändras, och vad som inte bör förändras.
På så sätt blir ett design system mer än ett verktyg för consistency mellan designers och utvecklare. Det blir också en del av den kontext vi kan ge AI.
Och det är en viktig skillnad. Det handlar om att ge AI bättre förutsättningar att förstå systemet den arbetar inom.
Att få ut mer av AI handlar inte nödvändigtvis om att skriva en smartare prompt.
Du behöver inte bli bättre på att prompta – AI behöver förstå hur du arbetar
Det har pratats mycket om prompting och hur man formulerar den perfekta instruktionen till AI. Men i takt med att modellerna blivit bättre har själva formuleringen blivit mindre avgörande. Vi kan skriva med vanligt språk, vara ofullständiga och till och med stava fel. AI förstår oftast vad vi försöker säga.
Det svårare problemet är kontext.
AI kan förstå att vi vill bygga en ny sektion på en webbplats. Men den vet inte automatiskt hur just den webbplatsen är uppbyggd. Den känner inte till våra components, vårt spacing system, våra design tokens eller vilka principer vi använder för att strukturera projektet.
Det är skillnad på att förstå uppgiften och att förstå hur vi vill att uppgiften ska lösas.
Vi har experimenterat mycket med detta på Atom Agency. Ett exempel är att ge ChatGPT kunskap om Client-First, det etablerade system från Finsweet som vi använder som grund för hur vi strukturerar våra Webflow-projekt.
När AI känner till systemet behöver vi inte beskriva varje tekniskt steg. Vi kan prata mer naturligt om vad vi vill åstadkomma och låta AI resonera utifrån samma regler som vi själva arbetar efter.
Det börjar likna hur vi samarbetar med människor. En erfaren kollega behöver inte få varje knapptryckning beskriven. Det räcker ofta att förklara problemet och målet, eftersom vi redan delar en förståelse för hur arbetet ska utföras.
Samma princip kan användas med AI. Ju bättre kontext vi kan ge, desto mindre behöver vi detaljstyra varje enskild uppgift.
Det här brukar ibland beskrivas som context engineering: att skapa rätt förutsättningar, information och regler runt AI istället för att försöka få in allt i en perfekt prompt. För oss är själva termen mindre viktig än tankesättet.
Vi vill inte bli bättre på att prata som maskiner. Vi vill ge AI tillräckligt bra förståelse för att vi kan fortsätta prata som människor.
Se hur vi arbetar med AI och Atom Framework
Vill du se hur det här fungerar i praktiken? I videon nedan visar vi hur vi arbetar tillsammans med AI inom Atom Framework och hur ett tydligt system ger AI den kontext som behövs för att bidra i ett verkligt Webflow-projekt. Videon går lite djupare tekniskt och riktar sig framför allt till designers och utvecklare som vill se själva workflowet.
Systemet ger oss kontroll över resultatet
Det leder tillbaka till frågan vi började med: hur vet vi att det AI skapar faktiskt är bra och hållbart?
För oss ligger en stor del av svaret i systemet runt omkring.
På Atom Agency har vi under flera år utvecklat Atom Framework, vårt eget framework för hur vi designar och bygger webbplatser i Webflow. Det bygger vidare på Client-First och innehåller bland annat vårt designsystem, komponentstruktur, layouts, spacing, design tokens och gemensamma principer för hur våra webbplatser ska fungera.
Frameworket skapades inte för AI. Det skapades för att vi själva ville bygga bättre, mer konsekvent och mer skalbart. Men när AI nu blir en allt större del av vårt workflow har värdet av den strukturen blivit ännu tydligare.
Systemet ger AI något att förhålla sig till. Men minst lika viktigt är att det ger oss något att utvärdera resultatet mot.
Vi kan fråga om en lösning använder rätt byggstenar, följer våra principer och går att utveckla vidare. Vi kan se när AI föreslår något som redan finns i systemet eller när en lösning skapar onödig komplexitet. Det gör det möjligt att använda AI:s hastighet utan att lämna över kontrollen över hur slutresultatet faktiskt byggs.
Det betyder inte att systemet alltid har rätt. Bra design kräver fortfarande nya idéer, undantag och beslut som inte går att förutse i förväg. Ett design system ska hjälpa oss att fatta bättre beslut, inte hindra oss från att fatta nya.
Bygg systemet först, accelerera sedan
AI kommer med all sannolikhet fortsätta förändra hur vi designar och utvecklar digitala produkter. Vilka verktyg vi använder och exakt vad de kan göra kommer också fortsätta förändras. Därför tror vi att det är mer intressant att fokusera på det som består.
Struktur. Tydliga principer. Ett gemensamt språk. Och människor som kan avgöra när en lösning faktiskt är bra.
Ju snabbare våra verktyg blir, desto viktigare blir det att veta i vilken riktning vi vill använda den hastigheten.
Det är också så vi ser på samarbetet med AI på Atom Agency. Vi behöver inte ge AI varje instruktion eller formulera den perfekta prompten. Men vi behöver skapa miljön den arbetar i, ge den relevant kontext och fortfarande ta ansvar för resultatet.
AI kan hjälpa oss att bygga snabbare. Vårt jobb är att se till att vi bygger rätt saker, på rätt sätt.
Vill du veta mer om Atom Framework, hur vi arbetar med design systems eller hur AI kan bli en del av en strukturerad och skalbar design- och utvecklingsprocess? Kontakta oss på Atom Agency så berättar vi gärna mer om hur vi arbetar och hur vi kan hjälpa er.
