Redesign your blog pages with Claude Code

Update your website's blog pages in under 30 minutes, without spending anything.

You need your website's code or CMS connected to Claude Code for this to work.

Step 1: Install the UI/UX Pro Max skill

See The UI/UX skill for Claude Code, or use the CLI (needs Python 3):

npm install -g uipro-cli

Set it up for Claude Code in your project folder:

cd /path/to/project
uipro init --ai claude

Or install it for all projects:

uipro init --ai claude --global

Other commands: uipro update (upgrade) and uipro uninstall (remove).

You should see ui-ux-pro-max in your skills. Use it with /ui-ux-pro-max in the chat.

Step 2: Run the prompt

Prompt

I run a [type of business] called [name]. My blog at /blog and /blog/[slug] is live, but feels like a basic list - no visual hierarchy, no reason to stay, no conversion path.

Run /ui-ux-pro-max and redesign both pages with these goals:

Blog index:
- Hero card for the latest/featured post with full excerpt and a clear CTA
- Grid layout for remaining posts (2-col desktop, 1-col mobile)
- Live client-side search filtering by title and excerpt
- Auto-derived category tags from post keywords
- Email capture strip for a newsletter (static UI is fine for now)

Blog post:
- 3-column desktop layout: sticky TOC sidebar (left) | article (center) | sticky mini-CTA (right)
- Collapsible TOC on mobile
- CSS scroll-driven reading progress bar (no JS - use animation-timeline: scroll())
- Social share buttons: Twitter, LinkedIn, copy link (needs "use client")
- Keyword/tag pills displayed above the post title
- Polished author bio with avatar, role, and a follow link
- Excerpt snippets on related article cards
- Back-to-top button that appears after 400px scroll