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

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

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

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

 一、开发环境介绍
打开网易新闻 查看精彩图片
一、开发环境介绍

• 系统:Windows11

  • • 工具:claude code 【命令行cli】+ cc-switch.exe

  • • 大模型:硅基流动的Kimi-K2.6【没有渠道购买claude的大模型】

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

    二、前端展示

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

     三、花费,一共122.41元
    打开网易新闻 查看精彩图片
    三、花费,一共122.41元

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

    第一天消耗96.34元

    打开网易新闻 查看精彩图片

    第二天26.07元

     注册硅基流动账号
    打开网易新闻 查看精彩图片
    注册硅基流动账号

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

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

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

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

      四、开发提示词
      打开网易新闻 查看精彩图片
      四、开发提示词

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

      1.提示词:

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

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

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

       2.开源到github
      打开网易新闻 查看精彩图片
      2.开源到github

      提示词

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

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

      打开网易新闻 查看精彩图片

      提示

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

      当前进度

      - ✅ Git 仓库已初始化 - ✅ .gitignore 已创建(排除了 node_modules、数据库等)
      - ✅ 37 个源代码文件已提交
      - ❌ GitHub 推送需要 Token 认证
      打开网易新闻 查看精彩图片
      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
      打开网易新闻 查看精彩图片

      打开网易新闻 查看精彩图片

      4.把开源项目命名为TriPay

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

      打开网易新闻 查看精彩图片

      TriPay

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

      5.再把代码开源到github

      提示词

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

      最终效果

      打开网易新闻 查看精彩图片

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

      总结

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

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

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