Migrating Pages to a New Design System

When your brand gets a new look, Flint makes it straightforward to bring that updated design into your existing pages. No import tools or file transfers are involved. The entire process happens through the AI chat using prompts.

The migration workflow has two phases:

1. 1.Bring the new design system into Flint by asking the agent to copy the design from rebranded pages on your live site
2. 2.Update existing pages by asking the agent to replace their sections with sections from the newly styled pages

Because Flint builds and manages your pages directly, the agent can read both old and new page designs and apply changes across your site section by section.

Start on any page in the Flint editor and open the AI chat. Give the agent a URL from your rebranded live site and ask it to copy the design.

Example prompt:

"Copy the design system from [your-site.com]. Use the colors, fonts, spacing, and component styles from that site as the new brand standard for this project."

The agent will visit the live URL, extract the visual system (colors, typography, button styles, spacing, section layouts), and apply it to your Flint project. No file uploads or manual configuration needed.

Decide which existing pages need updating. You can migrate all pages at once or work through them one at a time. A targeted, section-by-section approach gives you the most control and makes it easier to review changes as you go.

Navigate to a page you want to migrate. In the AI chat, ask the agent to replace its sections by reusing the section designs from the pages you already updated in Step 1.

Example prompt:

"Replace the hero section on this page with the hero design from the homepage. Keep the existing content but apply the new design system styling."

You can also update multiple sections in a single prompt:

"Update the hero, features, and CTA sections on this page to match the new design. Reuse the section layouts from the homepage and pricing page."

The agent will swap the section design while preserving your existing copy, images, and links.

After each page is updated, review it in the canvas. Use direct editing for any small content tweaks, or ask the agent to adjust specific elements that need refinement.

If a section does not look right, you can ask the agent to try again with a more specific reference:

"The features grid does not match the new design. Look at the features section on [your-site.com/features] and apply that layout instead."

Once you are satisfied with the migrated pages, click Publish to push the updated design live.

• •Start with your highest-traffic pages so the most visible pages get the new design first
• •Migrate one page at a time and publish incrementally if you want a gradual rollout
• •Reference specific pages from your live site when asking the agent to copy a section style. The more specific the reference, the more accurate the result
• •Use the undo button if a change does not look right. You can step back and try a different prompt
• •If your rebranded site has multiple section variants (for example, a light hero and a dark hero), tell the agent which variant to use for each page