Redesign

Transform any website with Rocket.new Build - paste a URL, pick a redesign command, and get a rebuilt page. Part of the only vibe solutioning platform with research, building, and intelligence.

Paste a URL, pick a redesign command, and describe your direction. Rocket analyzes the page and rebuilds it with a new look, improved conversion, or brand-matched design.

Redesign commands are available when starting a new Build task from the homepage, not inside an existing project.

How to get started

1. Go to Rocket

   Visit rocket.new and sign in. On the homepage, click Build to start a new Build task.

   
2. Open the command menu

   Type / in the chat input. The command menu opens. Browse by category or start typing to filter, then select a redesign command.

   
3. Paste the URL and describe your direction

   After selecting a command, paste the URL of the site you want to redesign into the input. Add a short description of what you want: visual style, tone, what to keep, what to change. Use the prompts below as a starting point.

Visual refresh

Use these commands when you want a fresh look: modern styling, a complete overhaul, or a mobile-first layout.

Reimagine Website Design

Redesign a website with a modern look while keeping all existing content intact.

Best for: Sites that look dated but have good content and structure.

Try this prompt:

/Reimagine Website Design https://example.com - Clean, modern look. Generous whitespace, refined color palette, updated typography. Keep all existing content and structure.

Full Website Makeover

Complete overhaul with a new design, new copy, and a fresh feel from top to bottom.

Best for: Sites that need both a visual refresh and stronger messaging.

Try this prompt:

/Full Website Makeover https://example.com - Bold sans-serif typography, dark theme. Rewrite the hero and CTA copy to be more direct and conversion-focused.

Mobile-First Redesign

Redesign a website with mobile as the primary experience: single-column layouts, large tap targets, thumb-friendly navigation, and graceful desktop scaling.

Best for: Sites with high mobile traffic but a desktop-first layout.

Try this prompt:

/Mobile-First Redesign https://example.com - Single-column layout, large tap targets, sticky CTA at the bottom, simplified navigation. Scale gracefully to desktop.

Insight-driven redesign

Use these commands when you have data (heatmaps, analytics, or conversion metrics) and want to redesign based on what is underperforming.

Redesign from Heatmap

Redesign a page layout based on heatmap data: reposition CTAs to high-attention zones, remove ignored sections, and fix drop-off areas.

Best for: Teams with Hotjar, Clarity, or similar heatmap data who want to act on it.

Try this prompt:

/Redesign from Heatmap https://example.com - Primary CTA should move above the fold to the top-right attention zone. The hero section gets the most attention so make it stronger. Pricing table is the main conversion goal, make it the focal point.

Fix Conversion Issues

Rebuild a page that solves clarity, CTA visibility, social proof placement, and objection flow.

Best for: Landing pages or pricing pages with low conversion rates.

Try this prompt:

/Fix Conversion Issues https://example.com - CTA needs to be more prominent above the fold. Add social proof near the signup button. Simplify the pricing comparison and reduce friction in the form.

Fix Visual Hierarchy

Rebuild a page that corrects visual hierarchy problems: make overlooked CTAs, headings, or key sections impossible to miss.

Best for: Pages where users are not seeing or acting on the most important elements.

Try this prompt:

/Fix Visual Hierarchy https://example.com - The main heading should be the most prominent element. CTA needs to stand out clearly against the background. Secondary content should visually recede. Use size, color, and spacing to guide the eye top to bottom.

Brand & consistency

Use these commands when you want to match a specific design language, whether your own brand system or a reference site’s aesthetic.

Generate Brand-Matched Page

Generate a new page that visually matches the design system of a reference URL: colors, typography, spacing, and component style.

Best for: Building new pages that need to match an existing brand or design system.

Try this prompt:

/Generate Brand-Matched Page https://example.com - Generate a new pricing page that matches this site's design system exactly. Same color palette, typography scale, card styles, and spacing rhythm.

Redesign Like Competitor

Redesign a website to match a competitor’s design style: same content, new visual language inspired by the reference site.

Best for: Teams who want to adopt a competitor’s visual direction while keeping their own content and messaging.

Try this prompt:

/Redesign Like Competitor https://example.com - Match the visual style of stripe.com. Dark background, clean grid, subtle gradients, precise typography. Keep all existing content and messaging.

Writing better prompts

Name a concrete visual direction

Vague prompts produce generic results. Be specific about what you want:

Instead of	Try
”Make it look modern"	"Dark background, clean sans-serif, gradient accents, ample whitespace"
"Make it professional"	"Corporate style, navy/white palette, structured grid, subtle shadows"
"Make it minimal"	"White background, single accent color, generous margins, no decorative elements”

Reference sites you admire

Naming specific design references gives Rocket a concrete target:

• “Inspired by Stripe: clean gradients, floating UI, polished tech aesthetic”
• “Similar to Notion: warm, friendly, rounded corners, soft colors”
• “Like Linear’s dark theme: stark black, sharp typography, neon accents”

Specify what to keep and what to change

Being explicit about what stays and what changes prevents Rocket from altering things you want left alone:

KEEP: All pricing tier names, features, and prices. The annual/monthly toggle. The FAQ section.
CHANGE: Replace blue with a dark theme (#0F172A background, #38BDF8 accent). Card layout instead of table. Make the recommended plan visually prominent.

Include exact values when you have them

Exact values produce exact results. Include hex codes, font names, and spacing values when you know them:

#1E293B background, Inter for body text, Cal Sans for headings, 80px section padding, 48px heading size.

What’s next?

Iterate with chat

Refine your redesigned page using natural language prompts.

Visual edit

Click any element to adjust text, colors, spacing, or images directly.

SEO & discoverability

Make sure your rebuilt site ranks well after the redesign.

Launch your site

Publish your redesigned page and connect a custom domain.