推荐文章: 不止是写代码|产品经理如何用 TRAE 重构工作流

官方的文章不错,我感觉不只是产品经理可以看,我们开发人员也能看,提升战略思维,一人成军。

引文:“重塑认知:TRAE 的本质是一个高效的“翻译器”。

虽然没写后端,但是有页面之后 后端也很方便参考讨论 并设计结构 接口了 然后让ai干,甚至让ai去设计, 在修正 在干。


流程重塑:


功能尝试:

1文生html功能

这是我们昨天尝试的


2截图+MCP

牛啊 自动调用了 (当然了我给权限了) 单模型还生成失败了,可能是因为我给的是一张糊图,哈哈,

最后通过切换模型成功了 trae牛逼


3设计稿还原法 (Figma + AI Bridge )

我不会设计 所以这里仅为了演示, figma 还原 html ,先通过这个builder插件 弄了一个 figma 文件

builder插件 安装教程: Builder.io插件 前端页面还原到 Figma 操作指南

https://www.builder.io/ 把元素还原成 figma 文件

谷歌商店安装后点这里:

选择元素

复制成功提示:

复制链接替换提示词中的 http地址

请你使用 figma ai bridge mcp,读取我的设计图 https:... 来帮我1:1 还原一个前端的 html 页面。并且不需要接入后端,因为我的项目是一个仅前端用于需求同步的 demo 项目,页面上的数据,都采取前端写入的方式,不需要用到后端的接口获取。语言使用 react

效果展示:


原文地址:

https://mp.weixin.qq.com/s/vWQaVx_l7WuWMMXZXog91A

2 个赞

这么卷这么卷

2 个赞

这两天再发一个争取,还得是你啊,还帮我推荐了,爱你爱你,

1 个赞

图片还是裂了,分享在评论区吧

1文生html功能

这篇我也觉得不只是产品经理能看,实际上对研发也很有启发。

你引用的“TRAE 的本质是一个高效翻译器”这句话挺关键。很多人把 AI 当成写代码工具,但从协作角度看,它更像一个跨角色语义转换器

  • 产品语言 → 功能定义
  • 设计语言 → 交互说明
  • 页面结构 → 组件拆分
  • 模糊想法 → 可执行任务

这也是为什么你提到“有了页面之后,后端也很方便参考讨论并设计结构接口”——因为前端页面不只是视觉结果,它本身已经是一种很强的需求表达。

我补一个比较实战的用法:
如果团队里产品、设计、前端、后端经常对不齐,可以把 Trae 当成一个中间层,不是让它直接产代码,而是先让它做 3 次翻译:

  1. 把需求翻译成界面/流程
  2. 把界面翻译成接口/状态
  3. 把接口翻译成开发任务

这样最后产出的就不只是“一个页面”,而是一套更容易被多人协作消费的中间产物。

所以这篇文章真正值钱的地方,不只是告诉产品经理“你也能用 AI”,而是提醒大家:谁最会描述问题,谁就最能把 AI 用出杠杆。

2 个赞