用开源赚钱？结合Stitch + Github开源复刻草料二维码
/ 8 min read
1. 介绍
Github是一个宝藏。如果你想开发一个软件，Github上有很多你可以直接使用的开源库和产品，甚至有些开源项目可以直接当做一个你的项目，在遵循协议的情况下商业化使用，例如：
• excalidraw：一个功能强大、界面简洁的虚拟手绘风格白板。
• tldraw：一个极其丝滑、功能丰富的“无限画布”白板工具。
• Lobe Chat：一个设计精良、功能强大的 AI 聊天（LLM）客户端，可以自托管。
• ChatGPT Next Web： 可能是最受欢迎的用于自托管 ChatGPT Web UI 的项目之一。
• Formbricks： 开源的构建表单产品的工具
• Plane：一个功能齐全的项目管理和事务跟踪工具。支持着板、列表、问题跟踪、周期（Sprints）和分析。
本期视频我们会来试图模仿开发一个草料二维码，这个项目我们会核心将两个知识点：
• Google Stitch:Google 官方出的原型图设计工具，我们会用它来实现设计
• 开源项目的合理使用：
• 如何找到开源项目？
• 项目如何盈利？
我们会使用 gr-code-styling这一个自足义生成二维码样式的工具，来实现我们核心的项目开发工作。
2. 使用开源需要注意的几点
2.1 如何找项目？
1. 官方搜索＋使用AI搜索
你可以使用Github官方搜索的方式，搜索对应的关键字来找到对应的项目。在官方搜索的结果上，需要注意几点：
• Star数：这代表这个项目大家认可的程度，可以作为判断项目质量好坏的依据
• 编程语言：你可以看到这个项目核心的编程语言是什么，对于web项目来说你更多需要关心JavaScript
• 跟新时间：确保不要是一个太老的项目
当然，你也可以让AI直接帮你进行筛选，说清楚你的需求，AI可以帮你筛选出优秀的项目。
2. 注意协议
以上协议都是100%可以商用的：
MIT
Apache 2.0
BSD 2-Clause
BSD 3-Clause
ISC
Unlicense
CCO
3. 认真阅读文档+可行性
找到了项目，你还需要认真通过Github的 READEM.md 这个文件，来确保这个项目是符合你的需求的。当然，如果这个项目的文档中涉及到了太多点的示例代码，你可以像我们视频一样结合AI来帮助你理解。
我们可以直接复制 https://github.com/kozakdenys/qr-code-styling/edit/master/README.md 完整的文档，来让AI来帮我们阅读文档，并进一步确认
这个项日是否符合我们的雯求
例如我们视频里面的提示词：
```项目的README.md```
我想开发一个如图所示对的二维码生成网站，这个github的开源项目是否符合我的需求？请你帮我分析一下2.2 思考项目盈利方式
1. 两种盈利方式
使用Github的开源项目，可以有两种变现方式：
• 广告收入：比较适合无需登陆的内容站和工具站
• SaaS订阅：比较适合AI产品和软件产品，需要实现完整的用户登陆注册功能，同时实现支付功能
另外有一种两者结合的付费方式，适合一些工具站，前端免费使用，数据保存在本地。但是当用户需要提供云端保存能力的时候，就转为SaaS订阅的模式。excalidraw 就是采用的这种模式。
3. 使用Al +Stitch实现设计
进入到 https://stitch.withgoogle.com， 输入提示词进行设计
提示词：
我需要创建一个二维码的生成网站，这是一个无需登陆登录的网站落地页，该落地页的hero部分允许用户输入域名，点击生成，就可以在输入框右侧生成对应的一个二维码。
右侧二维码下方有下载按钮和美化按钮，点击下载按钮直接实现保存。点击美化出现弹框，弹框支持设置美化二维等操作
3.2 获取代码
你可以选择对应的页面，导出截图和代码
也可以点击【View Code】，直接查看并复制对应的代码。
4. 进入开发
4.1 初始化next.js
进入到 Nextjs官网， 复制对应的初始化Nextjs项目的命令，在终端初始化一个Nex.js的项目
npx create-next-app@latest然后用Cursor打开该项目。
4.2 复制文档和源代码
接下来，创建 docs/目录，我们来复制对应的两个Stitch页面的源代码
• home.html ：首页的代码
• dialog.html ：有二维码配置弹框的代码
同时创建 qrcode-api.md，复制 https://github.com/kozakdenys/qr-codestyling/edit/master/README.md 的文档，作为接入该仓库的一个上下文。
4.3 Al开发
在Cursor中输入以下提示词：
我现在希望实现一个类似草料二维码的工具网站，首页落地页用户能够输入网址实现。
网站目前的设计图图我已经制作了出来。首先请你帮我根据 @docs/home.html 实现前端的还原工作，然后点击Beautify按钮后，出现弹框，弹框中能够自定义配置二维码的样式。UI布局参考 @docs/dialog.html 实现前端的还原。具体的配置如图所示，要求实现所有的配置项。
生成和美化二维码使用的开源工具，参考 @docs/qr-code-api.md 实现，请你安装并且实现整个代码生成逻辑可以尝试使用GPT-5.1 Codex High实现，也可以使用其他顶级模型替代：
• Gemini3
• Claude-Sonnet-4.5
• GPT-5 Codex High
等待AI开发完成后，你需要修改对应的Bug。
5. 课后作业
我们现在这个产品本身还是比较简单的，你可以尝试扩展更多功能：
• 短链功能（尝试找一下开源库实现）
• 接入更多草料二维码的功能
6. 课程源码