開發過程

哈哈狗客製 LINE 貼圖

像街角的大頭貼機器,幫你的寶貝拍一組貼圖。六個產品裡程式碼最多的一個,也是第一個真的跟人收錢的一個。

網頁 App 線上付款 956 次 commit
哈哈狗客製 LINE 貼圖:由寵物照片生成的一組手繪風格貼圖
2026 年 5 月第一個 commit
956 次累積 commit
已上線2026 年 6 月起收真錢

01起點:一個大家都懂的比喻

我們想做的東西,用一句話講就是「街角的大頭貼機器」—— 你走進去、拍幾張、機器吐出一排照片,你剪下來貼在筆記本上。

這個比喻省掉非常多解釋。它同時說明了: 很快、很好玩、不用會什麼、結果是一整組不是一張、而且是拿來給別人看的。 產品的每一個介面決定都可以回頭問這個比喻:大頭貼機器會這樣做嗎?

02最重要的產品決定:先免費看到東西

AI 生圖的東西最大的問題是「我不知道生出來會長怎樣」。 叫人先付錢再賭一把,是很難的一件事。

所以流程被設計成:選風格 → 上傳照片 → 免費看到幾張真的貼圖 → 喜歡再買整組。 使用者在掏錢之前,已經看過他自己的狗變成貼圖長什麼樣子了。

代價是我們要先付免費預覽那幾張的生成費用,而且不是每個人都會買。 所以這個決定不能靠感覺,要靠數字 —— 我們後來做了一個帳本, 每一次生成都是一行,成本、結果、有沒有轉換全部記進去。 「這門生意到底成不成立」不是用猜的。

03第一個大坑:iPhone 拍的照片,打不開

iPhone 預設拍出來的照片是 HEIC 格式。除了 iOS 的 Safari 以外, 幾乎所有瀏覽器都看不懂它 —— 包括 Chrome、Android, 以及台灣流量佔比很高的「LINE 內建瀏覽器」

症狀是:使用者從 LINE 點進來,選了照片,然後就卡住了。 對他來說這個網站就是壞的,他不會回報,只會關掉。

解法是在瀏覽器裡先把 HEIC 轉成一般格式再上傳。這裡有個細節花了一段時間才搞懂: 判斷「這是不是 HEIC」不能只看檔案自己宣稱的類型,因為很多瀏覽器回報的是空的; 真正可靠的是看副檔名。這一行判斷是整條上傳流程裡最脆弱、也最不能刪的一行。

學到的事

在台灣做消費性產品,「在 LINE 內建瀏覽器裡會不會動」是必測項目,不是加分項目。 開發機上一切正常,不代表使用者那邊正常。

04第二個大坑:一個什麼都沒檢查的品管

AI 生圖會出錯 —— 多一隻腳、兩顆頭、把兩隻狗融成一隻。 所以我們做了一道品管:每張貼圖生出來之後,再用一個 AI 去看它、判斷合不合格,不合格就重生。

然後有一天我們發現,這道品管好幾個星期沒有擋下任何一張圖。 原因是它拿到的圖片網址是私有的,負責看圖的那個模型根本讀不到 —— 而當初的設計是「品管本身出錯的話就當作通過」, 免得一個網路小問題就把使用者卡在最後一步。

這個設計本身沒錯,錯的是它失敗的時候看起來跟一切正常一模一樣。 沒有錯誤、沒有警告,只有「品管好像變得很寬鬆」這種很難察覺的感覺。

學到的事

任何「出錯就當通過」的設計,都必須另外有一個方法讓你知道它到底有沒有在工作。 我們現在的習慣是:先餵它一張已知會不合格的圖,確認它真的擋得下來 —— 一個從來不叫的警報器,跟一個壞掉的警報器,長得完全一樣。

05後來才想通的一件事:主角不一定是狗

專案叫哈哈狗,一開始腦袋裡也只有毛孩。 但真的上線之後,來做的人有拍小孩的、拍情侶的、拍全家福的。

所以我們把整條流程改成不預設主角是誰:先讓 AI 看照片判斷這是寵物、人、小孩還是一家人, 再照著那個判斷去規劃這一組貼圖要有哪些情境跟哪些字。 名字沒有改 —— 換掉品牌的代價遠大於好處,而且哈哈狗還滿好聽的。

06收真錢這件事

2026 年 6 月底這個產品開始跑真實的金流。這是我們第一次做「碰到錢」的東西, 態度也因此完全不一樣:跟錢有關的程式碼訂了一條規矩 —— 沒有逐次確認,一行都不准動。 不管那個修改看起來多小、多順手。

另一個跟錢有關的決定:品管沒過的重生不扣使用者的次數。 我們寧可自己吸收那次成本,也不要讓人為一張醜圖付錢。

07用了哪些 AI 工具和服務

Claude Code整個產品的實作主力,累積 956 次 commit。
Codex第二個 AI 編碼工具,換機器時接手同一個專案。
OpenAI 生圖模型把照片變成貼圖,一格一次呼叫。
OpenAI 視覺模型兩個用途:判斷照片主角是誰、以及當品管檢查每張貼圖。
Cloudinary照片上傳與處理,簽章上傳。
Supabase訂單、生成紀錄、成本帳本、風格與文案設定。
Vercel網站與後端函式,機房設在新加坡以貼近資料庫。
綠界 ECPay台灣的金流。真實付款。

08兩個還在盯的數字:等待時間與轉換率

生成一整組貼圖仍然要好幾分鐘,使用者得留在頁面上等 —— 這是目前體驗上最大的一塊, 受限於生圖模型本身的速度,不是排隊或架構問題。

另一件持續在看的是免費預覽轉購買的比例。每一次生成都是帳本上的一行, 所以價格和免費張數會照數字調整,不會照感覺調整。

想試試看?

選一個風格、丟幾張照片上去,先免費看看你的寶貝變成貼圖長什麼樣。

前往哈哈狗客製 LINE 貼圖 →