产品经理的TRAE实战：用自然语言生成可交互原型
一、从改图到说需求
做B端产品，最耗时间的往往不是思考，而是改图。对齐按钮、调像素、画几十版线框图，然后交给研发解释'这里点一下会怎样'。沟通成本很高。
用TRAE之后，我的工作方式变了：我不再画高保真原型，而是用自然语言描述需求，TRAE生成可交互的网页。研发直接在浏览器里点，效果直观。
这不止是换个工具。它把产品经理从'画图工'的琐碎里拉出来，更靠近设计决策本身——想清楚'为什么要有这个按钮'，而不是'按钮离左边多少像素'。
二、TRAE是什么
你可以把TRAE理解成一个代码翻译器：你说需求，它出网页。输入形式可以是截图、设计稿或纯文字，输出是能点、能滚动的HTML页面。
但要注意，它很吃描述的精度。模糊地说'加个按钮'，结果可能差很远。得具体到尺寸、位置、行为，比如：'在页面右上角，距离顶部300px，添加一个按钮，点击后弹出800×600的窗口，窗口里有'确认'和'取消'两个操作项。'
描述越详细，TRAE生成的第一版就越接近你想要的样子。
三、三个典型场景
1. 需求迭代：用截图+指令快速出原型
以前改需求要画图、对齐、标注，研发看完还要确认。现在直接把现有页面截图丢给TRAE，附上改动说明。比如：'在个人主页右上角加一个聊天入口，宽度250px，高度自适应，里面有标题'AI助手'、消息列表（滚动加载样式）、底部的输入框和发送按钮。点击发送后聊天窗口隐藏。'
TRAE在半小时内生成页面，拿给研发看：'这一版交互对不对？不对我接着改。'比画十几页原型图快得多，也准确得多。
2. 从零开始的新项目：一步步搭出可用的交互
比如要做一个电商聊天机器人。先搭框架：'做一个移动端聊天页面，iPhone 12尺寸，顶部标题'AI购物助手'，中间是消息区域，底部输入框和发送按钮，用React。'
TRAE生成基础HTML，打开就能打字。然后接逻辑：'当用户输入'风衣'，调用商品搜索接口，返回4个商品卡片（图片、标题、价格），支持分页。' TRAE能自动补全代码，甚至从Unsplash找商品图。
最后用Playwright模拟测试：'模拟用户发送'风衣'→搜索→显示商品→点击卡片→弹出详情'，自动跑一遍流程，检查有没有逻辑漏洞。
3. 需求文档：让研发直接看到交互
过去写交互文档，十页纸配流程图，研发还是会问：'点击后到底传什么参数？'现在我把草稿丢给TRAE——哪怕写得很乱，它也能整理出结构化总结、Mermaid流程图，并生成可交互原型截图。研发拿到手能点、能看，问题少了一大半。
四、几个实用技巧
页面还原的两种方式
- 截图法：现有产品迭代时，截图直接用Playwright MCP打开，让TRAE在视觉层面上参考。例如：'用Playwright MCP打开这张截图，右边加一个200×300的聊天框，按钮颜色改成#4A90E2。'
- 设计稿法：新需求从Figma设计图开始，通过AI Bridge导入TRAE。
Playwright的三个常用命令
- 样式检查：'对比参考网站，看字号、颜色是否对齐。'
- 操作模拟：'模拟用户点击'登录'，检查跳转是否正确。'
- 规范验证：'检查class命名是否符合规范？'
微调时的小技巧
- 复制class名：F12打开元素面板，右键复制元素的class，直接告诉TRAE：'这个按钮的class不对，改成'btn-primary'。'
- 指定布局细节：直接给CSS值，比如'用flex布局，margin-right: 16px'。
- 换模型或重置上下文：如果一个模型改了三次还不对，换个模型试试，或者新开对话清空上下文。
五、一些感受
TRAE不会取代产品经理，但确实把重复劳动降下来了。现在说'页面右上角加个聊天入口'，半小时内能拿到能点的原型；以前光画图就要大半天。
省下的时间可以花在更值得的事上——比如想清楚这个聊天入口是否真的必要，用户到底怎么用它。这才是产品经理该聚焦的部分。
