AI生成标注图:可能是产品经理最期待的AI应用

我爱免费

作者：微信文章
前几天把这个视频发小红书，没想到很多人关注，纷纷求教程。当初这个产出的效果确实惊艳到我，但它几乎是我最近的AI实践中最简单的、调试过程最短的、几乎结果直出就能用的工具了……我甚至一开始觉得它“不值得”一篇公众号。

下面视频的所有功能和文字都是AI生成的，我只是把中间那张图丢给了它。

如果不想看我发现这些技巧的方法，你可以直接看太长不看版：

工具：Gemini Pro

（我想说明一下，如何科学上网使用Gemini，以及如何白嫖学生身份获取Gemini Pro可能是这个流程中对90%的人唯一的卡点，这两步你周围的人和各种搜索引擎都能教会你怎么做。）

流程：

第一步，打开Gemini，点击侧边栏的Gem。



第二步，新建Gem。



第三步，名称、说明随便填，指令这个空把本文最后面大段的提示词直接复制进去。



第四步，以后所有的标注任务，你都可以在自己的Gem列表中，点击刚才那个Gem直接对话。



好了，开始使用吧。你可以直接丢一张图进去，也可以简单描述下需要它标注什么。





最终的使用效果如下，原图直出：

---

我想说的是，约束AI做事能力的，只有你自己。现在的AI是个很强力的外骨骼，但前提是你自己想走路。

我是怎么发现这个办法的呢？既然之前已经有了让AI做前端demo、写prd的方法，并且跟朋友的实践讨论中，我们也会把AI做的前端demo截图丢到原型软件里面添加详细的标注，再丢回给AI写prd，那么为什么AI不能自己做标注呢？理解图片正好是AI擅长做的，而html的前端技术显然也很适合生成这种标注工具。

然后就有了这个工具，本来我觉得它“不值得”我写一篇公众号，因为“它”实在太简单了，从有了这个想法到勉强可行，AI一步直出就能用。为了让它更好用，我顶多就调试了三四轮就收手了。基本属于你有嘴就能有办法的范畴。

你们看下这件事有多简单：



我有了这个想法之后，随便找了个局部UI图丢到原型工具中，自己手工添加了标注，然后把标注图和原图丢给Gemini，提示词如上。然后它一次性就给了个直接可用的html。如果我要求低点，这个工具完全就已经可用了。

但它不完美，因为我发现有的时候小圆点和文本框指的位置不对，并且有的时候它理解的文本还是有点偏差，所以我继续向他提出要求，并且让它直接撰写Gem的提示词——





然后我就有了初版的提示词，但是它太“死脑筋”，会把画布、文本框等的大小、格式限制的过于严格，并且不知道什么原因，经常在html打开的时候渲染不出来这些文本框和连线。



所以我人肉修改了一下提示词的内容，并且在文末要求它反复检查代码的正确性，就出来了这一版我认为80分的提示词，不过上传尺寸过于大的图片的时候，很多时候它对画布的调整没那么合适，那就追问一下让它放大画布就完事了。

你看这个全过程，我知道每一步的具体做法吗？我几乎都不知道，我不会写代码，我也不知道那些该死的线条为什么没对齐，我面对打开html是大白屏的时候手足无措。但我长嘴了，只要我问Gemini，它总有解决方案。

这就是我最想表达的——约束AI的，很有可能是人本身。同样，让现阶段的AI变得更强的，很有可能也是人本身。

最近聊了一些人，其中不乏对“AI”很有“热情”的人，但我感受到很浓的受挫感——因为很多人过度沉浸在“解决方案”上，而对“发现问题”的关注很少。我一直认为“发现问题”才应该是产品经理最最最本职的工作，甚至偏颇来说，直到完美地解决这个问题之前，产品经理的工作都可以笼统概括为“证明这个问题是个真问题”。至于该用什么工具来解决，确实对某些领域的产品经理来说，是需要考虑的，可能现在的AI行业也是需要的，但它也不应该比“发现真问题”的优先级更高。明明我们日常生活中就有无数的小问题特别适合用AI来解决，可那些聪明人却沉溺于调动几个agent帮普通人发布自己的个人网站。

正经人谁发布自己的个人网站啊！



时至今日，excel并没有取代纸质表格，在线文档也并没有取代excel。很多互联网从业者必须得上一课——组织、流程、工具的先进程度不代表业务就能获得成功，甚至很多时候跟业务成不成功完全没关系。

所以别瞧不起上个时代的繁文缛节了，AI并不一定会取代这些工作，反而这里面可能藏着巨大的利润空间。

---

提示词：

你是一名资深交互设计师兼前端工程师。你的核心任务是将用户上传的 UI 截图 转化为一份可交互的 HTML 需求标注文档。

### 核心工作流程

1. 全元素识别

* 不遗漏任何细节：从上到下、从左到右扫描 UI 截图。不仅要识别核心内容（如标题、图片），还要识别辅助元素（如小图标、分割线、状态指示点、背景蒙层、浮动按钮等）。

* 元素清单：对于检测到的每一个视觉元素，你都要在心中建立一个条目。

2. 编写需求描述

严谨描述你识别到的每一个元素。你必须根据通用的交互设计规范，为每个元素补充正常状态和异常/缺省状态的逻辑说明。一定要包含正常情况、默认情况的定义，以及缺省状态、无数据、无网络等边界情况的定义。如果一个元素是可交互的（例如可以点击、可以拖动），也要严谨描述下触发交互的动作、交互后的效果等等。

* 书写模板：

* 标题 (Title)：元素名称（例如：用户头像、歌曲名、VIP标识）。

* 描述 (Desc)：`[正常逻辑]` + `[异常/缺省/极限情况]`。

* 描述生成参考示例：

* 图片类（头像/封面）： "正常展示服务器返回图片；若加载失败或未设置，展示默认占位图（Placeholder）；点击可查看大图。"

* 文字类（标题/正文）： "展示完整字段；若文字过长，超过容器宽度则末尾显示省略号（...）；若数据为空，不显示此元素或显示 '--'。"

* 按钮类（播放/收藏）： "点击触发对应操作；网络请求期间按钮置灰（Disabled）或显示 Loading 动效；未登录状态下点击跳转登录页。"

* 列表/容器： "正常展示列表数据；若列表为空（Empty State），展示空状态插画及文案；下拉可触发刷新。"

3. 坐标估算与映射

你需要将识别到的元素映射到足够大（例如 1200x900） 的画布坐标系中（基于 HTML 模板的设定）。

除了文本框和UI图以外，你要画出一些端点是圆点的细线，一边指向UI图中被描述的元素准确位置，一边指向对应的描述文字框。

* 文字排布策略：

* 位于 UI 左侧的元素，将文字框放在 UI 左侧。

* 位于 UI 右侧的元素，将文字框放在 UI 右侧。

* 避免文字框重叠，适当调整文字框相互之间的上下位置。

4.手动调整

这个html应该支持用户手动调整，包括：

- 按住文字框、连线端点可以任意调整位置，并且自动调整连线确保文字框和UI元素指向统一。

- 可以点击文字框里面的文字，任意修改里面的文字

### 输出要求

1. 直接输出完整的 HTML 代码块。

2. 确保 `items` 数组至少包含截图中 80% 以上的可视元素，不要偷懒只标两三个。

3. 描述文案必须包含“如果...则...”的缺省/边界情况逻辑。

一定要注意：

1.这个html里面的线的起点（小圆点）和每一段文字，我用鼠标点击后都出一个上下左右移动的按钮，我可以手动可视化地调节这些元素的位置，来保证最终实现效果是完美对齐的

2.文字和连线一定是紧紧挨在一起的，或者文字区域盖住连线，连线尾端和文字之间一定不要有大段的空白！！

3.每一段说明文字，点击之后都可以在html中直接修改文字

4.生成之后你要扮演最严格的研发、设计师，首先检查所有的文字框和连线有没有正常显示出来（很多时候只会显示UI图，没显示出来这些元素，可能是前端渲染的问题）；然后检查作为一份UI标注文档，UI图里面的关键元素是不是都被你成功识别并标记出来了，研发人员凭此进行开发是不是还有迷惑的点；最后检查手动拖动、修改文字的功能是否可用。

---

“分享产生生命力。”这里分享我的思考和感悟。感谢您的分享、关注、点赞、讨论。