您的前端开发智能工作流待升级,查收最新 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 智能体!

相关推荐
京东零售技术1 分钟前
DongSQL数据库内核V1.1.0介绍
后端
0***R5154 分钟前
前端云原生
前端·云原生
疯狂踩坑人15 分钟前
MCP理论和实战,然后做个MCP脚手架吧
前端·node.js·mcp
LibSept24_19 分钟前
会议透镜(Meeting Lens):基于 Rokid CXR-M 的 AI 会议纪要实战
后端
课程xingkeit与top19 分钟前
高性能多级网关与多级缓存架构落地实战(超清完结)
后端
中杯可乐多加冰19 分钟前
基于 DeepSeek + MateChat 的证券智能投顾技术实践:打造金融领域的专属大Q模型助手
前端·人工智能
凡人程序员19 分钟前
搭建简易版monorepo + turborepo
前端·javascript
丸子哥哥20 分钟前
同一个域名,如何添加多个网站?
服务器·前端·nginx·微服务
不努力也不会混20 分钟前
vite联邦实现微前端(vite-plugin-federation)
前端·vue.js
伍亿伍千万22 分钟前
Uptime Kuma修改作为内嵌页面的自适应
前端