把孩子的畫，變成「專屬繪本」！手指滑一滑就能翻頁（免費模板，3分鐘上手）
「我開源了一個繪本模板。沒想到把 6 歲女兒的畫畫放進去，手指滑一滑居然像真的在翻繪本……」
那天看到 Threads 脆友 6歲女兒的畫畫，她女兒畫的真的好好看，所以我立馬嘗試透過 NotebookLM 幫她製作成 PPT 繪本分享，這幾天獲得 3.1萬次瀏覽。（點我連結🔗欣賞）
後來，覺得沒有「翻頁的儀式感」，一直讓我有點遺憾。所以昨晚連夜完成了這個：純 HTML 無需安裝軟體。提供「一鍵複製模板」與「ZIP 下載」兩種方式，5 分鐘完成你孩子自己的專屬繪本，可分享到 Line、Threads 給你的親朋好友喔！其實，這是我昨晚在 元智大學 DBA博班 上柳育德教授時需要上台做簡報時，我製作的翻頁式簡報（如下圖所示）。心想何不改一改試試看呢？結果竟然順利搞定這本繪本真的令我驚豔啊！換言之，這套程式碼你複製回去是可以一魚三吃的喔！
一、先欣賞繪本成品
👉 範例版本（擴容主題）：
https://whocare-lab.github.io/example/little-le-garden/
👉 6 歲女孩原創作品版本：
https://whocare-lab.github.io/picture-books/little-le-garden/
用手機點進去，左右滑動試試看。底部有導航圓點，右上角「☰」可以跳轉任意頁面。
如果你覺得「這就是我想要的」，往下看教學。
二、為什麼要「翻頁」？因為儀式感就是記憶點
三天前，我教脆友用 NotebookLM 把 6 歲女兒的畫變成繪本，3.1 萬人點閱。但很多人問：「下載成 PPT 還要一頁頁點，有沒有更像『真繪本』的翻頁效果？」
有。而且不需要學程式設計，不需要買網域，不需要裝軟體。
這篇文章直接開源一個「翻頁式繪本模板」——純 HTML，手指滑一滑就能翻頁，像真的在翻繪本一樣。你可以把 NotebookLM 生成的圖，或孩子手機裡的畫作，直接放進去，5 分鐘生成專屬網址。
Readme 有我的整個流程講解
三、版權聲明（非常重要）
石頭哥的模板程式碼，「免費開源」：歡迎自由使用、修改、分享。但是～
示範圖片（6 歲女孩版本）的著作權：歸屬於 Threads 脆友 @happy556642 的 6 歲女兒所有。禁止複製、轉載、修改、商業使用這些圖片。
請務必替換成您孩子的原創圖畫。
四、複製方式任選
《方法一》Use this template（有 GitHub 帳號，最推薦）
底下步驟影片，點我🔗可以在會 Threads 欣賞到！
Step 1：複製模板：
1. 手機或電腦進入我的倉庫：https://github.com/whocare-lab/picture-books
2. 點綠色按鈕 「Use this template」
3. 輸入新倉庫名稱（ 例如 my-kids-book ）
4. 選 「Public」，點 「Create repository」
Step 2：建立圖片資料夾
1. 在新倉庫首頁，點 「Add file」→「Create new file」
2. 檔名輸入：little-le-garden/images/README.md
3. 內容空白，直接點 「Commit new file」
4. 這會自動建立 images/ 資料夾
Step 3：上傳你的孩子的畫畫
1. 進入 little-le-garden/images/
2. 點 「Add file」→「Upload files」
3. 選擇手機裡的照片，建議命名：
- 01-cover.png（封面）
- 02-page1.png （第2頁）
- 03-page2.png`（依此類推）
4. 拉到最上，看右上方，點 「Commit changes」
Step 4：修改封面標題（可選）
1. 點 little-le-garden/index.html
2. 點右上角 「鉛筆」 編輯
3. 找到 <h1 class="cover-title"> 改成你的繪本名稱
4. 找到 <p class="cover-subtitle"> 改成獻詞
5. 移到右上方，點 「Commit changes」
Step 5：開啟 GitHub Pages
1. 點 「Settings」（齒輪）
2. 左側點 「Pages」
3. Source 選 main / / (root)，點 「Save」
4. 等待 1-2 分鐘，就拿到網址搞定囉！
通常是： https://你的帳號.github.io/my-kids-book/little-le-garden/
《方法二》Download ZIP（沒有 GitHub 帳號也能用）
1. 進入倉庫：https://github.com/whocare-lab/picture-books
2. 點綠色 「Code」→ 「Download ZIP」
3. 解壓縮後，用任何文字編輯器修改：
- index.html 裡的標題
- images/ 資料夾裡的圖片（換成你孩子的畫）
4. 上傳到 Netlify、Vercel、Cloudflare Pages 等免費靜態托管平台
5. 拿到網址即可分享
五、把孩子的畫，變成他喜歡的繪本禮物
這個模板的靈感，來自 @happy556642 分享的 6 歲女兒畫作。孩子的畫筆，是心靈「擴容」的痕跡。
當你把孩子隨手畫的塗鴉，變成一本「手指滑一滑就能翻頁」的電子繪本，你給他的不只是一個網址，而是一個「被看見」的確認—— 你的創作很重要，值得被好好呈現。
不需要太多的贅述，讓孩子在色彩中，看見自己溫柔且堅定的力量。
關於作者 ✍️
石頭哥｜27年科技業主管．教育部部定大專院校講師．職涯專欄作家．DBA 博士生
研究：生態系競爭策略 | 社會資本 | 組織變革
建構：Al × 文獻探討×原子句耦合框架
相信每個人心中都有一道光；點亮它，人自然會前進。這也是撰寫中的《擴容》這本書的核心——帶你把職場傷痕煉就成領導力。
方格子寫作平台：https://vocus.cc/user/@iiStone
GitHub 開源倉庫：https://github.com/whocare-lab
📮 我想說說話｜[email protected]
