How to redesign a Next.js website in GitHub with AI

Yes. When your website is a Next.js project in GitHub, an AI agent can redesign it by changing the code in the repository, the same way a developer would. The redesign arrives as a pull request against your default branch, and the deployment you already use, such as Vercel or Netlify, publishes it once it merges. You keep your repository, your hosting, and your domain.

It helps to know what a redesign touches in a Next.js codebase. The site's routes live in the app or pages folder, and most of the look comes from a handful of shared files: the root layout that wraps every page, the header and footer components, and the place the design system is defined, such as a Tailwind configuration, CSS variables in a global stylesheet, or a theme file. Fonts are usually loaded in the layout. Each page's title and description sit in its metadata, redirects sit in next.config.js, and many sites generate their sitemap and robots.txt from code. A redesign changes the shared files to set the new colors, type, and spacing, then works through each page's sections and copy.

Done by hand, the job usually goes like this. A designer audits the current site and produces a new direction. A developer creates a branch, updates the design system and layout, rebuilds the sections page by page, and fixes the mobile layouts. Someone checks that pages which moved have redirects and that the titles and descriptions survived. The developer opens a pull request, the team reviews a preview deployment, and the change merges.

That's a lot of hand-offs for a company without a developer on call, which is why so many marketing sites in GitHub stay unchanged for years. A good result is a site that looks and reads like the company you are now, works on a phone, keeps its search traffic, and lands in your repository as one change your team can review.

AI coding tools change code well when someone tells them what to change. GitHub's Copilot coding agent takes an issue you assign to it, works on a branch, and opens a pull request for review. Editors like Cursor and terminal agents like Claude Code make changes across a codebase from a developer's instructions. They're good tools for the build step.

What they leave to you is the redesign itself. Someone still has to decide what the new direction should be, which copy to keep, which pages earn traffic and must keep their addresses, and what the site needs to say about the business. A coding agent follows the issue it was given, so the quality of the redesign depends on the quality of the brief.

Kite does both halves. It works out what the redesign should be from research on your business, then builds it in your code.

Start by connecting GitHub and telling Kite what you want, in the Kite web app or in Slack:

"Import our website from GitHub and redesign it. Keep our logo and colors, but make it feel like a modern software company."

Kite is an AI marketer. It researches your business, builds a growth strategy, and ships the work that brings you new customers. By the time you ask, it already knows your positioning, your customers, and your competitors from that research, so you don't need to write a design brief. Kite comes back with a short plan covering what it will keep, whether it will refresh the brand, and which pages the new site needs. Confirm the plan or change it, and Kite starts.

You connect GitHub by installing the Kite GitHub App on your organization or personal account and choosing which repositories it can reach. You can grant only the repository that holds your website. If you install on an organization, an organization owner may need to approve the app first, and Kite tells you when an install is waiting for that approval.

Kite starts by finding your website repository among the ones you granted and importing it. It confirms the repository with you first, then brings the code in. Kite imports Next.js projects only, and it handles a repository that holds several apps: you name the folder your website lives in, and Kite works in that folder.

Your site may need secret keys to run, such as an API key for your forms or your content system. Kite checks which keys the code expects and tells you which ones aren't set yet, so you can add them to the site in Kite. It works with the key names only and never reads the values.

Once the site is imported, Kite runs it in a preview so it can see every page the way a visitor would. When your developers push their own changes later, Kite pulls the latest code from your connected branch before it starts new work, so the redesign builds on what they shipped.

Kite audits the current site before it proposes any new design, because a redesign that throws away what works costs you traffic and customers. It reads your pages, captures screenshots of the main page types, and identifies your logo, color palette, fonts, and the tone of your copy.

It also checks how the site performs. PageSpeed data shows its speed, accessibility, and technical quality. Search data shows which pages rank and for which keywords, and Kite checks whether your pages appear in answers from ChatGPT, Gemini, Perplexity, and Claude.

From that audit, Kite sorts the site into what stays and what changes. A pricing page that ranks well for your category keeps its address and its strongest copy. A homepage that still describes last year's product gets rewritten. A logo customers know stays, even if everything around it changes.

Kite settles the visual direction next, and your request decides which way it goes. If you want to keep your brand, Kite builds the new design on your current colors, fonts, and logo, and changes the layout, spacing, and page structure around them. If you want a refresh, Kite proposes a new visual direction grounded in your positioning and your audience, drawn from its gallery of design references.

You can also point Kite at a public website whose look you admire. Kite captures that site's design language, meaning its type, colors, spacing, and surfaces, and uses it as a starting point for your own design. Your content and your claims still come from your business.

Kite records the chosen direction and its source, so every page in the redesign follows the same system.

Kite rebuilds the site on its own branch, so nothing reaches your default branch while the work is in progress. It starts with the shared foundation: the design system's colors and type, the fonts, the root layout, the navigation, and the footer. Then it works through each page and restyles every section in the new direction.

Where the new structure calls for it, Kite adds, rewrites, moves, or removes pages and sections. It keeps the copy that's working and rewrites the copy that no longer fits your positioning. It prepares new images, including original ones it generates, and places your logo according to the design system. It also updates forms, calls to action, and navigation so visitors can find their way to signing up or buying.

Every page gets a layout for phones and tablets as well as desktops. On a small screen, text wraps without sideways scrolling, the menu opens into a drawer with a clear close button, and the main heading stays readable.

If your imported site draws its content from Contentful, Storyblok, Sanity, or a self-hosted Payload instance, Kite updates the content where it lives and redesigns the code that displays it.

Kite protects your rankings as part of the redesign, because search traffic is usually lost when pages change address or lose their metadata. Pages that already rank keep their addresses. When a page has to move, Kite adds a permanent redirect from the old address so visitors and search engines land on the new one.

Kite carries over and improves each page's title, description, canonical URL, and structured data. It updates the sitemap, robots.txt, and llms.txt, the file that tells AI systems what your site contains. It also checks internal links, so no page in the new design points to one that no longer exists.

Kite checks every changed page in a browser before it hands you the redesign. It opens each page it touched, including any new ones, looks for errors, and captures screenshots of the changed sections to confirm the new design rendered correctly. It reads the page titles, descriptions, and structured data from the loaded pages to confirm they're there.

When the check passes, Kite sends you a preview link. A redesign is a large change, so it stays in its own draft until you approve it. If a section isn't right, tell Kite what to change, and it updates the draft and checks it again.

When you approve the redesign, Kite opens a pull request against your default branch. Your repository stays the source of truth, so the change reaches it the way any developer's change would.

If your default branch has no review rules, Kite merges the pull request and your deployment publishes the new site. If you require reviews or checks on that branch, the pull request stays open with the redesign in it, and Kite tells you it's waiting. Your developer reviews it like any other change and merges it when the rules are satisfied.

After the new site goes live, Kite compares it with the old one. Because an imported site runs on your own deployment, Kite measures it through the analytics product you connect, such as Google Analytics or PostHog. It compares traffic, sign-ups, and conversions with the weeks before the launch and explains what changed.

If a page underperforms, Kite proposes a change, builds it on a new branch, and delivers it the same way.

When Kite finishes, your repository holds the redesigned site as one reviewable change, and your team has the evidence behind it.