> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rocket.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Website redesign

> Complete website redesign recipe using Rocket.new Redesign.

export const LlmsDirective = () => <blockquote className="llms-directive">
    For the complete documentation index, see <a href="/llms.txt">llms.txt</a>.
    For a lightweight markdown version of this page, append .md to the URL.
  </blockquote>;

<LlmsDirective />

A step-by-step recipe for redesigning an existing website with Rocket. This covers the full process from defining goals through auditing, planning, executing page by page, reviewing, and deploying.

<Info>
  This recipe uses Build's Redesign feature. Redesign takes an existing URL and transforms it - preserving content while reimagining the visual design. See [Redesign](/build/create/commands/redesign) for full details.
</Info>

## Before you start

Gather these before beginning:

* The URL of the site you're redesigning
* A clear idea of what needs to change (visual style, layout, conversion elements, mobile experience)
* Any brand assets you want to keep (colors, fonts, logos)
* A list of the most important pages (start with these)

## The recipe

<Steps>
  <Step title="Define your goals">
    Be specific about what you're trying to achieve. "Make it look better" is a start, but the more precise your goals, the better the redesign.

    Common goals:

    * Modernize the visual design (dated typography, layout, color palette)
    * Improve conversion rates (better CTAs, clearer value proposition, reduced friction)
    * Improve mobile experience (responsive layout, touch-friendly navigation)
    * Align with a new brand identity (new colors, fonts, tone)
    * Improve page load performance (reduce bloat, optimize assets)

    Write down your top 3 goals. You'll reference these in your prompts.
  </Step>

  <Step title="Audit the current site">
    Use a **Solve task** to objectively assess the current site before changing anything.

    ```plaintext wrap theme={null}
    Audit my website at [your-site.com]. Assess: visual design quality (typography, color, layout, imagery), user experience (navigation, information hierarchy, CTAs), mobile responsiveness, page load performance, and SEO fundamentals. Compare against 3 best-in-class examples in my industry ([industry]). What are the top 10 issues to fix, ranked by impact?
    ```

    This gives you a prioritized punch list for the redesign, grounded in competitive context rather than personal taste.
  </Step>

  <Step title="Plan the redesign">
    Based on your goals and audit, decide:

    * **Which pages to redesign first** - typically homepage, then key landing pages, then interior pages
    * **What to keep vs. what to change** - preserve content structure and SEO equity; transform visual design
    * **Design direction** - pick a reference or describe the aesthetic (minimal, bold, editorial, corporate)

    You don't need a full design spec. A few clear sentences about the direction are enough for Rocket to work with.
  </Step>

  <Step title="Execute page by page">
    Work through pages in priority order. Start each page as its own prompt within a **Build task** (Redesign).

    **Homepage:**

    ```plaintext wrap theme={null}
    Redesign the homepage at [your-site.com]. Goals: modernize the visual design, improve mobile experience, and make the primary CTA more prominent. Design direction: clean, contemporary, with generous whitespace. Use [font] for headings and [font] for body text. Primary color: [hex]. Keep all existing content sections but reimagine the layout.
    ```

    **Pricing page:**

    ```plaintext wrap theme={null}
    Redesign the pricing page at [your-site.com/pricing]. Simplify the layout into 3 clear tiers in a card format. Add a feature comparison table. Make the recommended tier visually prominent. Add an FAQ section to address purchase objections. Match the homepage design direction.
    ```

    **About page:**

    ```plaintext wrap theme={null}
    Redesign the about page at [your-site.com/about]. Add more visual storytelling - team photos, timeline of company milestones, and culture highlights. Keep the current text content but present it with better typography and layout. Add a "Join the team" CTA that links to careers.
    ```

    After each page, preview in staging and iterate until you're satisfied before moving to the next page.
  </Step>

  <Step title="Review and iterate">
    Once all priority pages are redesigned, review the full site holistically:

    <Check>Visual consistency - fonts, colors, spacing, and component styles match across all pages</Check>
    <Check>Navigation - all links work, menu is consistent, breadcrumbs are correct</Check>
    <Check>Mobile experience - every page works on phone and tablet</Check>
    <Check>Content accuracy - all text is correct, no placeholder content remains</Check>
    <Check>Forms and CTAs - all forms submit, all buttons link to the right destinations</Check>
    <Check>SEO preserved - run `/Generate SEO Report` and compare against pre-redesign baseline</Check>
    <Check>Performance - run `/Generate Performance Report` and verify acceptable load times</Check>

    Share the staging URL with stakeholders for final approval.
  </Step>

  <Step title="Deploy">
    Launch the redesign:

    1. Run the [pre-launch checklist](/build/launch-web/launch-your-site#pre-launch-checklist)
    2. Click **Launch** to go live
    3. Run [SEO optimization](/build/polish/seo) on the redesigned pages
    4. Set up [analytics](/build/measure/analytics) to compare pre/post performance
    5. Monitor for the first week and iterate as needed

    <Note>
      Your previous version is saved in [version history](/build/launch-web/launch-your-site#version-history). If anything goes wrong, you can roll back to the pre-redesign version with one click.
    </Note>
  </Step>
</Steps>

## Common pitfalls

<AccordionGroup>
  <Accordion title="Trying to redesign everything at once">
    Work page by page. Each page gets better attention, and you maintain momentum. A homepage redesign you ship today is worth more than a full-site redesign that takes weeks.
  </Accordion>

  <Accordion title="Losing SEO equity">
    Keep the same URL structure. Preserve existing title tags and meta descriptions unless they genuinely need improvement. Run an SEO report before and after to catch regressions.
  </Accordion>

  <Accordion title="Over-designing at the expense of conversion">
    A beautiful site that doesn't convert is a failed redesign. Always keep your CTA hierarchy visible, test forms, and make the user's next action obvious.
  </Accordion>

  <Accordion title="Ignoring mobile">
    Check every page on mobile after redesigning. Desktop-first designs often break on small screens. If in doubt, design mobile-first and let it scale up.
  </Accordion>
</AccordionGroup>

## What's next?

<CardGroup cols={2}>
  <Card title="Internal tool recipe" icon="screwdriver-wrench" href="/learn/recipes/internal-tool">
    Build a dashboard or admin panel.
  </Card>

  <Card title="Website overhaul workflow" icon="paintbrush" href="/learn/workflows/website-overhaul">
    Full workflow with Intelligence benchmarking.
  </Card>

  <Card title="Redesign" icon="wand-magic-sparkles" href="/build/create/commands/redesign">
    Full guide to Rocket's redesign capability.
  </Card>

  <Card title="Launch your site" icon="rocket" href="/build/launch-web/launch-your-site">
    Test your redesign before going live.
  </Card>
</CardGroup>