Recipe: Figma design extraction

import { createRuntime } from '@agentskit/runtime'
import { anthropic } from '@agentskit/adapters'
import { figma } from '@agentskit/tools/integrations'
import { imagePart, textPart } from '@agentskit/core'

const tools = figma({
  apiToken: process.env.FIGMA_API_TOKEN!,
})

const runtime = createRuntime({
  adapter: anthropic({ apiKey: KEY, model: 'claude-sonnet-4-6' }),
  tools,
  systemPrompt: `You QA Figma frames against our design system. For each frame:
- Verify spacing (grid 8px).
- Verify typography roles match Tailwind tokens.
- Flag any free-form colors not in our palette.`,
})

const result = await runtime.run({
  role: 'user',
  content: [
    textPart('QA the latest frames in file abc123, frames "checkout-v2-*"'),
  ],
})

End your reply with a single fenced JSON block:
\`\`\`json
{ "frames": [{ "id": "...", "issues": [{ "rule": "...", "severity": "low|med|high" }] }] }
\`\`\`