我用Claude Code、花費(fèi)100元Token詞元開發(fā)一個三合一收款碼網(wǎng)站

大家好，我是星哥。自己想做一個微信、支付寶、QQ錢包三合一收款碼（實(shí)際能不能走通現(xiàn)在還不知道，只是一個想法），要是能整合到一個網(wǎng)站上，點(diǎn)擊就能跳轉(zhuǎn)對應(yīng)收款頁，檔次立馬上去。

直到Claude Code出來，我發(fā)現(xiàn)AI結(jié)對編程的效率直接拉滿——不用精通前端后端，不用熬夜寫代碼，甚至不用花大價(jià)錢請程序員，只用了100元的Token詞元，就從零搭建好了一個可自定義、無廣告、適配手機(jī)和電腦的三合一收款碼網(wǎng)站。

今天就把整個實(shí)操過程分享給大家，全程干貨，新手也能跟著做，花100元就能擁有自己的專屬收款網(wǎng)站，不管是自己用還是給朋友做，都很實(shí)用。

一、開發(fā)環(huán)境介紹

• 
  

  ? 系統(tǒng)：Windows11

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

• ? 大模型：硅基流動的Kimi-K2.6【沒有渠道購買claude的大模型】

環(huán)境部署可以看星哥之前寫的文章

二、前端展示

CC代碼編程，最終的web界面。

三、花費(fèi)，一共122.41元

后臺花費(fèi)截圖，token數(shù)和人民幣。

第一天消耗96.34元

第二天26.07元

注冊硅基流動賬號

https://cloud.siliconflow.cn/i/kYj0toCC （打個廣告，通過這個鏈接你和星哥可以獲取16元體驗(yàn)金）

• ? 完成實(shí)名認(rèn)證，贈送 16 元體驗(yàn)金

• ? 模型多、響應(yīng)快，專門適配 AI Agent 場景

• ? 接入簡單，國內(nèi)網(wǎng)絡(luò)穩(wěn)定

  
  

Vibe Coding，氛圍編程，主打一個氛圍

1.提示詞：

可以讓AI幫你優(yōu)化提示詞再喂給CC。

                                                           給我開發(fā)一個qq、微信、支付寶，個人收款碼三合一的網(wǎng)站
要求如下
1.功能是用戶上傳qq、微信、支付寶收款碼
2.生成一個三合一的收款碼
3.界面美觀、大方、現(xiàn)代，支持手機(jī)端訪問

經(jīng)過一段時間的yes同意，之后呈現(xiàn)最終的結(jié)果

2.開源到github

提示詞

                                                           我的github賬號是：
https://github.com/xgssnet
XXXXX@XXXX.163
XXXXX
把這個項(xiàng)目開源到github中

最后這種方式不支持開源github了

提示

                                                           我已經(jīng)完成了本地 Git 倉庫的初始化，但遇到了一個關(guān)鍵問題：GitHub 已于 2021  s)
  年停止支持密碼認(rèn)證，需要使用 Personal Access Token (PAT)。────────────────────────────────────────

   當(dāng)前進(jìn)度                                                                                          

   - ? Git 倉庫已初始化                                                                               - ? .gitignore 已創(chuàng)建（排除了 node_modules、數(shù)據(jù)庫等）
  - ? 37 個源代碼文件已提交
  - ? GitHub 推送需要 Token 認(rèn)證

Personal Access Token：

請前往 GitHub 創(chuàng)建 Personal Access Token：

                                                           1. 登錄 https://github.com/xgssnet
2. 點(diǎn)擊右上角頭像 → Settings
3. 左側(cè)菜單底部 → Developer settings → Personal access tokens → Tokens (classic)
4. 點(diǎn)擊 Generate new token (classic)
5. 勾選 repo 權(quán)限（完整倉庫訪問）
6. 生成后復(fù)制 Token

4.把開源項(xiàng)目命名為TriPay

之前的命名不好聽，把項(xiàng)目名稱改一下。

TriPay

寓意：Tri 三重 + Pay 支付，直白體現(xiàn)三合一收款

5.再把代碼開源到github

提示詞

                                                           把這個項(xiàng)目開源到github中 https://github.com/xgssnet/TriPay
我的Personal access tokens (classic)是： XXXXXXXXXXXXXXXX

最終效果

現(xiàn)在不知道能不能上線運(yùn)行，估計(jì)如果有bug再讓CC來修復(fù)就行。完全不再需要古法編程了！

總結(jié)

整個開發(fā)過程，我從安裝Claude Code，總共花了不到1小時，再喂給大模型提示詞+調(diào)試，中間再去干點(diǎn)別的，24小時，Token成本100+元，就搭建好了一個可自定義、無廣告、適配所有設(shè)備的三合一收款碼網(wǎng)站。

對比傳統(tǒng)開發(fā)方式：請程序員開發(fā)這樣的網(wǎng)站，至少要500-1000元，而且修改起來很麻煩；用現(xiàn)成模板，要么有廣告，要么功能受限，自定義性差。而用Claude Code，只要100元Token預(yù)算，就能實(shí)現(xiàn)全自定義，新手也能跟著做，不用懂代碼，不用熬夜加班。

代碼和程序員真不值錢了！Claude Code這樣的工具，不僅能提高開發(fā)效率，還能大幅降低開發(fā)成本，不管是自己做小項(xiàng)目，還是給朋友幫忙，都很實(shí)用。