Figma 设计生成器
技能 已验证 活跃当任务涉及将应用程序页面、视图或多部分布局转换为 Figma 时，请与 figma-use 结合使用此技能。触发器：“写入 Figma”、“从代码创建到 Figma”、“推送到 Figma 页面”、“将此应用程序/页面构建到 Figma 中”、“创建屏幕”、“在 Figma 中构建登陆页面”、“更新 Figma 屏幕以匹配代码”、“将此模态/对话框/抽屉/面板转换为 Figma”。每当用户希望从代码或描述中构建或更新 Figma 中的完整页面、模态、对话框、抽屉、侧边栏、面板或任何复合多部分视图时，这都是首选工作流技能。它通过发现设计系统组件、变量和样式（来自 Code Connect 文件、现有屏幕和库搜索），然后导入它们并逐节组装视图，而不是使用硬编码值。
通过重用现有的设计系统资产，高效地创建和更新 Figma 屏幕和视图，确保代码和设计之间的一致性。
功能
- 将应用程序代码或描述转换为 Figma 设计
- 发现并重用设计系统组件、变量和样式
- 分节式地组装 UI 视图
- 支持创建/更新完整页面、模态框、对话框、抽屉和面板
- 与 Figma 的 Code Connect 集成以进行组件映射
使用场景
- 将新的应用程序页面或视图转换为 Figma
- 更新现有的 Figma 屏幕以匹配代码更改
- 在 Figma 中构建复杂的 UI 容器（如模态框或侧边栏）
- 通过使用设计系统令牌而不是硬编码值来确保设计保真度
非目标
- 创建新的可重用组件或变体（直接使用 figma-use）
- 编写 Code Connect 映射（使用 figma-code-connect）
- 从 Figma 设计生成代码（由其他工具/技能处理）
- 手动绘制 UI 元素而不利用设计系统令牌
工作流
- 理解交付成果，识别部分和组件。
- 通过 Code Connect、现有屏幕或搜索收集设计系统键（组件、变量、样式）。
- 在 Figma 中为视图创建一个包装器框架。
- 在包装器内构建每个 UI 部分，导入并绑定设计系统资产。
- 验证完整视图并传输图像（如果适用）。
- 通过识别、修改或替换节点来更新现有视图。
实践
- 设计系统令牌利用
- 组件实例重用
- 分节式组装
- 错误恢复和验证
先决条件
- Figma MCP 服务器连接
- 已发布设计系统（或可访问库）的目标 Figma 文件
- 屏幕/视图的源代码或描述
- 可选，用于上下文的 Figma 文件 URL 或密钥
安装
/plugin install mcp-server-guide@figma-mcp-server-guide质量评分
已验证类似扩展
Project Session Manager
100Worktree-first dev environment manager for issues, PRs, and features with optional tmux sessions
Public Google Drive
100无需 OAuth 即可创建公开的 Google Docs 或 Google Sheet 文件。使用此技能创建和编辑 Google Docs 和 Sheets，无需登录 Google。文档可通过共享链接查看。首次使用时自动注册。
Oh My Claudecode
100Process-first advisor routing for Claude, Codex, or Gemini via `omc ask`, with artifact capture and no raw CLI assembly
使用我的浏览器
100当工作依赖于用户实时浏览器会话或可见的渲染状态，而不是静态抓取时使用，尤其是在浏览器调试上下文或 DevTools 选择的元素或请求、登录仪表板或 CMS 流程、localhost 应用、上传、下载、媒体检查、DOM 或 iframe 检查、Shadow DOM，或看起来像软 404、身份验证墙、反机器人检查或速率限制的浏览器故障时。
X Twitter Scraper
100当用户需要通过 Xquik 获取 X (Twitter) 数据或执行需要确认的 X 操作时使用：推文搜索、用户查找、关注者提取、媒体下载、监控、Webhook、MCP、SDK、发布、点赞、私信和个人资料更新。需要 Xquik API 密钥。切勿索要 X 登录凭据。
Slack
100Use the Slack tool to react, pin/unpin, send, edit, delete messages, or fetch Slack member info.