code-connect-components

作者： figma

使用Code Connect在Figma设计组件与代码实现之间建立双向链接。需要Figma MCP服务器连接，以及组织版或企业版计划中已发布的组件。自动识别Figma选中内容中未映射的组件，然后按名称、结构和属性扫描代码库以查找匹配的代码组件。在创建映射前将匹配的组件呈现给您审阅，允许选择性接受或拒绝。支持多个...

npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components

下载 ZIP GitHub

来自 figma 的更多技能

video-interaction-mapper

当用户要求分析UI屏幕录制并将交互状态映射到Figma时，应使用此技能。触发请求如“将视频…

figma-code-connect

创建并维护将Figma组件映射到代码片段的Figma Code Connect模板文件。当用户提及Code Connect、Figma组件…时使用。

create-design-system-rules

为你的项目定制设计系统规则，确保Figma到代码实现的一致性。生成项目特定的组件组织、样式、设计令牌和资源处理约定，指导AI代理生成一致的代码。支持三种规则文件格式：适用于Claude Code的CLAUDE.md、适用于Codex CLI的AGENTS.md，以及适用于Cursor的.cursor/rules/figma-design-system.mdc。需要连接Figma MCP服务器并进行代码库分析，以在规则生成前发现现有模式...

figma-implement-motion

将Figma中的动效和动画转化为可用于生产的应用代码。在实现Figma设计中的动画/动效时使用——用户提及…

SwiftUI ↔ Figma 翻译。当用户提到 Swift、SwiftUI、iOS、iPhone 或 iPad 时使用——无论是哪个方向——将 Figma 设计翻译成……

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

该技能帮助智能体在幻灯片场景中使用Figma的use_figma MCP工具。可与figma-use配合使用，后者提供了使用该工具的基础上下文…

figma-use-figjam

该技能帮助智能体在 FigJam 环境中使用 Figma 的 use_figma MCP 工具。可与 figma-use 配合使用，后者提供了使用该工具的基础上下文……