用途:将 Figma 设计稿转换为生产级代码,追求与设计 1:1 的像素级视觉一致性,并保证与项目设计系统、组件库和编码规范融合。
主要能力与必要用法:依赖已连接的 Figma MCP 服务器,用户需提供形如 https://figma.com/design/:fileKey/:fileName?node-id=1-2 的链接,或在使用 figma-desktop MCP 时直接选中节点。若 MCP 未配置,需先执行:codex mcp add figma --url https://mcp.figma.com/mcp,并在 config.toml 设置 [features].rmcp_client = true(或运行 codex --enable rmcp_client),随后用 codex mcp login figma 完成 OAuth 登录,登录后需重启 codex。工作流按顺序执行:解析 fileKey 与 nodeId;调用 get_design_context 获取布局、字体、颜色、组件结构与间距等结构化数据;调用 get_screenshot 获取视觉参照;下载 Figma 返回的图片、图标与 SVG 资源,若为 localhost 源则直接使用,不引入额外图标包也不使用占位符;将输出(通常为 React + Tailwind)按项目约定替换为设计令牌与既有组件;最后对照截图校验布局、字体、颜色、交互状态、响应式与可访问性。
适用场景:组件实现、页面与仪表盘布局等设计到代码的交付。
限制:需处于已连接且可访问的 Figma MCP 环境;数据过大时需先用 get_metadata 再逐个获取子节点;设计系统令牌与 Figma 规格冲突时优先采用项目令牌,最小调整间距尺寸;偏离设计需注释说明原因。其他收费、价格与平台信息暂未提供。