Aksel-agent i VSCode og prototyper fra Figma-skisser

Målet er ikke at prototypen skal bli perfekt på første forsøk, men at du raskt kan komme i gang med en arbeidsflyt der KI hjelper deg å oversette designskisser til fungerende kode – med Aksel designsystem som rammeverk.

I denne artikkelen går vi gjennom to hovedsteg:

Før du starter

Før du går i gang må du ha noen ting på plass.

Du trenger:

Hvis du ikke har aktivert GitHub Copilot ennå, finner du hjelp i Slack-kanalen #github-copilot

Del 1: Lage en Aksel-agent i VSCode

En Aksel-agent er en spesialisert Copilot-agent med egne instruksjoner. Den hjelper Copilot med å forstå hvordan den skal bruke Aksel designsystem når den bygger brukergrensesnitt. Dette er et godt sted å starte hvis du vil lære hvordan du kan styre KI-en til å jobbe mer slik du ønsker.

Prosjektmappe

Start med å lage et enkelt mappesystem på PC-en din. Her kan du ha én mappe for hvert prosjekt du jobber med i VSCode. I eksemplene videre bruker vi mappen “Demo”. Legg gjerne mappen et sted du lett finner den igjen.

VSCode

Åpne VSCode. Logg deretter inn med Nav GitHub-kontoen din. Dette gjør at VSCode og GitHub Copilot kan bruke tilgangen din.

Prosjektmappen i VSCode

Når du er logget inn, åpner du mappen du nettopp lagde. Gå til: File → Open Folder. Velg deretter mappen din “Demo”. Nå har du et tomt prosjekt klart i VSCode.

Aksel-agent

I Copilot chatten kan du bruke kommandoen /create-agent for å lage en ny agent. Agenten får egne instruksjoner som Copilot bruker når den svarer og bygger kode. Du kan for eksempel bruke denne teksten:

/create-agent lag "Aksel bygger" som KUN bruker på Aksel designsystemet til å bygge GUI basert på denne dokumentasjonen https://aksel.nav.no/llm.md.
Spesifiser hvordan layout og styling bruker Primitives, hvordan Components brukes, hvordan Icons brukes, og at alle avgjørelser/usikkerheter skal besvares av bruker med innebygd quiz i chatten.
Om bruker legger ved lenker til skisser fra Figma skal du bruke Figma MCP.
Om Figma MCP ikke responderer skal du gi beskjed om det og vente på at den kjører.
Fra Figma skissene skal du oversette frames/autolayout frames med spacing og fargeverdier til primitives med props i kode.
IKKE spør bruker om å endre eller gjøre noe med code connect!

Agentfilen

Agenten som ble opprettet er en markdown-fil med instruksjoner. Denne filen er selve “oppskriften” agenten følger. Les gjennom den og juster det du mener bør være tydeligere.

Se spesielt etter at agenten:

Del 2: Lage prototype fra Figma-skisse

Når Aksel-agenten er klar, kan du bruke den til å lage en kodebasert prototype basert på en Figma-skisse. Her bruker vi Figma MCP for at Copilot skal kunne lese informasjon fra Figma.

Velg Aksel-agenten

Start en ny Copilot Chat i VSCode. Velg agenten du nettopp lagde “Aksel bygger”. Dette er viktig. Hvis du bruker vanlig Copilot Chat uten agenten, får du ikke nødvendigvis samme Aksel-styrte oppførsel.

Installer og start Figma MCP

Før agenten kan lese Figma-skisser, må du installere og starte Figma MCP. Gjør slik:

Agenten koder

Start enkelt. Be agenten lage én side av gangen, og iterer på den før du går videre til flere sider. Det gir bedre kontroll, og gjør det enklere å rette opp feil underveis. Du kan for eksempel bruke denne teksten:

Lag en responsiv react webapp av denne Figma-skissen med Aksel designsystemet: [din figma-link]

Tips:

Godkjenninger

Når agenten begynner å jobbe, kan den bruke litt tid. Den kan også stille deg spørsmål for å avklare detaljer. Agenten kan også be om lov til å installere pakker eller kjøre kommandoer i prosjektet. Da må du godkjenne forespørslene i VSCode. Du kan få flere meldinger som starter med: “Allow ..” Dette kan bli mange klikk, særlig første gang agenten setter opp prosjektet.

Prototypen

Når agenten er ferdig, skal den gi deg en lokal URL i chatten. Åpne lenken i nettleseren din for å se prototypen. Hvis agenten ikke skriver hvilken URL du skal bruke, kan du spørre om hvilken lokal URL du skal bruke.

Tips til god arbeidsflyt

Start smalt

Ikke be agenten bygge hele løsningen på en gang. Start heller med en side. Når den fungerer som du vil, kan du bygge videre.

Iterer konkret

Når noe ikke stemmer, gi konkrete tilbakemeldinger. I stedet for “Dette ble feil.”

Skriv heller:

“Headeren skal ha samme bredde som hovedinnholdet. På mobil skal knappene ligge under hverandre, ikke ved siden av hverandre. Bruk Aksel Button og ikke vanlig HTML-button.”

Jo mer konkret du er, jo lettere er det for agenten å rette opp.

Forvent feil

Agenten kan bomme på alt. Det er normalt. Tenk på prototypen som et førsteutkast du samarbeider med agenten om å forbedre. Det viktigste er å tenke på agenten som en samarbeidspartner: Den gjør mye av grovarbeidet, men du må fortsatt styre retning, kvalitet og detaljer.