一天上线「图像标记」功能： AI 让我这个前端小白也能做复杂交互

一天上线「图像标记」功能：AI 让我这个前端小白也能做复杂交互

最近给自己的产品做了一个新功能：图像标记（ Image Marking ）。

简单说就是：用户可以在图片上写字/划线标记想改的位置，然后在提示词里说“把鸟加到我标记的地方”，AI 就能比较精准地只改那一块。

更离谱的是从想到这个点子到上线可用，我基本在一天之内搞定。我是个技术小白，前端交互一直不算强，这次算是被 AI “抬”上去了。

为什么要做这个功能？

很多人用 AI 修图都会遇到一个痛点：
提示词写得很清楚，但模型还是改错地方，甚至改全图。

所以我想要一个“人类表达更直接”的方式：
在图片上直接指出位置，再让 AI 按位置执行。

结果做出来之后，用户上手也更快：

标记“bird” → prompt 写“在标记处加鸟，并把标记文字去掉” → 出图就对了

不需要来回试“左上角/右边一点/再靠上一点”这种玄学描述

我是怎么在 1 天内做完的？

我把整个过程拆成了 6 步，几乎每一步都离不开 AI 。

Step 1：想到想法 → 用 ChatGPT 调研可行性

我先问 ChatGPT 进行联网搜索：

“网页端图片标记一般怎么做？”

这一步最大的收益是：快速定方向，少走弯路。

Step 2：画原型图（越粗糙越好，但要表达清楚）

我会用非常粗糙的方式画：

点击 Edit → 弹出标记层

支持画线/文字

Done 保存 → 回到生成器继续写 prompt

原型图的目的不是漂亮，是为了让 AI 和自己都能对齐“最终长什么样”。

Step 3：用 Codex 5.2 Max High 写技术方案

我让 Codex 直接输出一个“可落地的方案”，包括：

组件结构怎么拆

关键数据结构（标记内容如何存储）

事件逻辑（绘制、撤销、保存、导出）

以及和生成器的串联方式

对我这种前端不熟的人，这一步相当于：
把脑内想法翻译成工程语言。

Step 4：用 Claude Code 执行落地

方案有了之后，我就让 Claude Code 直接开始写：

UI 和交互逻辑

标记弹窗

保存/读取标记数据

和生成页面连接起来

这一步是“体力活”，cc 非常适合做。

Step 5：遇到 bug → 用 Cursor 拉来三位“大神”会诊

中间肯定会遇到各种 bug （比如坐标错位、缩放偏差、事件冲突等）。
我在 Cursor 里同时调模型来排查：

Gemini 3 Pro

Claude Opus 4.5

GPT o3


这一步最大的体感是：
以前搞不定的 bug ，现在像“多人结对编程”一样，小白也能搞定。

Step 6：上线 + 测试

最后就是：

自己跑一遍真实流程


做完之后的感受

这次让我最震撼的是：

AI 真的可以把一个前端小白，短时间内“拉升”到能做复杂交互功能的水平。要敢想敢做。

当然，不是说全程躺平。
更像是：你负责方向、拆解、判断； AI 负责产出、补全细节、加速迭代。

欢迎体验

网站：
https://nanobanana.co

产品介绍博客（英文）：
https://nanobanana.co/blog/Precisely-Edit-Images-with-Image-Marking

产品介绍博客（中文）：
https://nanobanana.co/zh/blog/Precisely-Edit-Images-with-Image-Marking

欢迎大家试用，也欢迎拍砖：

你觉得这种“标记 + prompt”的交互是否更适合大众？