插件workflow（GIF）
我最近在小红书上持续分享 AI 设计相关内容，看着点赞、收藏、评论数不断上涨，感觉内容还是有价值的。
但，回复评论，却成了我的负担。
i 人社交焦虑
作为 i 人，我每次回复前都要反复斟酌：这句话会不会太生硬？这个词用得对吗？遇到涉及知识盲区的评论，更是要立刻去查资料、补知识。
通常，我的解决办法是把笔记内容和评论一起复制给 ChatGPT，让它生成几条回复建议作为参考，我再挑选编辑。
这意味着要在小红书和 ChatGPT 之间反复切换，一条评论下来至少要 5 分钟。
能不能直接让 AI 出现在评论区，点一下就生成？
后来，我想了个解决办法：正好我最近在尝试学习用 Claude Code 来进行 vibe coding，做一些自己能用的东西（目前都只是在做一些小的交互和 UI，后续会挑一些自己的 Vibe 小作品陆续分享出来）
于是我就想，这个需求不是正好可以用 Claude Code 来尝试吗？我尝试把我的背景、问题、目标、设计想法写成 prompt，丢给 Claude Code。
把需求拆成四个问题
第一个问题：Claude Code 要知道什么？
笔记内容、当前评论、父评论、我的人设。这四个信息组合起来，才能生成符合语境的回复。
但笔记内容有个麻烦：我的小红书笔记是长文转图片，图片笔记里还包含多张图片。图片里的信息才是重点，正文里纯文字信息量根本不够。所以我需要一个支持视觉的模型来「读懂」图片。
我选了 OpenRouter 的 qwen-vl，成本极低，每次调用不到 5 分钱（当笔记8000字左右时）。
而生成回复这件事不需要视觉能力，只需要理解文字。我选了 DeepSeek v3，中文理解能力强，回复质量高，成本比 ChatGPT 低。
第二个问题：成本怎么控制？
每次点击都重新理解一遍笔记内容，成本会炸。必须缓存。
第一次点击时，调用视觉模型理解笔记，把结果存到本地。后续再点击同一篇笔记下的其他评论，直接用缓存。
生成的回复也要缓存。关闭悬浮窗后，再次点击同一条评论，不调用 API，直接展示上次的结果。
第三个问题：交互怎么设计？
最自然的方式，是把 AI 图标嵌入到小红书的原生交互区域。评论下方本来就有「点赞」「回复」按钮，在后面加一个「AI」图标。
点击后，页面右侧弹出悬浮面板，显示 3 条生成的回复。每条回复都有独立的「复制」按钮。不满意的话，可以点「重新生成」。
生成过程中，显示一个跳动的点点点动效，让用户知道正在工作。
第四个问题：视觉怎么融合？
众所周知，AI 生成的 UI 大概率蓝紫色，主要是因为开源前端框架 Tailwind 创始人 Adam Wathan 五年前将 Tailwind UI 中的每个按钮都设为 “bg-indigo-500”，这导致地球上每个 AI 生成的 UI 也都是靛蓝色的。
因此，要特意加一句：「不用蓝色、紫色，不用渐变；图标样式和小红书原生的点赞、评论图标保持一致。」
把想法扔给 Claude Code
四个问题梳理清楚后，我把它们组织成一个完整的 prompt，发送给 Claude Code。
15 分钟后，代码完成了。
我打开生成的代码文件夹，结构如下（我其实看不懂，就看个目录）：
xhsAgent/
├── manifest.json # 插件配置
├── js/
│ ├── content.js # 核心逻辑
│ └── background.js # 后台服务
├── css/
│ └── content.css # 样式
└── settings/
├── settings.html # 设置页面
└── settings.js
代码量不大，500 多行，但每个功能都实现了：
监听评论区，评论加载完成后，自动在每条评论后面插入 AI 图标。
点击图标时，先检查缓存。没有缓存，就提取笔记的标题、正文和图片 URL，调用视觉模型理解内容，存到本地。
生成回复时，把笔记内容、评论上下文、用户人设拼成一个结构化的 prompt，发给 DeepSeek v3，要求返回 JSON 格式的多条回复。
悬浮面板 用绝对定位固定在页面右侧，样式完全模仿小红书的卡片设计。
我把插件加载到浏览器，打开一篇笔记的评论区。AI 图标出现了，嵌在「点赞」「回复」后面，毫无违和感。
点击图标，右侧弹出面板，跳动的点点点。几秒钟后，3 条回复出现。
我挑了其中一条，点击「复制」，粘贴到小红书的评论框，发送成功！
就这样，原本我需要 3 到 5 分钟的工作（带着 context 问 ChatGPT），现在点一下就可以了。
四个核心设计
回头看，这个插件能用得顺手，主要因为四个决策：
1 视觉模型和生成模型分离
笔记理解用 qwen-vl，生成回复用 DeepSeek v3。两个模型各司其职，成本和效果都能控制。让我可以在设置页面分别配置两套 API Key 和 Base URL。
2 多级缓存机制
笔记内容缓存到本地存储，生成的回复缓存到内存。同一篇笔记只理解一次，同一条评论不重复生成。成本降低 90%。
3 父评论追溯
小红书的评论是嵌套结构。如果用户回复的是「回复的回复」，插件会向上追溯父评论，让 AI 理解完整的对话链。生成的回复才能切题。
4 原生化视觉
所有样式参数都从小红书的 DOM 元素里提取：font-family、border-radius、box-shadow、color。插件的视觉完全融入小红书，没有「外挂感」。
多年 UI 设计师，第一次「写代码」
我在大厂做了 6 年 UI 设计师，HTML 和 CSS 能看懂一点，JavaScript 完全不会。以前想做点什么工具，要么找开发朋友帮忙，要么就只能停留在想法阶段。
现在，不一样了。
整个过程，我重点做的就是那一个 prompt。没有配环境，没有查文档，没有调试报错。
Claude Code 理解了我的需求，15 分钟后，生成了可以直接运行的代码，还教我怎么安装：
我加载插件，报错了，我直接丢报错截图给它，
Claude Code 图像识别也越来越准，安装问题很快我就弄好了。
下一步是模型配置，Claude Code 也非常周到的给了我建议：
最后一步就是在网页端打开小红书，点击 AI 图标。它就正常工作了。
这一刻，非常期待。
让我意外的是，UI 做得比我预想的还好。
看这个 AI 自己加的「保存成功」提示条，圆角、颜色、描边、字号都可以说是完全没毛病，除了阴影有点重，但完全不影响使用！
我只说了「要有缓存机制」，它自动实现了两级缓存：笔记内容存本地存储，回复结果存内存。
我只说了「视觉要融入小红书」，它把所有样式参数都从小红书的 DOM 里提取，圆角、阴影、字体、配色，完全一致。
我只说了「要追溯父评论」，它自动识别嵌套结构，向上查找完整的对话链。
这些细节，是我在设计阶段想到了但没说清楚的。AI 自己补充了。而且补充得很合理。
这种感觉，就像你给一个资深开发提需求，对方不仅完成了你说的，还主动优化了你没想到的。
作为设计师，我第一次体会到「想法直接变成产品」的感觉。不需要等开发排期，不需要来回沟通，不需要学习编程语言。把需求拆解清楚，用自然语言描述出来，AI 就能理解并实现。
当然，prompt 的质量决定了代码的质量。需要把交互细节、视觉要求、技术约束说清楚。但这正是设计师擅长的事：把抽象的想法拆解成具体的逻辑。遇到不懂，直接问 ChatGPT，它说的可比问程序员还靠谱。
从想法到上线，不到 2 天。大部分时间在思考需求和调试 prompt，真正的编码时间只有 15 分钟。
继续做下去
目前这个版本已经够用了，但还有一些方向可以探索：
- 回复风格学习
让 AI 分析我之前的回复记录、学习我的语气、用词习惯、甚至从我的主页中帮我调整我的人设，生成更符合我人设的回复。
- 情感识别
分析评论的情感倾向（正面、负面、疑问、吐槽），针对性地调整回复策略。
- 多平台支持
把同样的逻辑扩展到公众号。
更重要的是，回复评论不再是一件让我焦虑的事。我不用反复斟酌措辞，不用担心说错话，不用在两个页面之间来回切换。
如果你也是内容创作者，也在为回复评论焦虑，不妨试试这个思路。把重复性的工作交给 AI，把精力留给更有创造性的事。
Vibe Coding 的一些思考
自己是第一个用户
Anthropic 产品经理在采访中表示内部所有人员就是 Cloud Code 的第一批用户，他们把想法 code 成原型，直接内部使用，用得多的就上线，用得少的就知道出问题出在哪儿。这种「自己是第一用户」的工作方式，保证了产品的快速迭代和飞速发展。
我做这个插件也是一样。我之所以 vibe coding 了这个评论回复 AI 插件，源于我在小红书发了 10 篇笔记后发现的真实痛点：i 人回复评论时的语言组织困难。我就是第一个用户，我知道哪里不顺手，知道要改什么。而且我相信，不只我一个人有这个困难。
Design is how it works 设计在于其工作原理
这是我第一个靠自己从想法到真实可运行的项目，而不仅仅只是原型。更重要的是，我可以持续迭代。随着我继续深度使用小红书笔记创作工具，我会发现更多问题，也能马上解决它们。想法和实现之间不再有断层。
这让我想到了乔布斯的那句话：「Design is not just what it looks like and feels like. Design is how it works（设计不仅是外观和感觉，更是它的工作原理）」。跳出设计师思维，承担起产品功能运作与维护责任。
工作模式的改变
试想未来，当设计师能用 AI 工具把想法直接变成可运行的产品，我们不再只是画原型、画界面、等待排期，而是可以直接开发真实可运行的产品；把数据库、模型微调这些更技术的活交给专业程序员就行。
所以我认为 AI 不会替代设计师，而是让设计师从「设计者」变成「实现者」。让「想法」和「实现」之间的距离缩短了。
试错的勇气
在这次 vibe coding 的过程中，我更清楚知道了仅作为 UI 设计师的局限性：对模型、技术、数据的不了解，会产生恐惧心理，怕自己做不好，怕自己做错了。
而如今 AI 时代什么都可以问，什么都可以查，什么都可以试。最重要的是去用产品、去深度使用，去试错，去迭代。
失败了又怎样？
反正，只有自己知道。
文章来自于微信公众号 “AI设计师阿东”，作者 “AI设计师阿东”
