Step01
Set Up Your Creative Environment
Open the real marketing repository in Cursor, select Opus 4.6, and give it access to the existing brand assets, components, routes, and project instructions.
IntermediateMarketing
How to Redesign a Marketing Website Using Claude Opus 4.6 for Creative Development
Use Claude Opus 4.6 for broad creative development by giving it a real codebase and ambitious brief, then correcting generic visual output with direct taste feedback before scaling the approved system.
Source episode · 16:23
How I AI: GPT-5.3 Codex vs. Claude Opus 4.6—Shipping 44 PRs in 5 Dayswith Claire Vo
Claire gives Opus the same broad marketing redesign brief, rejects its generic first pass, pushes for a distinctive visual direction, and then extends the approved system across the site.
Before you start
What you need
- An established marketing site repository
- Brand colors, assets, and existing design patterns
- Examples of sites whose craft or density you admire
- Claude Opus 4.6 in an agentic coding environment
What you’ll make
A cohesive marketing redesign that keeps the brand recognizable while improving its product and enterprise storytelling.
Tools used
- ClaudeVisitClaude
Anthropic AI assistant
- 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.
5 steps
Step02
Provide a High-Level Creative Brief
Describe the business shift and quality bar without prescribing every component. Ask the model to inspect the site, compare the references, propose a system, and then implement the highest leverage pages.
Example prompt
Redesign this marketing site for both product-led users and enterprise buyers. Inspect the existing routes, brand assets, components, and copy before planning. You may create templates and pages, but preserve factual claims and core behavior. Use these reference sites for craft and information density, not imitation: [references]. Produce a route inventory and design-system plan, then implement it.
Step03
Evaluate the Initial Design
Review the first pass for hierarchy, brand fit, copy, responsiveness, and visual clichés. Capture what feels generic or off-brand with concrete examples from the rendered page.
Step04
Provide Aspirational and Corrective Feedback
Give direct creative feedback about the desired feeling and the patterns to remove. Ask for a coherent rebuild, not a layer of decoration over the first version.
Example prompt
This first pass is generic Tailwind indigo AI output. Rebuild the visual direction so it feels like a top agency designed it specifically for ChatPRD. Keep our pink identity, use our real graphics, improve typography and information density, and create a distinctive component language. Do not invent customer claims or turn “enterprise” into blunt repeated copy.
High-level, emotional, and aspirational feedback can often produce better creative results than overly technical, line-by-line corrections.
Step05
Expand the New Style Across the Site
Once the homepage and one secondary page establish the system, apply the same tokens, typography, spacing, components, and content principles across the remaining route inventory. Run the build and review key pages at desktop and mobile widths.
Example prompt
Apply the approved design system across [routes]. Reuse shared primitives, preserve each page’s purpose and factual content, run the repository checks, and report any route that still needs a page-specific decision.
What good looks like
- The model inspects the existing code and plans a site-wide system.
- The approved direction feels specific to the brand rather than a stock Tailwind theme.
- Shared components and tokens carry the new style across pages.
- The repository builds and important routes retain their content and behavior.
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 first pass looks like a generic AI template
- Name the visual clichés you reject, restate the brand qualities, and ask for a new design language rather than piecemeal CSS edits.
- The redesign changes only the homepage
- Define the required route inventory and ask the plan to name shared components, templates, and page-specific work before building.
- The model writes vague enterprise copy
- Supply real product proof, audience needs, and claims it may use, then remove unsupported statistics and generic promises.
- The new style breaks existing pages
- Run the build and route checks, compare key pages at desktop and mobile widths, and fix shared primitives before local patches.
Keep building
Related workflows
advancedOperationsChatGPTCodex+1
How to Build and Run an E-commerce Business with AI as a Technical Co-Founder
A guide for solo entrepreneurs to manage business operations using AI. Learn how to source manufacturers, build and maintain an e-commerce site, and replace dashboards with voice commands, all without a human team.
Open
advancedEngineeringChatGPTCodex
How to Prototype Complex Garments Using AI and 3D Modeling
Turn a complex, artistic concept into a manufacturable 3D model. This workflow shows how to use AI to generate a design from a photo and then create CAD files for 3D printing, even for previously 'unmanufacturable' items.
Open
intermediateDesignChatGPT
How to Use AI for Fashion Design and Visualization from Sketch to Campaign
Learn to translate fashion sketches into a full suite of marketing visuals. This workflow covers creating a detailed design spec, generating a core product photo with AI, and iterating for different contexts like runway and influencer shots.
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