Step 01
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.
Try this with your AI assistant
Download the skill for this workflow. Version 1.0.1.
Source episode · 16:23How I AI: GPT-5.3 Codex vs. Claude Opus 4.6—Shipping 44 PRs in 5 Days
with 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
The workflow
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
5 steps
Step 02
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.
Step 03
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.
Step 04
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.
Step 05
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.
Runbook notes
How to recover when the loop fails and where human judgment helps.
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.
Related workflows
intermediateDataMeta Muse
How to Use AI for Hobby Improvement and Data Analysis for Golf & Chess
Connect data from your hobbies (like golf scores or chess games) to an AI agent to get automated analysis, visual dashboards, and actionable coaching insights. Turn raw data into a story that helps you improve.
Open
beginnerPersonalMeta Muse
How to Create a Personalized Shopping Catalog from Your Instagram Saves Using AI
Turn your unstructured Instagram 'Saved' collection into a fun, personalized shopping catalog. This workflow uses an AI agent to organize your saves and present them in a nostalgic, engaging format like the SkyMall magazine.
Open
advancedContentMeta Muse
How to Revive an Old Blog or Digital Archive as a Personal AI Podcast
Resurrect your old digital content, like a forgotten blog from Blogger or Tumblr, by using an AI agent to find, consolidate, and transform it into a daily personal podcast. Reconnect with your past self in a new, listenable format.
Open
Start shipping better products.
Join 250,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.
Free to start · 14-day Pro trial · SOC 2 Type II
