从截图中抠出代码 CodeOCR的诞生故事
冯超
独立开发者 / 项目作者
大家好，我是小雨。
最近我试用了一个非常实用的小工具，名字叫 CodeOCR。它能把代码截图直接变成可复制的代码文本，程序员看了都得说一句：“哇，这功能我太需要了！”
冯超，2024年硕士毕业于复旦大学管理学院应用统计专业，是个对 AI 应用充满热情的开发者。他说：“我一直希望能做一些好用的、好玩的产品。”于是有了这个项目的起点。
灵感来源其实很接地气——程序员群里的日常。很多人喜欢截图分享代码，这种方式美观清晰，但最大的问题是：你没法复制！冯超想，既然现在视觉大模型这么强，能不能把代码图片识别出来，变成能复制的文本？这个想法一拍脑门，就开始干。
但事情没那么简单。
一开始他就遇到了全栈技能盲区的挑战。Python 他熟，但前端、部署、后端交互这套流程并不熟悉。怎么办？他的做法非常值得借鉴：
先“扫盲”。快速刷过一遍 TypeScript、Next.js、Docker 等相关技术的官方文档，搞清楚基本概念和组成结构。
然后他找了几个 GitHub 上的开源 SaaS 模板跑通项目，配合 AI 编程助手进行逐步解读。这一过程中，冯超发现——AI 可以写很多代码，但关键时刻还得自己判断和干预。“有时候我得告诉它：你写的这个功能和我的需求不符，咱得改一改。”这时候，前期的基础储备就派上用场了。
最终，他通过 AI 和自己的配合，把 CodeOCR 做成了一个完整可用、可上线的产品。冯超说自己写的代码不多，但每一行都是“踩过坑之后留下的”。
比如，部署时因为把 NEXT_PUBLIC_SITE_URL 写成了 NEXT_PUBLIC_SUTE_URL，结果上线后一直报错。花了好几天都没查出来，最后恍然大悟的那一刻，他说：“真的是顿悟时刻。”
这个项目现在还没有商业化计划，对冯超来说，它更像是一场实战演练。他说：“就像程序员练手做 TODO 应用一样，这是我第一次做一个从 0 到 1 能上线的小工具。”
目前的功能还比较简单，只支持单张图片识别。未来他也想加上多图识别、优化用户体验等等，不过现在已经收获满满——不仅技术上学了不少，更重要的是那种“原来我真的能做出来”的信心。
说起用户群体，他觉得“经常分享代码的程序员”可能最需要这个工具。他也在几个程序员群里小范围分享过，反响不错。
当然，这条路上也离不开社群的帮助。他在群里问过部署相关的问题，也得到了不少热心前辈的指点。但他说，最可靠的“导师”其实是 AI：“啥都懂、随时在线”。
最后，问他这个项目有没有什么“脱颖而出”的功能，他笑了：“现在还不好意思说它有多特别啦，毕竟很多地方还有提升空间。但我希望以后能做出更多让我自豪的项目。”
我特别喜欢冯超在群里分享的这一句：
“干中学，先做出一个垃圾。做出垃圾后，对一些之前觉得很高级的技术就祛魅了。”
这句话太实在了。
如果你也曾因为不会部署、不会前端、不会全栈而犹豫过，不妨参考冯超的路径：先快速扫盲、跑通模板、让 AI 辅助开发、然后一步步调试打磨。很多时候，真正的成长不是靠看完教程，而是从踩坑开始的。
再次附上链接：
👉 在线体验地址：codeocr.fengchao.pro
⭐ 项目源码地址：https://github.com/jeremy-feng/codeocr
如果你觉得这个项目不错，记得去 GitHub 给冯超点个 Star 鼓励一下。
0、可以快速介绍以下自己吗？
我是冯超， 2024 年硕士毕业于复旦管院应用统计专业。我对 AI 应用非常有热情，希望能做一些好用的、好玩的产品～
1、能简单介绍一下你的项目和核心功能吗？
将代码截图转换为可复制的代码文本。
2、这个项目是如何起步的？背后有什么灵感？
在微信群里分享代码、排查错误的时候，有时候会通过截图的形式来分享。这样的好处是美观易读，但并不方便后续直接复制或编辑。借助越来越强大的视觉大模型，希望可以识别图片中的代码并直接复制，无需手敲代码，提高生产力。
3、初期遇到过哪些挑战？是如何解决的？
由于之前的学习和工作经验的缘故，我对 Python 编程比较熟悉，但对前端、前后端的数据交互、部署上线等全栈流程并不了解，这是我最大的挑战。
因此首先需要对各种技术栈有个大概的理解，为此我是这样做的：
-
首先快速阅读 Typescript、Next.js、Docker 等相关技术栈的入门教程，大部分是看它们的官方文档和知名度非常高的教程（例如阮一峰网站上的教程）。这里只是快速过一遍，大概知道核心概念即可。
-
同时，我对照一些 GitHub 上的 SaaS 模板，先跑通模板项目，然后让 AI 编程工具带着我理解项目的各个组成部分，以及它们的功能。结合上一点的官方文档和教程，我能大致理解一个全栈项目的项目结构，以及了解一些最佳实践。
然后，开始结合自己的业务逻辑，让 AI 帮我实现功能和修 Bug。这一步中，我真正参与敲键盘写的代码很少，只在 “AI 写的代码不符合我的要求”、“我觉得应该写得更好”的情况下介入。这些介入是有必要的，并且是基于我前期对各个技术栈的初步理解，才能精准高效地写出来的。如果人完全不介入的话，可能会出现一些 Bug，但 AI 也一直无法真正理解我的需求，或者一直修不好，这时就会比较耗时了。
4、你是如何盈利化这个项目的？有哪些方式？
这个项目很简单，目前并没有盈利的计划。我把它作为一次宝贵的学习机会，就像很多程序员通过编写 TODO 应用来练手一样。
5、你的项目面向哪些用户？如何吸引他们？
我想经常需要分享代码的程序员可能比较有用。我在一些程序员较多的圈子里分享过。
6、项目未来的发展方向是什么？
目前的功能还比较简单。未来也许可以从只识别单张图片，变成支持识别多张图片。还有一些 UI 和用户体验上的想法。
7、作为独立开发者，你如何保持动力和创新？
其实脑子里的想法蛮多的。动力部分来自于科技的进步，让我很兴奋地认识到“我原来可以做到这些！”。
8、有哪些独特的功能让你的项目脱颖而出？
有些惭愧，我目前还不好意思说 CodeOCR 脱颖而出了哈哈。希望之后能做出更多让自己自豪的项目！
9、项目发展过程中，社群和合作有多大帮助？
我在群里问过一些部署的问题，得到了一些前辈的指点，帮我少走了一些弯路。帮助我少走最多弯路的当然是 AI 啦，啥都懂、随时在线的导师。
10、在项目中，你有哪些收获或成长？
从 0 到 1 做出一个完整的产品，让我熟悉了整个流程。中途踩过不少坑（之前部署的时候把环境变量 NEXT_PUBLIC_SITE_URL 的 SITE 写成了 SUTE，导致上线后一直报错，折腾了我几天都没明白，发现问题之后那种恍然大悟的 Aha moment，真的是顿悟时刻），这些是我宝贵的成长。
干中学，先做出一个垃圾。做出垃圾后，对一些之前认为很高级的技术也祛魅啦，发现“原来我可以做到”！
这对我今后继续学习和开发产品不仅带来经验，也会带来信心～✊