Figma Code Connect
技能 已验证 活跃创建和维护 Figma Code Connect 模板文件，将 Figma 组件映射到代码片段。当用户提及 Code Connect、Figma 组件映射、设计到代码的转换，或要求创建/更新 .figma.ts 或 .figma.js 文件时使用。
通过自动生成准确且可维护的 Figma Code Connect 模板文件，简化设计到代码的流程，确保设计和代码之间的一致性。
功能
- 创建 Figma Code Connect 模板文件（`.figma.ts`）
- 解析 Figma URL 以提取文件密钥和节点 ID
- 使用 MCP 工具识别未映射的 Figma 组件
- 获取组件属性（TEXT、BOOLEAN、VARIANT、INSTANCE_SWAP、SLOT）
- 在代码库中搜索匹配的代码组件
- 生成带有代码片段和导入的模板结构
使用场景
- 当用户需要创建或更新用于将 Figma 组件映射到代码的 `.figma.ts` 文件时。
- 当用户提到 Code Connect、Figma 组件映射或设计到代码的转换时。
- 自动化连接 Figma 设计到现有代码组件的过程，以提高一致性。
非目标
- 创建或更新使用 `figma.connect()` 的 `.figma.tsx` 文件。
- 处理未发布到团队库的 Figma 组件。
- 为 Figma 的 Free 或 Professional 计划提供 Code Connect 功能。
- 直接从 Figma 生成代码片段而不创建 `.figma.ts` 模板文件。
安装
/plugin install mcp-server-guide@figma-mcp-server-guide质量评分
已验证类似扩展
Generate Project Plan
98从 PRD 和代码库上下文生成 FigJam 项目计划板。交互式流程：研究 → 提出各部分 → 各部分深入研究 → 各部分内容 + 块形状建议 → 创建 FigJam → 骨架 → 填充 → 图表 → 收尾。每个内容块（部分、嵌套部分、介绍性标注、表格、多列文本、粘滞列、图表部分、元数据条）都有自己的子技能参考文件。在用户要求“在 FigJam 中创建项目计划”、“交互式项目计划”、“/generate-project-plan”或提供 PRD 并希望逐部分确认内容 + 渲染时使用。
Figma Code Connect Components
90Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.
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、身份验证墙、反机器人检查或速率限制的浏览器故障时。