正在打开每日关注
正在打开每日关注
视频演示 Cursor 通过 Talk to Figma MCP 读取设计规范、修改画稿并生成前端页面,展示设计开发协作的新路径。
可以看到Cursor是能理解Figma中的组建规范的
作者演示将 Cursor 与 Figma 的 MCP 插件 Talk to Figma 连接:Cursor 可读取 Figma 中的组件与样式信息,依据规范生成移动端登录页,并按自然语言修改按钮颜色和文案;随后尝试把登录页 UI 生成为可交互的 HTML、CSS、JavaScript 页面。
工作流把“设计规范理解—画稿修改—前端实现”串在同一上下文里。对于已有组件库的团队,先让工具读取节点和样式,再要求其在既有规范内输出,较直接从空白提示生成页面更可控。视频中的替换示例也说明,局部设计迭代可通过可审阅的指令降低手工修改成本。
这是单段演示,未提供插件版本、安装来源、生成代码质量或长期维护证据,不能据此判断可用于生产。作者明确提到当前仍有 bug,且不能进行打组、创建组件和自动布局等操作。涉及 Figma 文件时还应审查插件权限、MCP 服务连接方式及设计资产是否会被外发;生成的前端代码也需要人工检查语义、可访问性、交互和安全性。