一个周末午后 + 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 組預設配色：赤陶、深藍、墨綠、酒紅）
4. Claude Design 结果调整
-
可以点击右下角 Tweak 快速更改参数查看结果
-
可以点页面右上角放大查看完整网页，如果有功能也能直接操作 (Mockup)
-
如果点击无效、无法滚动查看、页面呈现不完整被吃掉，都可以跟 AI 说请他调整
可以继续跟 AI 对话请他加上你要的功能、调整现有功能，例如我希望文章末可以加入 buy me a coffer donate 连结、留言， 我就可以再跟他说:
结果:
持续跟 AI 对话把功能跟页面设计成自己想要。
5. Claude Design 完成
设计到自己满意之后点右上角「Share」-> 「Download project as .zip」把原始设计档案下载回来:
下载，解压缩后把资料夹放到 jekyll blog 当中:
6. 请 Claude Code 实现 Claude Design 设计稿
记得先在 jekyll blog 目录下一次 /init 让 AI 知道是 Jekyll Blog 架构。
使用 ./MyBlogTheme 的主题设计套用到我的 blog
7. 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 Pagesor XXX，因为每个平台可能机能不一样，例如 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就能快速 new 一个预设的 Blog 专案
Jekyll 预设的 Blog 专案样式非常阳春:
但是要找到满意的 Jekyll Blog Theme 不太容易，有的是首页漂亮、有的是文章内容页体验好、有的是列表页不错，就算是付费主题也很难找到完全满意的；也有可能装了都设定好了才发现少了什么功能或是页面，又只能舍弃再找，很痛苦。
来来回回找好几轮最终找到一个布局不会太丑、支援 RWD、Blog 功能完善的主题 — Theme Chirpy :
一用就是 5 年，当中也有看得很腻想要换的时候；但是每次都是鬼打墙找了一轮之后还是回来用 Theme Chirpy ，如同前述找不到比它更好看又实用的主题了。
直到 Claude Design + Claude Code 的出现我才一鼓作气请 AI 帮我设计我想要的 Blog 风格与功能页实作。
留言 · Comments