Design Bridge

Ett gemensamt designsystem för design och kod, med en snabbare väg från brief till fungerande prototyp, utan att tappa kontrollen

Från brief till design, godkännande, bygge och ändring, och tillbaka igen, med ett gemensamt designsystem i mitten

Design och kod tenderar att glida isär. En design görs i ett verktyg och byggs i ett annat, och varje ändring måste förklaras igen. Design Bridge kopplar ihop Claude Design, där designen utforskas, med Claude Code, där den byggs, så att en brief snabbt blir en fungerande prototyp och en ändring går från idé till kod utan att tappas bort på vägen.

Ett helt designsystem från en brief. Färger, typografi, avstånd och kärnkomponenterna kan tas fram ur en brief, antingen i Claude Design eller direkt i Claude Code som en artifact.
Snabba prototyper och ändringar. Designen utgår från det som redan finns i koden, så prototyperna är realistiska från början och ändringar kan provas i designen innan något byggs om.
Enklare kodning av moduler. Varje design kommer tillbaka som en tydlig beskrivning som koden byggs mot, så modulerna kodas med färre frågor och färre beslut längs vägen.
Tillgängligheten följer med. Interaktiva delar som dialoger och menyer följer fasta regler för fokus och tangentbord, så när modulerna i koden är tillgängliga är prototyperna det också.
Utan att tappa kontrollen. Designsystemet finns på ett ställe, och en människa godkänner varje steg. Ingenting ändras vid sidan om.

Den här portfolion är det tydligaste exemplet. Designsystemet sattes först upp i Claude Design, och siten byggdes sedan utifrån det med Claude Code.

Steg ett, i Claude Design: designsystemet, med färger, typografi och avstånd samlade på en exempelsida

Steg två, i Claude Design: en prototyp av den här portfolion byggd på designsystemet, här med två layouter för startsidan jämförda

Steg tre, byggd med Claude Code: den färdiga siten, på samma designsystem

Byggt och testat i mina egna projekt, inte i kunduppdrag. Nästa steg är fortfarande ett koncept under utveckling: efter lansering ska agenter gå igenom besökarnas viktigaste uppgifter på siten och föreslå förbättringar, medan besluten ligger kvar hos teamet.

Design tokens
Radix UI
Claude Design
Claude Code

Process

Hur arbetet gick till

Från brief till prototyp

En brief beskriver vad som ska formges och vad koden redan har. Designen utforskas i Claude Design eller som en artifact i Claude Code, justeras direkt och kommer tillbaka som en beskrivning som koden byggs mot. En ny idé kan ses som en fungerande prototyp tidigt, och en ändring kan provas i designen innan någon bygger om något.

En människa i varje steg

Varje brief klistras in i Claude Design av en person i stället för att skickas automatiskt. Claude Design svarar inte på en automatiserad förfrågan av sig själv, och den inklistrade vägen gav dessutom resultat som följde designsystemet bättre. Varje brief sparas, så att det alltid går att se i efterhand varför en design ser ut som den gör.

Presentationer från samma system

Samma arbetssätt tar också fram presentationer. En innehållsplan tas fram ur en PRD, en kodbas, ett CV eller fritext och godkänns i två steg, först planen och sedan hela innehållet. Resultatet är en prompt som är klar att klistra in och som bygger presentationen i samma designsystem.

Det fungerar utan AI också

Att utgå från ett designsystem och från modulerna som redan finns i koden fungerar för hand också, med Figma och handkodade prototyper. AI gör det snabbare att nå en fungerande prototyp, och handpåläggning och AI kombineras.

Teknik

Arkitektur och förmågor

Rundturen i detalj: designsystemet och kodbasen matar briefen, Claude Design returnerar överlämningen, Claude Code implementerar mot den

Rundturen

Två dokument går till designverktyget: ui-spec.md, vad som ska formges, och frontend-context.md, vad som redan finns i koden. Ett kommer tillbaka: design-handoff.md, som checkas in i git och styr implementationen. En Claude Code-skill genererar de två första ur ett projekts PRD och kodbas, och jämför överlämningen med den befintliga koden innan något implementeras.

Ett gemensamt designsystem

Tokens för färg, typografi, avstånd och brytpunkter definieras en gång, i W3C:s DTCG-format, och delas av flera projekt. Paletterna delar en tokenfil och växlas med attributet data-palette. Varje projekt låser en viss version av designsystemet, så en uppdatering ändrar aldrig ett projekt oväntat.

Beteendekontrakt

Interaktiva komponenter som dialogen och mobilmenyn dokumenteras som beteendekontrakt: roll, fokus, tangentbord och ARIA-attribut, kopplade till primitiver i Radix UI. Hur mycket tillgänglighet som följer med beror på koden. När modulerna är tillgängliga bär kontrakten det vidare in i designen.

Var designen görs

Väljs per uppgift: på Claude Designs canvas, eller som en artifact i Claude Code. De två kan kombineras, med första versionen på canvasen och arbetet flyttat till en artifact när riktningen är satt. Oavsett var är designsystemet i git källan, och ändringar som görs på en canvas förs tillbaka dit innan något byggs. Eftersom tokens följer ett öppet format går det att koppla till variabler i Figma, men det är inte prövat ännu.