When AI Redesign Breaks Your Site: Why Git Branches Aren’t Enough

Problem: AI‑driven page redesign breaks the branch model

When AI is asked to redesign a page, it changes not only the target page.tsx but also components, style files, layout directories and static assets in public. Because the work area remains the same physical directory, the new resources overwrite the old ones, so the main branch appears affected even though the changes were made on a feature branch.

Why a branch alone cannot isolate the workspace

A Git branch isolates commit history, but the working tree (the files on disk) is shared. Switching branches only swaps file contents; any untracked or newly added files, especially in public, stay in the same folder and can be overwritten by AI‑generated assets.

Public directory is especially vulnerable

Static resources such as logos, background images, icons, and JSON configs live in public. AI often performs “in‑place optimization”, replacing public/images/home-bg.png or public/logo.png with new versions that have the same filenames, making the change invisible in a diff.

Why git worktree fits page redesign

Worktree lets a single repository have multiple independent working directories. The main branch stays in the original project folder, while a redesign worktree lives in a separate folder (e.g., ../glownest-next-ui-redesign). Each directory has its own src, app, components, and public, so AI’s experiments never touch the stable files.

Correct usage of git worktree

git status                     # ensure the main worktree is clean
git checkout main
git pull origin main
git worktree add ../glownest-next-ui-redesign -b ui-redesign main

Now you have two folders: ~/projects/glownest-next – main branch ~/projects/glownest-next-ui-redesign – redesign worktree

Run the redesign in the second folder (install dependencies, start dev server on a different port, e.g., 3001) and keep the original on 3000 for side‑by‑side comparison.

Prompting AI with clear resource boundaries

Before invoking the AI, state the scope explicitly, e.g.:

Current directory: redesign worktree
Task: redesign home page visual, keep existing routing and business logic.
Allowed modifications:
1. Home page components
2. Home page styles
3. New redesign‑only components
4. New static assets (place under public/redesign/…)
Forbidden modifications:
- Change API calls, authentication, payment logic
- Overwrite existing files in public/images/
- Delete old resources
- Touch main‑branch files

Organizing new static assets

Place every new image, icon, or background under a dedicated namespace, for example:

public/redesign/

public/redesign/home/

public/redesign/cards/

public/redesign/icons/

This prevents accidental overwrites and makes PR reviews clearer.

Avoid overwriting the original page entry

Instead of replacing app/page.tsx directly, create a temporary page such as app/redesign/page.tsx or a temporary route like /redesign-home. The old page stays live while the new version can be previewed independently.

Natural side‑by‑side comparison

Run the main branch on port 3000 and the redesign worktree on port 3001. Open both URLs in the browser to compare visual changes, component behavior, and performance without repeatedly restarting or switching branches.

Review and merge workflow

After the redesign is finished:

Run git status and git diff in the worktree to ensure no unwanted changes.

Commit the worktree changes:

git add .
git commit -m "feat: redesign home page"
git push origin ui-redesign

Create a PR to merge into main. Review focuses on:

Cleaning up the worktree

When the redesign is merged or abandoned:

cd ~/projects/glownest-next
git worktree list               # verify worktree name
git worktree remove ../glownest-next-ui-redesign
git branch -d ui-redesign       # delete local branch
git push origin --delete ui-redesign   # delete remote branch (if needed)

This removes the experimental environment without leaving stray files.

Final lesson

AI accelerates page redesign but also amplifies the risk of contaminating the stable codebase. Simple Git branches isolate history only; git worktree isolates the physical workspace, and disciplined resource naming keeps static assets safe. Combining these practices yields a robust workflow for AI‑assisted front‑end development.