用途:在设计与代码之间建立双向桥梁,让 Figma 与代码库中的设计令牌保持同步。项目内 DTCG 格式的 .claude/skills/_ux-ui-shared/tokens/*.json 是上游来源,Figma 为下游同步目标。
主要能力:把三层令牌层级(Primitives→Semantic→Component)映射为三个 Figma 集合并建立别名;将暗色/品牌/密度等主题映射为 Figma Modes;支持两个方向的同步——从 Figma 拉取用 scripts/figma/figma-pull.mjs,将令牌推送到 Variables 则用于镜像代码。若连接了 Figma MCP 服务器,可优先使用其工具,读取画板/变量/截图到代码、由令牌构建变量与组件,或把 Code Connect 接到 components/*。还可检查组件对等性,确认 Figma 变体与属性覆盖项目的变体、尺寸与 8 种状态并标记缺口。
使用方式:先阅读 .claude/skills/_ux-ui-shared/workflows/figma-integration.md(令牌与变量映射、同步方向、MCP 用法、对等性);只选择一个权威同步方向,另一侧为生成结果,不要两边手工修改;构建 UI 时改用 shadcn-ui-design。
验证标准:每个 Figma 变量都能解析到令牌文件中的某个令牌,设计中不出现孤立颜色值;只有单一权威方向且生成侧无手工修改;变体集覆盖全部 8 种状态,Code Connect 指向正确的 components/* 文件;每次导入令牌后运行 python3 .claude/skills/_ux-ui-shared/scripts/validate_tokens.py 且通过。
限制:资料未提供具体的收费、价格、支持的平台范围或更详细的使用步骤。