bootstrap-from-figma

bootstrap-from-figma — seed a project's visual theme from Figma

When to trigger

• The user pastes a figma.com/(design|file|board|make|slides)/... URL and says "bootstrap" / "start a project from this" / "extract the theme".
• The user copied a prompt from the workspace's Bootstrap from Figma banner (LibraryPage top). That prompt names this skill explicitly and includes the URL + target preset + writeback endpoint.

Do not trigger this skill for:

• Modifying an already-imported theme (use theme-editor in the workspace).
• Writing pages — that's new-design. This skill stops at the theme.
• Suggesting patterns — patterns are produced exclusively via /distill-patterns-from-prd (from a PRD) or /add-pattern (conversational or manual). Visual theme and patterns are intentionally decoupled.

Output contract (read first)

Produce a JSON object matching BootstrapPayload in packages/dev-server/src/handlers/bootstrap.ts:

{
  "source": { "kind": "figma", "url": "...", "fileKey": "...", "nodeId": "..." },
  "extractedAt": "2026-05-11T12:00:00.000Z",
  "theme": {
    "presetName": "mobile",
    "colors": {
      "primary": "#0d8ce9",
      "secondary": "#00cfff",
      "tertiary": "#e56e35",
      "success": "#22c55e",
      "warning": "#e56e35",
      "danger": "#da342e",
      "dark": "#1f2024",
      "medium": "#90909a",
      "light": "#dbd9e0"
    },
    "spacing": { "xs": "4px", "sm": "8px", "md": "12px", "lg": "16px", "xl": "24px", "2xl": "32px" }
  },
  "notes": "Figma uses a single 'brand' token — mapped to primary; warning had no dedicated token, reused tertiary."
}

The color keys must match the preset's semanticColors exactly — for preset-mobile: primary / secondary / tertiary / success / warning / danger / dark / medium / light.

The spacing keys must match baseline — for preset-mobile: xs / sm / md / lg / xl / 2xl.

Keys outside these sets are dropped by the workspace store (with a console warning).

Execution flow