复盘 PromptSnippets
PromptSnippets (opens in a new tab) 已经上线近半年了，产品也趋于稳定，是时候复盘一下了。
按照 调研、验证、设计研发、推广、运营 这5个阶段来。
调研
PromptSnippets 起因是厌倦了频繁地在GPT网站上输入同一个或一类Prompt，就像在写React代码时，要写大量的 export function ComponentName() { return <></> } 。在VSCode中，我通过它提供的code snippets功能配置常用的代码片段，这个功能非常好用：
- 可以配置固定文本内容，满足输入同一个文本的需求。
- 可以在文本中挖空（变量），满足输入同一类文本的需求。
- 每个片段有一个触发的前缀，使用方便。
我想把VSCode的这个功能搬到浏览器中，用于解决类似的问题，并且主要用于AI问答网站的Prompt输入。
我调研了Chrome商店中相关的插件，有 Pi Prompt (opens in a new tab)、ChatGPT prompt inserter (opens in a new tab)、ChatGPT prompt genius (opens in a new tab)、AIPRM for ChatGPT (opens in a new tab)。发现一些问题：
- 大多UI就不太好看，其中比较好的是 ChatGPT prompt genius。
- 基本不支持上述提到的“变量”snippet。
- 操作没有VSCode那么方便，大多都是通过填表单来输入。
- 支持的网站较少，只支持主流网站。
- 即使功能简单，也有账号系统。
根据调研的结果，PromptSnippets立项之初我设立了这几个差异点：
- 良好的UI
- 模仿VSCode交互
- 支持大部分或全部网站
- 无需登录
验证
我验证这个需求的方式是在reddit、hacknews等论坛上发帖。 比如 https://news.ycombinator.com/item?id=37236466 (opens in a new tab) 收到的回复不多，但考虑到我自己需要这个浏览器插件，就着手研发了。
设计
如何设计良好的UI？
当然是抄参考借鉴致敬设计良好的自己喜欢的App咯！
我选择参考的是最近非常热门的项目管理App——Linear。 Linear有同意的设计系统，良好的交互，令人舒畅的动效，并且界面朴素，非常适合通威工具类别的浏览器插件。
一些界面截图：
对比之前项目的设计，借鉴别人的确实比自己从头开始设计高效，并且好看。
开发
技术上遇到两个难点：
- 样式隔离
- 文本编辑器适配
样式隔离
PromptSnipptes在UI上有两个部分，分别是设置面板和选择面板。
设置面板用于管理prompts和进行一些设置，这个可以用Popup或者Side panel来承载，不放在Main world中，也就不需要与Main world隔离样式。选择面板是必须在Main world中的，它是用户主动触发，用于在用户输入的文本编辑器中插入Prompt。如果不做样式隔离，那么设置面板就会受到Main world的CSS影响，样式变得不可控。
我使用Shadow Dom (opens in a new tab)来做样式隔离，Shadow Dom可以用于封装一个元素，里面的内容不被外部环境所影响，Main Wolrd 的全局CSS也就无法影响插件的选择面板了。
需要注意的是不仅外届的CSS无法改变Shadow Dom的内部，一般的JS也无法影响。比如 document.querySelector("div") 是无法查询到Shadow Dom内部的，需要用Shadow Dom挂载元素的 querySelector 方法才行。
文本编辑器适配
产品主要功能在技术上主要体现在对输入框的监测和改写，并且要做到支持所有网站使用，也就是要适配各种文本编辑器。除了一般的 input、 textarea 这两个文本编辑框之外，一些文本编辑器组件库还会基于 contenteditable 来搭建复杂的富文本编辑器。关于这部分我专门写了一篇文章 (opens in a new tab)来介绍 https://www.taterboom.com/posts/change-text-in-contenteditable (opens in a new tab)
营销
营销做了三个内容：产品介绍文章、产品介绍图文、还有一个短视频叫《全网最快输入Prompt (opens in a new tab)》。在 小红书、即刻、抖音、B站、Producthunt 上宣传。
数据最好的内容是标题比较吸引人的《全网最快输入Prompt》短视频，在小红书和抖音都有5000左右播放和几十个点赞。相比之下图文热度比较低，只有几百浏览和几个点赞，纯文章则更低。
Producthunt (opens in a new tab)表现出乎意料，有27个upvote和10条评论，我想其中有一部分应该是混账号热度的，但不乏为一个好的宣传方式，可以增加外链曝光。
这次营销给我的感受是，标题和封面是最重要的！图文和视频比纯文章效果好。
补充：
- 有一个推友分享了在reddit上的营销帖子 (opens in a new tab)，是以用户的视角来介绍自己的产品，内容包含场景、问题与产品是如何解决这些问题的，可以参考。
- ahrefs的博客 (opens in a new tab)介绍了很多SEO和营销相关的知识与实践，并且还有一些中文博客 (opens in a new tab)。大致翻阅一下就受益匪浅，比如有一篇文章 (opens in a new tab)讲推广，里面提到了通过创建一个竞品对比的页面来推广等等。
- nextjs (opens in a new tab)也有一些关于SEO的文章，里面提到“Three Pillars of Optimization”是Technical，Creation和Popularity
- 谷歌SEO教学 (opens in a new tab)
运营
我是用Github做用户反馈平台，有几条反馈，在Chrome商店也有几条反馈。主要关于更多的网页支持，支持弹窗输入等等，比较合理，我都采纳了。
运营下来，我的感受是收到的正反馈比较少，有一些点赞和一些感谢、赞美。应该要商业化，金钱反馈还是很香的。怎么商业化呢？chatgpt免费，其他网站收费？prompt上限？
关于产品本身，应该加上打点，没有用户操作数据不好做产品决策。比如Prompt Snippets有tab和popup两种输入方式，如果有打点就能知道用户偏好。
总结
PromptSnippets是我第一个完整的独立产品，从调研立项到设计开发在到运营，唯一可惜的是没有找到商业化切入点。
让我感受最深的是要建立feedback loop。调研要做，如果有人需要那才有做的必要；营销要做，只有告诉别人，别人才会知道有这个东西；运营要做，持续迭代。