Step01
Set Up Your Project in Cursor
Open the real website repository on a new branch. Record the existing blog routes, data query, pagination or filtering, brand assets, article template, and desktop and mobile baseline.
IntermediateMarketing
How to Use AI for a One-Shot Blog Page Redesign and SEO Upgrade
Give a coding model a real blog repository and outcome-based redesign brief, then judge the result on brand fit, usability, responsive behavior, accessibility, SEO, and regression evidence before shipping.
Source episode · 02:00
AI Design Battle: Gemini 3 vs. Opus 4.5 vs. Codex 5.1—Which Model Is the Best Web Designer?with Claire Vo
Claire gives Gemini 3 Pro, Opus 4.5, and GPT-5.1 Codex the same Cursor prompt and repository, compares their blog redesigns, then inspects the implemented UX and SEO changes.
Before you start
What you need
- An existing blog repository and feature branch
- Current brand assets, design tokens, and content model
- A baseline capture of the index and article templates
- The repository’s build, lint, test, and preview commands
- SEO and accessibility requirements
What you’ll make
A reviewable redesign that improves discovery and reading without changing URLs, losing content, inventing claims, or breaking existing blog behavior.
Tools used
- CursorVisitCursor
AI-first code editor
Step by step
The workflow
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
8 steps
Step02
Select a Design-Focused AI Model
Choose a model suited to broad front-end work, but treat model reputation as a starting hypothesis. Give it the same repository context, constraints, and checks you would use for a human implementation.
Not all models are the same. Develop a habit of model switching. Use models like Opus 4.5 for front-end design and others for backend logic to get the best results for each specific task.
Step03
Craft a High-Level Redesign Prompt
Write an outcome-based brief that names users, problems, brand constraints, required behavior, technical SEO, accessibility, and protected elements without prescribing every visual decision.
Example prompt
Redesign the blog index and article experience in this repository. Improve content discovery, hierarchy, reading flow, and brand fit using the existing assets and tokens. Preserve every route, slug, post, data source, and existing behavior. Add only accurate metadata, canonical URLs, breadcrumbs, structured data, semantic headings, and relevant internal links. Handle missing images, empty categories, pagination, long titles, narrow screens, keyboard navigation, reduced motion, and loading states. Run the repository checks and summarize the changed files and remaining risks.
Step04
Execute the Prompt
Let the model inspect and implement on the branch. Keep the original prompt and baseline fixed if comparing models, and do not mix changes between candidates.
Example prompt
Redesign the blog page to improve both the visual appeal and user experience. Add best practices for SEO and navigation.
Step05
Review the AI's Execution Plan
Inspect the plan and diff for route coverage, shared-component strategy, unintended content changes, new dependencies, invented copy, and code outside the requested scope.
Step06
Evaluate the Redesigned UI and UX
Review the rendered index and representative article pages at desktop and mobile widths. Check hierarchy, brand assets, hover and focus states, long content, missing images, pagination, and readability.
Step07
Verify SEO and Technical Improvements
Inspect the rendered metadata and structured data, verify canonical and breadcrumb URLs, run an accessibility scan, and confirm headings, alt text, internal links, and article dates match the source content.
Step08
Finalize and Deploy
Run build, lint, tests, route checks, and preview review. Make narrow corrections, capture before-and-after evidence, and deploy only through the normal pull-request and release process.
Example prompt
Fix only these confirmed issues: [list]. Preserve the accepted visual direction and all existing slugs and content. Run [commands], report the results, and leave the branch ready for normal review and deployment.
What good looks like
- The index and article templates preserve every current post and route.
- The design uses real brand assets and works at desktop and mobile widths.
- Metadata, canonical URLs, structured data, headings, and internal links reflect rendered content.
- Build, accessibility, visual, and route checks pass before deployment.
Build your next product with ChatPRD
Turn an idea into a PRD, user stories, and a plan.
After the steps
Runbook notes
How to recover when the loop fails and where human judgment helps.
Recover
If it goes sideways
- The result looks polished but generic or off-brand
- Point the model to actual tokens and assets, name the visual patterns to remove, and request a coherent second direction.
- Cards, filters, or pagination hide or duplicate posts
- Compare the rendered inventory with the source query and test empty, missing-image, and final-page states.
- The model adds metadata or schema that does not match the page
- Inspect rendered head and JSON-LD, validate URLs and required fields, and remove unsupported values.
- A good screenshot masks broken routes or mobile behavior
- Run the repository checks, crawl representative routes, and inspect desktop and mobile previews before merging.
Keep building
Related workflows
advancedPersonalClaude
Create a Meta-Workflow to Continuously Improve Your AI Assistant's Performance
Design a weekly meta-workflow that analyzes your interactions with your AI assistant to make it smarter. This system learns your writing style from edits, suggests new automations for repetitive tasks, and helps you filter valuable AI techniques from hype.
Open
intermediateProductClaudeGranola
Build a Self-Improving AI Morning Brief to Capture Action Items and Learn Company Jargon
Create a daily AI workflow that summarizes yesterday's meetings, identifies urgent tasks, and proactively learns internal company terms it doesn't understand. This keeps your AI assistant's knowledge current and highly relevant to your work.
Open
intermediateProductClaudeNotion+1
Automate Your Weekly Planning with an AI-Powered PM Assistant
Build a recurring AI task that automatically gathers updates from your calendar, Slack, and notes to suggest weekly priorities and prepare you for upcoming meetings. Start every Monday with a clear, comprehensive plan without the manual effort.
Open
Start shipping
better products.
Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.
Free to start
No credit card
SOC 2 certified
Enterprise ready