implement-design
作者： figma
将Figma设计转化为生产就绪代码，实现像素级视觉保真。需连接Figma MCP服务器，并提供包含文件密钥和节点ID的Figma URL，以提取设计上下文、截图和资源。七步结构化流程：解析URL、获取设计上下文、捕获视觉参考、下载资源、按项目规范转换、实现1:1一致性，并对照Figma验证。优先复用设计系统而非重复创建；将Figma令牌映射至项目设计...
npx skills add https://github.com/figma/mcp-server-guide --skill implement-design来自 figma 的更多技能
video-interaction-mapper
figma
当用户要求分析UI屏幕录制并将交互状态映射到Figma时，应使用此技能。触发请求如“将视频…
figma-code-connect
figma
创建并维护将Figma组件映射到代码片段的Figma Code Connect模板文件。当用户提及Code Connect、Figma组件…时使用。
create-design-system-rules
figma
为你的项目定制设计系统规则，确保Figma到代码实现的一致性。生成项目特定的组件组织、样式、设计令牌和资源处理约定，指导AI代理生成一致的代码。支持三种规则文件格式：适用于Claude Code的CLAUDE.md、适用于Codex CLI的AGENTS.md，以及适用于Cursor的.cursor/rules/figma-design-system.mdc。需要连接Figma MCP服务器并进行代码库分析，以在规则生成前发现现有模式...
figma-implement-motion
figma
将Figma中的动效和动画转化为可用于生产的应用代码。在实现Figma设计中的动画/动效时使用——用户提及…
figma-swiftui
figma
SwiftUI ↔ Figma 翻译。当用户提到 Swift、SwiftUI、iOS、iPhone 或 iPad 时使用——无论是哪个方向——将 Figma 设计翻译成……
figma-use-motion
figma
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
该技能帮助智能体在幻灯片场景中使用Figma的use_figma MCP工具。可与figma-use配合使用，后者提供了使用该工具的基础上下文…
figma-use-figjam
figma
该技能帮助智能体在 FigJam 环境中使用 Figma 的 use_figma MCP 工具。可与 figma-use 配合使用，后者提供了使用该工具的基础上下文……