菜单
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/seaworld008/Commonly-used-high-value-skills --skill figma命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | figma |
| description | Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting. |
| zh_description | 用于处理 Figma 设计读取、解析、交付和实现协作。 |
| version | 1.0.0 |
| author | seaworld008 |
| source | in-house |
| source_url | |
| tags | ["agent", "ai", "figma"] |
| created_at | 2026-03-04 |
| updated_at | 2026-03-20 |
| quality | 2 |
| complexity | intermediate |
Figma MCP 是连接设计稿与生产代码的超级引擎。它通过 Figma API 获取结构化设计上下文、变量定义及原始素材，并结合大模型的推理能力，将视觉稿一键转化为符合项目规范的 React/Tailwind/Vue 代码。
# 确保已安装 Figma MCP Server
mcp_call({ action: "search", keyword: "figma" });
# 获取访问令牌 (PAT)
# 详见 references/figma-mcp-config.md
为了确保 1:1 的视觉还原度和高性能的代码实现，必须严格遵循以下流程：
get_metadata 获取高层级节点地图，再精准抓取需要的子节点。get_screenshot 获取节点的实时渲染图片，作为实现时的绝对参考。cornerRadius: 8）映射到项目的 Design Tokens（如 rounded-lg）。tailwind.config.js 对比。mcp_call({ name: "get_design_context", arguments: { fileKey, nodeIds } })。children 数组，识别 TEXT, VECTOR, INSTANCE 等节点类型。#3B82F6 -> ）。brand-primaryget_file_variables 获取全局主题定义。variable-id 而非硬编码颜色。get_screenshot 的结果传入多模态模型进行视觉校验。image_edit 技能在截图上标注出具体的像素间距，辅助编码。icon-user-profile.svg）。svgr 转化为 React 组件。### 🎨 设计稿信息
- **File Key**: [例如：vO3S...]
- **Node ID**: [例如：12:456]
- **截图参考**: [URL 或本地路径]
### 🛠️ 实现要求
- **框架**: Next.js + Tailwind CSS
- **组件库**: 优先复用 `src/components/ui/` 下的 ShadcnUI。
- **交互**: 悬浮状态需增加 `hover:scale-105` 动画。
### 📦 素材处理
- 所有图标导出为 Inline SVG。
- 背景图放在 `public/images/`。
// 示例：获取整个 Figma 文件的页面结构
mcp_call({
name: "get_metadata",
arguments: {
fileKey: "XYZ789..."
}
});
i18n-expert 技能，自动生成多语言 JSON 文件并替换设计稿中的占位符。get_screenshot 调用有严格限制，需注意缓存。undefined。header, nav, main）。SVGO 压缩，禁止直接引入未经过滤的大型图片。MEMORY.md。webapp-testing 技能中运行一次视觉差异分析。.env.local，严禁提交到代码仓库。Multi-agent collaboration plugin that spawns N parallel subagents competing on the same task via git worktree isolation. Agents work independently, results are evaluated by metric or LLM judge, and the best branch is merged. Use when: user wants multiple approaches tried in parallel — code optimization, content variation, research exploration, or any task that benefits from parallel competition. Requires: a git repo.
Design production-grade multi-agent orchestration systems. Covers five core patterns (sequential pipeline, parallel fan-out/fan-in, hierarchical delegation, event-driven, consensus), platform-specific implementations, handoff protocols, state management, error recovery, context window budgeting, and cost optimization.
App Store Optimization toolkit for researching keywords, optimizing metadata, and tracking mobile app performance on Apple App Store and Google Play Store.
基于 SOC 职业分类