Edit an Existing AI-Built Website With Google AI Studio

Save the Current Version First

Before changing anything, make sure the current working version of your website is safely stored in GitHub. Your project should already contain the version you want to edit. Before importing:

Make sure the latest code is in GitHub

Make sure the current website works

Keep your current production version unchanged

Do not delete your original repository

Google AI Studio currently lets you import existing code directly from GitHub through Build mode.

Import From GitHub

Google AI Studio Build

In the prompt box:

Click Add files (+) Choose Import from GitHub Connect GitHub if required Select the repository containing your website Import the project

Once imported, AI Studio should load the code and attempt to run the website in its preview environment.

Start With an Audit, Not a Redesign

Do not immediately ask it to redesign the site. Start with an audit.

Import Audit

Reviews the imported project without changing anything — framework, main pages/routes, layout, navigation, reusable components, styling, responsive approach, forms, auth, APIs/backend, integrations, environment-variable names (names only), the build command, and anything that may not work inside AI Studio's environment — checks whether it currently builds and renders, and answers Import status: READY TO EDIT or NEEDS ATTENTION with only the problems that must be solved first.

Review this existing website that I imported from GitHub. Do not change anything yet. First understand the project and tell me: - the framework and project type - main pages and routes - global layout - navigation - reusable components - styling system - responsive design approach - forms - authentication if present - APIs or backend functionality - external integrations - existing environment-variable names — names only - build command - any functionality that may not work correctly inside Google AI Studio's environment Also check whether the website currently builds and renders successfully. Do not: - rewrite the project - change frameworks - install unnecessary packages - modify content - redesign anything Finish with: Import status: READY TO EDIT / NEEDS ATTENTION If it needs attention, list only the problems that must be solved before editing.

If Secrets Are Missing

IMPORTANT

GitHub should not contain private API keys or secrets. If the imported project depends on secrets, add them through the appropriate Secrets settings instead of pasting them into frontend code or public prompts. Google AI Studio provides server-side secret management for web apps.

If a complicated backend or unsupported service prevents the project from running correctly, do not start redesigning it until you understand that limitation.

Use Prompts or Annotation Mode

Once the existing site works in the preview, make targeted changes. You can edit through normal prompts or use Annotation Mode. Google AI Studio's Annotation Mode lets you highlight a specific part of the app interface and describe the change you want instead of asking AI to guess which component you mean.

Example — Improve the Hero

Select the hero area and ask:

Improve the Hero Section

Improves only the hero's visual hierarchy, spacing, typography, CTA prominence, and desktop/mobile layout — keeps the existing business information, primary CTA destination, brand identity, and functionality, aims for polished rather than decorative, and never touches unrelated sections.

Improve only this hero section. Keep: - the existing business information - primary CTA destination - brand identity - existing functionality Improve: - visual hierarchy - spacing - typography - CTA prominence - desktop and mobile layout Make it feel more polished and professional without making it overly decorative. Do not change unrelated sections.

Example — Change Existing Content

You can also make very specific requests:

Update Specific Content

Updates only the hero heading and supporting text to the exact wording provided, preserves the current design and responsive behavior, and touches nothing else.

Update the main hero heading to: [NEW HEADING] Update the supporting text to: [NEW TEXT] Preserve the current design and responsive behavior. Do not modify anything else.

Example — Improve a Section

Improve the Services Section

Improves the services section's hierarchy, spacing, responsive layout, and card treatment to make it easier to scan — preserves every existing service name, description, link, and function, avoids excessive gradients/animations/badges/decoration, and never touches other sections.

Improve this services section while preserving all existing service names, descriptions, links, and functionality. Make the services easier to scan. Improve: - hierarchy - spacing - responsive layout - card treatment if appropriate Avoid excessive gradients, animations, badges, or unnecessary decoration. Do not modify other sections.

Make One Change at a Time

For important websites, avoid a prompt like:

"Completely redesign my entire website."

Instead work through clear changes such as:

Hero Services CTA Footer

This makes problems easier to identify and undo.

What Else You Can Change

Google AI Studio can also modify the actual application code, not only colors and text. For example, you could ask it to:

- Add an FAQ section - Add a new page - Improve mobile navigation - Add a search field - Add filtering - Improve a form - Add an existing contact method - Fix a broken interaction - Improve loading/error states

Keep each change focused.

Example — Add an FAQ Section

Add an FAQ Section

Adds a simple, expandable/collapsible, responsive, keyboard-accessible FAQ section using the confirmed questions and answers provided — matches the existing design, reuses existing components, places it where it fits naturally, and never invents extra questions, rewrites unrelated content, redesigns the site, or adds unnecessary packages.

Add a simple FAQ section to this existing website. Use these confirmed questions and answers: [PASTE FAQ CONTENT] Requirements: - match the existing website design - make each question expandable/collapsible - make it responsive - make it keyboard accessible - reuse existing components where appropriate Do not: - invent additional questions - rewrite unrelated content - redesign the website - add unnecessary packages Place the FAQ where it fits naturally in the existing page structure.

Example — Fix Mobile Navigation

Fix Mobile Navigation

Improves the existing mobile navigation — reliable open/close, easy tap targets, correct scrolling, no viewport overflow, no layout breakage, and preserved keyboard accessibility — while preserving every existing navigation link and destination, and leaves desktop navigation alone unless consistency genuinely requires a change.

Review the existing mobile navigation and improve it. Preserve the existing navigation links and destinations. Make sure: - the menu opens and closes reliably - navigation items are easy to tap - scrolling behaves correctly - the menu does not overflow the viewport - opening the menu does not break the page layout - keyboard accessibility is preserved Do not redesign the desktop navigation unless required for consistency.

After Every Important Change

Use:

Test the Latest Change

Verifies the intended change works, existing functionality and navigation still work, the page works on desktop and mobile, and no important runtime errors or unnecessary file changes were introduced — fixes only problems caused by this change and makes no additional design changes.

Test the changes you just made. Verify: - the intended change works - existing functionality still works - navigation still works - the page works on desktop and mobile - no important console/runtime errors were introduced - no unrelated files were unnecessarily changed Fix only problems caused by this change. Do not make additional design changes.

Google AI Studio's Build agent maintains project context across multiple files and can iterate on existing applications rather than only generating new apps from scratch.

Run the Final Audit

Before taking the updated code back into your normal workflow, test the website as a whole.

Final Audit

Checks pages (homepage, routes, navigation, nothing accidentally removed), design (requested changes complete, consistent typography/spacing, clear CTAs, working desktop/mobile layout, no horizontal overflow), functionality (forms, buttons, auth, integrations, APIs), and code quality (production build, no new runtime errors, no unnecessary packages, no leaked credentials, no localhost URLs) — compares against the imported version, summarizes only the intentional changes, and answers Updated website status: READY or NOT READY.

Run a final audit of this website after all requested edits. Do not make additional stylistic changes unless they fix a real problem. Verify: Pages - homepage loads correctly - important pages and routes work - navigation links work - no page was accidentally removed Design - requested visual changes are complete - typography is consistent - spacing is consistent - buttons and CTAs are clear - desktop layout works - mobile layout works - there is no unintended horizontal overflow Functionality - forms still work - important buttons still work - authentication still works if present - external integrations remain intact - existing APIs were not unnecessarily replaced Code - production build succeeds - no important runtime errors remain - no unnecessary packages were introduced - no private credentials were added to client-side code - no localhost or temporary development URLs were introduced Compare the current project with the imported version and summarize only the intentional changes. Finish with: Updated website status: READY / NOT READY If NOT READY, list only what still needs to be fixed.

Review the Website Yourself

Before exporting anything, manually check the important pages in the AI Studio preview. Especially test:

Navigation

Main CTA

Forms

Mobile menu

Newly edited sections

Any feature you changed

Save the Updated Code

Google AI Studio currently supports exporting projects to GitHub as well as downloading the project for external development. Use the available export option appropriate for your workflow. Before replacing the version powering your live website:

Confirm which repository/branch will receive the changes

Review the changed files

Keep the previous working version available

Test the production build

Do not overwrite your live project blindly

IMPORTANT

If the current GitHub integration does not clearly allow you to update the repository/branch you expect, do not create a confusing second production history just to continue. Download/export the updated code and review it before integrating the changes into your main project.

Use This Workflow for Simple Edits

You can use this workflow for simple edits such as:

- Redesigning a hero section - Improving a pricing section - Changing colors or typography - Updating text and images - Fixing mobile layout - Adding an FAQ - Adding a new section - Changing navigation - Improving forms - Adding a page - Fixing broken UI - Polishing an AI-generated website

You do not have to rebuild the website from scratch every time you want to use Google AI Studio.

The important workflow is:

Existing GitHub Website Import to Google AI Studio Select or describe what to change Preview Test Export updated code