问题背景

你有没有遇到过这样的场景？

用AI生成了一版网页原型，页面效果还不错，按钮、表单、导航栏都有模有样。你满怀期待地准备拿去和研发对齐——然后发现，该往哪里写这个按钮的具体逻辑以及点击后跳转到XX页面？

打开Word，开始写PRD。截图、粘贴、写说明、编号……改了一版发出去，开发说看不懂；又改一版，测试说逻辑不对；再来一版，设计说交互没体现。

一份PRD改了八遍，文档在群里传来传去，时间久了没人确定哪个是最终版。

更要命的是，AI生成的HTML原型，是"活的"——你可以点击、可以滚动、可以看到真实的交互效果。但和Axure不同，它没法直接在页面上做字段标注。那些按钮是干什么的？输入框有哪些校验规则？下拉菜单的数据从哪来？你只能回到Word里，用文字和截图去解释一个本来已经"看得见"的东西。

用一个静态文档去描述一个动态页面，这件事本身就很荒谬。

---

做了这么多年数字化，团队里用AI出原型，我不排斥——速度快、成本低、效果直观，比从零画Axure效率高太多了。但我发现一个很尴尬的断层：

AI帮你把原型"做"出来了，却没帮你把原型"说清楚"。

研发看一个HTML页面，他不知道哪个按钮是提交、哪个是取消，不知道表单字段是必填还是选填，不知道列表是否支持分页。这些信息全靠你口述或者写文档，效率极低。

Axure有标注功能，点一个组件就能给它写备注，多方便。但AI生成的HTML没有这东西——它只是一个网页，一个"好看但没法解释自己"的网页。

所以我做了一件事：给AI生成的HTML网页，加上标注能力。

---

痛点分析

在动手之前，我聊了一些身边做产品、做项目的朋友，发现这个痛点远比我想的普遍：

痛点一：原型和文档脱节
原型是HTML，文档是Word，两边各说各话。改了原型忘了改文档，改了文档原型又对不上。最后没人知道哪个是最新的。

痛点二：没有地方做字段级说明
一个表单页面十几个字段，哪个必填、哪个有格式校验、哪个联动，你只能在Word里列个表格去写。开发看的时候要在原型和文档之间来回切，信息对不上就来回问。

痛点三：AI原型越来越普及，但配套工具为零
AI工具出的HTML越来越像样，但出了之后呢？没有标注，没有交互说明，就是一个"好看但没灵魂"的壳。你还得回到传统文档流程去补说明，AI省下来的时间又被文档消耗掉了。

痛点四：跨团队沟通成本高
产品、设计、开发、测试四拨人，围着一份文档反复确认。“这个按钮是做什么的？”“那个弹框什么时候出现？”——这些问题本来可以在原型上直接标清楚的。

---

工具的功能介绍和使用步骤

所以我做了这个工具，叫AI原型网站标注工具。

说起来很简单：上传一个HTML文件，在页面上点击元素，给它写标注，然后导出。 导出后的HTML自带标注信息，分享给任何人，打开就能看到。

但用起来你会发现，它解决了上面说的那些问题：

第一步：上传HTML
把AI生成的HTML文件拖进去，页面直接在工具里渲染出来，所见即所得。

第二步：开启标注模式
点一下"标注模式"开关，页面上的元素就能点击了。点击任何按钮、输入框、文字区域，右侧就会弹出标注表单。

第三步：填写标注信息
选中一个元素后，你可以填写：

• 组件名称：比如"登录按钮"、“搜索框”
• 触发类型：点击、悬停、输入、加载等
• 交互说明：这个组件是干什么的，有什么规则
  

第四步：精准选择元素
有时候页面上元素嵌套很深，点一下选中的是整个容器而不是具体按钮。没关系，用↑↓键调整层级——↑选父级，↓选子级，精准定位到你想标注的那个元素。

第五步：管理标注列表
右侧面板会列出所有已标注的组件，点击任意一条，页面自动滚动到对应位置并高亮显示。支持编辑和删除。

第六步：导出/预览
点击"导出标注文件"，生成一个HTML。这个HTML打开后，页面上有一个可拖动的"显示标注"按钮——默认隐藏标注，点击后所有标注浮现出来：每个被标注的元素上方显示序号，点击序号查看详细标注内容；右侧还有一个可收起的标注列表，点击列表项自动定位到对应元素。

就这样。 一个HTML进来，一个带着标注的HTML出去。分享给开发、测试、设计，打开就能看到每个组件的交互说明，不用再对着Word猜了。

---

有人问我是不是自己一行行代码写的。说实话，不是。

这个工具是我用AI辅助完成的。从第一版简陋的demo到现在的可用版本，我主要负责定义需求、设计交互、发现问题，然后让AI帮我实现。中间经历了不少坑——比如导出的HTML标注不显示、重新导入识别不了之前的标注、弹框遮罩层挡住点击选择……这些都是在实际使用中发现的问题，一个一个排查修掉的。

AI能写代码，但它不知道你的用户会在什么场景下遇到什么问题。这些问题只能靠你自己用、自己发现、自己定义解法。 AI是手，你才是脑子。

不过这不是一篇技术文章，心路历程就说到这里。

---

说几个现实的事

这个工具目前还是个MVP。 能跑，能用，基本的标注流程走通了。但它远不是最终形态。

源码完全开放。 需要的人可以自行下载使用【留言免费获取】，也可以在此基础上做二次开发。这个工具解决的问题足够具体，我不觉得需要藏着掖着。

工具未来规划

关于未来，我在想这几件事：

• 接入AI自动生成PRD：标注信息已经有了，为什么不让AI帮你把它们整理成一份结构化的需求文档？标注完点一下，PRD自动出来。
• 标注内容更丰富：现在标注的是交互说明，以后能不能上传截图、标注字体属性、标注颜色值？让标注信息从"文字描述"变成"完整的设计规范"。
• 团队协作：现在是一个人标注一个人用，以后能不能多人在线标注、评论、确认？让原型标注从"个人工具"变成"团队流程"。
• 版本管理：原型改了，标注也要跟着变。标注和原型的版本能不能关联起来，做到改了原型就知道哪些标注需要更新？

这些不一定都会做，但方向在这里。如果你有想法，欢迎交流。

---

一句话总结

AI帮你做原型，这个工具帮你把原型说清楚。

原型不应该只是一个"看"的东西，它应该是一个"看得懂"的东西。