iOS App — App Store
WebView-OK
從後端到全端再到主管，第一次碰 Swift——
用 AI Vibe Coding 打造的 WebView 實機驗證工具。
問題
App 大致分兩種：純原生，以及用 WebView 嵌入網頁的混合型。WebView 說白了就是把一個網頁塞進原生 App 的殼裡跑。身為系統整合商（SI），我們經常需要替客戶在他們的 App 中嵌入 WebView，但市面上沒有一個順手的工具能在實機上快速驗證 WebView 的表現。
我的背景是後端工程師，後來做到全端，再接主管。Swift 和 Xcode 是完全沒碰過的領域，但同事在專案中碰到 WebView 驗證的痛點，我想做一個通用、好上手的工具來解決。於是我決定用 AI 來 Vibe Coding——從零開始造一個。
過程
定義需求與 AI 協作
盤點團隊日常碰到的 WebView 痛點：Safe Area padding 不對、沒辦法快速切換 User-Agent、沒有 console 可以 debug。把需求拆解後，全程交給 AI 生成 Swift 程式碼——這是一個完整的 Vibe Coding 實踐。
手勢系統設計
設計了三組雙指手勢，讓功能藏在乾淨的介面背後：單擊隱藏網址列模擬無 UI 狀態、雙擊開啟 Web Console、長按進入設定頁。不需要額外按鈕就能操作所有功能。
實機測試與迭代
在模擬器和 iPhone 上反覆測試，微調 padding 數值、手勢靈敏度、UI 切換的動畫。遇到問題就截圖丟給 AI，修正、重新 build，迭代速度非常快。
App Store 上架
準備截圖、撰寫描述、通過 App Review。2025 年 7 月 9 日正式上架，讓任何有 WebView 驗證需求的開發者都能免費使用。
功能
三組雙指手勢 + 完整設定頁
👆
隱藏網址列
雙指單擊，模擬無 UI 的純 WebView 狀態
🔍
Web Console
雙指雙擊開啟，即時除錯 JavaScript
⚙️
設定頁面
雙指長按進入，調整所有偏好設定
📐
Safe Area Padding
自由調整上下 padding，測試嵌入數值
🌐
User-Agent 模擬
自訂裝置 HTTP header，模擬不同環境
🌏
中英雙語介面
繁體中文 / English 自由切換
啟示
這是一個典型的 Vibe Coding 案例：用 AI 把想法直接變成產品。
身為後端工程師出身的主管，我不會寫 Swift，但我清楚知道團隊需要什麼工具。AI 讓我能跨過技術門檻，從需求定義到上架 App Store，全程自己搞定。
這不是取代工程師，而是讓有領域知識的人，也能直接動手造工具。