Claude Code är en kapabel kodningsagent. Mata in en skärmdump av en Figma-skärm så producerar den något som ser ungefär rätt ut. Mata in ett strukturerat kontextpaket — typade designtokens, en layout-IR, referensrenderingar och en maskinläsbar spec — och det producerar kod du faktiskt kan leverera.

figmascope genererar det paketet klientsidigt, helt i din webbläsare. Ingen backend, ingen uppladdning, ingen mellanhandstjänst med åtkomst till dina Figma-filer. Den här guiden går igenom hela Figma → figmascope → Claude Code-arbetsflödet med riktiga CLI-exempel. Om du använder Cursor istället för Claude Code, se Figma till Cursor för det Cursor-specifika arbetsflödet.

Förutsättningar

Exportera kontextpaketet från figmascope

Öppna figmascope.dev, klistra in Figma fil-URL och din token, klicka på Exportera kontextpaket. Du får en zip som figmascope-ABC123.zip.

Packa upp det i en design/-katalog i ditt projekt:

unzip figmascope-ABC123.zip -d design/

Det resulterande trädet:

design/
├── CONTEXT.md
├── tokens.json
├── _meta.json
├── components/
│   └── inventory.json
├── screens/
│   ├── Home.json
│   ├── Home.png
│   ├── Settings.json
│   └── Settings.png
└── strings.json

Committa det till versionshanteringen. Manifestet _meta.json registrerar exporttidsstämpeln och Figma-filnyckeln, så teamet alltid vet vilken version av designen paketet motsvarar.

Hur Claude Code läser kontextpaketet

CONTEXT.md är ingångspunkten. Det är ett strukturerat specdokument som berättar för agenten:

Claude Code läser filer innan den agerar. Att starta en session med CONTEXT.md orienterar agenten innan den rör någon skärm-JSON.

Starta en Claude Code-session

Det mest direkta tillvägagångssättet — starta claude i din projektrot och peka den mot designkatalogen:

claude

Sedan i den interaktiva sessionen:

Läs design/CONTEXT.md, implementera sedan Hem-skärmen som en React-komponent.

Använd:
- design/tokens.json för alla designtokenvärden
- design/screens/Home.json för layoutträdet
- design/screens/Home.png som visuell referens
- design/strings.json för all text (använd punktnotationsnycklar som i18n-identifierare)

Begränsningar:
- Tailwind CSS för stilar, mappa tokenvärden till temakonfiguration
- TypeScript
- Inga hårdkodade färg- eller avståndsvärden — alla värden måste komma från tokens

Claude Code läser filerna sekventiellt, löser tokenreferenser från IR:en och genererar en komponent som återspeglar ditt faktiska designsystem snarare än en generisk approximation.

Engångsprompts med --print

För CI-pipelines eller skriptad kodgenerering, använd det icke-interaktiva --print-läget:

claude --print "$(cat <<'EOF'
Läs design/CONTEXT.md. Implementera sedan design/screens/Home.json som
src/screens/Home.tsx (React + Tailwind + TypeScript).
- Alla tokens från design/tokens.json
- Alla strängar från design/strings.json med punktnotationsnycklar
- Visuell referens: design/screens/Home.png
- Komponentnamn från design/components/inventory.json
EOF
)"

Heredoc håller prompten läsbar i shell-skript. --print skriver Claude's svar till stdout, så du kan pipea det eller fånga det efter behov.

Claude Code fungerar bäst när du ger den en skärm i taget. Layout-IR för en enda skärm är redan tät; håll sessionerna fokuserade.

Flerskärmsprojekt — ett förnuftigt tillvägagångssätt

För filer med många ramar, arbeta inkrementellt. En loop över skärmfiler:

for screen_json in design/screens/*.json; do
  screen=$(basename "$screen_json" .json)
  echo "Implementerar $screen..."
  claude --print "$(cat <<EOF
Läs design/CONTEXT.md en gång. Implementera sedan design/screens/${screen}.json
som src/screens/${screen}.tsx. Referera design/screens/${screen}.png
för visuell noggrannhet. Använd tokens från design/tokens.json.
Återimplementera inte komponenter som redan finns i src/components/.
EOF
)"
done

Instruktionen "återimplementera inte komponenter som redan finns" spelar roll när komponentinventeringen är delad. Claude Code kan läsa design/components/inventory.json för att identifiera vilka komponenter som redan är implementerade och importera dem snarare än att regenerera dem.

Koppla upp designtokens

tokens.json exporterad av figmascope använder en W3C-liknande nästlad struktur med $value- och $type-fält:

{
  "color": {
    "surface":    { "$value": "#f6f2ea", "$type": "color" },
    "ink":        { "$value": "#1f1d1a", "$type": "color" },
    "accent":     { "$value": "#d96a3a", "$type": "color" }
  },
  "spacing": {
    "1": { "$value": "4px",  "$type": "dimension" },
    "2": { "$value": "8px",  "$type": "dimension" },
    "4": { "$value": "16px", "$type": "dimension" },
    "8": { "$value": "32px", "$type": "dimension" }
  },
  "typography": {
    "body": {
      "fontFamily": { "$value": "Inter",  "$type": "fontFamily" },
      "fontSize":   { "$value": "14px",   "$type": "dimension" },
      "lineHeight": { "$value": 1.45,     "$type": "number" }
    }
  }
}

Be Claude Code att generera ett tailwind.config.ts-temaförlängningsblock från den här filen som ett första steg, innan du implementerar några skärmar. På det sättet kan alla efterföljande skärmimplementationer använda Tailwind-tokenaliaserna konsekvent:

claude --print "Läs design/tokens.json och generera ett tailwind.config.ts
theme.extend-block. Mappa färgtokens till theme.extend.colors,
avståndstokens till theme.extend.spacing, och typografi till
theme.extend.fontFamily / fontSize. Mata bara ut konfigurationsobjektet."

Se Design Token Export för AI-agenter för en djupdykning i tokenformatet och frekvensinfererande reserven figmascope använder när Figma Variables inte är konfigurerade.

Hantera stränglager

Varje textnod i Figma-filen får en plats i strings.json. Nycklarna använder punktnotation härledd från ramhierarkin:

{
  "home.hero.title":        "Everything you need",
  "home.hero.subtitle":    "Ship faster with structured context",
  "home.cta.primary":      "Get started",
  "settings.account.heading": "Account settings"
}

Instruera Claude Code att använda dessa nycklar som i18n-identifierare. Istället för att hårdkoda strängen "Everything you need" i JSX anropar den genererade komponenten t('home.hero.title') (eller din i18n-biblioteksmotsvarighet). Resursfilen finns redan i strings.json — du behöver bara importera den eller koppla den till ditt i18n-upplägg.

Om figmascope upptäcker en kollision — två noder som hashar till samma nyckel — emitterar det en strings-collision-varning i _meta.json och lägger till ett numeriskt suffix för att disambiguera. Kontrollera _meta.json innan du startar en session så att du vet vad du kan förvänta dig.

CLAUDE.md-integration

Om du använder en CLAUDE.md-projektkontextfil, lägg till ett kort avsnitt som pekar agenten mot designkatalogen. Detta fungerar bra med tillvägagångssättet som beskrivs i AI Design Handoff och kompletterar varför figmascope skiljer sig från Figma inspector-plugins.

Lägg till ett designavsnitt som det här:

## Designkontext

Designtokens, layout-IR, referensrenderingar och strängar finns i `design/`.
Läs alltid `design/CONTEXT.md` innan du implementerar någon skärm.
Tokenvärden finns i `design/tokens.json` — hårdkoda aldrig färg eller avstånd.
Kanoniska komponentnamn finns i `design/components/inventory.json`.

Det betyder att varje Claude Code-session i projektet automatiskt har designkontexten som en del av sin arbetskunskap, utan att du behöver upprepa det i varje prompt.

Vad agenten faktiskt gör rätt

Med strukturerad kontext får Claude Code tillförlitligt rätt:

Vad som fortfarande kräver mänsklig granskning: interaktionstillstånd (hover, fokus, aktiv) som inte är synliga i statiska Figma-ramar, animationstiming och responsiva brytpunkter som inte explicit designades i filen. IR:en fångar statisk layout; dynamiskt beteende är utanför räckvidden.

Använda --dangerously-skip-permissions i kontrollerade miljöer

För automatiserade pipelines där du vill att Claude Code ska fungera utan interaktiva godkännandeuppmaningar — till exempel i ett CI-steg som genererar komponentstubbar efter en designuppdatering — kan du använda --dangerously-skip-permissions. Lämpligt bara i sandboxade miljöer utan produktionsautentiseringsuppgifter.

claude --dangerously-skip-permissions --print "$(cat <<'EOF'
Läs design/CONTEXT.md. Generera komponentstubbar för alla komponenter
i design/components/inventory.json som inte redan finns i src/components/.
Använd TypeScript + React funktionell komponentformat. Inkludera en TODO-kommentar
för varje komponent som refererar till relevant skärm-JSON.
EOF
)"

I produktionsutvecklingsarbetsflöden, låt behörigheter vara interaktiva. Uppmaningarna finns av goda skäl — Claude Code kan och kommer att skriva filer, och du vill veta vilka innan det gör det.

Kontrollera exportvarningar innan du promptar

figmascope emitterar varningar till _meta.json för förhållanden som kan påverka utdatakvaliteten. Kontrollera dem innan du startar en Claude Code-session:

python3 -c "
import json
meta = json.load(open('design/_meta.json'))
for w in meta.get('warnings', []):
    print(f\"{w['code']}: {w['message']}\")
print(f\"Ramar exporterade: {meta['frameCount']}\")
print(f\"Tokens-källa: {meta.get('tokensSource', 'variables')}\")
"

Två varningar att uppmärksamma:

Android- och iOS-arbetsflöden

Claude Code är inte begränsad till webbramverk. Kontextpaketet är ramverksoberoende — layout-IR och tokens är data, inte CSS. För Jetpack Compose:

claude --print "$(cat <<'EOF'
Läs design/CONTEXT.md och design/tokens.json.

Implementera design/screens/Home.json som en Jetpack Compose-skärm.
- Mappa färgtokens till ett MaterialTheme ColorScheme
- Mappa avståndstokens till Dp-värden (ta bort 'px'-suffix, använd .dp)
- Mappa typografitokens till MaterialTheme.typography
- Använd komponentnamnen från design/components/inventory.json som Composable-namn
- Referera design/screens/Home.png för visuell noggrannhet
EOF
)"

IR:ens stack-noder mappas naturligt till Column (riktning: vertikal) och Row (riktning: horisontell) i Compose. leaf-noder med type: "text" blir Text-composables; type: "image" blir Image eller en platshållare. Se Jetpack Compose från Figma för det fullständiga mönstret.

Versionshantera designpaketet

Behandla design/-katalogen som vilket annat projektberoende som helst. När designen förändras avsevärt, exportera om från figmascope.dev, committa och notera förändringen i PR:en:

# Kontrollera när paketet senast exporterades vs när Figma-filen senast ändrades
python3 -c "
import json
from datetime import datetime
meta = json.load(open('design/_meta.json'))
exported = datetime.fromisoformat(meta['exportedAt'].replace('Z', '+00:00'))
modified = datetime.fromisoformat(meta['figmaLastModified'].replace('Z', '+00:00'))
delta = modified - exported
if delta.total_seconds() > 0:
    print(f'VARNING: Figma-filen ändrades {delta} efter senaste export')
else:
    print('Paketet är aktuellt')
"

Ett föråldrat paket innebär att agenten arbetar från en föråldrad design. Tidsstämpelkontrollen fångar detta innan du spenderar tid på en kodgenerationssession baserad på ersatta specifikationer.