从羡慕朋友用Cursor到自制谷歌插件，我的AI编程实操之旅
最近几个月，我在即刻上陆续看到多名非程序员朋友开始搭建自己的工具和应用，心里十分羡慕。偶然间，我在公众号看到了《AI 编程，10小时2个产品，从 到 ，产品经理的天要变了！》这篇文章，由此对 AI 编程实操有了全新的概念。我开始思考怎样利用AI能力制作小工具，观察自己及身边设计师朋友的工作过程后，我决定选择一个学习与制作成本低、对设计师作用较大的工具，即收集素材的谷歌浏览器插件，经过一番探索，Image终于在10月初成功上线谷歌商店。
回顾我这次一边学习一边创造的历程，从产生想法到正式上线，能够归纳为五个关键步骤：
决定方向，由要实现的具体产品的主要功能来决定实现方式，思考用户与界面如何交互以实现功能从而开发代码，用代码实现功能与交互，同时处理边缘情况后上架商店，按照要求将代码提交到应用商店，还要充实详情页来宣传产品，借助不同媒介渠道推销产品以吸引用户。
在传统产品开发过程中，这个步骤要求业务人员和产品经理去挖掘市场需求，要了解竞品的实现方式，还需研究潜在用户的使用习惯...
如果你跟我一样是独立开发的新手，那么这个步骤更为重要，要做的事情是了解自己的真实需求，也要了解身边家人朋友的真实需求。
接着思索什么样的问题能够借助工具、产品、插件、补丁等途径迅速解决。部分工具产品的运行成本极为低廉，只要会编写代码，用户即刻便能使用。有些产品的投入成本相对偏高，需产出内容、实现用户互动、构建起社区，方可使功能发挥效能。身为新手，我挑选了成本最低的工具产品，打算凭借首个项目将AI辅助独立开发的流程顺利跑完。
以我自己的 Image为例：
我身为设计师，周围有不少从事设计工作的朋友。开展设计项目期间，大家都得在网上寻觅视觉参考。然而在谷歌浏览器打开几十个页面后，电脑开始发出轰隆轰隆的响声，反应速度渐趋迟缓，查找素材的动作变得极为卡顿。甚至连先前看到过的满意参考也不知置于哪一页面，设计师不得不逐页重新翻阅 。
于是我想到了“可视化收藏夹”的概念，有了这样一个谷歌浏览器插件，设计师在浏览网页时能够收集图片素材，在二次浏览时能快速找回自己满意的素材，还能把这个素材当作锚点回到原上下文中，总之，设计师可借助这个浏览器插件使图片收集原子化，让素材再利用更高效。
02 决定实现方式
有了第一步的大致想法后，接下来能够调研类似功能或产品的实现方式，与此同时思考如何依据自身需求优化现有方案。
还是以我自己的 Image为例：
上一步中，鉴于用户的痛点，我决定制作一个可视化收藏夹用以收集素材。接着我开始回顾“收集图片素材”这一功能的现有解决办法。我所知晓的有三种，其一为花瓣等素材收集网站，其二是浏览器自带的收藏夹，其三是Eagle等素材管理软件 。
以“可视化收藏夹”作为目标，Image具备「收集图片」、「图片分组」、「批量管理」等功能。进一步来讲，用户能够得到一个入口本地化的或者视觉化的浏览器收藏夹：设计师在任何网站上看到心仪图片后，以图片形式添加到收藏夹。与此同时，TA能够清楚看到自己收藏夹内的图片预览，并且进行管理。
确定好具体要实现的功能之后，我需要进一步细化，细化的内容是每个功能的交互，还有每个功能的体验。
比如最基础的「收集图片」功能，对于用户而言，哪种收集方式最为顺手？收集完的图片应放置于何种容器？收集完的图片能够保存多久？收集完却不想要该如何处理？收集完但需修改又该如何处理？用户所看到的收集图片是何种形式？这些问题在开发前均需考虑周全，明确目标可使代码开发过程更为顺畅。
03 开发代码
接着就是重头戏，AI 代码开发的部分。
综上所述，我的代码能力基本不强。为了实现零代码开发，我先后使用了3个工具来协助我：
有了这些工具的协助，我基本上只需将大目标拆解成不同的小任务，接着把每个任务逐渐细化成具体问题，借助自然语言对话，让AI解决我能力之外的具体问题。
还是拿我自己的Image来说，单纯的代码开发过程，能够大致划分成3步，这3步是不断循环的：
03-1. 确定基本框架
在决定方向以及实现方式的这个阶段，我大体上确定好了自己想要去做的功能。于是，我径直朝着……描述我所想要的基本功能：
<p><pre class="language-null"> <code>我想要创建一个 Chrome 浏览器的插件
浏览器内任何网站图片，用户都可以右键加入到暂时存放画板中
用户打开浏览器插件图标，就能看到自己加入过画板的全部图片。
暂时画板中每个图片可以用 checkbox 勾选/不勾选
用户在暂时画板中放入多个图片，之后能够进行批量操作，还能一键复制到其他地方。
如何实现这个这个 Chrome 插件的基本步骤和功能</code></pre></p>
它告诉了我插件的基本结构：
<p><pre class="language-null"> <code>my-chrome-extension/
│
├── manifest.json
├── popup.html
├── popup.js
├── content.js
├── background.js
└── style.css</code></pre></p>
同时帮忙编写了几个文档的初版代码，分别是.json、.js、popup.html、popup.js和style.css。我将生成的代码，按照文档结构复制到相应位置，很快就得到了一个能在谷歌浏览器上试用的本地代码包。
03-2. 细化现有功能
https://img2.baidu.com/it/u=4190330656,1505190336&fm=253&fmt=JPEG&app=138&f=JPEG?w=500&h=812
生成的基础功能确实发挥作用了，我能够将页面的图片添加到收藏夹画板，我还能够利用其勾选图片。我借助自然语言提出需求，AI 便能快速写出许多内容，并且代码基本可以使用！有一种十分神奇的感觉！
趁着这股兴奋劲，我开始在 窗口中继续细化产品功能：
<p><pre class="language-null"> <code>我希望能够让用户为每张图片添加标签，那些拥有相同标签的图片会自动组成一个分组。
这该怎么实现</code></pre></p>
功能代码在popup.js文档中不断疯狂迭代，有新的代码自动出现，还有一些旧的代码出现了替换版本。我要做的事只有一件，那就是试一下新代码是否可用。要是可用，就点击「」按钮确认新增。要是不可用，就点击「」按钮回到原版。
有些功能生成过程极为顺畅，带给我意想不到的惊喜。比如在制作「删除图片标签」功能时，在我未提出任何需求的情况下，自动补全了「标签删除二次确认信息」功能，当用户删除当前标签时，弹窗会告知用户“若删除此标签，所有使用该标签的图片将失去标签，你确定要删除吗？”
除了生成我指定的功能，它还能自动缝缝补补，并且把边缘 case 功能一并加上。写代码时的第一个 Aha 就这样水灵灵地出现了。
03-3. 测试 + Debug
代码生成到一定阶段，比如说写完一个新功能，这时我就会去谷歌浏览器上测试，看看是否好用。有时会比较顺利，生成的东西马上就能用。但多数情况下，谷歌浏览器会报错，致使插件无法运行。更严重的是，浏览器不报错，然而想要的功能却无法实现。
当浏览器出现报错情况时，将报错内容复制到特定对话框内，它会自动修正错误并生成新的功能代码。即便出现解决一个问题又来三个问题的状况，只要耐心与AI合作，报错问题最终会被逐个解决。
不报错的问题更加难以处理。例如在开发进程中，插件的“批量粘贴”功能一直不太顺畅。经过多次协助修改后，粘贴出来的要么是多张图片的名称，要么是多张图片的链接，始终没办法粘贴图片自身。于是我进行询问，怎样解决这个问题：
<p><pre class="language-null"> <code>用户将收集的图片粘贴到figma时，粘贴的对象应当是图片本身，而非图片的名称，也不是超链接。
要怎么优化</code></pre></p>
给出的答案是对popup.js文档里的函数予以优化，要保证图像的Blob数据能够被正确获取，与此同时创建将复制内容放进粘贴板并让Figma能够识别的操作。依照的指导，我让对当前代码进行优化。在新增函数确保兜底逻辑正确之后，浏览器却报错" to copy.,.you valid." 。于是我继续咨询：
<p><pre class="language-null"> <code>画板里的单张图片可以鼠标直接复制粘贴到其他地方。
但是勾选之后，批量复制出现报错，提示“未能复制图像。请确保你选择了有效的图像。”
要怎么优化</code></pre></p>
与GPT进行了多轮反复沟通，去除了过于复杂的方法（比如中重绘每张选中图片），最终了解到浏览器的安全策略会对批量复制操作加以限制，还在网上查阅了不同文章，发现其他信源也有相同说法。为了使产品能够正常上线，我最终只能在产品方案方面寻找替代办法，暂时的解决办法是修改导出图片的逻辑，即当用户粘贴多张图片时，粘贴一张便展示所有选中图片的大图。
想要完整地做完一个项目，上述三个步骤需不断循环。代码开发时会遇各种意外，有些功能起初未定义好，要靠代码生成过程完善；有些功能写代码时发现不可行，得来回推敲形成新方案；有些功能一开始不在规划内，经与朋友讨论优化逻辑结构。多次迭代的产品开发过程才是常态。
04 上架商店过程
完成功能，进行测试，完成打包后，接下来要做的便是上传并发布产品。依据谷歌商店官方指引，整个上架流程分为若干步骤：
注册开发者账号，需要外币信用卡，需要非大陆地址。
用户注册一个新的谷歌账号，该账号也可以是之前已拥有gmail的账号，用户支付谷歌一笔5美元的注册费，以此把这个账号升级为开发者账号。具体步骤如下：
1️⃣ 在谷歌浏览器内输入网址 ，进入应用商店
点击右上角的“更多”按钮，此时会出现下拉菜单，在菜单中选择“开发者信息中心”。
注册新的谷歌账号来进行验证，也可以对现有的谷歌账号和密码进行验证。官方建议选择一个经常查看的邮箱，因此我直接使用了现有的邮箱。要是需要分割现有邮件和插件通知邮件，那么可以注册新邮件。
接受所有协议，接受隐私政策，支付注册费。注册费为5美元，这是一次性的，我当时的汇率是三十多块人民币，不会持续扣钱。
特别需要注意的是，谷歌不支持国内借记卡、支付宝、微信等支付方式，若要支付这5美元，需使用一张可支付外币的国内信用卡。
04-2. 完善账号信息
完成注册后，要进一步完善开发者个人信息，其中包括发布者名称、邮箱验证、确认是否为欧盟法规的交易者、测试账号管理、打开通知提醒等。这部分信息日后可随时修改，按实际情况快速填写就行。若过程中有任何专有名词或信息不确定，能点击页内谷歌官方的说明链接 。
04-3. 准备插件代码包
这一步需要仔细检查代码文档，查看其是否齐全，然后将所有文档压缩成 ZIP 包，最后上传至商店。
在谷歌浏览器中利用本地代码包开展最后一次测试，要保证自己设计的全部功能都能够正确实现，并且浏览器不存在额外报错。
确认.json 文档代码里有“name”字段，有“icons”字段，检查 icon 图标文件按正确路径包含在文件夹内
3️⃣ 文件包压缩成 ZIP 格式，并在后台「上传新内容」
04-4. 创建商品详情（️ 需要宣传文案 & 图片）
接着就要创建一个能吸引人的商品详情页，通过对插件具体功能和用法加以说明，这个页面能够吸引潜在用户的关注，进而让他们使用工具。
https://img2.baidu.com/it/u=2212294523,3012880185&fm=253&fmt=JPEG&app=138&f=JPEG?w=500&h=701
商品详情页所需提供的内容主要分成两个部分，一部分是说明文字，另一部分是经过排版的图片。由于自身工作原因，做图已十分熟练，所以就没费力气找AI工具来生成了。
但详情内的说明文案基本上都是在AI辅助的情况下完成的 。我先是在应用商店查看了不同类型收集插件的说明文案 ，像和。之后找到了比较令我满意的语气和措辞方法并提供给。然后我用中文大致描述了这个插件的基本功能 ，接着让AI依照我提供的案例来撰写英文宣传文案 。
稍加调试，最后上线的商品详情页结果如下：
04-5. 解释隐私权 & 确认发布范围
最后一步，要向谷歌解释代码中为何必须调用涉及隐私权的函数，要确定向世界上哪些国家和地区开放权限，还要明确是免费还是收费。
谷歌会自动读取.json文档中使用的函数，它要求开发者向商店解释隐私权相关函数的作用，以Image的代码为例，有几个隐私权函数被调用，分别是""、""、""、"tabs"，还有""的权限是""，也就是插件要求所有网页的权限。
我将那些需要向谷歌说明理由的项目，复制到了的Chat里，询问使用函数的缘由。Chat好似一位极具耐心的高级工程师，从原理方面有条有理地阐释每个函数的具体用途。最后我所要做的仅仅是把他的答复复制粘贴到上传文本框中，照样子回答谷歌。
最后选择一下发布范围，便可保存草稿，接着提请审核。我的首次申请跨越了一个周末，在过完周末后的1至2个工作日，这个插件顺利上线了。
05 宣传产品
产品发布之后，接下来的最后一步便是寻找各类渠道去宣传该产品（前提是不打算进行付费投流）。近期在收听播客时，我渐渐形成了一个观念：产品功能达到60分、70分，乃至80分，固然十分重要，然而再好的用户体验都没办法成为产品长期的护城河，渠道以及营销才是产品持续发展的关键所在。仔细想来，互联网行业里那些处于利基市场、抓住特殊用户痛点的小产品，大多难以抵御大公司的冲击，这是由于它们的获客能力与宣传能力根本不在同一水准 。
若想成为更具全面性的独立开发者，宣传产品是产品开发工作里不可或缺的一部分。根据我对即刻上众多独立开发者的观察，“宣传产品”能做的事情如下：
05-1. 建立个人品牌，持续不断生产对别人有价值的内容
1️⃣ 举例｜少楠 - flomo
我对flomo这个产品的了解起始于少楠讲述卡片盒笔记法的一集播客，在他的介绍下我初步学习了更先进的知识管理方法，进而开始审视自己的工作流程，随后通过产品沉思录和flomo的说明文档，我对该产品和这套工作方法有了更多认识，这套工具与工作流程也逐渐成为我工作生活中不可缺少的一部分。
从另一个角度来说，若一个独立开发者想要推销自身产品，那就应该给用户提供一个理由，一个关于为何要依照该工具的逻辑去工作的理由。与此同时，他还应当具备深厚的内容底蕴，能够助力用户在某一领域不断迭代自身认知，进而让用户亲手塑造一个更出色的自己。
2️⃣ 举例｜ 花生 - 小猫补光灯
小猫补光灯的花生是近期爆火的AI独立开发者典型，他原本是产品经理，借助AI开发了许多工具，在小红书上因小猫补光灯APP爆火后，便开始在多个社交媒体上发帖宣传自身项目成就，由于自发渠道内容被更多人看到，越来越多的播客和公众号发现了他，致使他不断出现在更大众的节目和文章中 。
花生不仅创造产品，其影响力还不断向外扩展，此外，花生还在运营自己的B站账号，它把开发产品的过程与方法录制成了长视频，借此让更多人能够学习AI工具、AI开发流程、AI上架步骤以及AI应用场景...
花生走出了两条路。第一条路是，将自己打造成AI时代独立开发者的典型，让无数想要复刻成功的人，深入了解他的方法论与路径。第二条路是，坚持build in，借助AI编程领域的实用内容帮助大家，使后来人能更轻松地复刻过程，凭借内容形成影响力锚点。
05-2. 参与行业活动，扩大业内影响力
1️⃣ 参加行业 Conf
现在的独立产品圈里，分散的小规模行业Conf数量不少，比如杭州良渚文化村有各种活动，还有海辛的Demo Inn，以及出海去孵化器的每周直播...
去参加活动，能在特定领域内认识更多同路人，能扩大朋友圈，能增加外部影响力，还能拓展产品的推广范围。
2️⃣ 投稿新产品收集站 // 社媒账号
新产品打榜很有名的，在国内也存在不少同类型的小型产品，比如新趣集，比如神器集，比如不死鸟...
️少数派 /这种高质量文章集散地
独立产品包括，Funny café有趣产品咖啡馆，Figma
05-3. 拓展渠道，寻求破圈
1️⃣ 小红书
小红书已然成为新的百度，年轻人要是对某件事不了解，就会前往小红书查找他人的案例分享。小红书的日活数量庞大，其主要用户是年轻人，能够精准覆盖大部分独立产品的潜在用户群体。
小红书用户的反馈十分直接，并且讨论氛围良好。只要产品具备实用性，开发者能够在第一时间获得用户的响应与反馈，甚至还会有用户自发进行传播。
应用「」，应用「小猫补光灯」，是以小红书作为主要宣传途径，从而让更多人知晓独立开发者的产品。
2️⃣ 小宇宙
播客在近两年逐渐成为极具影响力、最能破圈的新传媒形态，其影响力不断扩大。往远了看，播客对2024年特朗普当选美国总统产生了影响。往近了看，播客已逐步融入城市年轻人的生活，助力他们了解周围的事物、观点及资讯。
播客时长动辄40分钟甚至俩小时，属于长时间的信息输出，与大多数feed流产品的短平快不同，这大大提高了用户接受观点的可能性。
「flomo」把播客当作主要宣传途径，借此让用户知晓背后的笔记方法论，还能了解产品功能。
Image上架商店后，我做了一些之前未曾做过的宣传尝试，写下了本篇经验总结的文章，制作了一条宣传视频，该视频可覆盖小红书和视频号。
写在最后
在完成了整个AI独立开发流程后，我产生了一些零散的感受，还有一些零散的认知：
总体而言，未来已然到来。鼓励每一位对AI编程怀有兴趣的朋友，动手去制作一些对自己、对朋友都便利的小插件，整个过程十分有趣。
REF
AI编程，10小时能做出2个产品，产品经理的工作模式要改变了！用特定方式，把自己的拼贴画工作流做成了一个app！5分钟就能上手AI代码编辑器，零基础也能开发插件，从此你就是高级程序员了！打造专属插件，只需简单几步！插件发布准备工作，有谷歌官方文档，其中包括“如何注册Web Store开发者账号”，程序员潘岩，还有“教你注册开发者账号并发布浏览器插件”，任聪聪，
页:
[1]