extracting-design-syst…
Use when the user says "setup", "setup bridge", "extract", "extract DS", "onboard", "build…
Use 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 Figma edits back into the spec. Diffs the current Figma state against the last snapshot, classifies
$ npx -y skills add noemuch/bridge --skill learning-from-corrections --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/learning-from-correctionsContext preview
The summary Claude sees to decide when to auto-load this skill.
Use 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 Figma edits back into the spec. Diffs the current Figma state against the last snapshot, classifies
name: learning-from-corrections description: Use 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 Figma edits back into the spec. Diffs the current Figma state against the last snapshot, classifies each change as a DS learning or a hardcoded flag, persists learnings, and patches the active recipe.
{{ACTIVE_RULES}}
Closes the feedback loop from manual Figma edits back into Bridge's knowledge base. Diffs the live Figma state against the saved snapshot, classifies each correction as a **LEARNING** (DS-compliant → persisted) or a **FLAG** (hardcoded → surfaced), updates `learnings.json`, and auto-patches the active recipe when eligible.
Invoke when the user:
Do NOT use if:
**Before starting, load:**
---
Run a node tree extraction script via Plugin API execution, using the `rootNodeId` and `fileKey` from the snapshot's `meta`.
**Console transport:**
figma_execute({
code: "return (async function() { ... extraction script with rootNodeId ... })();"
})**Official transport:**
use_figma({
fileKey: "{fileKey}",
description: "Re-extract node tree for fix diff",
code: "... extraction script without IIFE wrapper ..."
})The extraction script walks the node tree and captures: `id`, `name`, `type`, `layoutMode`, `itemSpacing`, `padding*`, `cornerRadius`, `fills`, `boundVariables`, `width`, `height`, `componentKey`, `children`.
Compare the two JSON trees in context. Claude performs this comparison directly.
**Match strategy:**
**Ignore:**
For each detected change:
Does the new value use a DS token (bound variable)? -> YES: Classify as LEARNING (DS-compliant correction) -> NO (hardcoded hex, raw px, unbound): Classify as FLAG (needs attention)
**Token resolution:** Check `boundVariables` in the current tree. If the property has a bound variable ID, resolve it against `registries/variables.json` to get the token name.
For each LEARNING-classified change:
1. **Determine context:**
2. **Check for existing learning:** Search `learnings.json` for a learning with matching `context` + `change.property` + `change.to.token`
3. **Generate rule:** Write a human-readable rule describing the preference (e.g., "For settings screens, cards use spacing/medium (not large)")
4. **Check promotion:** After updating signals, check if any contextual learning qualifies for global promotion:
For each FLAG-classified change:
1. Create a flag entry with the CSpec name, node description, and what was hardcoded 2. Add to `flags` array in `learnings.json` 3. Suggest the correct DS token if one exists: "Node {name} uses hardcoded {value}. Consider using {$token} instead."
If a recipe was used (check `snapshot.meta.recipe`):
1. Count the number of LEARNING signals from this fix cycle 2. If signals >= 2 for the same recipe context:
If a learning is promoted to **global** scope, scan ALL recipes and patch any where the change applies.
If learnings were extracted (DS-compliant chan
Design in Figma with Claude Code. Bridge connects your terminal to the Figma Plugin API via WebSocket.
Repo: noemuch/bridge
Use when the user says "setup", "setup bridge", "extract", "extract DS", "onboard", "build…
Use when the user requests to design, create, build, generate, or make a new Figma component…
Use when the user says "done", "ship it", "finish", "complete", "archive", or otherwise…
Use when any Bridge command is invoked (make, fix, done, setup, drop, status) or any Figma /…