寵物紀念網站：程式新手用 AI，為過世的毛孩蓋回憶花園

一句話成果： 我不會寫程式，但讓兩家 AI 分工合作：ChatGPT 打造網站，Claude 接手資安稽核，再交回 ChatGPT 複查。最後替陪伴我們的毛孩可可上架了一座線上回憶花園。爸比媽咪可以進去跟祂打招呼、留下想念；家庭照片和留言只有通過核准的家人看得到。上線前做了 24 個分身並行的資安稽核，套件漏洞掃描結果是 0 個。

左：首頁「今天，也一起曬太陽。」；右：把今天的心情輕輕留下

為什麼要為可可蓋這座花園

可可是一隻長毛吉娃娃，很貼心，也很可愛。小時候我們叫祂「小可愛」，長大後，爺爺幫祂取了暱稱「可可」。

祂九歲那年生了一場大病，治療了好久，終於痊癒。後來卻因為老犬常見的心臟病，用藥傷到了腎臟，很多東西都不能吃。即使這樣，祂還是很堅強地陪著我們，活到 16 歲的高齡。為了不讓媽咪難過，祂勇敢地接受打針、抽血和針灸，還要吃中西醫的藥。

2023 年 4 月 24 日，可可離開了我們。網站網址裡的 20230424，就是這一天。

祂生前最喜歡我們帶祂去散步、出去玩。所以網站裡的「打招呼、摸摸、玩球、靜靜陪伴」，都是想讓我們還能像以前一樣陪陪祂。

想念祂的時候，我會在心裡跟祂說說話。最近我夢到了可可，也夢到我過世的爸爸。夢醒之後的那份悸動，讓我很想把心裡的話，轉化成真正的行動。

這座花園裡的影片，也是一家人一起做出來的。一開始，爸比為了紀念可可寫了一首歌〈就不算真的散場，期待下一次重逢〉，我把它做成一支有字幕的影片，畫面裡是我們三個的 Q 版卡通：爸比騎著我那台光陽的紅色 mini 機車，我坐在後座，可可站在踏板上，和歌詞一句一句呼應。這支影片就是網站上的〈我與老公和可可上山下海的回憶〉。後來，我鼓勵爸比不要一天到晚玩《魔力寶貝》手遊，把時間花在能留下作品的 AI 影片上。於是爸比也親手做了一支 AI 影片，讓可可當主角，替他完成夢想清單。

爸比寫的歌，我用 Google Veo 做成一家三口 Q 版字幕影片

剛好前幾天，我想試試 OpenAI 的新 AI 助理 Dot，看看它的能力。它可以直接用電話交代工作，我就把這個靈感講給它聽，回憶花園就這樣開始了。

用電話交辦工作的 AI 助理 Dot，幫我把可可的插畫做成影片預覽圖

網站很快就做好了，靜靜放在我的筆電裡。這時候 AI 的額度用完了，我也剛好想起課程裡提過：有後台的網站、要接案的作品，上線前一定要做資安檢查。 回憶花園有家人登入，也有家庭照片，當然不能跳過這一步。

課程附錄〈上線前怎麼做程式碼資安 Review〉說得很清楚：兩家 AI 公司推薦的資安工具不一樣。用 Codex 的人裝 OpenAI 官方的 Codex Security Plugin，用 Claude Code 的人裝 Cloudflare 開源的 security-audit Skill。我先走 ChatGPT 這條路，沒想到 Codex Security 一直裝不上，搞了很久才終於裝好，額度卻剩不多，掃描跑到一半就沒辦法執行了。為了讓自己的作品能早日誕生，我去學了課程裡的「雙棲」單元，讓 Claude 接手，最後把資安檢查跑完，正式上架。

Before / After：還沒有花園，和現在

這座花園用到的課程內容

每次卡住，下一步都是從課程裡找到的：

我怎麼讓 AI 幫我做出來

每個工具負責的事情如下：

做一個作品，工具箱多了兩個技能

做完這座花園，我請小天使把過程整理成兩個可以重複使用的 Skill，放進我的 AI 助手工具箱：

• cross-ai-review：一家寫、另一家查。把修改打包成審查請求，收回意見後逐條分類，再決定修或不修。
• supabase-google-auth-setup：帶新手從零建好資料庫和 Google 登入，再依角色順序實測權限。

兩個技能都通過了雙層格式驗證，也在全新的對話裡實際叫用成功過。下次做網站，就不用從頭摸索一次。

把踩過的坑變成技能，感覺就像替我的神奇寶貝強化了能力。

額度用完怎麼辦？兩家 AI 的交接機制

ChatGPT 的資安檢查做到一半，額度就用完了。這時候工作沒有斷掉，靠的是兩樣東西：

1. 雙棲健檢：讓兩家 AI 讀同一套規則和記憶
我用雷蒙課程 Pro-Kit 12 的「Claude Code × Codex 雙棲健檢助手」，讓兩家 AI 從同一個工作區開工，讀同一份規則（AGENTS.md）、同一份長期記憶，也共用同一個 Skills 資料夾。

2. 每次收工都寫好交接段
每篇工作日誌最後，都有一段「交接：下一個對話從這裡接」，內容包括目前狀態、待辦清單（註明誰負責）、還沒實測的項目，以及「不要做」的事。新對話只要說一句「接續彩虹那端上架準備，先讀交接段」，另一家 AI 就能接手，不用我從頭解釋。分工也可以跟著對調，從「ChatGPT 寫、Claude 查」換成「Claude 修、ChatGPT 查」。

健檢過程也抓到一個小插曲：AI 第一輪盤點時，沒先說明就列出了幾個私人資料夾的檔名。之後我把規則改成「每次讀取前都要先說明、等我同意」，這篇心得的素材也是照這條規則讀的。

發現額度沒了也不可怕，就像不用再擔心我的神奇寶貝沒有生命值。一家的 HP 歸零，另一家馬上可以上場接手。

印象最深的三個關鍵決策

1. 一家 AI 寫，另一家查：複查的 AI 還差點誤判

課程建議依你用的 Agent，兩條路選一條：

課程附錄〈上線前怎麼做程式碼資安 Review〉的進階工具選擇

我的實際狀況是這樣：

課程也提醒：不要為了「更安全」同時跑兩套，再一次接受所有修改。 所以我只用 Cloudflare 這一套做正式稽核；ChatGPT 只負責複查「修改了哪些地方」，而且它的每一條意見，我都逐項確認後才決定要不要改。

Claude 的稽核結果是：沒有高、中風險漏洞，1 個低風險，3 項要上線前驗證。修完之後，我再交給 ChatGPT 複查。它把一項照片上傳保護列為「高風險」，但其實那一項我們已經實際測過、確定沒問題。原因是我給它的資料只寫了改了什麼，沒寫先改、後測的順序。補上這一點後，誤會就解除了。它另外找到的 6 個真問題，也都修好了。

2. 金鑰不交給 AI，6 種身分一個一個登入

建資料庫和 Google 登入時，所有密碼和金鑰都由我自己貼上，AI 只做格式檢查。做好之後，我依序用 6 種身分實際登入：訪客、未核准、家人、停用、管理者刪除照片、陌生人直連資料庫，確認每一種身分看到的都對。過程中也踩了新手坑：Chrome 自動翻譯把選單名稱改掉、網址貼錯欄位、開到舊版的網頁檔。

左：未登入只看得到公開範例；右：家人登入後才能寫影片私人備註

登入做好不等於權限正確。要實際用每一種身分各登入一次，才知道家人看得到、陌生人看不到。

3. 上架工具偷偷改了我的專案檔案

部署那天，上架工具在專案資料夾裡自作主張改了 3 個設定檔，還裝了一堆套件。好在每一步都有存檔點，我們把檔案還原後重跑測試，全部通過。之後改成在另一個隔離的暫存資料夾執行部署。

存檔點不是多餘的步驟。AI 或工具出錯的時候，它就是能讓你安心退回去的那顆後悔藥。

這三件裡，我最想讓同學知道的是交叉複查：一家 AI 寫、另一家 AI 查，自己再逐條確認。程式新手看不懂程式碼沒關係，讓 AI 互相檢查，我只要負責拍板。

成果與真實使用情境

下面三張分別是回憶影片區、電腦版相簿（標示每張照片是誰上傳），以及家庭管理與家庭留言（Email 已遮蔽、留言文字已模糊）：

上架後，我和爸比第一次一起打開它： 感覺我們有了一個共同的主題，一片可以一起維護的天地，一起思念祂，思念小可。

寫給小可

花園上線那天，我在留言板寫下給祂的話：

小可～我知道你在彩虹橋等 爸比與媽咪相聚，這段時間也要結交更多朋友喔，可以結伴同行，闖關嘗試更多有趣的事物，等到我們相聚時，再跟我們分享勇者可可們的冒險傳奇喔～愛你的媽咪