How to move a Magic Patterns design into Webflow

At a glance

Steps

Copy to Webflow on the Magic Patterns preview → ⌘V (Ctrl+V) in the Webflow Designer.

Where the button shows

In the Magic Patterns editor, on the live preview. Also on published designs at *.magicpatterns.app.

What Magic Patterns exports

A .zip of the code, two-way GitHub sync (paid plans, React + Vite template), Copy as prompt, an MCP server, and Export to Figma. None of these is a format Webflow can import.

You get in Webflow

Sections and Div Blocks with readable classes (hero-heading, pricing-card), tablet and mobile breakpoints, hover and focus states, Form Blocks.

Not carried over

React state, routing between pages, integrations such as OpenAI or Google Sheets. Each page is copied as it looks when you click.

Plan

Each copy counts as a capture: 3 a day on FlowPaste Free, unlimited on Pro. Works on every Webflow plan.

Why a Magic Patterns design doesn't paste into Webflow on its own

Magic Patterns is an AI design tool for prototypes built on your own design system: colors, typography, icons and components you set up once and reuse. Each design is a chat plus a live, interactive preview, and what sits behind that preview is code. When you sync to GitHub, Magic Patterns exports a React + Vite project. The Download code option gives you a .zip of the same kind of project.

Webflow can't open any of that. There is no code import in the Designer, and Webflow's own Help Center says moving a site in is "a rebuild, not a transfer". The handoff paths Magic Patterns offers (MCP server, Integration Skill, Copy as prompt) are built for engineers who adapt the design into a React codebase. They don't help a Webflow designer, and pasting React into a Code Embed gives you a box nobody can edit.

The preview already shows the finished design, with every token from your design system applied. FlowPaste copies from there. FlowPaste reads the page the way your browser shows it: the elements, every CSS rule that applies to them, the media queries and the hover states. It then writes Webflow's own clipboard format, so ⌘V (Ctrl+V) in the Designer creates real elements with named classes. Your design system's colors, type scale and radii arrive as values on named classes, so you can turn them into Webflow variables afterwards.

“Regardless of where your site is hosted today, migrating to Webflow will be a rebuild, not a transfer.”

Webflow Help Center

Ways to do it, compared

Magic Patterns' Download code option and GitHub sync give you a React project, not HTML. GitHub sync needs a paid Magic Patterns plan (Starter or above, per its pricing docs).

How to copy a Magic Patterns design into Webflow

Time: about 2 minutes per page. You need: the FlowPaste Chrome extension, your design open in Magic Patterns, a Webflow site open in the Designer.

1. Open the design in Magic Patterns

   Open the design in the editor so the live preview shows on the right. If you work on the MagicOS canvas, open the single design you want to move.

   TipInstalled or updated FlowPaste just now? Reload the Magic Patterns tab first so the button can appear.

2. Set the preview to the variant you want

   If you used Controls to compare variants, pick the one you want to keep. Close menus and modals and pick the first tab of any tab group. FlowPaste copies what the preview shows at that moment.

3. Click Copy to Webflow

   The button sits at the bottom right of the live preview. The main click copies the whole page: every section, in order.

   TipTo copy one part, open the arrow menu and choose Pick a section. Hover the design, press ↑ to select a bigger area, and click.

4. Paste in the Webflow Designer

   Switch to the Designer, select the Body or the element you want to paste into, and press ⌘V (Ctrl+V). One paste brings in all the sections in order, as native elements with classes.

5. Add fonts and connect images

   Add the fonts FlowPaste lists in Site settings → Fonts. If you connected your site in FlowPaste → Account → Webflow images, the images are already in Assets.

6. Repeat for each page and check breakpoints

   Open the next page of your design and copy it the same way. Then click through tablet, mobile landscape and mobile portrait in the Designer.

What comes across

Three places to copy from

1. Editor → live preview → Copy to Webflow
2. Share → Preview link, opened in its own tab → Copy to Webflow
3. Published design (your-slug.magicpatterns.app) → Copy to Webflow
   (A custom domain? FlowPaste icon → Capture the full page)

Section            class: hero
  Heading H1       class: hero-heading
  Link Block       class: hero-button   (+ Hover)
Section            class: features
  Div Block ×3     class: feature-card
Section            class: signup
  Form Block       class: signup-form

Problems and fixes

Keep the prototype, ship the site in Webflow

Many teams use Magic Patterns to explore and Webflow to publish. A split that works:

1. Explore in Magic Patterns. Generate variants on your design system, compare them with Controls, and get comments from your team.
2. Copy the winner. Copy each final page with Copy to Webflow and paste it into one Webflow page per design page.
3. Turn tokens into Webflow Variables. Your design system colors and type arrive as values. Create Webflow Variables for them so the marketing team can change a brand color once.
4. Keep app screens where they are. If a design is really a product screen (a dashboard, a settings page), it belongs in your codebase. Hand it to engineers with Magic Patterns' GitHub sync or MCP server, and keep the marketing site in Webflow: www.example.com on Webflow, app.example.com on your app.

After you paste

• Add the fonts in Webflow → Site settings → Fonts. FlowPaste lists them in the notes after each conversion. Until then, text that brought its own font file still shows correctly, but you can't pick the font in the Typography panel.
• Images: Webflow publishes images only from its own Assets. Connect your site once in FlowPaste → Account → Webflow images, and every paste uploads its images for you. Without it, images show in the Designer but break on the published site.
• Click through tablet, mobile landscape and mobile portrait in the Designer. Media queries are already mapped to those breakpoints; check anything the notes marked as "snapped".
• Rename or merge classes where you want your own system. Identical styles already share one class; variations are combo classes.
• Look for Embed elements (inline SVG icons, pseudo-elements, leftover scripts). They show on every plan; editing their code needs a paid site plan.
• Create Webflow Variables for your design system's main colors and font sizes, then apply them to the pasted classes.

Questions