一個週末午後 + Claude Design + Claude Code = 打造屬於你自己風格的 Blog
使用 Claude Design + Claude Code 打造你專屬的 Jekyll Theme Blog 主題
https://zhgchg.li/ 2.0!
花了一個週末午後，用 Claude Design 設計喜歡的 Blog 樣式與功能，再透過 Claude Code 實作並套用回 Jekyll Blog，把用了 5 年的 Chirpy Theme 介面完美替換成我心目中理想的個人 Blog 樣式。
技術
- Blog 架構: Jekyll 靜態網站
- 文章原始檔: Markdown 檔案
- 伺服器/網頁寄存: GitHub Pages (免費可靠)
- Engineering: Claude Code Max ($100 USD，5 小時額度 還沒用完就做好了 )
- Design: Claude Design (Blog 頁面不多，2 小時額度內就夠用)
花費
- Claude Code Max $100 USD
- 伺服器/網頁寄存: $0 USD
- Jekyll Theme: $0 USD
- 時間: 一個週末的下午
實現步驟
1. 在本地建立一個乾淨的 Jekyll Blog
jekyll new blog
2. 搜集 Theme 頁面案例並上傳到 Claude Design
我直接到目前的 Blog，在各頁面按右鍵「Save as」例如 Home、Post、Page、PostList、Archives、Tags…
建一個 Theme 目錄，把所有頁面跟附加檔案都放進去:
到 Claude Design 建立專案:
將 Theme 頁面案例上傳到 Claude Design，選擇「Attach codebase」:
選擇剛剛整理好的 Theme 目錄:
選擇完成後，輸入 Prompt 請 Claude Design 幫你設計頁面:
重新設計我的 Blog，用繁體中文跟我交流。
3. 使用 Claude Design 重新設計
送出對話後，Claude Design 會問你關於你想要的設計問題:
- 想看幾個視覺方向的變體？ AI 會產出多個方案供你選擇
- 希望可即時調整哪些 Tweaks？右下角 Debug 小工具需要哪些切換功能
- 其他就照喜好自己填寫囉。
4. Claude Design Cooking…
大約需要 3–5 分鐘，AI 會建立完整的 Design System（.css），並用 React.js／HTML 展示結果。
已完成 Blog 的重新設計，放在 Blog Redesign.html。
設計系統
字體：Noto Serif TC（宋體）+ Inter + JetBrains Mono
色調：暖紙張米白 + 赤陶主色（oklch warm 系）
三條分類軸線：科技 / 旅行 / 分享，全部使用真實的中文範例內容
兩個方向，共 7 個畫板（雙擊可全螢幕預覽）
方向 A · 雜誌風（Magazine）
首頁 — 報頭刊名 + 主打報導 + 三欄次要文章 + 編號式條列 + Newsletter
文章頁 — 完整單篇含目錄、首字下沉、引言、程式碼區塊、留言、相關文章
分類頁 — 2×2 大圖式索引
標籤頁 — 視覺化條狀統計 + 標籤雲
歸檔頁 — 年份 + 月份的時光軸
關於頁 — 個人介紹 + Now 區塊 + 訂閱
方向 B · 現代刊物（Substack 風） 7. 首頁 — 大圖 Hero + 卡片式網格 + 側欄訂閱牆
Tweaks 面板（右下角開啟）可即時切換：
標題字體（Noto Serif / 思源宋體）
寬版面 / 標準版面
主色與紙張色（含 4 組預設配色：赤陶、深藍、墨綠、酒紅）
5. Claude Design 結果調整
- 可以點擊右下角的 Tweak，快速調整參數並查看結果
- 可以點擊頁面右上角放大查看完整網頁；若有互動功能，也能直接操作 Mockup
- 如果點擊無效、無法滾動、頁面顯示不完整或內容被裁切，都可以請 AI 調整
可以繼續跟 AI 對話請他加上你要的功能、調整現有功能，例如我希望文章末可以加入 buy me a coffee donate 連結、留言， 我就可以再跟他說:
結果:
持續跟 AI 對話把功能跟頁面設計成自己想要。
6. Claude Design 完成
設計到滿意後，點右上角「Share」→「Download project as .zip」，將原始設計檔下載回來:
下載並解壓縮後，把資料夾放到 Jekyll Blog 目錄中:
7. 請 Claude Code 實現 Claude Design 設計稿
記得先在 Jekyll Blog 目錄下執行一次 /init ，讓 AI 知道這是 Jekyll Blog 架構。
使用 ./MyBlogTheme 的主題設計套用到我的 blog
8. Claude Code baking…
- 首次建置大約花費 20K Tokens (Opus 4.7 / effort: medium)
成果：
執行 bundle exec jekyll serve 打開 http://127.0.0.1:4000/ 查看結果:
接著持續請 AI 優化與修正問題，但基本完成度已經很高了！
實現小 Tips
- 可以跟 AI 說：
你的 Blog 會部署到 GitHub Pages或其他平台，因為每個平台可能機能不一樣，例如 GitHub Pages 只允許部分的 Jekyll Plugins ，不在允許清單中的套件，上線後也無法使用。 - 可以跟 AI 說：
優先使用 Jekyll 原生、Jekyll Plugin、免費開源的專案實現功能。 - 可以跟 AI 說：
網站設計務必要重視 SEO 結構與 RWD 操作體驗。 - 可以跟 AI 說：
設計新的 Theme 替代掉現有的。 - 部署到 GitHub Pages 的 CI/CD YAML 也可以請 AI 寫，步驟他也會教你。
- 如果想調整新的頁面設計，建議回到 Claude Design 修改設計稿，調整完再重新下載並放回目錄；不建議直接請 Claude Code 做視覺設計，它不太擅長美感。
我用到的套件或功能
Jekyll 套件:
- jekyll 4.3 + kramdown (GFM) + kramdown-parser-gfm
- rouge — code highlight
- jekyll-feed — Atom feed (/feed.xml)
- jekyll-sitemap — /sitemap.xml
- jekyll-paginate-v2 — 文章分頁功能
- jekyll-archives — 歸檔頁面
- jekyll-seo-tag — SEO Meta Tag / OG / Twitter Card meta
- jekyll-redirect-from — 短網址 redirect
CSS / 前端資源:
- GLightbox v3（CDN, MIT） — 圖片點擊放大 lightbox
- SCSS：assets/css/main.scss
- Font Awesome icon svg
JavaScript 功能:
- 抽屜選單（topbar menu / overlay / ESC 關閉）
- LQIP hydrator & Lazy Load — 文章圖片 Placeholder & 延遲載入
- Reading progress bar
- Client-side TOC
- Search：/search.json build-time + 純 JS substring filter（無 lunr）
第三方服務:
- giscus — 留言（GitHub Discussions）
背景
2018 年起在 Medium 撰寫文章紀錄程式與生活，後來自己開發了一個小工具 ZMediumToMarkdown 可以把 Medium 文章下載轉換成 Markdown 檔案備份，並順帶用 Jekyll + Chirpy theme 建立了獨立的 Blog 網站，部署在免費的 GitHub Pages 之上。
Jekyll 是一套很方便的靜態網站產生工具，可以把 Markdown 和模板轉換成 HTML，再將 HTML 檔案放到託管服務上，內容就能上線。
- 我也用 Jekyll 做了一個自己的 Linktree: https://link.zhgchg.li
jekyll new blog就能快速建立一個預設的 Blog 專案
Jekyll 預設的 Blog 專案樣式非常陽春:
但是要找到滿意的 Jekyll Blog Theme 不太容易，有的是首頁漂亮、有的是文章內容頁體驗好、有的是列表頁不錯，就算是付費主題也很難找到完全滿意的；也有可能裝了都設定好了才發現少了什麼功能或是頁面，又只能捨棄再找，很痛苦。
來來回回找了好幾輪，最終找到一個佈局不差、支援 RWD、Blog 功能完善的主題 — Theme Chirpy :
一用就是 5 年，當中也有看得很膩想要換的時候；但每次鬼打牆找了一輪後，最後還是回來用 Theme Chirpy ，如同前述找不到比它更好看又實用的主題了。
直到 Claude Design + Claude Code 出現，我才一鼓作氣請 AI 幫我設計想要的 Blog 風格，並實作功能頁。
留言 · Comments