Migration to HubSpot CMS with AI and Claude Code

Moving to HubSpot usually stalls on one thing: rebuilding the website. Here is a four-step AI workflow — a generated prompt, Claude Code, transjt and the HubSpot CLI — with what each step involves and what it makes possible.

Most migrations to HubSpot don't get stuck on the content. Blog posts, pages and images can be imported. What takes weeks is the rebuild: turning the old site's look and structure into a HubSpot theme with templates and modules your marketing team can edit.

Traditionally that means a designer, a developer who knows HubL, and several rounds of feedback. With AI tools, most of that work moves into a workflow where each tool does one job well — and your team stays in control of every step.

The workflow at a glance

1. Create the prompt — describe your new website, starting from the one you already have.
2. Build the site with vibe coding — Claude Code turns the prompt into a working frontend.
3. Convert it with transjt — the frontend becomes a native HubSpot theme.
4. Refine with Claude Code and the HubSpot CLI — keep improving the theme in code, safely.

Alongside these steps, you move the content with HubSpot's own import tools and set up redirects. Each part is explained below.

Before you start

You need five things:

• Your current website's address — the starting point for the prompt
• Claude Code — Anthropic's AI coding tool, running on your computer
• A GitHub account — where the new site's code lives
• A transjt account — the free plan is enough to try the conversion
• A HubSpot account with a CMS plan — and Super Admin rights for the first connection to transjt

You don't need to know HubL — Claude Code handles the technical part.

Step 1: Create the prompt

An AI builder is only as good as its brief. A vague prompt ("make me a modern website") produces a generic site; a precise one produces a site you can actually launch.

The Website Prompt Generator writes that brief for you. It asks a few short questions:

• What kind of site you're building and which pages it needs
• Your current website — if you have one, the AI reads your homepage and main menu pages: navigation, copy, colours, fonts and logo
• What happens to your content — keep it word for word, rewrite it, or start fresh
• Look and motion — from calm and corporate to expressive
• Standards — how far to go on accessibility and SEO
• Your AI tool — Claude Code, Lovable, v0, bolt.new and others

The result is a complete, production-grade prompt. It fixes the tech stack up front so the build doesn't drift, and it asks for a CMS-ready structure: heading levels kept separate from visual size, alt texts, link targets, and SEO fields for every page. For Claude Code, it also asks for automated tests, so the build checks itself.

What this makes possible:

• A new site that keeps what works on the old one — structure, wording, brand
• A brief that already covers responsive layouts, accessibility and SEO basics
• A starting point in minutes instead of a long requirements document

Step 2: Build the site with vibe coding

Now the prompt becomes a website. We use Claude Code here because it runs where your code lives: it creates the project, starts it on your computer, and changes it whenever you ask.

A typical session looks like this:

1. Open an empty project folder and start Claude Code.
2. Paste the prompt. Claude Code sets up the project and builds the pages section by section.
3. Open the local preview in your browser and review it page by page.
4. Ask for changes in plain language — Claude Code edits the code and the preview updates.
5. Let Claude Code run the tests from the prompt and fix what fails.
6. Push the project to a GitHub repository.

Good change requests are specific. For example:

• "Make the hero calmer: less motion, more white space, headline on one line on desktop."
• "Add a customer logo strip under the hero, greyscale, six logos."
• "Move the pricing section above the FAQ."
• "Use our brand blue for all primary buttons."
• "Check every page on a 375-pixel-wide screen and fix what breaks."

Build in clear sections — hero, features, testimonials, pricing — rather than one long page. Clean, separate sections make clean, editable modules later.

What this makes possible:

• A redesign and a rebuild in the same step
• Fast iterations without waiting for a development sprint
• A real codebase in GitHub, not a locked page-builder project

Step 3: Convert it with transjt

A vibe-coded frontend is not yet a HubSpot website. It has no templates, no modules and no fields a marketer can edit. That's the gap transjt closes.

1. Connect GitHub in transjt and choose the repository.
2. Review the preview. transjt converts the frontend into a native HubSpot theme and shows you the result before anything goes to HubSpot.
3. Connect HubSpot — the first connection needs Super Admin rights.
4. Export the theme. It's ready within a few hours and appears in your HubSpot account.
5. Create your pages from the theme's templates in HubSpot's drag-and-drop editor.

Changed the site in Claude Code after the export? Push the change to GitHub and re-sync the repository in transjt.

On pricing: you can try the conversion on the free plan. If you need one website rather than a subscription, the one-time export lets you start free and pay only after the preview — backed by a money-back guarantee. See pricing.

What this makes possible:

• Pages your marketing team edits without a developer
• Header and footer as editable modules
• Forms linked to native HubSpot forms, so submissions land in your CRM
• Blog listing and blog detail templates in your new design
• Desktop, tablet and mobile layouts included

Step 4: Refine with Claude Code and the HubSpot CLI

A website is never finished at launch. The HubSpot CLI connects your computer to HubSpot's design tools, so Claude Code can work on the live theme's files.

The loop is simple: download the theme files, ask Claude Code for the change, and upload the files again. Claude Code can run these steps for you.

With that in place, you describe the change and Claude Code makes it:

• Adjust colours, spacing or typography across the whole site
• Add small interactions, animations or scripts
• Improve performance, for example how images load
• Add structured data, such as FAQ markup for search engines and AI answers
• Fix a module setting or extend a module with a new field

One rule keeps your changes safe: put your adjustments in the theme's custom.css and custom.js. transjt never overwrites these two files when you export the theme again — so you can keep converting new designs while your own refinements stay in place.

Two habits help: put the downloaded theme folder under version control with git, so every change can be reviewed and undone, and republish the affected pages after an upload so the change goes live.

Moving the content

transjt builds the theme; it doesn't move your content. HubSpot has its own tools for that:

• Blog posts: HubSpot's blog import brings over posts from WordPress and other platforms. Check images, authors and internal links after the import.
• Pages: recreate them from the new theme's templates. If you chose "keep word for word" in step 1, most of the copy is already in place.
• Forms: connect each form in the new design to a HubSpot form.
• Tracking: add your analytics and tag manager to HubSpot's site settings.

Then the redirects. Every old URL that changes needs a redirect to its new address, or you lose the search rankings you've built. HubSpot accepts redirects in bulk as a spreadsheet of old and new URLs — and Claude Code can build that list by comparing your old and new sitemaps.

Launch checklist

• Every old URL redirects to its new address
• Page titles and meta descriptions carried over
• Forms submit into HubSpot and notifications arrive
• Analytics and tag manager installed
• Pages checked on mobile
• New sitemap submitted in Google Search Console
• The old site's hosting kept until the redirects are confirmed

Common pitfalls

• A vague prompt. "Modern and clean" isn't a brief. Let the generator ask the questions.
• Editing generated files. Changes outside custom.css and custom.js can be replaced when you export again.
• Skipping redirects. The fastest way to lose search traffic in a migration.
• Forgetting to republish. Uploaded changes only show on pages you republish.
• One giant page. Build in sections, so each one becomes its own editable module.

Which step does what

Where to start

If you're planning a move to HubSpot, start with the part that usually takes longest: the design and the theme. Create your prompt, build the site with Claude Code, and let transjt turn it into a HubSpot theme your team can run on its own.

More on the migration itself: WordPress to HubSpot · Migrate to HubSpot CMS · Migration from WordPress to HubSpot CMS, step by step

Frequently asked questions

Does transjt migrate my content?

Not really. transjt builds the HubSpot theme. Your blog posts move with HubSpot's own import tools, and redirects keep your old URLs working.

But if you give the Website Prompt Generator your current website as a reference, it carries the structure and copy of your main pages into the new site — and transjt converts that content along with the design.

Will my own code changes be overwritten when I export again?

Not if you keep them in the theme's custom.css and custom.js — transjt never overwrites those two files.

Do I need a developer?

Not for the core workflow. The prompt generator, Claude Code and transjt cover the rebuild; a developer helps with unusual integrations or custom features.

Which AI builders work besides Claude Code?

The prompt works with Lovable, v0, bolt.new, Replit, Builder.io, Rocket, Figma Make and Base44 as well. transjt converts their code the same way once it's in GitHub.

Will I lose my search rankings?

Not if you redirect every changed URL and carry over page titles and meta descriptions. Missing redirects are the most common cause of lost traffic after a migration.