vibecoding了一个英语口语练习网站
- 内容介绍
- 文章标签
- 相关推荐
本帖使用社区公益推广，符合推广要求。我申明并遵循社区要求的以下内容：
- 我的项目是免费使用的，无收费（变相收费、赞助）部分： 是
- 我的帖子已经打上 公益推广 标签： 是
- 我的项目属于个人项目，与公司或商业机构无关： 是
- 我的项目不存在QQ、TG等群组引流： 是
- 我的项目不存在非运营必要的网站引流： 是
- 我的项目不存在为他人推广、AFF： 是
- 我的项目无关联的商业项目： 是
- 我的站点存在登录，并已接入 LINUX DO Connect： 不存在登录
- 我帖子内的项目介绍，AI生成、润色内容部分已截图发出： 是
- 以上选择我承诺是永久有效的，接受社区和佬友监督： 是
以下为项目介绍正文内容，AI生成、润色内容已使用截图方式发出
首次VibeCoding一个英语口语练习网站
网站：talkeveryday.cc
Github：GitHub - LightlyBlue/EnglishPractice: 在线使用英语与AI进行口语对话，AI会对你的口语进行打分、纠错、润色，每句话都提供追问功能。 · GitHub
使用方法
在配置页面填入OpenAI的API url和API key即可。
流程介绍
Agent：Codex。使用chatgpt plus附赠的额度。
Coding方式：直接对话。
时间：零散对话约一周时间。
开发原因
由于有练习英语口语的需求，但是接触到的软件都无法满足的需求。
本人的开发经验约等于0，非科班，仅自学过C++、Python等相关的知识。考虑到CodingAgent的火爆以及自己需求的简单性，便决定自行开发。
过程记录
1、下载Codex，登陆chatgpt账户。
2、新建本地文件夹，存放源代码。
3、直接对话，简要描述自己的需求。
4、多轮对话调整页面。
5、在当前文件夹下新开一个对话用于git提交。
6、git push到GitHub。
7、使用Vercel连接GitHub部署。
8、Cloudflare购买域名，并配置到vercel。
过程总结
1、Agent使用规范
在此之前从未接触过Vibecoding，但其实互联网上已经存在很多Agent使用教程，比如ClaudeCode使用手册等等，系统化地学习预计占用1h～2h，但使用规范会加快自己的开发进度。
2、关于Git
开发前期并没有使用git，好在没有出现什么较大的失误。使用git可以在codex中直接undo本次操作，增加容错。
本项目在初代版本确定后才使用git，仍然提供了很大的便利。
3、多Thread对话
针对不同的功能使用新的Thread，这一技巧应该会在第1点中的教程中有人提到，这里简单总结。分Thread对话应该可以避免污染上下文，不影响大模型的判断。
4、对代码的理解
即使目前Agent已经很强大，但仍至少要求有会使用框架、会读代码的能力。这一过程尤其体现在调试过程，一个很简单的页面布局问题，与Agent沟通可能需要耗时很久，但如果自己懂代码，可能很快就能定位到问题，能够更好地指导Agent操作。
5、调试
本项目不涉及后端，是一个纯前端的静态网页，理论上调试难度不高，但由于经验不足仍然产生了很多问题，系统性的学习和干中学两者要相互结合。
需求、设计、前端、后端、调试、部署、运维。每一步都需要自己去理解，Agent同时提高了下限和上限。
最后
写的比较潦草，没有全程剖析。
首帖，各位佬友包容一下，有建议欢迎指出。
--【壹】--：
支持佬友！做的很棒啊
建议Basic Settings配置页面放到Practice Panel右侧，做成选项卡切换的形式会更容易发现，另外Basic Settings和Practice Panel写成中文会好些。
--【贰】--：
收到建议
--【叁】--：
非常不错啊
--【肆】--：
太棒了！赞
--【伍】--：
后面如果还会维护的话，就尝试增加一下，hhh，谢谢佬友建议
--【陆】--：
希望支持俄语
--【柒】--：
老哥牛皮的
--【捌】--：
很不错，感谢佬
--【玖】--：
优秀，关键是有思路
--【拾】--：
不错呀！
--【拾壹】--：
感谢佬友
--【拾贰】--：
very good
--【拾叁】--： 蓝调时间:
英语口语的需求，但是接触到的软件都无法满足的需求。
本人的开发经验约等于0，非科班，仅自学过C++、Python等相关的知识。考虑到CodingAgent的火爆以及自己需求的简单性，便决定自行开发。过程记录
1、下载Codex，登陆chatgpt账户。
2、新建本地文件夹，存放源代码。
3、直接对话，简要描述自己的需求。
4、多轮对话调整页面。
5、在当前文件夹下新开一个对话用于git提交。
6、git push到GitHub。
7、使用Vercel连接GitHub部署。
8、Cloudflare购买域名，并配置到vercel。过程总结
其实打开豆包，就可以对话练习了，可以替代很多人了。
--【拾肆】--：
这个ui好眼熟，我之前vibe出来的一个k线回放工具也这ui
本帖使用社区公益推广，符合推广要求。我申明并遵循社区要求的以下内容：
- 我的项目是免费使用的，无收费（变相收费、赞助）部分： 是
- 我的帖子已经打上 公益推广 标签： 是
- 我的项目属于个人项目，与公司或商业机构无关： 是
- 我的项目不存在QQ、TG等群组引流： 是
- 我的项目不存在非运营必要的网站引流： 是
- 我的项目不存在为他人推广、AFF： 是
- 我的项目无关联的商业项目： 是
- 我的站点存在登录，并已接入 LINUX DO Connect： 不存在登录
- 我帖子内的项目介绍，AI生成、润色内容部分已截图发出： 是
- 以上选择我承诺是永久有效的，接受社区和佬友监督： 是
以下为项目介绍正文内容，AI生成、润色内容已使用截图方式发出
首次VibeCoding一个英语口语练习网站
网站：talkeveryday.cc
Github：GitHub - LightlyBlue/EnglishPractice: 在线使用英语与AI进行口语对话，AI会对你的口语进行打分、纠错、润色，每句话都提供追问功能。 · GitHub
使用方法
在配置页面填入OpenAI的API url和API key即可。
流程介绍
Agent：Codex。使用chatgpt plus附赠的额度。
Coding方式：直接对话。
时间：零散对话约一周时间。
开发原因
由于有练习英语口语的需求，但是接触到的软件都无法满足的需求。
本人的开发经验约等于0，非科班，仅自学过C++、Python等相关的知识。考虑到CodingAgent的火爆以及自己需求的简单性，便决定自行开发。
过程记录
1、下载Codex，登陆chatgpt账户。
2、新建本地文件夹，存放源代码。
3、直接对话，简要描述自己的需求。
4、多轮对话调整页面。
5、在当前文件夹下新开一个对话用于git提交。
6、git push到GitHub。
7、使用Vercel连接GitHub部署。
8、Cloudflare购买域名，并配置到vercel。
过程总结
1、Agent使用规范
在此之前从未接触过Vibecoding，但其实互联网上已经存在很多Agent使用教程，比如ClaudeCode使用手册等等，系统化地学习预计占用1h～2h，但使用规范会加快自己的开发进度。
2、关于Git
开发前期并没有使用git，好在没有出现什么较大的失误。使用git可以在codex中直接undo本次操作，增加容错。
本项目在初代版本确定后才使用git，仍然提供了很大的便利。
3、多Thread对话
针对不同的功能使用新的Thread，这一技巧应该会在第1点中的教程中有人提到，这里简单总结。分Thread对话应该可以避免污染上下文，不影响大模型的判断。
4、对代码的理解
即使目前Agent已经很强大，但仍至少要求有会使用框架、会读代码的能力。这一过程尤其体现在调试过程，一个很简单的页面布局问题，与Agent沟通可能需要耗时很久，但如果自己懂代码，可能很快就能定位到问题，能够更好地指导Agent操作。
5、调试
本项目不涉及后端，是一个纯前端的静态网页，理论上调试难度不高，但由于经验不足仍然产生了很多问题，系统性的学习和干中学两者要相互结合。
需求、设计、前端、后端、调试、部署、运维。每一步都需要自己去理解，Agent同时提高了下限和上限。
最后
写的比较潦草，没有全程剖析。
首帖，各位佬友包容一下，有建议欢迎指出。
--【壹】--：
支持佬友！做的很棒啊
建议Basic Settings配置页面放到Practice Panel右侧，做成选项卡切换的形式会更容易发现，另外Basic Settings和Practice Panel写成中文会好些。
--【贰】--：
收到建议
--【叁】--：
非常不错啊
--【肆】--：
太棒了！赞
--【伍】--：
后面如果还会维护的话，就尝试增加一下，hhh，谢谢佬友建议
--【陆】--：
希望支持俄语
--【柒】--：
老哥牛皮的
--【捌】--：
很不错，感谢佬
--【玖】--：
优秀，关键是有思路
--【拾】--：
不错呀！
--【拾壹】--：
感谢佬友
--【拾贰】--：
very good
--【拾叁】--： 蓝调时间:
英语口语的需求，但是接触到的软件都无法满足的需求。
本人的开发经验约等于0，非科班，仅自学过C++、Python等相关的知识。考虑到CodingAgent的火爆以及自己需求的简单性，便决定自行开发。过程记录
1、下载Codex，登陆chatgpt账户。
2、新建本地文件夹，存放源代码。
3、直接对话，简要描述自己的需求。
4、多轮对话调整页面。
5、在当前文件夹下新开一个对话用于git提交。
6、git push到GitHub。
7、使用Vercel连接GitHub部署。
8、Cloudflare购买域名，并配置到vercel。过程总结
其实打开豆包，就可以对话练习了，可以替代很多人了。
--【拾肆】--：
这个ui好眼熟，我之前vibe出来的一个k线回放工具也这ui