一个周末午后 + 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
[2026/05/06 Upadte] 2–1 Design Agent Skill 使用第三方 设计 Skill 完成设计
细节可参考此篇文章「 别再从零开始 AI 写程式：让 AI Agent 直接帮你搞定 Google Apps Script 串接与开发 」
2–2 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