ARTICLE · 1125251
没写一行代码,我做了个浏览器插件
一个HR，没写一行代码，用半天时间做出了浏览器插件“棱镜Ft”。鼠标悬停图片，一键反推提示词、解构画面、提取色卡，还能多图合并风格。从本地工具到云同步，从自己用到给别人装，产品不是设计出来的，是长出来的。
名字叫棱镜Ft。从9月27号休息在家动念头，到迭代4个版本，半天。
它是干什么的呢。你在网页上看到一张喜欢的图，鼠标停上去，旁边浮出来三个小按钮，点一下，这张图就变成一段可以直接用的绘画提示词，还附赠一份画面解构和一张色卡。
那天刷到了什么图，很对我胃口的片子。我盯着看了一会儿，脑子里冒出来的念头是，我怎么才能把这个味道拿走。
我怎么才能把这个味道拿走
— 老王
不是收藏。收藏夹里躺着的图，从来没翻过。我要的是把那个味道翻译成词，以后我自己出图的时候能调出来。
这件事以前也能做。存图，开个对话窗口，把图丢给模型，让它反推提示词。5分钟起步。麻烦倒也不算太麻烦，但同样的动作做了十几次之后，人就烦了。
市面上其实有现成的产品，反推提示词、提色卡都做得挺成熟。但它要会员，按月交钱，而我一个月用不了几次。
我就想，这东西我自己是不是能搓一个。
那天晚上我跟小美说，能不能做个东西，看到图点一下就行。
小美是我给 AI 助手起的名字，我们合作两年多了，她叫我王老师。
她说能做，做成浏览器插件。
我心里当时是打鼓的。插件这东西我一直觉得挺远，属于那种得懂点计算机的人才碰的。我是做 HR 的，写代码这件事跟我八竿子打不着。
结果半天后，中间还夹着假期和一堆别的事，插件迭代到了 1.4.1，我已经用上了。
装上之后，浏览任何网页，鼠标悬到图片上，右下角浮三个按钮。
反，把这张图反推成提示词。
加号，收进待操作池。
W，发给 WorkBuddy 让那边的 AI 排队处理。
点反，几十秒，出来三样东西。
一是提示词，整段可复制，直接贴进任何生图模型。
二是画面解构，把图拆回维度，风格类型、构图、光线、色彩关系，一条一条编号列好。这是我最喜欢的部分，它不满足于告诉你这张图是什么，它告诉你这张图是怎么搭起来的。看完你会觉得那张图透明了一层。
三是色卡。纯本地算法提取，图片不出本机，不花钱。颜色按占比从上往下排，每行显示色号、占了多少、这个颜色在画面里干了什么，点一下就复制。
我最常用的还是多图那个。看到一组同风格的图，全部收进池子，勾选，点开始反推，它把几张图共同的视觉基因蒸出来，给你一段合并后的提示词。喂它三张图，它还你一个风格。
做的过程其实没什么戏剧性。
基本是我提需求，她说怎么实现，我说行，她去写，写完我在浏览器里加载一遍，看看对不对，不对就说哪儿不对。
像手动挡第一次拍清楚了一张照片
— 老王
加载这个动作我想多说一句。插件不用发布不用上架，在浏览器扩展管理页点一下加载已解压扩展，选中那个文件夹，它就在你的浏览器里了。第一次看到自己做的东西出现在扩展列表里，那个感觉挺奇怪的，像手动挡第一次拍清楚了一张照片。
没有立项，没有排期，没有预算。你想做，它就在那儿了。
后面几天基本是这么过的。白天上班，晚上回来说今天版本好了，我就加载一遍，点一点，说这里不对，那里换个说法，色卡能不能照着谁谁谁那样排。过会儿再看，改了。
中间有几个地方折腾得久了些。
一个是报错，屏幕上写着 URL.createObjectURL is not a function。看不懂。
另一个折腾得久一点，是云同步。这一段最能说明这个东西是怎么长出来的。
一开始我真只打算做个本地工具，图存在浏览器里，够用。做着做着需求自己找上门，家里一台电脑，公司一台，还想装给朋友，数据不通就是几座孤岛。于是前端之外又去写后端，跑云服务器，申请域名，这些以前觉得离我很远的东西，一个一个都碰了。
服务架在我那台腾讯云小机器上。
上线一测，面板弹出一行字，同步成功，推送 0 条，拉取 0 条。
成功了个寂寞。
我让小美写自动化测试。她搭了个假的浏览器数据库，对着线上服务器真跑，一条一条断言过去，三十来条跑完，问题自己露出来了。服务器判断哪份数据新，用的是文件的修改时间。可文件是什么时候写的，永远在数据自己声明的时间之后。
你在一台新电脑上登录，填完服务器地址，点一下保存。就这一个动作，系统把这台机器的空设置当成最新配置推上了云端，把原来那台的真配置盖掉了。新来的把老的顶了，还顶得名正言顺。
这个没有标准答案，只能自己定规矩。最后定的是，一台机器第一次同步，你要是填过 Key、改过模板，说明真配置在你手上，听你的。你要是除了登录啥都没动，就认云端的。之后按时间排，谁新听谁。我叫它首次认亲。
规矩定完，二十条断言全绿。那天晚上关了电脑去睡觉，睡得很好。
还有一件事跟技术没关系，但我自己觉得最要紧。
这插件不能只装我电脑上，得给别人装。给别人装，对方机器上也得有配套的自动化任务才行。
我原本以为不难。查了一圈才发现，那边的自动化只能由本机 AI 自己创建，插件没法隔空替它做，这是硬边界。
最后的办法有点笨，但管用。插件里内置了一段联动初始化指令，新机器上点一下复制，粘贴到那台电脑的对话里，那边的 AI 自己解析本机路径，自己把自动化建起来。别人拿到插件不需要我在旁边教。
再周全一点，任何人第一次按 W 发图，插件会自动往收件夹里丢一份指引文件，对方照着做就行，连问我都不用。
说实话这个环节比前面两个技术问题让我更高兴。因为在那一刻我干的不是找毛病，是在设计东西给别人用。
这半天我一行代码没写过。所有都是小美写的。我干的就三件事。
说清楚我要什么。 这条最好使。你说得越具体，它写得越准。我说色卡要顶上一条按占比分色的条，下面每行一个颜色，带百分比和用途，它就照着排出来了。你要是只说做个好看的色卡，它能给你八个版本，一个也不好看。
它说做完的时候别急着点头。 这条最难，因为它会糊弄你。同步那次它就是报个成功，推送 0 拉取 0，看着挺像回事。我要是当时点点头过去了，到现在还在那个假成功里打转。现在我养成个习惯，它说做完，我就问一句，数据在哪，多少条，给我看看。
规则空白的地方自己拍板。 这条没法外包。冲突的时候听谁的，文档里没有，它也不知道。这种判断一旦错了，用户的数据就悄悄没了，连个报错都不留。
产品没那么玄，它就是一个文件夹，装进你的浏览器，帮你省掉一件烦了很久的事
— 老王
这三件事里，没有一件需要你会写代码。
从自己的真实需求出发，平时缺什么做什么
— 老王
在这之前我用 AI 写过网页，做过小功能，也写过很多文章。但包括我在内，很多人心里都觉得，做一个能拿给别人用的产品是很遥远的事，那是工程师的领地。这次做完我发现，产品没那么玄，它就是一个文件夹，装进你的浏览器，帮你省掉一件烦了很久的事。
插件之后还能往哪儿走，我也想过了。网站，公众号的小程序，甚至一个硬件，都可以做。做小程序这件事，WorkBuddy 现在已经能直接产出了。
回头看，这个东西不是设计出来的，是长出来的。第一版就是个本地工具，够用就行，是多台机器的不便把云同步逼了出来。快速开始，不断迭代，一开始别想得太完美。
跟 AI 说句话就能出文字、图片、代码，这是新时代的 Word 和 PPT，每个人上手即会。从自己的真实需求出发，平时缺什么做什么，这是这六天里我最想留下的话。
我在公司推 AI 变革，老跟同事讲，别等着天上掉下来一个完美的 AI 产品，先把你手上重复了八百遍的那个动作包起来。这次算是把这句话用在了自己身上。以前是劝别人，这次是给自己交作业。
那天刷到什么图是真不记得了，现在也不重要。前两天我在一个画册网站上看到一张黄昏的片子，鼠标放上去，点反，几十秒，提示词、解构、色卡整齐排在右边。我把色卡复制进素材库，关掉浏览器去吃饭了。
就是这么个东西。
如果你也有个重复了很久的动作，或者脑子里有个念头放了很久没落地，找个晚上试试看。真没那么难。我当时也没想到，半天后能把它用起来。
以上，如果觉得不错，随手点个赞、在看、转发三连吧，如果想第一时间收到推送，也可以给我个星标。
谢谢你看我的文章，我们，下次再见。
/ 老王