I Procrastinated My Website Redesign for Years, Claude Fixed It in 30 Minutes
From Markdown to a Real UI in 30 Minutes — My First Serious Workflow with Claude Code
I am Abubakar Riaz, a Principal DevOps Engineer at Tkxel, a software development company that provides custom solutions for startups and enterprises. I have over 13+ years of experience in the IT sector mainly telecom, where I implemented CI/CD, orchestrated data marts, and automated business flows using various tools and technologies. I am currently pursuing my M. Phil degree in Computer Science and hold multiple certifications in .Net, API, Azure, and project management.
I am passionate about creating enterprise-level progressive web apps, improving web UI and UX, and designing microservices architecture for complex systems. I have also worked as a Solutions Architect for Punjab Group, an education management company, where I designed and deployed their microservices-based education management system using Azure DevOps, C# 10, T-SQL, VS 2022, PostgreSQL, and Docker. In addition, I am a professional Microsoft database trainer at EVS Institute and a part-time Automation advisor at Magnus Digital Marketing. I enjoy learning new skills, sharing my knowledge, and working on Raspberry Pi projects in my spare time.
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:
Subscribe to my LinkedIn newsletter Think you know DevOps? for curated insights on cloud & DevOps
Check out my full portfolio at abubakarriaz.com.pk
Got questions or thoughts? Drop a comment below — I read and reply to every one.
