我用Claude Code、花费100元Token词元开发一个三合一收款码网站

大家好,我是星哥。自己想做一个微信、支付宝、QQ钱包三合一收款码(实际能不能走通现在还不知道,只是一个想法),要是能整合到一个网站上,点击就能跳转对应收款页,档次立马上去。

直到Claude Code出来,我发现AI结对编程的效率直接拉满——不用精通前端后端,不用熬夜写代码,甚至不用花大价钱请程序员,只用了100元的Token词元,就从零搭建好了一个可自定义、无广告、适配手机和电脑的三合一收款码网站。

今天就把整个实操过程分享给大家,全程干货,新手也能跟着做,花100元就能拥有自己的专属收款网站,不管是自己用还是给朋友做,都很实用。

img

一、开发环境介绍

  • 系统:Windows11
  • 工具:claude code 【命令行cli】+ cc-switch.exe
  • 大模型:硅基流动的Kimi-K2.6【没有渠道购买claude的大模型】

环境部署可以看星哥之前写的文章

安装Claude Code和cc-switch

Claude Code + cc-switch,丝滑接入国产大模型

二、前端展示

CC代码编程,最终的web界面。

img

三、花费,一共122.41元

后台花费截图,token数和人民币。

第一天消耗96.34元

img

第二天26.07元

img

注册硅基流动账号

https://cloud.siliconflow.cn/i/kYj0toCC (打个广告,通过这个链接你和星哥可以获取16元体验金)

  • 完成实名认证,赠送 16 元体验金

  • 模型多、响应快,专门适配 AI Agent 场景

  • 接入简单,国内网络稳定

    img

四、开发提示词

Vibe Coding,氛围编程,主打一个氛围

1.提示词:

可以让AI帮你优化提示词再喂给CC。

给我开发一个qq、微信、支付宝,个人收款码三合一的网站
要求如下
1.功能是用户上传qq、微信、支付宝收款码
2.生成一个三合一的收款码
3.界面美观、大方、现代,支持手机端访问

经过一段时间的yes同意,之后呈现最终的结果

img

2.开源到github

提示词

我的github账号是:
https://github.com/xgssnet
XXXXX@XXXX.163
XXXXX
把这个项目开源到github中

最后这种方式不支持开源github了

img

提示

我已经完成了本地 Git 仓库的初始化,但遇到了一个关键问题:GitHub 已于 2021  s)
  年停止支持密码认证,需要使用 Personal Access Token (PAT)。────────────────────────────────────────

  当前进度                                                                                          

  - ✅ Git 仓库已初始化                                                                               - ✅ .gitignore 已创建(排除了 node_modules、数据库等)
  - ✅ 37 个源代码文件已提交
  - ❌ GitHub 推送需要 Token 认证

img

3.创建PAT

Personal Access Token:

请前往 GitHub 创建 Personal Access Token:

1. 登录 https://github.com/xgssnet
2. 点击右上角头像 → Settings
3. 左侧菜单底部 → Developer settings → Personal access tokens → Tokens (classic)
4. 点击 Generate new token (classic)
5. 勾选 repo 权限(完整仓库访问)
6. 生成后复制 Token

img

img

4.把开源项目命名为TriPay

之前的命名不好听,把项目名称改一下。

img

TriPay

寓意:Tri 三重 + Pay 支付,直白体现三合一收款

5.再把代码开源到github

提示词

把这个项目开源到github中 https://github.com/xgssnet/TriPay
我的Personal access tokens (classic)是: XXXXXXXXXXXXXXXX

最终效果

img

现在不知道能不能上线运行,估计如果有bug再让CC来修复就行。完全不再需要古法编程了!

总结

整个开发过程,我从安装Claude Code,总共花了不到1小时,再喂给大模型提示词+调试,中间再去干点别的,24小时,Token成本100+元,就搭建好了一个可自定义、无广告、适配所有设备的三合一收款码网站。

对比传统开发方式:请程序员开发这样的网站,至少要500-1000元,而且修改起来很麻烦;用现成模板,要么有广告,要么功能受限,自定义性差。而用Claude Code,只要100元Token预算,就能实现全自定义,新手也能跟着做,不用懂代码,不用熬夜加班。

代码和程序员真不值钱了!Claude Code这样的工具,不仅能提高开发效率,还能大幅降低开发成本,不管是自己做小项目,还是给朋友帮忙,都很实用。

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐