許願池的誕生現場，和一個晚上做出來的 LINE 對話製造機
為了把社群裡的三句話做成一張部落格配圖，我先「手刻」了一個假對話框(手是 AI 的);刻完才想通：這件事本身就該是一個工具。
這篇講的東西
- 工具(免費、免註冊、離線可用):https://yazelin.github.io/line-chat-maker/
- 原始碼(MIT):https://github.com/yazelin/line-chat-maker
- 許願池的設計細節在另一篇：AI 願望池：一個人許願，一群人(或 AI)幫它成真
誕生現場
許願池是怎麼來的?完整現場就是下面這段對話，發生在 LINE 的 C# 社群：
中年攻城屍丟了一句「現在有 AI，是有點想做 side project，只是不知道要做什麼」，底下聊開了。LSa 接了一記漂亮的迴旋：「~寫個 sideproject 幫你想做甚麼 sideproject~」。我看到的時候心想，那乾脆做一個許願池，讓大家把想要的東西丟進來;小白++ 再補一刀：「然後許願池 side project 自動由 ai 寫」。
許願池就這樣誕生了。謝啦，三位。它後來怎麼設計、怎麼被自己收到的願望反過來改進，寫在設計篇，這篇不重複。
為了一張配圖
這幾天我把部落格改版，About 頁想放上面這段誕生現場。直接截圖不行：聊天室裡有其他人的訊息和頭像，馬賽克塗完就不能看了。所以我決定「手刻」一個假的 LINE 對話框，泡泡、暱稱、時間戳、引用回覆，一格一格刻。
說「手刻」其實不太老實：刻的是 AI，我在旁邊出嘴，「引用的灰框字再小一點」「時間戳要貼在泡泡右下」。這年頭的手工藝大概就是這樣了，手是 AI 的，龜毛是自己的。
刻到引用回覆的灰色小框時我想通了一件事：這個假對話框，值得變成一個誰都能用的工具。做教學的、寫文章的、做行銷素材的，誰沒有「想放一段對話示意圖，又不能截自己聊天室」的時候?
當天晚上它就上線了。
一個晚上，幾十輪驗收
流程還是那套甲方思維:我開規格、下發包、做驗收，程式是 AI 寫的。第一版半小時就能用，剩下的整個晚上都在當一個囉唆的甲方：
- 手機不像，參考我們家官網的樣機重做：瀏海、動態島、挖孔、滿版四種鏡頭，螢幕圓角、側邊按鈕、手勢條全部可調(每個人的手機長得不一樣，示意圖要像「你的手機」才行)
- 狀態列的電量數字應該在電池旁邊，不是 WiFi 左邊
- 瀏海不可以壓到圖示(最後是量測時鐘和圖示的實際寬度，動態夾住瀏海寬)
- 手機捲動不會有捲軸，藏掉
- 輸入框要能打「還沒送出的字」，話到嘴邊的猶豫也是戲
- 訊息類型補齊：文字、圖片、貼圖、語音、檔案，加上置頂公告和「⋯⋯大家熱烈討論(略)⋯⋯」這種分隔膠囊
每一條都是看著畫面挑出來的毛病。AI 寫程式很快，但「像不像」這件事，還是要人來拍板。
三個坑，工程向的記錄
匯出的圖跟預覽不一樣。 一開始用 html2canvas 把畫面轉 PNG，結果引用回覆的名字消失、浮水印畫到畫布外面。追下去發現兩個雷：它畫不出 inline-block 元素裡 block 子元素的直接文字;它回傳的 canvas 還殘留著 scale 變換，你以為畫在右下角，其實畫到畫布外面去了。最後整個換掉，改用 SVG foreignObject 讓瀏覽器自己渲染，所見即所得，html2canvas 降級成 Safari 的備援。
PWA 改版要重整兩次才生效。 Service Worker cache-first 的老問題：使用者手上永遠是上一版。頁面導航改成 network-first 之後，改版一次重整就生效，離線時才退回快取。
分享連結會吃爆免費額度。 分享功能一開始把整段對話塞進網址的 hash，連結長到四萬字元。改用短網址之後又想起 Cloudflare KV 免費版每天只能寫一千次(iPAS 模擬考站撞過這面牆)。這次直接寫進 D1:不開新庫(免費帳號上限十個，我已經用到八個)，在既有的庫裡加一張表;短碼用內容的 SHA-256 雜湊，同一段對話永遠是同一個碼，重複分享連寫入都省了。
人和 AI 用同一份腳本
整個工具的狀態就是一份 JSON:人物、頭像、訊息、手機設定，全部在裡面。人用滑鼠點著改，AI 用 repo 裡附的 skill 直接生成腳本。這篇文章裡那格會動的對話框，就是我叫 AI 產腳本、工具吐出來的嵌入碼，原封不動貼進 Markdown。
所以分享有三種形狀：匯出 PNG(跟預覽像素一致)、嵌入 HTML(貼進任何網頁就能顯示)、分享短連結(對方打開就是同一段對話，可以接手繼續改)。
認真的防詐聲明
這工具僅供創作示意。匯出預設帶「示意圖」浮水印，可以手動關，但關之前請想一下為什麼要關。台灣的 LINE 詐騙已經夠猖獗了：做教學、寫文章配圖、還原情境，都歡迎;拿去詐騙、毀謗、偽造證據的，請自重。repo 裡給 AI 用的 skill 也寫明了同一條界線。
之後
工具已經收進行銷工具箱。MIT 開源，想加深色佈景、表情回應，或整套搬去做別的通訊軟體的樣式，直接 fork 拿去改，它就是你的了。
以前靈感來的時候，有時候會寫個備忘，然後，就被忘了。
一句話總結這一天：靈感的保存期限很短，現在的 AI 工具鏈，短到可以在它被忘以前，就把東西做出來。