用途:在设计工具 Figma 与代码仓库之间建立双向桥梁,让两者保持同步。令牌 JSON 为唯一事实来源,Figma Variables 只是它的镜像。
主要能力:把三层令牌层级映射为三个 Figma 集合(Primitives → Semantic → Component)并建立别名;把暗色、品牌、密度等主题映射为 Figma Modes(见 tokens/theming.json);选择一个权威同步方向(代码→Figma 发布,或通过 Tokens Studio / Variables REST API 的 Figma→代码提取),另一侧为生成结果,禁止两侧手改;如果连接了 Figma MCP 服务器,可优先使用其工具与技能(先加载其必需的前置技能),用于把框架、变量、截图读入代码、用令牌构建 Variables/组件,或把 Code Connect 接入 components/*;检查组件对等性,Figma 变体与属性需覆盖代码的变体、尺寸与 8 种状态,并标记缺口。
使用方式:先检查工具包是否存在,运行 ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING。若结果为 KIT_MISSING,说明只安装了技能文件夹(即 npx skills add 的结果),应直接告知用户并指向 npx ux-ui-agent-skills init 或插件安装,然后停止,不得猜测无法打开文件的内容。随后阅读 workflows/figma-integration.md 了解令牌与变量的映射、同步方向、MCP 用法与一致性。
完成标准:每个 Figma Variable 都对应 tokens/.json 中的一个令牌(设计里不得出现孤立色值);只有一个权威方向,生成侧零手改;变体集覆盖全部 8 种状态;Code Connect 指向正确的 components/ 文件;导入令牌后运行 python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py 并通过。
限制:资料未提供收费、价格、支持平台与具体效果等信息,暂未提供。