extracting-design-system

Extracting Design System

Overview

Single-entry-point skill for Bridge's initial setup AND subsequent re-extracts. Orchestrates the complete flow from empty repo to "docs shipped" via 8 procedural steps. Uses the setup-orchestrator module (Bash tool) + MCP tools (figma-console-mcp) + user prompts.

When to Use

Invoke when the user:

• says "setup bridge", "setup", "init", "extract", "extract DS", "onboard", "build KB", "refresh registries"
• has just installed the Bridge plugin and wants to bootstrap a repo
• wants to re-extract after an upstream Figma change

Do NOT use if:

• the user is designing a component — use generating-figma-design
• the user is processing manual corrections — use learning-from-corrections
• the user is shipping a design — use shipping-and-archiving

Procedure

Before starting, load:

• references/transport-adapter.md (repo-root) — for MCP transport detection

Step 1 — Pre-flight checks

Run via Bash tool:

node --version
git rev-parse --is-inside-work-tree
gh auth status

Then Node:

const { runPreflight } = require("/path/to/node_modules/@noemuch/bridge-ds/dist/lib/cli/setup-orchestrator.js");
const { gitRemote, figmaKey } = await runPreflight();

Report to user in conversation:

✓ Node 20 · git repo · gh auth OK
📍 Detected git remote: {gitRemote or "(none)"}
📍 Detected Figma URL in README: {figmaKey or "(none)"}

Step 2 — Ask for Figma file URL (skip if auto-detected and user confirms)

If figmaKey is null from pre-flight:

Paste the Figma DS file URL:

Extract the key via the regex figma\.com\/(?:design|file)\/([a-zA-Z0-9_-]+).

Step 3 — Ask for Figma Personal Access Token

IMPORTANT: token must be stdin-masked. Use Claude Code's native password prompt (AskUserQuestion tool with type=password if available, otherwise instruct the user via terminal).

Paste your Figma PAT (hidden, never logged).
Press Enter to skip — we'll use the plugin path (interactive extraction only).