I’d been putting off a redesign of my personal site for years. It worked—Jekyll + GitHub Pages, Markdown content—but visually it was flat. Every time I considered a UI refresh, I imagined hours of wrestling with layouts and CSS.
Then I tried something different: I opened Claude Code. Thirty minutes later, my site had a proper UI/UX layout, new templates, and a cleaner structure—all built in a feature branch and deployed automatically.
Here’s exactly how it happened, what surprised me about AI usage limits, and why this workflow matters for any developer.
The Stack & The Goal
Jekyll + GitHub Pages
Content in Markdown
Great for simplicity and static hosting, but without deliberate design work you end up with a blog, not a polished site.
Goal: Transform the Markdown-driven site into a structured UI/UX layout without changing the underlying architecture.
The Workflow (Step by Step)
1. Initialize Claude in the Repo
Inside my GitHub Pages repo, I initialized Claude Code. It generated a claude.md file—a context contract describing structure, guidelines, and boundaries.
2. Create a Safe Workspace
Before any edits, I switched to a feature branch:
git checkout -b feature/ui-upgrade
Branch isolation is mandatory when an AI agent can modify many files.
3. The Prompt: “Upgrade the UI/UX”
I kept it simple. No long design specs. Claude responded by generating new layout templates, improved navigation, and structured HTML—transforming the site from basic Markdown pages into a real layout.
before
after
4. Test Locally (with AI‑Assisted Debugging)
I asked Claude how to test locally. It gave the Jekyll commands. When my environment threw missing dependency errors, I fed them back to Claude—it diagnosed and provided the exact install steps.
Once dependencies were installed:
bundle exec jekyll serve
The upgraded UI rendered perfectly.
5. Expand the Changes
With confidence high, I asked Claude to apply the new UI structure to other pages and update related templates. It modified multiple files in minutes—multi-file refactoring at AI speed.
6. Create the Pull Request & Deploy
Claude prepared the PR from the feature branch to main. After a quick visual review, I merged it. GitHub Pages automatically rebuilt and deployed the site.
The Result
In under 30 minutes, I finally had the UI-driven site I’d delayed for years.
Live site: abubakarriaz.com.pk
Repo: mabubakarriaz/mabubakarriaz.github.io
A Critical Observation: Token Consumption
This entire workflow consumed 92% of my daily Claude Pro usage—with only three prompts and one UI transformation. Why? Because each prompt involved massive context: reading files, generating code, updating multiple components.
Takeaway: AI-assisted development isn’t about prompt count; it’s about context size. Be aware of token limits when doing large-scale refactoring.
The Bigger Realization
The bottleneck is no longer the code—it’s whether you’ve integrated AI into your workflow. Casual experimentation won’t move the needle. The real productivity shift happens when AI becomes part of your actual development process: repos, CI, documentation, refactoring.
My advice: Pick one tool (Claude Code, Copilot, Cursor, etc.) and start using it on real work. The learning curve only happens inside your projects.
Final Thought
What felt like a multi-hour task became a 30-minute workflow. That’s the shift we’re entering: software development moving from manual construction to AI-augmented engineering. Engineers who adapt will build faster and ship more. The rest will still be thinking about redesigning their website.
Check out the live site and repo above—and if you have questions about the workflow, feel free to open an issue or reach out.
Enjoyed this post? Here's how to stay connected:
Got questions or thoughts? Drop a comment below — I read and reply to every one.
