Redesign Your Blog Pages with Claude Code
- By Praveen Jha · Updated 2026-10-23 · 7 min read · Developer & MCP tools
CLAUDE CODE • UI/UX PRO MAX SKILL
One skill and one prompt to turn a plain blog list into pages people stay on - a redesigned blog index and blog post layout in under 30 minutes, without spending anything.
What you build: A redesigned /blog index and /blog/[slug] post page Tool: Claude Code + the free ui-ux-pro-max skill Time: Under 30 minutes | Cost: Free Skill level: Developer or site owner with access to the site code
What changes
- Blog index: Featured hero card, post grid, live search, category tags and an email capture strip.
- Blog post: Three-column reading layout, sticky table of contents, reading progress bar, share buttons, author bio and related articles.
Requirement first: Your website's code or CMS must be connected to Claude Code for this to work. If Claude Code cannot see and edit the project files, install that connection before starting.
How it works: a design brain plus an exact brief
Most redesign prompts fail because they ask for taste without giving rules. This workflow splits the job in two. The skill supplies the design rules, and the prompt supplies the exact page specification.
1. The skill: ui-ux-pro-max
A searchable design database for Claude Code: 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines and 25 chart types. It also carries a pre-delivery checklist for visual quality, interaction, light and dark mode, layout and accessibility.
2. The prompt: your page spec
One prompt names your business, points Claude at /blog and /blog/[slug], and lists every required element for both pages - layout, search, tags, progress bar, share buttons and conversion path.
The flow
Your project files → Claude Code (with /ui-ux-pro-max invoked) → Redesigned index + post pages → You review, test responsive behaviour, then publish.
Invoke it correctly: Type /ui-ux-pro-max in the Claude Code chat before or inside your prompt. You should see ui-ux-pro-max listed in your skills after installation.
Prerequisites
Claude Code installed and opened in your website project folder.
- Your website's code or CMS connected to Claude Code, so files can be edited.
- Python 3 on your machine - needed only for the CLI install route on the next page.
- A backup or version control (for example Git) so you can roll back if you dislike the result.
Install ui-ux-pro-max: pick one route
Both routes install the same skill. Use the CLI route or the plugin marketplace route - do not run both unless you are reinstalling.
Route A - CLI (needs Python 3)
1 Install the CLI globally
Copy-ready text
npm install -g uipro-cli2 Set it up in your project folder
Copy-ready text
cd /path/to/project
uipro init --ai claude3 Or install it for all projects
Copy-ready text
uipro init --ai claude --globalOther commands: uipro update to upgrade, uipro uninstall to remove.
Route B - Claude Code plugin marketplace
Copy-ready text
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skillThen run /plugin and confirm ui-ux-pro-max appears in the list.
Verify before you prompt: Open Claude Code in the project and check that ui-ux-pro-max shows in your skills. If it does not, the redesign prompt will run without the design database behind it.
The master prompt - copy, fill two blanks, paste
Replace [type of business] and [name], keep the rest intact, and paste it into Claude Code in your project folder.
Copy-ready text
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
Use this prompt exactly as written. The two pages that follow unpack every line so a developer can check Claude's output against the spec.
Blog index: hierarchy, discovery and a conversion path
| Element | What to check in the output |
|---|---|
| Featured hero card | The latest or featured post is visually dominant, with its full excerpt and a clear call to action - not just another card in the grid. |
| Post grid | Remaining posts sit in a grid: 2 columns on desktop, collapsing to 1 column on mobile. Test both widths. |
| Live search | Client-side filtering as the reader types, matching against post title and excerpt. No page reload. |
| Category tags | Tags are auto-derived from each post's keywords - check they are sensible and consistent, not random words. |
| Email capture strip | A newsletter strip is present on the page. Static UI is acceptable at this stage; wiring it to a provider is a separate task. |
Why this fixes a "basic list"
A flat list gives a visitor nothing to prioritise and nowhere to go. The hero creates hierarchy, search and tags create discovery, and the email strip creates the conversion path the prompt names as missing.
Review tip: Ask Claude to explain which palette, font pairing and style from ui-ux-pro-max it applied. If it cannot name them, the skill was probably not active.
Blog post: a reading page built to hold attention
| Element | What to check in the output |
|---|---|
| 3-column layout | Desktop only: sticky table of contents on the left, article in the centre, sticky mini-CTA on the right. |
| Mobile TOC | The table of contents collapses on mobile instead of pushing the article down the page. |
| Reading progress bar | CSS scroll-driven, with no JavaScript - built with animation-timeline:scroll(). Check the code, not just the effect. |
| Share buttons | Twitter, LinkedIn and copy link. This component needs "use client"- a common spot for a build error if it is missing. |
| Tag pills | Keyword / tag pills appear above the post title. |
| Author bio | Polished block with avatar, role and a follow link. |
| Related articles | Cards include excerpt snippets, not titles alone. |
| Back to top | Button appears only after 400px of scroll. |
Developer notes
- Progress bar: If Claude reaches for a scroll event listener, point it back to the spec - the prompt explicitly requires the CSS-only approach.
- Sticky sidebars: Test on a long post. Both side columns should stay in view without overlapping the article or footer.
- Email strip: Static UI only in this pass. Do not let Claude invent a backend or a provider integration you did not ask for.
Ship it: pre-publish checklist
- [ ] ui-ux-pro-max was visible in skills before the prompt ran
- [ ] Featured hero shows full excerpt and a working CTA
- [ ] Grid is 2 columns on desktop, 1 column on mobile
- [ ] Live search filters by title and excerpt without a reload
- [ ] Category tags match post keywords
- [ ] Post page: sticky TOC (left), article (centre), sticky mini-CTA (right)
- [ ] Progress bar uses animation-timeline: scroll() - no JS scroll listener
- [ ] Share buttons work, including copy link, with "use client" where required
- [ ] Back-to-top appears after 400px; author bio and related excerpts render correctly
- [ ] Both pages checked in light mode, on mobile, and against the skill's accessibility checklist
Troubleshooting
| Problem | Fix |
|---|---|
| Skill not in the list | Re-run the install for your route, restart Claude Code, then run /plugin(Route B) or check your skills list again. |
| uiprocommand not found | Reinstall with npm install -g uipro-cliand confirm Python 3 is available. |
| Redesign looks generic | The skill was not invoked. Re-run with /ui-ux-pro-maxexplicitly in the prompt. |
| Share buttons break the build | Check the component carries "use client", as the prompt specifies. |
| Progress bar uses JavaScript | Reject it against the spec and ask for the CSS animation-timeline:scroll()version. |
Resources
Skill site: https://ui-ux-pro-max-skill.nextlevelbuilder.io | GitHub: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill Verify skill details on the official site before production use.