Agent skill

Extracting Design System

Install Extracting Design System

skills CLI

$ npx skills add noemuch/bridge --skill extracting-design-system -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install noemuch/bridge extracting-design-system --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/noemuch/bridge.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/extracting-design-system .claude/skills/extracting-design-system && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "extracting-design-system" agent skill from https://github.com/noemuch/bridge/tree/main/skills/extracting-design-system into .claude/skills/extracting-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extracting-design-system", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/noemuch/bridge/tree/main/skills/extracting-design-system

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add noemuch/bridge --skill extracting-design-system -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install noemuch/bridge extracting-design-system --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/noemuch/bridge.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/extracting-design-system .agents/skills/extracting-design-system && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "extracting-design-system" agent skill from https://github.com/noemuch/bridge/tree/main/skills/extracting-design-system into .agents/skills/extracting-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extracting-design-system", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add noemuch/bridge --skill extracting-design-system -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install noemuch/bridge extracting-design-system --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/noemuch/bridge.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/extracting-design-system .cursor/skills/extracting-design-system && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "extracting-design-system" agent skill from https://github.com/noemuch/bridge/tree/main/skills/extracting-design-system into .cursor/skills/extracting-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extracting-design-system", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/noemuch/bridge.git --path skills/extracting-design-system

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add noemuch/bridge --skill extracting-design-system -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install noemuch/bridge extracting-design-system --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/noemuch/bridge.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/extracting-design-system .gemini/skills/extracting-design-system && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "extracting-design-system" agent skill from https://github.com/noemuch/bridge/tree/main/skills/extracting-design-system into .gemini/skills/extracting-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extracting-design-system", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install noemuch/bridge extracting-design-system

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add noemuch/bridge --skill extracting-design-system -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/noemuch/bridge.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/extracting-design-system .github/skills/extracting-design-system && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "extracting-design-system" agent skill from https://github.com/noemuch/bridge/tree/main/skills/extracting-design-system into .github/skills/extracting-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extracting-design-system", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add noemuch/bridge --skill extracting-design-system -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install noemuch/bridge extracting-design-system --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/noemuch/bridge.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/extracting-design-system .opencode/skills/extracting-design-system && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "extracting-design-system" agent skill from https://github.com/noemuch/bridge/tree/main/skills/extracting-design-system into .opencode/skills/extracting-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extracting-design-system", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: extracting-design-system
GitHub stars: 156
Token cost: ~1.8k tokens
SKILL.md length: 540 words
Files: 1
Skills in repo: 5
Repo updated: Jun 3, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Works in 8 steps: Pre-flight checks → Ask for Figma file URL (skip if… → Ask for Figma Personal Access Token → …
The user says setup
SKILL.md covers Overview, When to Use, Procedure and Red Flags, plus 2 more sections
Calls git, node and gh; reaches github.com; needs FIGMA_KEY and FIGMA_TOKEN

What it does

Extracting Design System is an agent skill from noemuch/bridge. Use when the user says "setup", "setup bridge", "extract", "extract DS", "onboard", "build knowledge base", "initialize bridge", or is starting Bridge in a project for the first time. Handles the complete bootstrap: pre-flight checks, scaffolding (docs.config.yaml, cron workflow, .bridge/mcp.json), Figma token management (stdin-only), DS extraction via MCP (preferred) or REST (fallback), guide generation, and first commit proposal.

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Design systems, Scheduled and recurring tasks and Project scaffolding. It works with Figma, Model Context Protocol and Bash. The repository describes itself as: Design in Figma with Claude Code. Bridge connects your terminal to the Figma Plugin API via WebSocket. The licence is MIT.

When your agent uses it

The user says setup
Build knowledge base
Initialize bridge
Is starting Bridge in a project for the first time

Example prompts

“setup bridge”
“extract”
“extract DS”
“/extracting-design-system”

Requirements

A credential in FIGMA_KEY
A credential in FIGMA_TOKEN

Workflow steps

8 steps, taken from the step headings in SKILL.md.

Pre-flight checks
Ask for Figma file URL (skip if auto-detected and user confirms)
Ask for Figma Personal Access Token
Scaffold the repo
Store token in GitHub Secrets (if provided)
Detect transport + extract via MCP (preferred)
Validate extracted data + write registries
Propose initial commit

What it can do on your machine

Read from SKILL.md and the folder at commit 414977f. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- git
- node
- gh
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- github.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names these keys or tokens, usually read from environment variables:
- FIGMA_KEY
- FIGMA_TOKEN
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Extracting Design System loads about 1.8k tokens when it runs. Until then it costs about 115 tokens; SKILL.md has 540 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~115
When it runs · the whole SKILL.md, loaded when a task matches: ~1.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from noemuch/bridge at commit 414977f, republished under its MIT licence (© noemuch). 540 words, ~1,778 tokens.

Download SKILL.mdSave it as .claude/skills/extracting-design-system/SKILL.md (or your agent's skills folder).

name: extracting-design-system
description: Use when the user says "setup", "setup bridge", "extract", "extract DS", "onboard", "build knowledge base", "initialize bridge", or is starting Bridge in a project for the first time. Handles the complete bootstrap: pre-flight checks, scaffolding (docs.config.yaml, cron workflow, .bridge/mcp.json), Figma token management (stdin-only), DS extraction via MCP (preferred) or REST (fallback), guide generation, and first commit proposal.

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:

bash

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).

If provided:

Validate via validateFigmaToken(token) — if 401, abort
Probe via probeVariablesEndpoint(token, fileKey) — note plan tier

If skipped: plan to use MCP path only (no cron support until token added later).

Step 4 — Scaffold the repo

Via Bash:

bash

node -e "
const { scaffold } = require('@noemuch/bridge-ds/dist/lib/cli/setup-orchestrator.js');
(async () => {
  const created = await scaffold({
    dsName: '$DS_NAME',
    figmaFileKey: '$FIGMA_KEY',
    cronCadence: 'daily',
    cronTime: '06:00',
  });
  console.log(JSON.stringify(created, null, 2));
})();
"

Report:

✓ Scaffolded files/directories:
  - bridge-ds/knowledge-base/registries/
  - bridge-ds/knowledge-base/recipes/
  - .bridge/
  - docs.config.yaml
  - .github/workflows/bridge-kb-cron.yml

Step 5 — Store token in GitHub Secrets (if provided)

Via Bash:

bash

node -e "
const { storeTokenInGitHubSecret } = require('@noemuch/bridge-ds/dist/lib/cli/setup-orchestrator.js');
(async () => {
  const result = await storeTokenInGitHubSecret({
    token: process.env._FIGMA_TOKEN_TEMP,
    repo: '$GITHUB_REPO',
    fileKey: '$FIGMA_KEY',
  });
  console.log(JSON.stringify(result));
})();
" 2>&1

Where _FIGMA_TOKEN_TEMP is set for the duration of this single command invocation ONLY, then unset.

Step 6 — Detect transport + extract via MCP (preferred)

Per references/transport-adapter.md:

figma_get_status via MCP → if available and setup.valid: true, use console transport
Otherwise, fall back to REST (headless) with graceful 403 handling for non-Enterprise

During extract, Claude Code should display progress events from the MCP tool calls. Pattern:

After each figma_get_design_system_kit / figma_get_variables / figma_search_components batch, report to user:
```
⠋ Extracted: 42/156 components · 130/856 variables · 12/49 text styles
```

Show full SKILL.md (232 more words)Show less

Step 7 — Validate extracted data + write registries

Sample import probe (3–5 keys per registry type). If any fail, re-extract the failing entries (max 3 attempts).

Write to bridge-ds/knowledge-base/registries/{components,variables,text-styles,icons,logos,illustrations}.json.

Report:

✓ Registries validated. Keys verified.
  - Components: 156 (100%)
  - Variables: 856 (100%)
  - ...

Step 8 — Propose initial commit

Propose initial commit? [Y/n]

If Y, Bash:

bash

git add .
git commit -m "feat: bootstrap Bridge KB via setup bridge"
git push origin $(git rev-parse --abbrev-ref HEAD)

Finally, propose first cron run:

Trigger first cron run now to verify the workflow? [Y/n]

If Y, Bash:

bash

gh workflow run bridge-kb-cron.yml --repo $GITHUB_REPO
gh run watch

Final report

✨ Setup complete in Xm Ys.

Your DS:
  Repo:      https://github.com/{repo}
  KB:        bridge-ds/knowledge-base/registries/
  Cron:      .github/workflows/bridge-kb-cron.yml (daily sync)

Next steps:
  • Say "make <description>" to design a new component/screen
  • Say "fix" after manual Figma edits
  • Say "done" to ship + extract recipes
  • Daily cron runs at 06:00 UTC automatically

<HARD-GATE>
NEVER write a registry entry without a `key` field (hex hash for
components/icons/logos; name path for variables).

NEVER mark setup complete without validating a sample of keys (3–5 per registry) via a live import probe.

NEVER echo or log the Figma PAT. Token goes from stdin → validate → setGitHubSecret (stdin pipe to gh CLI). Wipe buffer afterward.

NEVER use an interactive CLI wizard. Bridge is plugin-only — use setup bridge via Claude Code. </HARD-GATE>

Red Flags

See the full catalog at references/red-flags-catalog.md (repo-root).

Top flags for this skill:

"I'll skip the key validation, the names look fine" → Names are not keys. Validate by import.
"I'll use nodeIds — they're easier to copy" → NodeIds are session-scoped. Keys are persistent.
"I'll export FIGMA_TOKEN in the shell first" → Never. stdin-only via setGitHubSecret.

Verification

Gate A / B — not applicable (setup doesn't compile or execute designs). Internal gates: key-validation, schema conformance, token-pipe discipline.

Evidence to surface: per-registry entry counts, key-validation probe results, scaffold file list, token mask (never full value).

Skill-specific references

lib/cli/setup-orchestrator.ts — shared orchestration logic
lib/cli/token-handling.ts — stdin pipe + validate
lib/kb/auto-detect.ts — git remote + Figma URL detection
references/transport-adapter.md (repo-root) — MCP vs REST decision

Files

Just SKILL.md in skills/extracting-design-system of noemuch/bridge.

Open the folder on GitHubat commit 414977f

Compare with similar skills

Extracting Design System next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Extracting Design System compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Extracting Design System this skillnoemuch/bridge	156	—	~1.8k	Automated safety check: Pass	MIT	4 mo ago
Refero Designreferodesign/refero_skill	297	—	~5.3k	Automated safety check: Pass	MIT	1 mo ago
Figma Buildawdr74100/figwright	995	—	~2k	Automated safety check: Pass	MIT	yesterday
Igniteui Angular Generate From Image DesignIgniteUI/igniteui-angular	599	—	~4.7k	Automated safety check: Pass	MIT	today
Igniteui Angular Figma To AppIgniteUI/igniteui-angular	599	—	~6.4k	Automated safety check: Pass	MIT	today
Metadata Schema Generatormurphytrueman/design-system-ops	206	—	~5.4k	Automated safety check: Pass	MIT	15 days ago

Similar skills

Refero Design
referodesign/refero_skill
Primary/default skill for UI design, product design, web design, landing pages, dashboards, product screens, redesigns, visual polish, frontend/CSS styling, design systems, components, responsive…
297 GitHub stars~5.3k tokensUpdated 1 mo ago
Frontend & DesignAuto-check passed
Figma Build
awdr74100/figwright
Build a Figma design from code or a description — the reverse of figma-codegen.
995 GitHub stars~2k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Igniteui Angular Generate From Image Design
IgniteUI/igniteui-angular
Implements Angular application views from design images using Ignite UI Angular components.
599 GitHub stars~4.7k tokensUpdated today
Frontend & DesignAuto-check passed
Igniteui Angular Figma To App
IgniteUI/igniteui-angular
Builds Angular views from Figma designs with Ignite UI for Angular, supporting Indigo.Design kits, third-party kits, and plain frames.
599 GitHub stars~6.4k tokensUpdated today
Frontend & DesignAuto-check passed
Metadata Schema Generator
murphytrueman/design-system-ops
Generate per-component JSON metadata files (.ai/metadata/) from source: props, behaviour, composition, a11y contract, prohibited prop combinations.
206 GitHub stars~5.4k tokensUpdated 15 days ago
Frontend & DesignAuto-check passed
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
65k GitHub starsUsed in 4 repos~4.4k tokens
Frontend & DesignAuto-check passed

More from noemuch/bridge

Generating Figma Design
noemuch/bridge
A skill your agent uses when the user requests to design, create, build, generate, or make a new Figma component or screen — including phrases like "make a button", "design a settings page", "build…
156 GitHub stars~4.6k tokensUpdated 4 mo ago
Auto-check passed
Learning From Corrections
noemuch/bridge
A skill your agent uses when the user says they adjusted the design in Figma, mentions "fix", "correct", "learn from", "I changed", "diff", "what changed", or wants the system to incorporate manual…
156 GitHub stars~2.4k tokensUpdated 4 mo ago
Auto-check passed
Shipping And Archiving
noemuch/bridge
A skill your agent uses when the user says "done", "ship it", "finish", "complete", "archive", or otherwise indicates the current design is ready to be shipped.
156 GitHub stars~1.7k tokensUpdated 4 mo ago
Auto-check passed
Using Bridge
noemuch/bridge
A skill your agent uses when any Bridge command is invoked (make, fix, done, setup, drop, status) or any Figma / design-system / compiler / Bridge workflow topic is raised.
156 GitHub stars~1.4k tokensUpdated 4 mo ago
Auto-check passed

Works with

Questions about Extracting Design System

What does Extracting Design System do?

A skill your agent uses when the user says "setup", "setup bridge", "extract", "extract DS", "onboard", "build knowledge base", "initialize bridge", or is starting Bridge in a project for the first…. Extracting Design System is an agent skill from noemuch/bridge. Use when the user says "setup", "setup bridge", "extract", "extract DS", "onboard", "build knowledge base", "initialize bridge", or is starting Bridge in a project for the first time.

When should I use Extracting Design System?

Extracting Design System fits situations like: the user says setup; build knowledge base; initialize bridge; is starting Bridge in a project for the first time.

How do I install Extracting Design System in Claude Code?

Run `npx skills add noemuch/bridge --skill extracting-design-system -a claude-code`. Or copy the skill folder (skills/extracting-design-system in noemuch/bridge) into .claude/skills/extracting-design-system in your project. Claude Code loads it when a task matches its description.

How do I install Extracting Design System in Codex?

Run `npx skills add noemuch/bridge --skill extracting-design-system -a codex`. Or copy the skill folder (skills/extracting-design-system in noemuch/bridge) into .agents/skills/extracting-design-system in your project. Codex loads it when a task matches its description.

Can I use Extracting Design System in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add noemuch/bridge --skill extracting-design-system -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/extracting-design-system, .gemini/skills/extracting-design-system, .github/skills/extracting-design-system and .opencode/skills/extracting-design-system in your project.

What does Extracting Design System need to run?

Going by SKILL.md and its folder, Extracting Design System needs the command-line tools its instructions call (git, node and gh) and credentials named FIGMA_KEY and FIGMA_TOKEN. Our summary lists: A credential in FIGMA_KEY; A credential in FIGMA_TOKEN.

Does Extracting Design System access the network?

SKILL.md names 1 domain. In commands or code: github.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Extracting Design System safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Extracting Design System use?

Extracting Design System is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Extracting Design System use?

About 1.8k tokens (SKILL.md is roughly 7.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Extracting Design System?

Skills that share tags, products or a category with Extracting Design System: Refero Design (referodesign/refero_skill, 297 stars), Figma Build (awdr74100/figwright, 995 stars), Igniteui Angular Generate From Image Design (IgniteUI/igniteui-angular, 599 stars) and Igniteui Angular Figma To App (IgniteUI/igniteui-angular, 599 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Extracting Design System?

noemuch (a GitHub user) maintains it in noemuch/bridge, which has 156 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on June 3, 2026.

Source: noemuch/bridge on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Extracting Design System

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Extracting Design System

Overview

When to Use

Procedure

Step 1 — Pre-flight checks

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

Step 3 — Ask for Figma Personal Access Token

Step 4 — Scaffold the repo

Step 5 — Store token in GitHub Secrets (if provided)

Step 6 — Detect transport + extract via MCP (preferred)

Step 7 — Validate extracted data + write registries

Step 8 — Propose initial commit

Final report

Red Flags

Verification

Skill-specific references

Files

Compare with similar skills

Similar skills

More from noemuch/bridge

Related

Questions about Extracting Design System