我是印度的个人开发者。上周,我将我的第一款付费产品发布到Chrome网上应用店。想分享一下我的构建过程,因为我看到很多关于如何作为独立开发者发布产品的内容,但没有足够的实际的成本和遇到的问题的分解。

是什么:SnapToCode。Chrome扩展程序,使用Claude视觉将网页截图转换为清洁的Tailwind代码。拖拽选择任何UI,10秒内获得生产就绪的代码。5个免费转换,然后19美元终身,BYOK自定义密钥。

花费:

  • $200 Claude最大订阅(在vs code中使用claude代码构建整个项目,手写代码零行)
  • $5 Chrome开发费,单次
  • $5 api测试期间的信用额度
  • $210总计。没有其他费用。Vercel免费层用于登陆页面。没有广告,没有营销工具,没有SaaS堆栈。

我低估了:

  • 构建本身可能占工作的40%。其他60%是所有其他事情。Chrome列表的截图必须是精确的1280x800,我尝试在Figma中完成并想死,最后写了一个使用puppeteer脚本生成所有5个截图的脚本。还有隐私政策、列表复制、支付集成、登陆页面、AI输出调试(模型返回的代码中有React语法,我必须编写一个过滤器以去除它)和编写Chrome网上应用店团队的审查测试指示。

首次提交被批准。我完全归功于测试指示。大多数扩展程序至少被拒绝一次。

关于定价:

选择19美元终身BYOK。用户带来自己的自定义密钥,直接向Anthropic支付使用费用,成本约为每次转换1美分。我没有加价。

理由:我不想处理管理客户API预算、使用限制、按调用计费基础设施和因使用峰值而引起的退款争议作为个人开发者。客户直接向AI公司支付。销售工具,客户只需购买一次。更简单的发布和维护。

目前大多数AI工具收费9-20美元每月的订阅费,自定义密钥在幕后。我的产品倒转了这一点。想知道消费者是否喜欢一次性支付还是订阅太深入了。

两个技术问题折断了我的心:

  • Tailwind类别在manifest v3 CSP规则下不渲染在预览iframe中。尝试使用CDN方法,失败。尝试JIT,未触发。最终将完整的Tailwind样式表本地打包并通过chrome.runtime.getURL服务。现在完美工作。
  • JSX泄漏来自AI输出。Claude返回的代码中有className=和{" "}表达式,我必须编写一个正则表达式过滤器来去除它们。

我不确定:

  • 没有目标受众。没有推特,没有新闻稿,没有博客流量。这个发布只是我在这里出现并诚实地分享。真实地不知道好产品是否可以在2026年找到买家,还是说受众是必须的。

正在工作的第二个产品是为频繁切换上下文的开发者设计的标签管理器。正在于本周开始构建。

欢迎回答任何关于构建、BYOK经济学、Chrome网上应用店流程、AI调试、支付集成等问题。

Chrome网上应用店:chromewebstore.google.com/detail/snaptocode/jpchamlmjfoccmkdoiaibbpgkidapcnk