Migrating Pages to a New Design System

When your brand gets a new look, you can migrate your existing Flint pages without rebuilding their content from scratch.

The workflow has three phases:

1. 1.Import a representative rebranded page or attach structured source files in Flint chat
2. 2.Prompt Flint to migrate each existing page using that material as the design reference
3. 3.Review the result and refine any loose ends before publishing

An imported page and structured files such as HTML, CSS, Markdown brand tokens, and component specifications can both provide high-fidelity references. Screenshots can also work, but they contain less information and usually require more refinement.

Use Flint's Import Page feature to import a complete page that represents your rebranded design. Choose a page with useful examples of typography, spacing, buttons, cards, navigation, and section layouts.

You can also attach structured files in Flint chat. HTML with component styles, CSS, Markdown brand tokens, component specifications, and multiple related files can provide a similarly high-fidelity reference. You can combine an imported page with attached files when you want both a rendered example and exact design rules.

If neither option is available, attach screenshots. Screenshots are a lower-fidelity reference because they do not include responsive behavior, reusable component logic, or exact token values.

Decide which existing pages need updating and which reference each one should use. Work through the pages one at a time, starting with the highest-traffic pages. A targeted approach gives you more control and makes changes easier to review.

Open a page you want to migrate and tell Flint which imported page or attached files to use as the reference. Be explicit about what should remain unchanged.

Example prompt:

"Migrate this page to the new design using the imported rebranded homepage as the reference. Preserve the current copy, images, links, and page structure."

For structured files:

"Use the attached component HTML and CSS for layout and styling, and use the Markdown brand-token file for exact colors and typography. Apply them to this page while preserving its content."

You can also migrate specific sections:

"Update the hero, features, and CTA to match the imported reference. Keep the content and links unchanged."

After each page is updated, review it in the canvas. Check typography, spacing, colors, component variants, assets, and mobile behavior against the reference. Use direct editing for small content changes or ask Flint to correct specific visual differences.

Example prompts:

• •"The features grid does not match the imported page. Use the same card layout and spacing."
• •"The mobile hero is too cramped. Match the mobile spacing from the imported reference."
• •"This button still uses the old radius. Apply the button specification from the attached HTML file."

Migration is not an automatic sitewide conversion. Expect to review each page and refine loose ends.

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
• •Use an imported page or structured files for the highest fidelity
• •Combine a rendered page with HTML, CSS, or Markdown files when exact rules matter
• •Use screenshots when better references are unavailable, and expect more refinement
• •Migrate one page at a time and publish incrementally if you want a gradual rollout
• •If the new brand has multiple section variants, tell Flint which reference and variant to use
• •Use undo if a change does not look right, then try a more specific prompt