【屎山开源】关于我VideCoding出来的一个神人“个人网站主页”和我这个智障经验教训的碎碎念
- 内容介绍
- 文章标签
- 相关推荐
本帖使用社区开源推广，符合推广要求。我申明并遵循社区要求的以下内容：
- 我的帖子已经打上 开源推广 标签： 是
- 我的开源项目完整开源，无未开源部分： 是
- 我的开源项目已链接认可 LINUX DO 社区： 是
- 我帖子内的项目介绍，AI生成、润色内容部分已截图发出： 是
- 以上选择我承诺是永久有效的，接受社区和佬友监督： 是
以下为项目介绍正文内容，AI生成、润色内容已使用截图方式发出
首先介绍一下我这个项目。个人主页这种东西，很多人做过了，而且我相信很多人比我做得好。我这次把它开放出来，主要是想分享一下这个只花了一天时间就开发出来的结果。但我得事先说明：我一行代码没敲 ，所有内容都是通过自然语言与 OpenCode 交流得出的。
技术栈也极其简单：一个 JavaScript、一个 CSS、一个 HTML，就这点内容。这种静态网页意味着你可以部署到任何地方——GitHub Pages、Vercel 等等。我现在就部署在 Vercel 上。
所以接下来的分享纯主观 ，没有所谓的客观。大家就当听一个中学生唠嗑，听个乐呵吧。
image1035×646 141 KB
起因
本来我是想通过一个提示词测试多个模型，看哪个模型更好，谁能建出更好的个人主页。结果这不测不要紧，一测就停不下来了——属于是发狠了、忘情了。经过大概一天左右紧张刺激地对 AI 发号施令，最后的效果居然意外地不错。
大家可以访问我的网站看看效果：
WAKUSEI - 个人主页
wakusei - 个人主页
（怎么感觉有点像打广告？）
项目也已开源：
GitHub - wakusei0413/WakuseiHomePage: 这是一个为自己开发的个人主页 用于导航自己之后的网站和社交媒体
这是一个为自己开发的个人主页 用于导航自己之后的网站和社交媒体
297f95e102d164dae3288780852a2edb95e02b60_2_1035x5801035×580 70.4 KB
肯定有人会说：“你这个 vibe coding 代码质量肯定一塌糊涂。”
我想说的是：说得好，我完全同意。
但无论黑猫白猫，能抓到老鼠就是好猫。最后的效果确实不错。不过某些代码和配置文件可能已经失效了——很简单，很多 bug 还没修好，只能说“能用”，但好不好用、某些功能能不能用，不好说。所以代码质量堪称一坨，堪比 OpenClaw（bushi，OpenClaw 没那么差）。
毕竟这个项目就是给自己玩的，本质上这里的代码估计都没法投入真正的生产（这不废话吗）。
使用模型的主观体验
顺便说说我这次的感受。我开的是 OpenCode 的 Go 套餐，首月 5 美元，折合人民币大概 35 块。相对便宜，额度也没那么大，但胜在稳定——没有遇到什么“降智”的情况。能用 GLM5、Kimi K2.5、小米的 MIMO V2 Omni 和 V2 Pro，以及 Minimax 家族的 M2.5 和 2.7。
image243×292 2.92 KB
这次我只用了 GLM5 、Kimi K2.5 和一个 MIMO V2 Pro 。主观体验如下：
- GLM5 ：比较适合修 bug，修复能力较强。
- Kimi K2.5 ：如果你想快速实现一个新功能，不想说太多话，想让大模型自己去意会，那 Kimi K2.5 可能更好。但让它修具体 bug 时，也可能越修越多。所以到后面，我遇到 bug 就调用 GLM5，想加新功能就调用 Kimi K2.5。
- MIMO V2 Pro ：非常一言难尽。它的做事风格介于 GLM 和 Kimi 之间，但正因为这样，无论修 bug 还是加新功能，都做得不是特别好——都有点难受。要说很差也不至于，但后面我就弃用了，只保留了前两个：一个修 bug，一个加新功能。
至于 Minimax？我的感受是：那玩意是路边一条 ，给我留下了今生的阴影，我是再也不想用了。之前的 Coding Plan 已经留下了非常深重的阴影——除了量大，估计一无是处。
image2118×1350 90.4 KB
当然，OpenCode 的 Go 套餐额度消耗速度也很快。不过看在它 35 块钱不降质的面子上，我没什么意见，起码挺热闹的。
至于 Minimax？我的感受是：那玩意是路边一条 ，给我留下了今生的阴影，我是再也不想用了。之前的 Coding Plan 已经留下了非常深重的阴影——除了量大，估计一无是处。
当然，OpenCode 的 Go 套餐额度消耗速度也很快。不过看在它 35 块钱不降质的面子上，我没什么意见，起码挺热闹的。
经验总结
下面说说这次项目里获得的经验，或者说怎么减少返工和不必要的折腾 。
1. 上下文压缩
不要等到上下文快满的时候让 OpenCode 自动压缩。当上下文已经占了 1/3 左右 ，或者你已经完成了一个新功能的开发，就应该手动压缩（Compact） 。无论厂商宣传的上下文有多长，上下文越长，出现错误和幻觉的几率就越大。如果下一个任务与当前上下文联系不紧密，最优做法就是手动压缩。
image556×297 7.43 KB
2. 语言描述能力
刚开始做项目时，你还能有条理地描述需求。但随着时间推移，你可能会浮躁、不耐烦，没有把具体需求说清楚，导致模型出错。换句话讲，如果你面对一个真实的程序员，描述不清楚或不给正确参考，他也没法写出你脑中想要的东西。
image1260×1260 111 KB
3. 规划模式（Plan 模式）
修 bug 可以不开规划模式，但添加新功能时，无论用什么模型，都有必要先用 Plan 模式进行规划 ，让模型细化到可执行的程度，再进入 Build 模式执行。你可能到后面会浮躁，想快速看到成果，懒得再用 Plan 规划一遍——觉得费时间。但代码量越多，这样做越灾难，一定会返工，而且会返无数的工 。
image179×158 1.85 KB
4. 宁缺毋滥
宁愿用贵一点的模型（token 更贵的），也不要用低价、量大但效果不行的模型。不需要很多次，只要一次低质量代码就能把整个项目带偏 。就算后续用昂贵模型去修 bug，一时半会也修不好。最后花了时间、精力，还多花了钱，得不偿失。
image1266×271 18.7 KB
5. 备份
一定要有备份，一定要能回滚 。当你 vibe coding 出了一个不错的原型，如果不进行备份（git add . 、git commit ），只要后续出一个 bug，基本上就积重难返，项目就废了。所以当第一阶段想要开发的功能差不多完成时，先打一个 commit ，让你拥有回滚的权利，再接着开发新功能。千万不要偷这个懒。
image237×213 56.5 KB
说实话，上述这些可能很多人已经说过了，甚至是老生常谈。但有些东西只有你自己实际去做了、感受到了，才能真切地说出来。希望我这个菜鸡萌新的碎碎念能给大家起到一点启发和警醒。
最后几句
我其实挺惊讶——现在国产模型并不比国外的 Claude、GPT、Codex 等差很多。我认为它们之间的差距已经不像价格差距那么大了 。说实话，大家都知道 Claude Opus 4.6、GPT 5.4 这种编程效果好、性能优秀，难道大家不知道吗？我想大家是知道的。
但像我这种学生群体，不可能每个月都去消费那么贵的模型额度——消费不起。所以无论如何，有国产模型去追赶，总归是好事。我觉得也不必太过悲观。或者说，大部分人自己的需求，可能国产模型已经足够用了 。
话就大致说到这，希望各位巨佬能从我这个傻卵的经验中得到一点启发。
如果觉得这个项目好玩也请在帖子的左上角投我一票，嘻嘻。
网友解答：--【壹】--：
v0.1.0
（偷偷增加了玻璃的质感）
- 配置优化
- 删除未使用的
weather配置节 - 删除未使用的
wallpaper.source、wallpaper.tags、wallpaper.r18、wallpaper.count配置项 - 新增
wallpaper.apis支持多 API 源配置化（可配置任意数量的壁纸源） - 新增
wallpaper.preloadCount预加载数量配置 - 新增
wallpaper.raceTimeout和wallpaper.maxRetries竞速参数配置 - 新增
loading.texts加载文字配置（可自定义加载提示文案） - 新增
loading.textSwitchInterval文字切换间隔配置
- 删除未使用的
- 代码重构
- 壁纸 API 地址从硬编码改为配置化
- 加载提示文字从硬编码改为配置化
- 支持任意数量的 API 竞速加载（不再限制为2个）
- 允许配置积极向上的壁纸 API，让你在工位上打开再也不会尴尬。
--【贰】--：
谢谢分享 ~
--【叁】--：
嗦的好！我完全同意
--【肆】--：
别狡辩了，明明是你喜欢
--【伍】--：
好兄弟，虽然你的图很好看，但你让我在办公室丢尽了颜面
--【陆】--：
就是说我为什么要在高铁上打开这个个人“黄”页
--【柒】--：
有点意思
--【捌】--：
关注了，期待小佬给我们带来更多好玩的项目
--【玖】--：
艹 哈哈哈哈哈
--【拾】--：
别的不说，这个浓度就很可以
--【拾壹】--：
佬友这个挺有个性的，一进去就是超大泳装贴脸
中学生，很厉害了。
BTW，我们可以交换友链
--【拾贰】--：
佬友已经很棒了，我从这里面看到的是你的学习能力和总结能力，作为一位从业很多年的程序开发者，明显能看出你在这个过程中踩过很多的坑，也经历过很多次抓狂的时候，但是这都是必经之路，你在这个年纪就已经做的比很多程序员好了。我希望你有时间的时候也去学习一下计算机和编程原理，对，就是最基础的东西，这会让你更深入理解计算机，能更好的与代码交互。加油佬友
--【拾叁】--：
--【拾肆】--： wakusei:
：那玩意是路边一条 ，给我留下了今生的阴影，我是再也不想用了。之前的 Coding Plan 已经留下了非常深重的阴影——除了量大，估计一无是处。
感谢佬帮忙踩雷
--【拾伍】--：
Mark
--【拾陆】--：
我再次声明这里面的插画都是调用的API，真的跟我无关呀！
我是无辜的
--【拾柒】--：
不知道为什么这个插画api会混进一些奇奇怪怪的东西
但确实找不到替代 先这样凑会儿吧
--【拾捌】--：
确实感觉普通的学习一下基础的这些东西普通的已经够用了
--【拾玖】--：
年轻的天才程序员啊
本帖使用社区开源推广，符合推广要求。我申明并遵循社区要求的以下内容：
- 我的帖子已经打上 开源推广 标签： 是
- 我的开源项目完整开源，无未开源部分： 是
- 我的开源项目已链接认可 LINUX DO 社区： 是
- 我帖子内的项目介绍，AI生成、润色内容部分已截图发出： 是
- 以上选择我承诺是永久有效的，接受社区和佬友监督： 是
以下为项目介绍正文内容，AI生成、润色内容已使用截图方式发出
首先介绍一下我这个项目。个人主页这种东西，很多人做过了，而且我相信很多人比我做得好。我这次把它开放出来，主要是想分享一下这个只花了一天时间就开发出来的结果。但我得事先说明：我一行代码没敲 ，所有内容都是通过自然语言与 OpenCode 交流得出的。
技术栈也极其简单：一个 JavaScript、一个 CSS、一个 HTML，就这点内容。这种静态网页意味着你可以部署到任何地方——GitHub Pages、Vercel 等等。我现在就部署在 Vercel 上。
所以接下来的分享纯主观 ，没有所谓的客观。大家就当听一个中学生唠嗑，听个乐呵吧。
image1035×646 141 KB
起因
本来我是想通过一个提示词测试多个模型，看哪个模型更好，谁能建出更好的个人主页。结果这不测不要紧，一测就停不下来了——属于是发狠了、忘情了。经过大概一天左右紧张刺激地对 AI 发号施令，最后的效果居然意外地不错。
大家可以访问我的网站看看效果：
WAKUSEI - 个人主页
wakusei - 个人主页
（怎么感觉有点像打广告？）
项目也已开源：
GitHub - wakusei0413/WakuseiHomePage: 这是一个为自己开发的个人主页 用于导航自己之后的网站和社交媒体
这是一个为自己开发的个人主页 用于导航自己之后的网站和社交媒体
297f95e102d164dae3288780852a2edb95e02b60_2_1035x5801035×580 70.4 KB
肯定有人会说：“你这个 vibe coding 代码质量肯定一塌糊涂。”
我想说的是：说得好，我完全同意。
但无论黑猫白猫，能抓到老鼠就是好猫。最后的效果确实不错。不过某些代码和配置文件可能已经失效了——很简单，很多 bug 还没修好，只能说“能用”，但好不好用、某些功能能不能用，不好说。所以代码质量堪称一坨，堪比 OpenClaw（bushi，OpenClaw 没那么差）。
毕竟这个项目就是给自己玩的，本质上这里的代码估计都没法投入真正的生产（这不废话吗）。
使用模型的主观体验
顺便说说我这次的感受。我开的是 OpenCode 的 Go 套餐，首月 5 美元，折合人民币大概 35 块。相对便宜，额度也没那么大，但胜在稳定——没有遇到什么“降智”的情况。能用 GLM5、Kimi K2.5、小米的 MIMO V2 Omni 和 V2 Pro，以及 Minimax 家族的 M2.5 和 2.7。
image243×292 2.92 KB
这次我只用了 GLM5 、Kimi K2.5 和一个 MIMO V2 Pro 。主观体验如下：
- GLM5 ：比较适合修 bug，修复能力较强。
- Kimi K2.5 ：如果你想快速实现一个新功能，不想说太多话，想让大模型自己去意会，那 Kimi K2.5 可能更好。但让它修具体 bug 时，也可能越修越多。所以到后面，我遇到 bug 就调用 GLM5，想加新功能就调用 Kimi K2.5。
- MIMO V2 Pro ：非常一言难尽。它的做事风格介于 GLM 和 Kimi 之间，但正因为这样，无论修 bug 还是加新功能，都做得不是特别好——都有点难受。要说很差也不至于，但后面我就弃用了，只保留了前两个：一个修 bug，一个加新功能。
至于 Minimax？我的感受是：那玩意是路边一条 ，给我留下了今生的阴影，我是再也不想用了。之前的 Coding Plan 已经留下了非常深重的阴影——除了量大，估计一无是处。
image2118×1350 90.4 KB
当然，OpenCode 的 Go 套餐额度消耗速度也很快。不过看在它 35 块钱不降质的面子上，我没什么意见，起码挺热闹的。
至于 Minimax？我的感受是：那玩意是路边一条 ，给我留下了今生的阴影，我是再也不想用了。之前的 Coding Plan 已经留下了非常深重的阴影——除了量大，估计一无是处。
当然，OpenCode 的 Go 套餐额度消耗速度也很快。不过看在它 35 块钱不降质的面子上，我没什么意见，起码挺热闹的。
经验总结
下面说说这次项目里获得的经验，或者说怎么减少返工和不必要的折腾 。
1. 上下文压缩
不要等到上下文快满的时候让 OpenCode 自动压缩。当上下文已经占了 1/3 左右 ，或者你已经完成了一个新功能的开发，就应该手动压缩（Compact） 。无论厂商宣传的上下文有多长，上下文越长，出现错误和幻觉的几率就越大。如果下一个任务与当前上下文联系不紧密，最优做法就是手动压缩。
image556×297 7.43 KB
2. 语言描述能力
刚开始做项目时，你还能有条理地描述需求。但随着时间推移，你可能会浮躁、不耐烦，没有把具体需求说清楚，导致模型出错。换句话讲，如果你面对一个真实的程序员，描述不清楚或不给正确参考，他也没法写出你脑中想要的东西。
image1260×1260 111 KB
3. 规划模式（Plan 模式）
修 bug 可以不开规划模式，但添加新功能时，无论用什么模型，都有必要先用 Plan 模式进行规划 ，让模型细化到可执行的程度，再进入 Build 模式执行。你可能到后面会浮躁，想快速看到成果，懒得再用 Plan 规划一遍——觉得费时间。但代码量越多，这样做越灾难，一定会返工，而且会返无数的工 。
image179×158 1.85 KB
4. 宁缺毋滥
宁愿用贵一点的模型（token 更贵的），也不要用低价、量大但效果不行的模型。不需要很多次，只要一次低质量代码就能把整个项目带偏 。就算后续用昂贵模型去修 bug，一时半会也修不好。最后花了时间、精力，还多花了钱，得不偿失。
image1266×271 18.7 KB
5. 备份
一定要有备份，一定要能回滚 。当你 vibe coding 出了一个不错的原型，如果不进行备份（git add . 、git commit ），只要后续出一个 bug，基本上就积重难返，项目就废了。所以当第一阶段想要开发的功能差不多完成时，先打一个 commit ，让你拥有回滚的权利，再接着开发新功能。千万不要偷这个懒。
image237×213 56.5 KB
说实话，上述这些可能很多人已经说过了，甚至是老生常谈。但有些东西只有你自己实际去做了、感受到了，才能真切地说出来。希望我这个菜鸡萌新的碎碎念能给大家起到一点启发和警醒。
最后几句
我其实挺惊讶——现在国产模型并不比国外的 Claude、GPT、Codex 等差很多。我认为它们之间的差距已经不像价格差距那么大了 。说实话，大家都知道 Claude Opus 4.6、GPT 5.4 这种编程效果好、性能优秀，难道大家不知道吗？我想大家是知道的。
但像我这种学生群体，不可能每个月都去消费那么贵的模型额度——消费不起。所以无论如何，有国产模型去追赶，总归是好事。我觉得也不必太过悲观。或者说，大部分人自己的需求，可能国产模型已经足够用了 。
话就大致说到这，希望各位巨佬能从我这个傻卵的经验中得到一点启发。
如果觉得这个项目好玩也请在帖子的左上角投我一票，嘻嘻。
网友解答：--【壹】--：
v0.1.0
（偷偷增加了玻璃的质感）
- 配置优化
- 删除未使用的
weather配置节 - 删除未使用的
wallpaper.source、wallpaper.tags、wallpaper.r18、wallpaper.count配置项 - 新增
wallpaper.apis支持多 API 源配置化（可配置任意数量的壁纸源） - 新增
wallpaper.preloadCount预加载数量配置 - 新增
wallpaper.raceTimeout和wallpaper.maxRetries竞速参数配置 - 新增
loading.texts加载文字配置（可自定义加载提示文案） - 新增
loading.textSwitchInterval文字切换间隔配置
- 删除未使用的
- 代码重构
- 壁纸 API 地址从硬编码改为配置化
- 加载提示文字从硬编码改为配置化
- 支持任意数量的 API 竞速加载（不再限制为2个）
- 允许配置积极向上的壁纸 API，让你在工位上打开再也不会尴尬。
--【贰】--：
谢谢分享 ~
--【叁】--：
嗦的好！我完全同意
--【肆】--：
别狡辩了，明明是你喜欢
--【伍】--：
好兄弟，虽然你的图很好看，但你让我在办公室丢尽了颜面
--【陆】--：
就是说我为什么要在高铁上打开这个个人“黄”页
--【柒】--：
有点意思
--【捌】--：
关注了，期待小佬给我们带来更多好玩的项目
--【玖】--：
艹 哈哈哈哈哈
--【拾】--：
别的不说，这个浓度就很可以
--【拾壹】--：
佬友这个挺有个性的，一进去就是超大泳装贴脸
中学生，很厉害了。
BTW，我们可以交换友链
--【拾贰】--：
佬友已经很棒了，我从这里面看到的是你的学习能力和总结能力，作为一位从业很多年的程序开发者，明显能看出你在这个过程中踩过很多的坑，也经历过很多次抓狂的时候，但是这都是必经之路，你在这个年纪就已经做的比很多程序员好了。我希望你有时间的时候也去学习一下计算机和编程原理，对，就是最基础的东西，这会让你更深入理解计算机，能更好的与代码交互。加油佬友
--【拾叁】--：
--【拾肆】--： wakusei:
：那玩意是路边一条 ，给我留下了今生的阴影，我是再也不想用了。之前的 Coding Plan 已经留下了非常深重的阴影——除了量大，估计一无是处。
感谢佬帮忙踩雷
--【拾伍】--：
Mark
--【拾陆】--：
我再次声明这里面的插画都是调用的API，真的跟我无关呀！
我是无辜的
--【拾柒】--：
不知道为什么这个插画api会混进一些奇奇怪怪的东西
但确实找不到替代 先这样凑会儿吧
--【拾捌】--：
确实感觉普通的学习一下基础的这些东西普通的已经够用了
--【拾玖】--：
年轻的天才程序员啊