FNJ

How to Redesign a Website With AI Without Losing Your Brand

A step-by-step plan to redesign your site with AI while keeping your brand, your URLs and the pages that already rank: audit, references, redirects, launch.

PublishedOctober 14, 2026
Read time9 min
Written byThe Framer → Next.js team
All posts ↗

To redesign a website with AI without losing your brand, decide what must survive before you open any tool: your logo, colors, typefaces and voice, the URLs that bring visitors, and the copy that already ranks. Then give the AI your current site or brand files as the first reference, let it redesign the layout around those fixed points, put your proven copy back, and redirect every URL that changes. The design is the easy part; the audit and the redirects are what protect you.

The worked example here uses FNJ's AI builder, which can redesign from your current site's link, but the audit, redirect and launch steps apply whichever tool you use.

Step 1: Write down why you're redesigning

One sentence, written before anything else, keeps every later decision honest. Good ones are specific:

  • "Phone visitors can't find the booking button."
  • "We look smaller and older than the firm we've become."
  • "We added two services and the navigation can't hold them."

"It looks dated" is a fair feeling, but it doesn't tell you what to keep. If your reason is about phones, you'll judge the new design on a phone first. If it's about credibility, you'll look hard at typography and photography. The sentence becomes your test at the end.

Step 2: Audit what has to survive

Your brand

Gather the things that make you recognizable: logo files (SVG if you have them), exact color values, typeface names, the photography you own, and any phrases customers associate with you. If you can't find the exact hex values, open your current site in a browser, inspect the main heading and button, and copy them from the styles panel.

Your URLs

Make a full list of current addresses. Three sources between them catch nearly everything:

  • your sitemap, usually at yourdomain.com/sitemap.xml;
  • the Pages report in Google Search Console;
  • the landing pages report in your analytics tool.

The content that earns its keep

In Search Console's Performance report, sort pages by clicks over the last year. The pages at the top are the ones whose titles, headings and copy are doing work for you. Note each page's main search query next to it.

What converts

Write down where your phone number, booking button, quote request and email links sit today, and where they lead. A redesign that moves the booking button below the fold can cost more than any ranking change.

Put it all in one sheet:

Current URL Search traffic Decision New URL Notes
/services/teeth-whitening High Keep /treatments/teeth-whitening Keep H1, intro and FAQ
/team Some Keep /our-team New photos
/news/new-opening-hours-2021 None Drop /contact Hours now live on Contact
/contact-us Some Keep /contact Booking link must stay at the top

Step 3: Separate what the AI changes from what it keeps

AI is good at the parts of a redesign that take designers the most hours: layout, section order, spacing, type scale, responsive behavior and page structure. It shouldn't be making decisions about your logo, your exact colors, your best-performing copy or your URLs. Write both lists into your prompt so there's no ambiguity.

Step 4: Give the AI your brand, not a description of it

"Navy and coral, friendly serif" leaves a lot of room for interpretation. There are better inputs.

Your current site's link. Paste your own address as a reference and FNJ's AI builder reads its design signals: font families and type scale, colors by role, corner radii, borders, shadows, navigation, heading and button styles, and page structure. Put it first, then add a second reference for the new direction you want, such as a screenshot of a calmer, more photo-led site. FNJ accepts up to three references per prompt, blends what they share and follows the first where they disagree, so your own brand wins conflicts.

Your brand or project files. If you have your site's code or a brand kit, drop it in as a project ZIP or folder: design tokens, stylesheets, a Tailwind config, a brand guide and logo files. The builder follows the brand exactly from those files and places your real logo when the project includes logo files. Using brand guidelines with an AI website builder covers how to prepare that folder.

Know what a link doesn't carry. FNJ takes a reference's look and never its words, logos or images, and that includes your own site when you use it as a link reference. Expect fresh copy, and plan to supply your logo yourself, either as a file in a project folder or uploaded on the canvas.

Then write the brief. For example:

Redesign the website for our family dental clinic in Manchester. Keep our navy and coral colors and our serif headings. Pages: Home, Treatments, Fees, Our team and Contact. Make it calmer, with more white space and larger photos. The "Book an appointment" button must be easy to reach on phones on every page and link to our booking page.

Step 5: Put your proven words back

FNJ writes new copy for your business, and for pages with little traffic it may well be better than what you had. For the pages at the top of your audit, restore what works:

  1. Keep the main heading close to the old one, especially if it contains the query people found you with.
  2. Restore the opening paragraph and any section that answers a common question.
  3. Edit text directly on the canvas, or ask in plain words: "On the Teeth whitening page, use this exact heading: Professional teeth whitening in Manchester."
  4. Compare each page's search title and description with the old ones. Every page in FNJ gets its own, so keep the old wording where it was performing and improve it where it wasn't.
  5. Check that each page has one clear main heading and that the headings below it follow in order.

Step 6: Keep URLs or redirect them

Every old URL that had traffic or links should either load the same content at the same address or send a permanent (301) redirect to the closest new equivalent. Don't send everything to the home page; Google's guide to site moves recommends mapping each old URL to its own new destination and keeping redirects for at least a year.

The simplest fix is not to change addresses at all. Compare the page addresses in your export with the audit sheet. Where one differs from an address that matters, a developer can rename that page's route (a folder in FNJ's Next.js export, a file in the HTML export) and update the links that point to it, or you can redirect the old address.

To redirect, add rules at your host. Cloudflare Pages and Netlify both read a _redirects file placed in the folder you deploy:

/services/teeth-whitening       /treatments/teeth-whitening   301
/team                           /our-team                     301
/news/new-opening-hours-2021    /contact                      301
/contact-us                     /contact                      301

Always write the status code. Cloudflare's redirects documentation notes that a rule without one defaults to a temporary 302. Vercel and Next.js have their own redirect settings. For a full method, see the redirect map guide for website migrations.

Step 7: Stage it before you switch

Push the new site to a branch of your own GitHub repository; FNJ leaves the default branch untouched until you merge. Git-connected hosts such as Cloudflare Pages, Vercel and Netlify can build preview deployments from branches, which gives you a separate preview address to check on real phones and share with colleagues before anything goes live. FNJ doesn't host the site, so it runs wherever you deploy it.

Before launch, set the site's address in FNJ so the export includes sitemap.xml and robots.txt, and check that canonical links point at your live domain.

Step 8: The launch checklist

  • Every URL from your audit returns the page or a single 301, with no chains and no 404s.
  • The top pages keep their headings, key copy, titles and descriptions.
  • Booking, phone and email links work on a phone.
  • Forms are relinked. FNJ doesn't build forms, so point buttons at your form or booking tool, and check that nothing still depends on the old site's host.
  • Your logo appears in the navigation and footer.
  • robots.txt doesn't block the site, and any staging block is removed.
  • The new sitemap is submitted in Search Console.
  • Shared links show the right preview image and title in a chat app.
  • Analytics is installed if you used it before.
  • You've kept a copy of the old site for reference.

Step 9: Watch the first weeks

Check Search Console's Pages report for new "Not found" errors and redirect each one you missed. Compare clicks on your top pages with the period before launch. Some movement after a redesign is normal; resist the urge to change everything again in the first few weeks.

What to keep outside the redesign

FNJ builds marketing websites, not web apps. If your current site has a blog engine, a store checkout, customer log-ins or a database behind it, keep those on the tools that run them today and link to them from the new design.

Redesign from what you already have

Once your brand, URLs and best copy are written down, the design work is the quick part. You can redesign from your current site's link with FNJ's AI builder, add a second reference for the new direction, refine it on the canvas, and export a Next.js or HTML project that keeps working on your own hosting.

Frequently asked questions

Will redesigning my website hurt my SEO?

It doesn't have to. Rankings are most at risk when URLs change without redirects and when copy that ranked is replaced, so keep or redirect every URL and restore the headings and text of your best-performing pages.

Can AI redesign my website using my existing site?

Yes. FNJ's AI builder can read your current site's link for its fonts, colors and component styles, or a project folder with your brand files, and redesign the layout around them. It writes fresh copy, so restore the wording of pages that already perform well.

Do I need to keep the same URLs when I redesign?

Keeping them is the safest option. If an address must change, add a permanent 301 redirect from the old URL to the closest matching new page rather than to the home page.

How long should redirects stay in place after a redesign?

Google recommends keeping redirects for at least a year and suggests keeping them longer where you can. Old links in emails, documents and other sites keep working only while the redirects exist.

Will the AI keep my logo?

FNJ never takes logos from a link reference, including your own site. Add your logo files in a project folder and the builder places your real logo, or upload it on the canvas after the first build.

#ai website builder#website redesign#seo#branding

Build your site with our AI builder

Show it a site you love and describe your work. It designs every page for desktop, tablet and phone, and gives you the code.

Try the AI builder →
Up nextIs It Legal to Copy a Website Design? Where the Line Is
Also readFramer AI Alternatives: AI Builders That Give You the Code
Also readHow AI Website Builders Work (and Where They Fall Short)

Ready to convert your website?

Paste your published Framer URL to generate a production-ready project in minutes.

Example: https://your-site.framer.websiteYour published site’s address — the one visitors see. A custom domain works too.