设计稿到前端切图协作流

从读取设计稿、提取上下文到映射组件库与同步评审，这套组合很适合设计到前端落地的协作链路。

// by 小编/2 项/🎓 1 技能 · 🔌 1 MCP

复制全部安装提示词

这组资产围绕“Figma 设计 → 前端切图实现 → 协作反馈闭环”来搭配。

openai-curated-figma 作为通用入口，先把设计上下文、节点与资源高效转成可生产代码思路。
sso-ss-figma-unified-mcp 负责稳定连接 Figma，补足读取、编辑、多框架生成与无障碍检查能力。
mirabelle514-component-mcp-server 把设计元素进一步映射到真实 React 组件库，避免生成结果只停留在“像代码”的阶段。
processedfood-figma-comments-mcp 则把评论区里的设计决策、问题与待办纳入流程，方便前端切图时少走回头路。

如果你的目标不是单次生成，而是让设计、开发、评审能持续协同，这套会比单纯的“设计转代码”工具更完整。

// 包含的资产

连接 Figma 获取设计上下文与资源，并将节点高效转换为生产代码。

└ 小编点评 — 作为组合核心入口，直接获取 Figma 设计上下文与资源，适合启动设计到代码的主流程。

抓取并回复 Figma 评论，分类整理设计讨论中的决策、问题与待办。

└ 小编点评 — 整理设计评论中的决策与待办，让前端在切图协作时能同步上下文，减少反复确认。