您的前端开发智能工作流待升级,查收最新 Figma2Code!

在日常开发中,设计稿转代码一直是前端团队的刚需。但经过与文心快码开发者用户们的交流,我们发现原来用 Figma2Code (F2C) 智能体进行前端开发,仍存在以下痛点:

🔁流程繁琐:写代码→切到 Figma→复制链接→切回 IDE... 流程割裂,效率低下。

🚫使用受限:像纯文本、图片这样的素材类型,无法在Figma中导出链接转成代码,还得手动处理。

⏳不够灵活:无法在每次开启F2C任务时,自由地增加特定的需求,只能在第一轮生成完毕后补充修改需求。

针对这些痛点,文心快码对 Comate AI IDE 进行了一次前端开发场景的专属升级,支持预览 Figma 设计稿、元素级选中实现、需求补充更方便。本次升级,我们还着重解决目前行业内前端开发的共性挑战(如非编辑权限下不能选中元素生成代码、不支持本地文件预览、不支持预览窗口多开、无法打开历史预览),期望帮助开发者们打造AI IDE内整合设计工具的最佳实践。前端开发交互更丝滑,设计稿转代码真正升级为自动化工作流。

一、升级亮点大放送

1. Comate AI IDE 内预览能力大大提升

  • Figma 设计稿预览: 现在可以直接在 IDE 内打开 Figma 设计稿,无需跳出 IDE,真正告别手动切图!
  • 多类型 URL 支持: 自动识别并预览 https、http、file 等多种地址,覆盖更多开发场景!
  • 多窗口预览: 可同时开启多个设计稿或网页,随时对照比对,效率倍增!
  • 历史记录回溯: 支持预览地址历史记录,修改前效果可追踪!

2. 支持组件元素级选中,哪里要改点哪里

不论是画布、组件还是局部元素,不卡设计稿编辑权限,任何可选中的元素都能被识别支持,用户自由度大幅提升!哪里要改点哪里,so easy!老板再也不用担心我的Coding了。

3. 选中组件元素补充定制化需求

点选需要实现为代码的组件或元素,就能将设计稿添加到上下文,补充自己的Prompt,直接与F2C智能体对话,以前做不到的定制化,现在聊着天即可实现!

→"用 Element 组件库实现"

→"生成一个通用组件,放到 xxx/xxx 目录下"

→"参考我代码库中的 xxx 文件"

→"只生成框架,不要具体内容"

二、三步Get新技能

第一步:打开Comate AI IDE,找到 Figma2Code 入口,两种方式

  1. 进入Agents对话窗口,点击F2C智能体

  1. 点击侧边栏预览功能,点击「打开 Figma」

第二步:首次使用需登录授权Figma账号,然后打开需要实现的设计稿

第三步:框选/点选想要实现的设计元素,点击右下角发送到对话

F2C 智能体立即接收上下文,开启对话,完成任务。如有其他需求,可以随时在对话框进行补充。

三、如何获取最新 Comate AI IDE?

两种更新方式,即刻到 Comate AI IDE 中体验全新 Figma2Code 能力!

1. 已有IDE,升级到最新版:

点击 Comate AI IDE 界面内右上角「重启以更新」

2. 下载更新:

进入 ****comate.baidu.com/zh/download... 立即下载安装最新 Comate AI IDE,体验全新 Figma2Code 智能体!

相关推荐
Csvn6 小时前
OpenSpec 详细使用教程
前端
明月_清风6 小时前
加密解密系统完全指南:原理剖析与 Go 实践
后端
之歆7 小时前
Day19_LESS 完全指南——从入门到工程实践
前端·css·less
小江的记录本7 小时前
【JVM虚拟机】垃圾回收GC:垃圾收集器:CMS:核心原理、回收流程、优缺点、废弃原因(附《思维导图》+《面试高频考点清单》)
java·jvm·后端·python·spring·面试·maven
云水一下8 小时前
HTML5 从入门到精通:实战收官——从零搭建完整静态网站,综合运用所有知识
前端·html5
不总是8 小时前
Windows 系统 Node.js 免安装版(zip)安装与配置教程(2026 最新)
前端·windows·node.js
冬奇Lab8 小时前
每日一个开源项目(第105篇):Twenty - 跳出 Salesforce 的圈套,定义现代开源 CRM
前端·后端·开源
修己xj9 小时前
一个西瓜背后的思考:当爹后才明白的事
程序员
zhangyao9403309 小时前
开发pc端时,表格的高度怎么设置才能铺满页面
前端·javascript·elementui
ServBay9 小时前
月之暗面 Kimi Code 0.4.0 发布,终端 AI 编码助手全面采用 TypeScript,实现毫秒级启动
后端·aigc·ai编程