Visuell identitet med AI som designpartner

Sajten är en portfölj av AI-arbete. Då blir sajtens egen visuella ram en del av bevisföringen. Spretiga bilder, otydlig layout eller inkonsekvent typografi sänker trovärdigheten i arbetet den ska visa. Hela sajten behöver kännas som om samma hand byggt allt, även när varje del faktiskt är genererad separat av olika AI-verktyg.

För torbjornsai.site byggde jag identiteten i två lager. Ett designsystem för själva sajten, framtaget med Claude Design som partner. Och ett bildsystem för illustrationerna, byggt kring Nano Banana och ett referensbibliotek. Båda lagren hänger på samma princip: AI behöver något konkret att referera till, inte bara beskrivas i text.

Vad jag vill uppnå

En sammanhållen visuell identitet som passar innehållet. Sajten är editorial, processdokumenterande, lite serietidningsinspirerad. Designen ska spegla det utan att konkurrera med texten.

Och ett system som skalar. Att lägga till en ny artikel ska inte kräva att jag tänker igenom typografi, palett och bildstil från grunden varje gång. Sajten behöver fungera även när jag publicerar i tempo.

Det betyder att identiteten måste vara förankrad i konkret material AI kan referera till. Tokens i kod för design. Referensbilder för illustrationer. Inte ett "designdokument" som lever vid sidan av och som ingen följer.

Hur jag tänker

Visuell identitet är två problem som ser lika ut men kräver olika verktyg.

Det första är sajten själv: layout, typografi, färger, komponenter, interaktioner. Det är ett mjukvaru-designproblem som kräver en designpartner med stark intuition för layout och komponentstruktur. Här är Claude Design rätt verktyg.

Det andra är illustrationerna i artiklarna: stil, palett, karaktärslikhet, atmosfär. Det är ett bildgenereringsproblem där modellen behöver visuella referenser, inte bara text. Här är Nano Banana med ett referensbibliotek rätt verktyg.

Båda problemen löser samma sak, sammanhållen visuell identitet, men de behöver olika typ av disciplin. Det skulle gå att försöka använda ett verktyg för båda, men resultatet blir kompromisser i båda. Två rätta verktyg slår ett halvbra.

Lager 1: Designsystemet för sajten

Arbetet med Claude Design började från en redan etablerad visuell riktning. Comic-strip editorial-stil, serietidningsinspirerad typografi, halftone-mönster, tjocka svarta linjer. Det fanns där men var inte rensat. Strukturen runt omkring spretade.

Vi förfinade hellre än att börja från noll. Det är ett medvetet val. Om designsystemet redan har en själ ska den behållas, även om vissa delar behöver bytas ut. Att starta om hade gett en mer modernt polerad sajt men kanske utan personlighet.

Konkreta beslut som landade:

Smalare brödtext, bredare hero. Artikelbrödtext på 680 pixlar och hero-bild på 1040. Olika optimering för olika syften. Brödtext behöver smal kolumn för läsbarhet, hero får ta visuell plats. Tidigare hade båda samma bredd, vilket gjorde brödtexten luftig och svår att hänga med i.

Bort med status-badges från artikelsidor. Att markera artiklar som "aktiv" på varje sida blev visuell brus. Status finns kvar som filter på kategorisidor, men i artikelhuvudet är det borta. Mindre att titta på, fokus på texten.

Tooltip-system för tekniska termer. När en artikel använder ord som MCP, scope, API eller halftone får begreppet en hover-förklaring första gången det dyker upp. Marknadschef-läsaren tappar inte tråden, utvecklar-läsaren slipper redundant förklaring.

Större typografi och radavstånd. Brödtext i 19 pixlar med radavstånd 1,7. Längre texter behöver mer luft för att kännas behagliga att läsa.

Panel-komponent som universal byggsten. Tjock svart ram, hård skugga, samma struktur återanvänds i artikelkort, CV-rutor, citatblock, chat-skissar. Komponenten finns en gång i koden och beter sig konsekvent överallt. Att underhålla designen blir en fråga om att ändra panelens definition, inte att jaga den genom hela sajten.

Allt landade som CSS-variabler i globals.css (--paper, --ink, --accent) plus Tailwind-config. Halftone-mönstret blev en egen liten komponent. Sektionsbrytarna mellan stora block är en återkommande comic-strip-figur som binder ihop sidan.

Claude Design levererade fem referensfiler i HTML och JSX, en per huvudsida (startsida, artikelsida, kategorisida, om-sida, en variant av startsidan). Det var handoff till Claude Code ⓘ som sedan implementerade samma design i Next.js. Två separata roller, designern och utvecklaren, men båda är AI och båda förhåller sig till samma designtokens.

Lager 2: Bildsystemet för illustrationer

Sajtens artiklar behöver hero-bilder och ibland illustrationer i löpsidan. Varje bild genereras separat i Nano Banana. Utan disciplin glider modellen mellan stilar och varje ny bild ser ut som en främling i biblioteket.

Lösningen är att ankra stilen i referensbilder, inte i prompttexter. Prompttext är bra på att beskriva en scen men dålig på att specificera exakt linjevariation, halftone-densitet eller färgmättnad. Referensbild fångar precis det.

Jag delar referenserna i två typer.

Karaktärsreferenser låser hur jag ser ut renderad i comic-stil. Ref A är ett rent porträtt av karaktären på neutral bakgrund. Ref B är ett par pratbubblor som låser bubbel-formen och den hand-textade typografin.

Miljöreferenser låser stilen och paletten. Linjevariation, halftone-densitet, vilka färger som dyker upp som accenter, hur trä och metall renderas. En miljöreferens behöver inte vara samma miljö som ska ritas härnäst, den behöver bara visa stilvokabulären. Fyra miljöer täcker det jag behöver: vintage tech-verkstad, trädgård ensam, anslagstavla, trädgård med samtal.

Reglerade roller är centralt. En referensbild används bara för det den ska bidra med. Karaktärsreferensen får inte styra scenens komposition. Miljöreferensen får inte tvinga sin pegboard på en trädgårdsbild. Annars blir varje generering en variant av referensen, inte en ny scen i samma stil.

I public/assets/references/ ligger de sex låsta referensbilderna. Workflow för en ny hero-bild ser ut så här. Jag bestämmer scen-konceptet. Jag väljer två till tre referenser ur biblioteket. Alltid Ref A för likhet, plus den miljö som ligger närmast i atmosfär, plus Ref B om scenen har pratbubbla. Sedan skriver jag en prompt enligt en mall jag dokumenterat i docs/bildgenerering.md.

Mallens viktigaste del är ett reference-usage-rules-block högst upp i prompten:

Ref A is used ONLY for the protagonist's face, head shape, build,
expression, and how his body and t-shirt are rendered. Do NOT copy
his pose, his hand placement, or his environment.

[Miljö N] is used ONLY for visual style — line weight, halftone
density, palette, ink quality, panel border. Do NOT copy its
specific environment, furniture, objects, or composition.

Utan det blocket kopierar Nano Banana hela scenen från miljöreferensen, inte bara stilen. Resultatet blir variationer på samma motiv. Med blocket separeras stilen från scenen och varje ny generering blir distinkt.

Resultat och lärdomar

Båda lagren tillsammans ger en sammanhållen identitet. Sajten har samma typografi, samma palett, samma komponentmönster genom alla sidor. Bilderna har samma karaktär, samma linjekvalitet, samma stilvokabulär. Det går inte att se vilken bild som genererades först och vilken som genererades senast. De hör ihop.

Den största lärdomen är att systemet är viktigare än det enskilda resultatet. Att lägga arbetstid i en designtokenfil eller en ny referensbild som låser stilen ger värde i varje framtida artikel. Att lägga samma tid i en pixelperfekt enskild bild ger värde i exakt en artikel.

Tre mer specifika lärdomar:

Claude Design är bra på att förfina, inte starta från noll. Vi hade redan en visuell riktning. Att förbättra strukturen runt omkring den landade bättre än att börja från scratch hade gjort. För en helt ny sajt skulle processen sett annorlunda ut, men för en sajt med personlighet är respekt för det befintliga ofta rätt strategi.

Nano Banana behöver ovanligt mycket explicit instruktion. "Använd den här referensen för stil" räcker inte. "Use this reference ONLY for line weight, halftone density, palette, and ink quality. Do NOT copy its environment, furniture, objects, or composition." krävs. Modellen är konservativ med struktur och utan tydlig skiljelinje mellan vad referensen får bidra med och inte bidrar den med allt. Andra kvirkar finns dokumenterade i docs/bildgenerering.md: brand-filtret är inkonsekvent och kräver neutrala termer, "1970s-80s adventure comic"-frasen triggar djungelscener och måste bytas mot "editorial comic", edit-läget bevarar pose oavsett vad man säger och kräver fresh generate för större ändringar, "exactly ONE coffee mug" är nödvändigt för att förhindra duplicering från referensen.

Två separata AI-roller fungerar bättre än en universal-AI. Claude Design för designsystem-arbete, Nano Banana för bildgenerering, Claude Code för implementering. Varje verktyg har sin styrka och sitt eget arbetssätt. Att försöka tvinga ett att göra allt urvattnar resultaten.

Hur jag går vidare

Designsystemet är på plats men kan utvecklas. Animationer och transitioner ligger mestadels inline och borde extraheras till central plats. Dark mode finns inte ännu, tillgänglighet på tooltips behöver förbättras (de fungerar visuellt men inte för skärmläsare), och text-emojin som används som ikoner (↗, →, ●) borde standardiseras till SVG-ikoner.

Bildbiblioteket växer när nya scener kräver det. Just nu täcker de fyra miljöerna det mesta. När en artikel behöver utomhus-storstad, ett lab eller ett fordon kommer jag generera en ny canon-bild först och lägga den i biblioteket. Eventuellt också karaktärsreferenser för andra personer som dyker upp i scenerna.

Längst bort: en bildgenereringsmodell som tar reference images natively via publikt API. Idag är referensbildstödet i Gemini bara i webbgränssnittet, inte i API:t. Samma begränsning som jag stötte på i hundbildsgenerering. När det öppnas kan hela genereringsflödet automatiseras med samma konsistens som idag, fast utan manuella steg.

Verktyg i den här processen