figma-code-sync
把代码里的设计系统变动同步回 Figma:像 token、间距、图标、颜色和断点等都能从代码推到 Figma,并检查有没有出错或不一致。适合代码改了样式但 Figma 没跟上、要做审计或判断变量与组件变体关系时使用。注意需要配合 Figma MCP server(提供 use_figma、get_metadata 等接口)来做自动对比和回放改动。
▸ 展开 SKILL.md 英文原文
Keep an existing Figma design system aligned with the codebase as the code changes over time — propagating token, spacing, icon, colour or breakpoint changes into Figma and proving nothing broke. Use when code and Figma have drifted, when a design-system change in code must reach Figma (or the reverse), when auditing a Figma file against the code that ships, when deciding between variable modes and component variants, when a per-instance fix in Figma "succeeds" but nothing changes on canvas, when checking whether a Figma component's variants and props still match the code component, when checking contrast on token pairs inside the Figma file, when a Figma page or template is built from raw frames instead of component instances, when deciding which tier a component belongs to or in what order to build a component library, when a template's grid, margins or spacing need to come from tokens, or when building a DTCG token pipeline so the two sides cannot diverge. Complements figma-generate
帮我安装这个 skill:https://raw.githubusercontent.com/zatteogit/design-system-skills/main/skills/figma-code-sync/SKILL.mdcurl -fsSL "https://raw.githubusercontent.com/zatteogit/design-system-skills/main/skills/figma-code-sync/SKILL.md"# Figma ⇄ code sync `figma-generate-library` teaches how to **build** a design system in Figma from a codebase. This skill is about the part after that: the code keeps changing, and Figma has to follow without silently rotting. **Requires the Figma MCP server**, which is what provides `use_figma`, `get_metadata`, `get_code_connect_map` and the rest. That server also ships its own guidance — `figma-use` for the Plugin API mechanics, `figma-generate-library` for building a system, `figma-code-connect` for the mapping — served as MCP resources, so any MCP-capable agent can load them. **Load `figma-use` too**: this skill assumes its mechanics and adds only what it does not cover. ## 0. The pr