[{"data":1,"prerenderedAt":699},["ShallowReactive",2],{"docs-\u002Fdocs\u002Fsite-kit\u002Fmove-from-webflow":3,"docs-navigation":549,"docs-surround-\u002Fdocs\u002Fsite-kit\u002Fmove-from-webflow":696},{"id":4,"title":5,"body":6,"description":541,"extension":542,"icon":543,"meta":544,"navigation":543,"path":545,"seo":546,"stem":547,"__hash__":548},"docs\u002Fdocs\u002F4.site-kit\u002F03.move-from-webflow.md","Move a site from Webflow",{"type":7,"value":8,"toc":531},"minimark",[9,13,22,27,118,125,129,199,203,332,343,346,349,352,356,372,376,379,453,456,460,463,496,500,527],[10,11,5],"h1",{"id":12},"move-a-site-from-webflow",[14,15,16,17,21],"p",{},"The kit's migration skill moves a Webflow site into a kit site with an AI coding agent, such as Claude Code, Codex or Cursor: its pages, CMS collections, media, settings and design. It works from Webflow's exports, ports the old design onto the theme of the kit's ",[18,19,20],"code",{},"webflow"," example and keeps the old URLs, so the site keeps its content and look without Webflow's code. The aim is the same content and look, not a pixel-identical copy.",[23,24,26],"h2",{"id":25},"in-three-steps","In three steps",[28,29,30,38,92],"ol",{},[31,32,33,37],"li",{},[34,35,36],"strong",{},"Export the site from Webflow:"," the code export, from Export code in the Designer, and a CSV export of each CMS collection. Code export needs a paid Workspace plan, Core or higher, on the Webflow Workspace that holds the site. A site with Webflow Localization exports each collection once per locale. No export holds the static pages' translations, which Webflow publishes only on the live site: the migration copies each page into every locale with the primary text, and the report lists them to translate, or to bring over from the published site yourself.",[31,39,40,46,47,88,91],{},[34,41,42,43,45],{},"Create the site from the ",[18,44,20],{}," example"," of release v0.13.0, the latest when this page was written:",[48,49,54],"pre",{"className":50,"code":51,"language":52,"meta":53,"style":53},"language-bash shiki shiki-themes github-dark","npm create astro@latest my-site -- --template hostsmith\u002Fsite-kit-astro\u002Fexamples\u002Fwebflow#v0.13.0 --no-ai\n","bash","",[18,55,56],{"__ignoreMap":53},[57,58,61,65,69,72,75,79,82,85],"span",{"class":59,"line":60},"line",1,[57,62,64],{"class":63},"svObZ","npm",[57,66,68],{"class":67},"sU2Wk"," create",[57,70,71],{"class":67}," astro@latest",[57,73,74],{"class":67}," my-site",[57,76,78],{"class":77},"sDLfK"," --",[57,80,81],{"class":77}," --template",[57,83,84],{"class":67}," hostsmith\u002Fsite-kit-astro\u002Fexamples\u002Fwebflow#v0.13.0",[57,86,87],{"class":77}," --no-ai\n",[89,90],"br",{},"When create-astro asks, install the dependencies and initialize a git repository.",[31,93,94,97,98,112,114,115,111],{},[34,95,96],{},"Open the agent in the site's folder and give it the exports' paths",", such as:",[99,100,101],"blockquote",{},[14,102,103,104,107,108,111],{},"Migrate this Webflow site: the code export is ",[18,105,106],{},"~\u002FDownloads\u002Facme.zip",", and the CSVs are in ",[18,109,110],{},"~\u002FDownloads\u002Facme-cms\u002F",".",[89,113],{},"If the site has a domain of its own, add its address, such as ",[18,116,117],{},"https:\u002F\u002Fwww.acme.com",[14,119,120,121,124],{},"The agent then works through the skill's steps on a branch, ",[18,122,123],{},"migrate-webflow",", with a commit after each, and asks what the exports can't tell.",[23,126,128],{"id":127},"before-you-start","Before you start",[130,131,132,154,164,174],"ul",{},[31,133,134,140,141,146,147,150,151,153],{},[34,135,136,137,139],{},"A kit site from the ",[18,138,20],{}," example."," The skill stops in a site that isn't a kit site: an Astro site with the ",[142,143,145],"a",{"href":144},"\u002Fdocs\u002Fsite-kit\u002Fexisting-astro-sites","core"," can't import a Webflow site yet. In a site from another example, such as ",[18,148,149],{},"basics",", it waits for your answer, since the port starts from the ",[18,152,20],{}," example's theme.",[31,155,156,159,160,163],{},[34,157,158],{},"The exports stay outside the site."," Keep them where you downloaded them. The skill copies them into the site's ",[18,161,162],{},".hostsmith\u002Fsnapshot\u002F",", which git ignores, so they're never committed: they hold Webflow's code, which the site never uses.",[31,165,166,169,170,173],{},[34,167,168],{},"The live site isn't copied."," The skill never crawls or downloads the live site's pages, which Webflow's Acceptable Use Policy forbids. From the web, it reads only the live site's ",[18,171,172],{},"sitemap.xml"," and the image files that the CSV exports link to.",[31,175,176,179,180,183,184,186,187,190,191,194,195,198],{},[34,177,178],{},"The skill comes with the kit,"," in ",[18,181,182],{},"node_modules\u002F@hostsmith\u002Fsite-kit-astro\u002Fskills\u002Fmigrate-webflow\u002F",", so it matches the site's release. Claude Code finds it as the site's ",[18,185,123],{}," skill, and other agents through the kit's rules, which the site's ",[18,188,189],{},"AGENTS.md"," points to. Run ",[18,192,193],{},"npm ci"," first if ",[18,196,197],{},"node_modules"," is missing.",[23,200,202],{"id":201},"what-the-agent-does","What the agent does",[204,205,206,219],"table",{},[207,208,209],"thead",{},[210,211,212,216],"tr",{},[213,214,215],"th",{},"Step",[213,217,218],{},"What it does",[220,221,222,234,246,254,262,270,278,294,305,313,324],"tbody",{},[210,223,224,228],{},[225,226,227],"td",{},"1. Snapshot",[225,229,230,231,233],{},"copies the exports into ",[18,232,162],{},", notes what they lack, and starts the migration report",[210,235,236,239],{},[225,237,238],{},"2. URL map",[225,240,241,242,245],{},"lists every URL the old site serves in ",[18,243,244],{},".hostsmith\u002Fold-urls.txt",", with each collection's base path, the forms, the embeds and the interactions",[210,247,248,251],{},[225,249,250],{},"3. Theme",[225,252,253],{},"puts the old design's colors, fonts, spacing, header and footer on the example's theme",[210,255,256,259],{},[225,257,258],{},"4. Settings",[225,260,261],{},"the languages, the header, the footer, the facts and what each page's head holds",[210,263,264,267],{},[225,265,266],{},"5. Pages to sections",[225,268,269],{},"each page as sections, with Webflow's tabs, sliders, lightboxes and other elements as the kit's parts: first a sample of two or three pages, compared with the export until the theme matches, then the rest",[210,271,272,275],{},[225,273,274],{},"6. CMS to collections",[225,276,277],{},"each CMS collection from its CSV, with the template of its entries' pages",[210,279,280,283],{},[225,281,282],{},"7. Media",[225,284,285,286,289,290,293],{},"images, icons and videos into ",[18,287,288],{},"public\u002Fassets\u002F"," and ",[18,291,292],{},"src\u002Ficons\u002F",", with their credits",[210,295,296,299],{},[225,297,298],{},"8. Brief",[225,300,301,304],{},[18,302,303],{},".hostsmith\u002Fbrief.md",", filled in: the business, its audience, voice and contacts",[210,306,307,310],{},[225,308,309],{},"9. Verify",[225,311,312],{},"the kit's checks, a check of each page's text, links and alt texts against the export's, a fidelity check that puts the export and the build side by side, page by page at Webflow's four widths, an accessibility check of the old design, and your comparison with the old site in a browser",[210,314,315,318],{},[225,316,317],{},"10. Report",[225,319,320,323],{},[18,321,322],{},".hostsmith\u002Fmigration-report.md",", complete, for the owner to approve",[210,325,326,329],{},[225,327,328],{},"11. Clean up",[225,330,331],{},"removes the example's content, and adds the checklist for moving the domain",[14,333,334,335,338,339,342],{},"The fidelity check uses Playwright's Chromium, or Google Chrome. In an agent's sandbox, it needs to serve pages on ",[18,336,337],{},"localhost",", which Claude Code allows with ",[18,340,341],{},"sandbox.network.allowLocalBinding: true",". If its browser still can't start there, as on macOS, the agent says so, and the check runs outside the sandbox or is recorded as not run.",[14,344,345],{},"The export's pages are shown with their entrance animations where they end, so content that Webflow's script would bring in isn't hidden in the screenshots.",[14,347,348],{},"The agent reviews the check from a checklist the script writes: each page's overview at each width, then the header and the footer at each width, where most differences between widths show. It looks at every picture before it fixes anything, handing groups of pages to subagents where it has them, such as Claude Code's, so the pictures stay out of its own context. Then it fixes the differences together and runs the check again on every page, keeping the export's screenshots, and looks again only at the pictures that changed. It repeats until a round finds only differences that may stay, or the same ones as the round before, five rounds at most, and from the fourth round it stops when a rerun barely changes the pages. A difference CSS can reach is fixed, never left. The report's \"Fidelity check\" lists the pictures it compared and any it didn't, the rounds that ran, and the differences it left in a table, by page and width, each with why it stays.",[14,350,351],{},"On a large site, an export of more than 15 pages, an agent with subagents, such as Claude Code, hands the theme, the pages, the collections and the review to them, so its own context stays small.",[23,353,355],{"id":354},"the-old-design-as-it-was","The old design, as it was",[14,357,358,359,362,363,366,367,371],{},"The migration carries the old site's design as it was, and asks nothing about it. Its colors stay, even where text and background fall below the contrast minimum, and its motion stays: when the old site's interactions played for every visitor, the site's ",[18,360,361],{},"reducedMotion"," is ",[18,364,365],{},"ignore"," (see ",[142,368,370],{"href":369},"\u002Fdocs\u002Fsite-kit\u002Fdesign#accessibility","Design","). The report's \"Accessibility\" notes each gap the old design brings, with its pages, the WCAG requirement and its level, and the change that would fix it, such as the nearest passing shade of a color, so you can fix them before or after the launch.",[23,373,375],{"id":374},"the-questions-it-asks","The questions it asks",[14,377,378],{},"The agent asks only what the exports can't tell, a step's questions at once, and records each answer in the report:",[130,380,381,387,393,403,409,423,429,435,441,447],{},[31,382,383,386],{},[34,384,385],{},"Before it starts:"," the live site's address, if the prompt has none, whether to redo a migration that ran in the site before, and whether to replace content that isn't the example's.",[31,388,389,392],{},[34,390,391],{},"The exports:"," any missing CSV, and, in a site with Localization, the locale of each CSV whose name doesn't say.",[31,394,395,398,399,402],{},[34,396,397],{},"Base paths:"," the agent proposes a base path for each collection, such as Webflow's ",[18,400,401],{},"\u002Fpost"," for blog posts, and waits for you to confirm them, since the export doesn't hold them.",[31,404,405,408],{},[34,406,407],{},"Fonts:"," for each font, what the agent found about it and its license, with a recommendation. It never downloads a font file: you add the files, or pick another option.",[31,410,411,414,415,418,419,422],{},[34,412,413],{},"Settings:"," the production URL when the old site has no domain of its own yet, the language's region when the site doesn't show it, such as ",[18,416,417],{},"en-US"," or ",[18,420,421],{},"en-GB",", a default image for social previews when no page has one, each template's title and description patterns, and the owner's favicon and touch icon, since an export without its own carries Webflow's.",[31,424,425,428],{},[34,426,427],{},"Embeds:"," how each map, video or other frame loads: on a click, the default; directly, only when the site's privacy notice names the provider; as a link or an image; or not at all.",[31,430,431,434],{},[34,432,433],{},"Collections:"," each collection list's limit, order and filters, and which fields of a referenced item a template shows, such as an author's name, unless the page makes them plain.",[31,436,437,440],{},[34,438,439],{},"Media:"," where the photos came from, unless they're the owner's own.",[31,442,443,446],{},[34,444,445],{},"The brief:"," whether the audience and voice drafted from the old site are right, and who the contacts are.",[31,448,449,452],{},[34,450,451],{},"Verify:"," a go-ahead to download Playwright's Chromium, about 150 MB, outside the site, when neither it nor Chrome is installed, and your comparison of each page with the old site.",[14,454,455],{},"To skip a question, answer it in advance, in the prompt or in a Markdown file of questions and answers kept with the exports. The agent uses an answer it finds without asking, and the report records it as given in advance.",[23,457,459],{"id":458},"what-doesnt-move","What doesn't move",[14,461,462],{},"Each of these goes into the report, with its page:",[130,464,465,471,484,490],{},[31,466,467,470],{},[34,468,469],{},"Forms,"," with their fields, options, buttons and messages. The kit has no form section yet, and the built pages submit nothing to Webflow.",[31,472,473,476,477,480,481,111],{},[34,474,475],{},"Interactions"," other than entrance animations. Webflow's built-in effects, such as Slide In and Fade In, and simple custom ones become the kit's ",[18,478,479],{},"reveal",", and cards that come in one after another become ",[18,482,483],{},"revealItems",[31,485,486,489],{},[34,487,488],{},"Pagination"," of collection lists: a list shows its first page.",[31,491,492,495],{},[34,493,494],{},"Code embeds"," with scripts, site search, Lottie, Rive and Spline animations, code components, Ecommerce, Memberships, and the password page.",[23,497,499],{"id":498},"after-the-migration","After the migration",[28,501,502,505,520],{},[31,503,504],{},"Read the report's \"For the owner to approve\" with the owner: each font, each embed's choice, each page written anew, the alt text written, the differences left, and which gaps under \"Accessibility\" to fix.",[31,506,507,508,510,511,514,515,519],{},"Merge ",[18,509,123],{}," into ",[18,512,513],{},"main",", and ",[142,516,518],{"href":517},"\u002Fdocs\u002Fsite-kit\u002Fdeploy","deploy"," the site.",[31,521,522,526],{},[142,523,525],{"href":524},"\u002Fdocs\u002Fsite-kit\u002Fold-urls","Check the old URLs"," on the production site, then follow the report's checklist to move the domain.",[528,529,530],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":53,"searchDepth":532,"depth":532,"links":533},2,[534,535,536,537,538,539,540],{"id":25,"depth":532,"text":26},{"id":127,"depth":532,"text":128},{"id":201,"depth":532,"text":202},{"id":354,"depth":532,"text":355},{"id":374,"depth":532,"text":375},{"id":458,"depth":532,"text":459},{"id":498,"depth":532,"text":499},"Move a Webflow site into a kit site with the kit's migration skill and an AI agent - the exports, the create command, the prompt, the questions the agent asks and what it does.","md",null,{},"\u002Fdocs\u002Fsite-kit\u002Fmove-from-webflow",{"title":5,"description":541},"docs\u002F4.site-kit\u002F03.move-from-webflow","ZcCrENXSpFMVVsTXdc13jzctt_n4UsFgg4C2YFGXhfE",[550],{"title":551,"path":552,"stem":553,"children":554,"page":695},"Docs","\u002Fdocs","docs",[555,582,594,629,677],{"title":556,"path":557,"stem":558,"children":559,"page":-1,"icon":561},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started\u002Findex",[560,562,566,570,574,578],{"title":556,"path":557,"stem":558,"icon":561},"solar:rocket-bold",{"title":563,"path":564,"stem":565},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction",{"title":567,"path":568,"stem":569},"Quick Start","\u002Fdocs\u002Fgetting-started\u002Fquick-start","docs\u002F1.getting-started\u002F2.quick-start",{"title":571,"path":572,"stem":573},"Sites","\u002Fdocs\u002Fgetting-started\u002Fsites","docs\u002F1.getting-started\u002F3.sites",{"title":575,"path":576,"stem":577},"Custom Domains","\u002Fdocs\u002Fgetting-started\u002Fcustom-domains","docs\u002F1.getting-started\u002F4.custom-domains",{"title":579,"path":580,"stem":581},"Support","\u002Fdocs\u002Fgetting-started\u002Fsupport","docs\u002F1.getting-started\u002F5.support",{"title":583,"path":584,"stem":585,"children":586,"page":-1,"icon":588},"Integrations","\u002Fdocs\u002Fintegrations","docs\u002F2.integrations\u002Findex",[587,589],{"title":583,"path":584,"stem":585,"icon":588},"ph:usb-bold",{"title":590,"path":591,"stem":592,"icon":593},"n8n","\u002Fdocs\u002Fintegrations\u002Fn8n","docs\u002F2.integrations\u002F1.n8n","simple-icons:n8n",{"title":595,"path":596,"stem":597,"children":598,"page":-1,"icon":600},"MCP","\u002Fdocs\u002Fmcp","docs\u002F3.mcp\u002Findex",[599,601,605,609,613,617,621,625],{"title":595,"path":596,"stem":597,"icon":600},"solar:plug-circle-bold",{"title":602,"path":603,"stem":604},"Quick start","\u002Fdocs\u002Fmcp\u002Fquick-start","docs\u002F3.mcp\u002F1.quick-start",{"title":606,"path":607,"stem":608},"Clients","\u002Fdocs\u002Fmcp\u002Fclients","docs\u002F3.mcp\u002F2.clients",{"title":610,"path":611,"stem":612},"Authentication","\u002Fdocs\u002Fmcp\u002Fauthentication","docs\u002F3.mcp\u002F3.authentication",{"title":614,"path":615,"stem":616},"Tools","\u002Fdocs\u002Fmcp\u002Ftools","docs\u002F3.mcp\u002F4.tools",{"title":618,"path":619,"stem":620},"Recipes","\u002Fdocs\u002Fmcp\u002Frecipes","docs\u002F3.mcp\u002F5.recipes",{"title":622,"path":623,"stem":624},"Limits and errors","\u002Fdocs\u002Fmcp\u002Flimits-and-errors","docs\u002F3.mcp\u002F6.limits-and-errors",{"title":626,"path":627,"stem":628},"FAQ","\u002Fdocs\u002Fmcp\u002Ffaq","docs\u002F3.mcp\u002F7.faq",{"title":630,"path":631,"stem":632,"children":633,"page":-1,"icon":635},"Site kit","\u002Fdocs\u002Fsite-kit","docs\u002F4.site-kit\u002Findex",[634,636,640,644,645,649,652,656,659,662,666,670,673],{"title":630,"path":631,"stem":632,"icon":635},"solar:layers-bold",{"title":637,"path":638,"stem":639},"Overview","\u002Fdocs\u002Fsite-kit\u002Foverview","docs\u002F4.site-kit\u002F01.overview",{"title":641,"path":642,"stem":643},"Start a site","\u002Fdocs\u002Fsite-kit\u002Fstart-a-site","docs\u002F4.site-kit\u002F02.start-a-site",{"title":5,"path":545,"stem":547},{"title":646,"path":647,"stem":648},"Content","\u002Fdocs\u002Fsite-kit\u002Fcontent","docs\u002F4.site-kit\u002F04.content",{"title":370,"path":650,"stem":651},"\u002Fdocs\u002Fsite-kit\u002Fdesign","docs\u002F4.site-kit\u002F05.design",{"title":653,"path":654,"stem":655},"Languages","\u002Fdocs\u002Fsite-kit\u002Flanguages","docs\u002F4.site-kit\u002F06.languages",{"title":657,"path":517,"stem":658},"Deploy with Hostsmith","docs\u002F4.site-kit\u002F07.deploy",{"title":660,"path":524,"stem":661},"Keep old URLs","docs\u002F4.site-kit\u002F08.old-urls",{"title":663,"path":664,"stem":665},"Work with an AI agent","\u002Fdocs\u002Fsite-kit\u002Fai-agents","docs\u002F4.site-kit\u002F09.ai-agents",{"title":667,"path":668,"stem":669},"Kit updates","\u002Fdocs\u002Fsite-kit\u002Fupdates","docs\u002F4.site-kit\u002F10.updates",{"title":671,"path":144,"stem":672},"Existing Astro sites","docs\u002F4.site-kit\u002F11.existing-astro-sites",{"title":674,"path":675,"stem":676},"External CMS","\u002Fdocs\u002Fsite-kit\u002Fexternal-cms","docs\u002F4.site-kit\u002F12.external-cms",{"title":678,"path":679,"stem":680,"children":681,"page":-1,"icon":683},"Developers","\u002Fdocs\u002Fdevelopers","docs\u002F5.developers\u002Findex",[682,684,687,691],{"title":678,"path":679,"stem":680,"icon":683},"solar:code-bold",{"title":610,"path":685,"stem":686},"\u002Fdocs\u002Fdevelopers\u002Fauthentication","docs\u002F5.developers\u002F1.authentication",{"title":688,"path":689,"stem":690},"API Explorer","\u002Fdocs\u002Fdevelopers\u002Fapi-explorer","docs\u002F5.developers\u002F2.api-explorer",{"title":692,"path":693,"stem":694},"Node.js SDK","\u002Fdocs\u002Fdevelopers\u002Fsdk","docs\u002F5.developers\u002F3.sdk",false,[697,698],{"title":641,"path":642,"stem":643,"children":-1},{"title":646,"path":647,"stem":648,"children":-1},1793410878805]