UX/UI-design · AI · Min egen sajt
Att designa min portfolio med Claude, som ett system från startsida till CV
Jag designade och byggde den här sajten själv, med Claude som min byggpartner. Jag behandlade den som en produkt: en visuell identitet för sajten, casen och CV:t, ett designsystem och nedskrivna regler för vad ett bra case är. Jag sätter riktningen och avgör vad som är sant. Claude bygger, översätter och kontrollerar, och ingenting går live förrän jag säger publicera. Läsaren väljer svenska eller engelska, och mörkt eller ljust tema.
- Min roll
- Designer, produktägare och redaktör för min egen sajt
- År
- 2026
- Byggd med
- Claude, HTML och CSS, Git, och Playwright och axe för kontroller
- Publicerad på
- Netlify
- Språk
- Svenska och engelska
- Teman
- Mörkt och ljust
Kort version
Problemet
Min tidigare portfolio visade vad jag hade designat, inte hur jag arbetar: discoveryn före skärmarna, produktbesluten och hur jag leder team.
Vad jag gjorde
Jag designade och byggde sajten med Claude, och skrev ner reglerna den arbetar efter: min positionering, min tonalitet och en grundnivå som varje case måste nå. Jag granskar varje ändring i en förhandsvisning innan den går live.
Vad det ledde till
Fem huvudcase som börjar med effekten, ett CV i samma identitet, och varje sida på två språk och i två teman, med tillgänglighet kontrollerad mot WCAG 2.2 AA.
Briefen jag gav mig själv
Min tidigare portfolio, byggd i Framer, visade mest vad jag hade designat. Den visade inte hur jag arbetar: discoveryn före skärmarna, produktbesluten och hur jag leder designers och team. Jag ville också ha den på två språk, och att mitt CV skulle kännas som en del av samma arbete.
Frågan
Hur kan en portfolio visa hur jag arbetar, inte bara vad jag har designat?
De flesta portfolios visar färdiga skärmar. Min behövde också visa discoveryn före skärmarna, produktbesluten bakom dem och hur jag leder designers och team.
Fyra mål
- Visa hela breddenCase inom CX/UX-discovery, UX/UI-design, produktledarskap och designledarskap, där varje case visar min roll och mina beslut.
- En identitet överalltStartsidan, varje case, företagssidorna och CV:t delar en visuell identitet.
- Läsaren väljerSvenska eller engelska, mörkt eller ljust, och valet följer med läsaren genom sajten.
- Sant, eller inte allsBara verkliga fakta och verkliga siffror. Det som levererades hålls isär från det vi siktade mot.
Att designa och bygga med Claude
Jag designade sajten och byggde den tillsammans med Claude. Jag sätter riktningen och äger varje beslut. Claude skriver och ändrar koden, översätter, renderar bilder och kontrollerar resultatet. Varje ändring görs i ett utkast, jag granskar en förhandsvisning, och först när jag säger ”publicera” går den live på Netlify.
- 1BriefJag beskriver vad jag vill med vanliga ord, på svenska eller engelska, ofta med en skärmdump eller en granskning.
- 2KontextClaude arbetar utifrån mina nedskrivna regler: positionering, tonalitet, grundnivån för case och designtokens.
- 3UtkastVarje ändring görs i ett utkast, på svenska och engelska, aldrig direkt på den publicerade sajten.
- 4KontrolleraAutomatiska kontroller av tillgänglighet, bildskärpa, överflöde på små skärmar och ett CV som ryms på A4.
- 5GranskaJag granskar skärmdumpar på desktop och mobil, i båda temana och på båda språken, och ber om ändringar.
- 6PubliceraFörst när jag säger ”publicera” går utkastet live på Netlify.
Vem gjorde vad
Att använda AI där det gör nytta innebar att vara tydlig med vad jag behåller. Claude är snabb på att bygga och kontrollera. Att avgöra vad ett case ska visa, och vad som är sant, låg kvar hos mig.
- Vad varje case ska visa, och hur det är uppbyggt
- Vad som är sant, och vad som lämnas bort
- Den visuella identiteten, principerna och varje slutgiltigt beslut
- De nedskrivna reglerna: positionering, tonalitet och grundnivån för case
- Granskning av varje ändring, och beslutet om när den publiceras
- Skrev och ändrade koden för varje sida
- Översatte varje text till svenska
- Renderade bilder, diagram och förhandsvisningar utifrån min riktning
- Granskade casen mot min grundnivå och körde kontrollerna
Regler som AI:n kan följa, och en grind den inte kan gå förbi
Den största förändringen i hur jag arbetar med AI är att skriva ner omdömet. Min positionering, min tonalitet och en grundnivå för varje case finns i gemensamma projektdokument som Claude läser varje gång: börja med effekten, håll processen på en övergripande nivå, och säg alltid vad en metod gav. Sådana regler håller ihop arbetet, från det första caset till det tionde. Men de kan inte avgöra vad som är sant eller värt att visa. Därför är det en mänsklig grind: fakta och siffror kommer bara från mig, och ingenting publiceras förrän jag har granskat det.
case, inom fyra sorters arbete
företagssidor, var och en länkad från CV:t
språk och teman för varje sida
förhandsvisningar publicerade under arbetet
Case som visar hela bredden
Jag ville att casen skulle visa fyra sorters arbete, inte bara UX/UI-design. Fem huvudcase finns på startsidan, och resten under Mer arbete. Varje case säger exakt vilken min roll var: Product Manager, linjechef för designers eller hands-on produktdesigner.
Anatomin i ett case
Varje case kontrolleras mot samma grundnivå innan det publiceras, så att en läsare kan skumma och jämföra dem.
- Kort versionProblemet, vad jag gjorde och vad det ledde till, högst upp.
- En berättelseFrån problemet till det som förändrades, med min roll tydlig.
- Metod, sedan vad den gavVarje metod följs av risken den tog bort, beslutet den möjliggjorde eller resultatet den flyttade.
- Processen på en övergripande nivåDjupa detaljer, som KPI-tabeller, ligger i stängda avsnitt med ”Mer detaljer”.
- Ärliga resultatBara sanna resultat. Mål märks som mål.
- Belägg på slutetEtt kort citat från någon jag arbetat med, i en lågmäld stil.
Hur sajten är organiserad
Fyra vägar leder ut från startsidan. Case och CV möts på företagssidorna, så att en rekryterare kan gå från en rad i CV:t till casen bakom den, och tillbaka.
Varje sida: svenska eller engelska, mörkt eller ljust, och en webbplatskarta i sidfoten.
En identitet, från sajt till CV
CV:t är designat i samma system som sajten: samma färger, samma två typsnitt, samma rosa etiketter. Det byggs från samma källa, på svenska och engelska, och kontrolleras så att varje sida ryms på A4.
Varje uppdrag i CV:t länkar till en företagssida med casen från det företaget, och företagsnamnen på startsidan leder dit också. En rekryterare kan gå direkt från en rad i CV:t till arbetet bakom den.
Designsystemet
Sajten bygger på Material 3: färgroller, en typskala, en formskala, ett rutnät på 4 dp och uttrycksfull rörelse. Allt är satt som tokens, så hela sajten, och CV:t, kan stylas om på ett ställe.
Text bakas aldrig in i bilder. Etiketter och paneler på toppbilderna är riktig text i sajtens typsnitt, så de följer tema och språk, förblir skarpa och kan läsas av skärmläsare.
Färg
- Primär
--primary - Primary container
--primary-container - Secondary container
--secondary-container - Tertiary
--tertiary - Tertiary container
--tertiary-container - Yta
--surface - Surface container
--surface-container - Outline
--outline
Typografi
Mörkt och ljust, svenska och engelska
Läsaren väljer mörkt eller ljust tema, och svenska eller engelska. Båda valen sparas, och varje sida, case och CV:t är översatta, även diagram och text i bilder.
Mörkt · Engelska
Ljust · SvenskaUI-komponenter
Diagramkomponenter
Erbjudanden fick gästerna att ladda ner appen, lojaliteten fick dem att komma tillbaka
Från Leeroy-caset.
- Insikt från discoveryGästerna visste inte när beställningen var klar.
- DesignprincipVet alltid beställningens status
- DesignbeslutBeställningsstatus, och en notis när den är klar.
- Produktens riktning”Jag vet när min mat är klar”
- Att mäta framgångBeställningar klara i tid
- Beslut
- Bygg beställning först, och lojalitet därefter.
- Varför
- Utan beställningar finns inget att belöna.
Case-komponenter
Delarna som varje case byggs av, så att läsaren alltid vet var hen ska titta: resultatet högst upp, detaljerna på begäran och belägg på slutet.
Problemet
Många användare visste inte att de kunde skapa en matchningsprofil, och de som gjorde det hade svårt med kriterierna.
Vad jag gjorde
Research, ett tydligare flöde i fem steg med personliga förslag, och utvecklingsklar design.
Vad det ledde till
Andelen användare med en matchningsprofil ökade från 30 till 50 procent.
av användarna har en matchningsprofil. Från TRR-caset.
Tjänsteresan
- InlämningKonsumenten lämnar paketet i ett skåp
- Första milenFöraren hämtar det
- TerminalIdentifieras och sorteras
Mer detaljer: KPI:erna vi styrde efter
Djupa detaljer, som KPI-tabeller och beroenden, väntar här tills läsaren ber om dem. Prova att öppna.
”Mikaela fick oss att snabbt utforska olika möjligheter, från en idé till något vi kan diskutera eller lansera.”
Mattias Björklund · vd och delägare på Bilwebben
Designprinciper för sajten
Jag gav sajten egna designprinciper, skrivna som frågor jag kunde testa varje ändring mot.
Visa tänkandet, inte bara skärmarna
Varje case visar problemet, min roll och besluten, inte bara resultatet.
FrågaKan en läsare se vad jag beslutade, och varför?
Sant, eller inte alls
Inga påhittade fakta eller siffror. Det som levererades hålls isär från det vi siktade mot.
FrågaKan jag försvara varje mening i en intervju?
En identitet överallt
Sajten, casen och CV:t delar färger, typografi och komponenter.
FrågaKänns det som att samma person har gjort allt?
Läsaren väljer
Språk och tema är läsarens val, och valet sparas.
FrågaKan en svensk läsare i ett ljust rum läsa allt bekvämt?
Byggd för varje skärm
Kontrollerad ner till 320 px, på båda språken och i båda temana.
FrågaGår något sönder på den minsta mobilen?
Respektera människorna i arbetet
Namn och personuppgifter i skärmdumpar är suddade, och erkännandet går dit det hör hemma.
FrågaSkulle människorna i det här caset känna sig bekväma med att läsa det?
Börja med vad det gav
Varje metod följs av vad den åstadkom, för läsare som inte talar design.
FrågaSkulle en rekryterare förstå varför det här spelade roll?
Ingenting publiceras osett
Varje ändring förhandsgranskas och kontrolleras innan den går live.
FrågaHar jag sett det här, på båda språken, i en mobil?
Lärdomar
När jag ser tillbaka är det fem saker som stannar kvar från att designa min egen sajt med Claude.
AI är snabbt, omdömet är mitt
Claude kunde bygga om ett helt case på några minuter. Det flyttade det svåra till att avgöra vad som är sant, vad som spelar roll och vad som ska lämnas bort.
Granska innan det är live
Att titta på varje ändring som en förhandsvisning, på desktop och mobil, på båda språken och i båda temana, fångade mer än att kommentera dokument någonsin gjorde.
Ett system får nya saker att kännas hemma
Med tokens och gemensamma komponenter på plats passade nya diagram, som den röda tråden eller KPI-matrisen, in från första versionen.
En portfolio är en produkt
Den har användare, rekryterare och rekryterande chefer, och den behövde en brief, versioner, kvalitetskontroller och en backlog, som vilken produkt jag än har lett.
Regler skalar, omdöme gör det inte
Att skriva ner min positionering, min tonalitet och en grundnivå för varje case gjorde arbetet enhetligt, oavsett om det var det första caset eller det tionde. Men ingen regel kunde avgöra vad som var sant eller värt att visa. Därför går varje ändring fortfarande genom mig.