设计稿到前端切图协作流

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

// by 小编/1 items/🎓 1 skills · 🔌 0 MCP

Copy all install prompts

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

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

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

// what's inside

Connect to Figma, fetch design assets, and turn nodes into production code.

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