Paste any website URL, choose a redesign command in Rocket.new Build, and rebuild the page with a fresh layout, theme, or updated content.
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.
Visit rocket.new and sign in. On the homepage, click Build to start a new Build task.
Rocket homepage
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.
/ command menu showing redesign commands
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.
Enter the URL and describe your direction
4
Select a command and send
Choose your redesign command from the list, confirm your prompt, and click the send button or press Enter. Rocket analyzes the page and starts rebuilding it.
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.
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.
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.
"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.
