作为一个12年经验的产品经理，在接触了VC以后，我有一个的问题：
生成的高保真原型，还要截图拼到Word里写PRD，这个操作简直脱裤子放屁。
于是我用Trae做了一个标注工具，来解决这个问题。
今天来分享一下这个作品，也是我用Trae做过的最有价值的东西。
痛点：产品经理的"PRD噩梦"
先说说背景。
我是一名后台产品经理，以前画原型用Axure，做完原型之后，为了流程规范，还要写PRD文档。
听起来很正常对吧？但实际操作起来是这样的：
打开HTML原型，截图
打开Word，粘贴截图
在截图旁边写文字说明：这个字段必填、那个按钮点击后跳转xxx、这里要校验xxx…
页面太长？打开Axure把页面拼接一下再截图
需求改了？重新截图、重新拼Word、重新写说明
一套流程下来，写PRD的时间比做原型还长。
而且对于开发来说一些通点没有解决：开发拿到PRD之后，还是看不懂。因为文档和原型是分离的，开发要来回对照Word和页面，理解成本极高。
我就想：能不能直接在原型上标注需求规则，取代传统的Word PRD？
灵光一现：用AI做一个标注工具
有了这个想法之后，我借助Trae等AI编程工具，花了大约一周的时间，做出了这个标注系统。
请注意：我是一个完全不懂编程的产品经理。
如果用古法编程，光是学习前端开发的基础知识就要几周，更别说完整开发一个标注系统了。但有了AI，我直接跳过了"学习编程"的阶段，进入了"运用编程"的阶段。
标注系统介绍
核心功能
这个标注系统可以直接在HTML原型上进行标注，支持三种标注方式：
点标注：在页面元素上标记一个点，点击可查看标注详情
框标注：用矩形框选一个区域，标注这个区域的需求规则
智能框标注：自动识别页面元素边界，一键标注
每个标注点可以添加：
名称（如"提交按钮"）
描述（如"点击后校验必填字段，通过后提交到后端"）
类型（如"交互说明"、“字段规则”、“状态说明”）
界面预览
发帖时请在这里插入标注系统的截图
建议配图：
标注系统的主界面（左侧组件库 + 中间标注编辑区 + 右侧工具栏）
某个标注点的详情弹窗（展示名称、描述、类型字段）
标注完成后的效果（原型上布满标注点，点击可查看规则）
这个工具解决了什么问题？
问题1：截图拼Word太痛苦 → 标注即文档
以前：截图→粘贴Word→写文字说明→排版→重复N次 现在：直接在原型上标注，标注完成即文档完成
问题2：开发看不懂PRD → 点一下就懂
以前：开发要对照Word和原型来回看，理解成本高 现在：开发直接在页面上点击标注点，规则一目了然
问题3：需求变更要改PRD → 改标注就行
以前：改了原型还要同步改Word，经常遗漏 现在：原型和标注是一体的，改了标注就等于改了文档
问题4：评审时要翻长篇PRD → 评审即浏览
以前：评审会上打开几十页的Word文档，逐页讲解 现在：直接打开标注后的原型，点击标注点逐个评审
用Trae开发的过程
作为一个不懂编程的产品经理，整个开发过程大概是这样的：
第1-2天：搭建基础框架
告诉AI我想要一个可以在HTML页面上添加标注的工具
AI生成了基础页面结构和标注功能
第3-4天：完善标注功能
实现点标注、框标注、智能框标注三种方式
添加标注的增删改查功能
第5-6天：优化交互体验
标注详情弹窗、标注列表管理
拖拽、缩放等交互优化
第7天：测试和修复
自己测试各种场景，发现问题就让AI修
整个过程就是：描述需求→AI生成→试用→提修改意见→AI修改→再试用。
我的角色更像是一个"产品经理"——给AI提需求、验收成果，而不是一个"开发者"。
效果对比
| 环节 | 传统方式（截图拼Word） | 标注系统 | 提升 |
|------|----------------------|----------|------|
| 需求文档编写 | 2-4小时 | 30分钟-1小时 | 70%+ |
| 开发理解成本 | 来回对照文档和原型 | 页面上直接查看 | 大幅下降 |
| 需求变更同步 | 改原型+改Word，容易遗漏 | 标注和原型一体 | 零遗漏 |
| 评审效率 | 翻几十页Word | 交互式浏览 | 显著提升 |
适合谁用？
产品经理：再也不用截图拼Word写PRD了
交互设计师：可以直接在设计稿上标注交互说明
项目经理：评审需求时更直观高效
开发工程师：查看需求规则更方便，理解偏差更少
在线体验
标注系统已上线，可以直接体验：
体验地址：登录 - HTML 协作标注系统
欢迎大家体验后提提意见，我会持续优化！
写在最后
做这个工具的初衷很简单：解决自己的痛点。
作为一个不懂编程的产品经理，以前遇到痛点只能忍着，或者去百度海淘一些奇奇怪怪的工具，还不一定满足需求。现在有了Trae这样的AI编程工具，想到什么就可以做什么。
需求变工具，想到就做。
这就是AI编程对非技术人员最大的价值：不是让程序员变强，而是让每个人都能用代码解决问题。
如果觉得有用，欢迎点赞让更多人看到！
有问题或建议，评论区见，我会逐一回复！
#产品经理 #PRD #原型标注 #AI编程 #Trae作品 #效率工具