# 當 DeFi 暴雷遇上 AI Vibe Coding：一天做出資金救援前端小工具的實作筆記

By [區塊鏈文摘](https://paragraph.com/@tw3) · 2025-11-11

---

緣起：《區塊勢》明恩的血淚經驗文與 Anton 的 CLI 救援工具
----------------------------------

上週 DeFi 圈再次經歷一場小型災難——因為 Balancer V2 協議被駭，導致使用相同程式碼的 DeFi 流動池資金被駭客抽乾，連帶使用相同抵押資產的 DeFi 服務流動性都受到影響。《區塊勢》電子報作者許明恩在[文章](https://www.blocktrend.today/p/734)和 [Substack note](https://substack.com/@blocktrend/note/c-173483972) 中分享，他本人也是受災戶之一，其中 Euler Finance 在 Avalanche 上的 USDT 資金池因為是 OKX 錢包推薦的收益來源，又 MAX 交易所提領 Avalache-USDT 零手續費，導致不少台灣人中招而資金受困。多虧 ETHTaipei 貢獻者 Anton 第一時間 vibe coding 出了一套 CLI 救援工具，才成功把錢從流動性卡住的資金池裡搶救出來。

這個工具的邏輯很簡單但有效：**每秒自動偵測資金池是否有流動性補進，一旦偵測到就立刻發起 redeem 交易把資金抽出來**。手動操作的人根本跑不贏這類自動化腳本——\[資金池顯示還有 300 多萬美元，但每次協議把錢補回來，就會被搶跑程式瞬間清空。

問題是，這套工具只有 Node.js CLI 版本，需要透過終端機下指令操作。明恩在 [Substack note](https://substack.com/@blocktrend/note/c-175503987) 號召：「如果有好心人士願意撥空做出個前端，幫忙那些不熟技術但資金受困的人，歡迎私訊或來信聯繫。」

[Subscribe](https://paragraph.com/@tw3/subscribe)

![](https://paragraph.com/editor/callout/information-icon.png)

使用信箱註冊會以電子報形式收到文章更新

贊助支持我繼續整理這類 web3 產業大方向哲學觀的內容

Crypto 贊助：[https://gcake119.fkey.id/](https://gcake119.fkey.id/)

法幣與信用卡支付請使用下方專屬連結

受限於台灣金流管制法規，無法開啟個人 Stripe 收款，造成不便敬請見諒

[https://open.firstory.me/join/wwhowbuhow/tier/01925f48-ec8c-449e-74f2-b5ee9380e637](https://open.firstory.me/join/wwhowbuhow/tier/01925f48-ec8c-449e-74f2-b5ee9380e637)

透過推薦連結購買冷錢包，學習自己持有與管理數位資產的第一步！

視促銷活動檔期不同，你我都會得到不同程度的折扣或獎勵金

Ledger：[https://shop.ledger.com/?referral\_code=3CMHJHEX8RYN9](https://shop.ledger.com/?referral_code=3CMHJHEX8RYN9)

Trezor：[https://affil.trezor.io/SHh5](https://affil.trezor.io/SHh5)

CoolWallet：[https://www.coolwallet.io/product/coolwallet-pro/?ref=zta0ymf](https://www.coolwallet.io/product/coolwallet-pro/?ref=zta0ymf)

* * *

從「也許我可以試試看」到動手做
---------------

中午看到明恩的 note，我心想：「我最近正在學 AI vibe coding 架站，也許可以試著實作看看。」就在貼文下方留言說可以來試試看。

老實說，在請 AI 分析完 Anton 的專案並討論幾個可能做法後，對於能否實現這個前端小工具沒有什麼把握。Web3 相關套件幾乎是以 TypeScript 為主流，對於才剛初學架站三要素 HTML/CSS/Javascript 的我來說完全是在越級打怪，大概就是還在認識雕刻刀和槌子的階段就要直接復刻米開朗基羅的大衛像那樣🥹。但我給自己設定的目標很明確：**把工作流程和操作步驟拆解清楚，分段看懂每個步驟在做什麼就好，剩下的交給 AI。**

於是，我開啟 Perplexity AI，開始做。

[

當 DeFi 暴雷遇上 AI Vibe Coding - Podcast on Firstory
------------------------------------------------

留言告訴我你對這一集的想法： https://open.firstory.me/user/cmgx8vsi201tt01tm0673618o/comments 《區塊鏈文摘》電子報 Substack： https://taiweb3.substack.com/ Paragraph： https://paragraph.xyz/@tw3 請雞蛋糕喝一杯蜂蜜紅茶、或每月小額贊助諮商小豬撲滿計劃 https://open.firstory.me/join/wwhowbuhow 加密貨幣抖內 或使用下列收款地址 $BTC on-chain: bc1qty2qy4vp69w5yecn5m8q56zlu80yz6uh3w9whr $BTC lightning: gcake119@walletofsatoshi.com $ETH: gcake119.fkey.eth $ADA handle: $gcake119 $TEZ: gcake119.tez 透過推薦連結購買冷錢包，學習自己持有與管理數位資產的第一步！ 視促銷活動檔期不同，你我都會得到不同程度的折扣或獎勵金 Ledger 冷錢包 https://shop.ledger.com/pages/referral-program?referral\_code=NNS6VK4T6YRFP Trezor 冷錢包 https://affil.trezor.io/SHh5 CoolWallet 卡片式冷錢包 https://www.coolwallet.io/products/coolwallet-pro/?ref=zta0ymf 《喂喂你還好不好》Podcast https://wwhowbuhow.firstory.io/ 《喂喂你還好不好》電子報 Firstory： https://open.firstory.me/join/wwhowbuhow Substack： https://wwhowbuhow.substack.com/ Paragraph： https://paragraph.xyz/@wwhowbuhow 片尾曲：番茄蛋《漫長的跑道》 https://streetvoice.com/tomato\_egg/songs/702299/ 獻給雞蛋糕，以及每一個正在與憂鬱症奮鬥的勇敢生命們，以及陪伴在他們身邊的所有人。 Podcast powered by Firstory.

https://firstory.me

![](https://storage.googleapis.com/papyrus_images/9c5004aa21f2522feb230540f56f2d246721d60fcbd2fab52cbf2b88e66e7f51.jpg)

](https://open.firstory.me/embed/story/cmhu6sgwk02ae01wu50456fs5)

* * *

工作流程：如何用 AI 完成前端開發
------------------

### 第一步：理解原始工具邏輯

我先跟 AI 分析研究 Anton 的 [原始 repo](https://github.com/antoncoding/auto-redeem)，把核心邏輯拆解成幾個關鍵功能：

1.  使用臨時錢包私鑰直接簽署交易（避免暴露主錢包），包含從 vault 贖回資產和發送資產到主錢包兩個步驟
    
2.  透過 RPC 連線查詢 ERC-4626 Vault 合約的可贖回金額和 token 種類
    
3.  每秒輪詢，一旦發現可贖回金額 > 0 就立刻執行 redeem
    

### 第二步：設計前端 UI 與互動流程

我希望做出來的工具能讓「不會下指令的人也能用」，所以設計重點是在使用界面上完整呈現 CLI 腳本輸入、輸出和說明文件提醒的訊息：

*   **輸入欄位清楚標示**：主錢包地址、臨時錢包私鑰、RPC 網址、Vault 合約地址
    
*   **安全提示明確**：強調只能用臨時錢包、小額測試
    
*   **即時狀態顯示**：可贖回金額、交易 hash、成功/失敗訊息
    
*   **一鍵啟動/停止**：降低操作門檻
    

### 第三步：讓 AI 寫程式碼

我用 Perplexity 逐步實作功能，過程中幾個主要的指令有：

*   「告訴我做出這個偵測機器人前端的方法（附上原專案網址），讓使用者體驗接近使用下指令的bot。我目前只有 HTML CSS Javascript 初學基礎知識，可以怎麼做？」
    
*   「如何查詢 Euler Finance 或其他 Defi 流動池的智慧合約地址？放在頁面教學說明」
    
*   「加入原始專案環境設定要填的 PRC 欄位以利使用者設定要贖回的鏈」
    
*   「加入詳細說明如何查詢 PRC 網址和 vault 合約地址的步驟」
    
*   「確認操作步驟和邏輯符合原始專案設計」
    
*   「給我完整程式碼並分段註解」
    

AI 不只幫我規劃專案架構、寫 code、debug，還要負責解釋每段程式在做什麼、為什麼要這樣寫![](https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f60d.png)。連 commit message 和說明文件 README.md 我都直接請 AI 照 Airbnb style guide 寫![](https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f606.png) 在程式碼閱讀理解能力還不夠的狀態下，如果不確定要改的程式碼段落或變數在哪裡，就用最簡單暴力的方式：叫 AI 給我完整版並「全部複製貼上」，幾百行的小專案可以讓我這樣恣意揮霍 token🤪。

### 第四步：部署上線

程式碼寫完後，我用 [Zeabur](https://zeabur.com/zh-TW/) 部署，這是最近參加的[線上研習課](https://www.hexschool.com/2025/10/03/2025-10-03-vide-coding-camp/)接下來課程預計會使用的架站服務。Zeabur 的體驗真的很神奇——**可以跟機器人用聊天的方式直接部署網頁**，超酷。

* * *

成果：從 0 到 1 的救援工具
----------------

經過一整天的努力，我把工具做出來了：

*   **GitHub repo**： [https://github.com/gcake119/auto-redeem-frontend](https://github.com/gcake119/auto-redeem-frontend)
    
*   **Web app**： [https://auto-redeem.zeabur.app](https://auto-redeem.zeabur.app)
    

沒想到這個現階段超過我自身技術能力的前端小工具，真的被我試出來。 雖然界面有點醜，但這是我現有 CSS 技術能力能盡力做到的樣子了。

![](https://storage.googleapis.com/papyrus_images/c0fdc5ebd6fcfe2197d638381d32ac86cf24f642873badc7e68b4f89d60189ce.png)

* * *

意外的驚喜：社群回饋與協作
-------------

工具上線後，我把專案發到社群平台和幾個有在討論 Crypto 的社群。收到一個意外的驚喜——同為 [Max的區塊鏈空間](https://www.maxcrypto.space/)訂閱者的 Brian Huang 看到我的專案，主動發了一個超級完整的 PR 改善很多我原先沒有想到或注意到的資安功能，還美化了頁面！

Brian 的貢獻讓這個工具從「能用」提升到「好用且儘可能安全」，也讓我第一次體驗到「閱讀程式碼和說明文件後按下接受 PR」的感覺，原來這就是開源協作的魅力。 好快樂喔！這就是我兩三年前起心動念想學前端開發的原點：「改善區塊鏈技術的使用者體驗」啊！

![](https://storage.googleapis.com/papyrus_images/8aaed55c37191d816e28b820f2a10097cdc0e460e55ccb234b9a2843bc16761e.png)

* * *

心得：與 AI 協作，可以把更多心思放在思考和釐清需求，也更能理解自己需要補足哪些知識缺口
---------------------------------------------

這次經驗給我最大的成就感是：**當你能把問題拆解清楚、知道自己要什麼，AI 就能幫你實現技術能力還沒達標的小專案。** 也對 Web3 前端開發的學習路徑認識更清晰了，像 TypeScript 這樣的強型別語言是必備技能。

目前我的 TypeScript 程度還遠遠不足以獨立寫出完整的 Web3 前端，但透過：

1.  **清楚定義需求與流程**
    
2.  **逐步拆解技術問題**
    
3.  **善用 AI 填補知識空缺**
    
4.  **持續測試與迭代**
    

我在一天內做出了一個實際能幫助人的工具。

更重要的是，這個工具現在是開源的。任何人都可以：

*   Fork 改成自己需要的版本
    
*   提交 PR 改進功能
    
*   用在類似的 DeFi 救援場景
    

如果你也有資金卡在類似的流動池，歡迎[試用這個工具](https://auto-redeem.zeabur.app)（記得用臨時錢包小額測試！）。有任何問題或建議，也歡迎到 [GitHub](https://github.com/gcake119/auto-redeem-frontend) 提 PR 或直接跟我聯絡。

感謝明恩的號召、Anton 的原始工具、Brian 的 PR、 AI 的助攻，還有起心動念並且實際動手嘗試的我自己。這是一次很難得的開發體驗。

* * *

**相關連結：**

*   小烏鴉科普本次暴雷事件始末：[https://soaringcrowz.substack.com/p/balancer-math-flaw-defi-trust-crisis](https://soaringcrowz.substack.com/p/balancer-math-flaw-defi-trust-crisis)
    
*   區塊勢總結暴雷事件與信心危機：[https://www.blocktrend.today/p/735](https://www.blocktrend.today/p/735)
    
*   明恩的原始貼文： [https://substack.com/@blocktrend/note/c-175503987](https://substack.com/@blocktrend/note/c-175503987)
    
*   Anton 的 CLI 工具： [https://github.com/antoncoding/auto-redeem](https://github.com/antoncoding/auto-redeem)
    
*   我的前端小工具： [https://github.com/gcake119/auto-redeem-frontend](https://github.com/gcake119/auto-redeem-frontend)
    
*   線上使用： [https://auto-redeem.zeabur.app](https://auto-redeem.zeabur.app)
    

[Share](https://paragraph.com/@tw3/oaZipAQTFQxlYF2q412f)

---

*Originally published on [區塊鏈文摘](https://paragraph.com/@tw3/vibe-coding-defi-rescue)*