A Weekend Afternoon + Claude Design + Claude Code = Create a Blog with Your Own Style
Create Your Own Jekyll Theme Blog Using Claude Design + Claude Code
https://zhgchg.li/ 2.0!
Spent a weekend using Claude Design to create my preferred Blog style and features, then implemented and applied them back to my Jekyll Blog with Claude Code, perfectly replacing the 5-year-old Chirpy Theme interface with my ideal personal Blog style.
Technology
-
Blog Structure: Jekyll Static Website
-
Original Article File: Markdown file
-
Server/Web Hosting: GitHub Pages (free and reliable)
-
Engineering: Claude Code Max ($100 USD, finished before using up the 5-hour quota)
-
Design: Claude Design (Few blog pages, 2-hour quota is enough)
Cost
-
Claude Code Max $100 USD
-
Server / Web Hosting: $0 USD
-
Jekyll Theme: $0 USD
-
Time: An afternoon over the weekend
Implementation Steps
1. Create a clean Jekyll blog locally
jekyll new blog
2. Collect Theme Page Examples and Upload to Claude Design
I directly go to the current Blog and right-click on each page to “Save as” -> Home/Post/Page/PostList/Archives/Tags…
Create a Theme directory to put all pages and additional files into:
Go to Claude Design to create a project:
Upload the Theme page example to Claude Design, then select “Attach codebase”:
Select the Theme folder you just organized:
After making your selection, enter the prompt to ask Claude Design to help you design the page:
Redesign my Blog, communicate with me in Traditional Chinese.
3. Redesign Using Claude Design
After submitting the conversation, Claude Design will ask you questions about the design you want:
-
Want to see several visual style variations? AI will generate multiple options for you to choose from.
-
Which tweaks would you like to adjust in real time?
What toggle functions should the Debug widget at the bottom right have? -
Fill in the rest according to your preferences.
4. Claude Design Cooking…
It takes about 3–5 minutes for the AI to create a complete Design System (.css) and display the results using react.js and .html.
The blog redesign is completed and saved as Blog Redesign.html.
Design System
Fonts: Noto Serif TC (Songti) + Inter + JetBrains Mono
Color scheme: Warm paper off-white + Terracotta main color (oklch warm system)
Three category axes: Technology / Travel / Sharing, all using real Chinese sample content
Two directions, total 7 artboards (double-click to preview full screen)
Direction A · Magazine Style
Homepage — Header title + Featured report + Three-column secondary articles + Numbered list + Newsletter
Article page — Full single post with table of contents, drop cap, introduction, code blocks, comments, related articles
Category page — 2×2 large image index
Tag page — Visual bar statistics + tag cloud
Archive page — Timeline by year + month
About page — Personal introduction + Now section + Subscription
Direction B · Modern Publication (Substack style)
Homepage — Large Hero image + card grid + sidebar subscription wall
Tweaks panel (open at bottom right) allows live switching of:
Title font (Noto Serif / Source Han Serif)
Wide layout / standard layout
Main color and paper color (including 4 preset palettes: Terracotta, Dark Blue, Dark Green, Wine Red)
4. Claude Design Result Adjustments
-
You can click the Tweak button at the bottom right to quickly change parameters and see the results.
-
You can click the top right corner of the page to enlarge and view the full webpage. If there are any functions, you can operate them directly (Mockup).
-
If clicking is unresponsive, scrolling is disabled, or the page displays incompletely or gets cut off, you can ask the AI to make adjustments.
You can continue the conversation with the AI to add the features you want or adjust existing ones. For example, if I want to add a “buy me a coffee” donation link and comments at the end of articles, I can tell it:
Result:
Keep interacting with the AI to design the features and pages exactly as you want.
5. Claude Design Completion
After you are satisfied with the design, click the top right “Share” -> “Download project as .zip” to download the original design files:
Download and unzip, then place the folder inside the jekyll blog:
6. Ask Claude Code to implement the Claude Design mockup
Remember to run /init once in the Jekyll blog directory to let the AI know it is a Jekyll Blog structure.
Apply the theme design from ./MyBlogTheme to my blog
7. Claude Code baking…
- The initial build took about 20K Tokens (Opus 4.7 / effort: medium)
Results:
Run bundle exec jekyll serve and open http://127.0.0.1:4000/ to see the result:
Continue to have the AI optimize and fix issues, but the basic completion level is already very high!
Implementation Tips
-
You can tell the AI:
Your Blog will be deployed to GitHub Pagesor XXX, because each platform may have different features. For example, GitHub Pages only allows certain Jekyll Plugins, and plugins not on the allowed list won’t work after deployment. -
You can tell the AI:
Prioritize using native Jekyll features, Jekyll Plugins, and free open-source projects to implement functionality. -
You can tell the AI:
Website design must prioritize SEO structure and RWD user experience. -
You can tell the AI:
Design a new Theme to replace the existing one. -
The CI/CD YAML for deploying to GitHub Pages can also be written by AI, and it will guide you through the steps.
-
If you have new page design adjustments, please go back to Claude Design for modifications. After adjusting, download and replace the files in the directory; do not directly ask Claude Code to do it, as it lacks aesthetic sense.
Packages or Features I Used
Jekyll Plugins:
-
jekyll 4.3 + kramdown (GFM) + kramdown-parser-gfm
-
rouge — code highlighting
-
jekyll-feed — Atom feed (/feed.xml)
-
jekyll-sitemap — /sitemap.xml
-
jekyll-paginate-v2 — article pagination feature
-
jekyll-archives — archive pages
-
jekyll-seo-tag — SEO meta tags / OG / Twitter Card meta
-
jekyll-redirect-from — short URL redirect
CSS / Front-end Resources:
-
GLightbox v3 (CDN, MIT) — Image click-to-enlarge lightbox
-
SCSS: assets/css/main.scss
-
Font Awesome icon svg
JavaScript Features:
-
Drawer Menu (topbar menu / overlay / ESC to close)
-
LQIP hydrator & Lazy Load — Article Image Placeholder & Lazy Loading
-
Reading progress bar
-
Client-side TOC
-
Search: /search.json build-time + pure JS substring filter (no lunr)
Third-Party Services:
- giscus — Comments (GitHub Discussions)
Background
Since 2018, I have been writing articles on Medium to document programming and life. Later, I developed a small tool called ZMediumToMarkdown that can download Medium articles and convert them into Markdown files for backup. I also created an independent Blog site using Jekyll + Chirpy theme, deployed on the free GitHub Pages.
Jekyll is a convenient static site generator that converts Markdown and templates into HTML, then you can upload these HTML files to a hosting service to publish your content online.
-
I also created my own Linktree using Jekyll: https://link.zhgchg.li
-
jekyll new blogquickly creates a new default blog project.
The default style of a Jekyll Blog project is very basic:
However, finding a satisfactory Jekyll Blog Theme is not easy. Some have beautiful homepages, some offer a great article page experience, and others have good list pages. Even paid themes rarely meet all expectations. Sometimes, after installing and configuring, you realize a feature or page is missing, forcing you to abandon it and search again, which is frustrating.
After many rounds of searching, I finally found a theme with a decent layout, supports RWD, and has complete blog features — Theme Chirpy :
I’ve been using it for 5 years straight. There were times when I got tired of it and wanted to switch; but every time, after searching around in circles, I always came back to Theme Chirpy. As mentioned before, I couldn’t find a better-looking and more practical theme.
It wasn’t until the arrival of Claude Design + Claude Code that I finally took the plunge and asked AI to help me design the blog style and implement the functional pages I wanted.
Comments