Skip to content

Working with themes

Theme Dev Tools for HubSpot

Last updated 12 October 2026

A free Claude Code plugin that takes a design to an editable HubSpot theme, checks the build against the design, and uploads it with HubSpot's own command-line tool.

What it is

Theme Dev Tools for HubSpot is a free, open-source (Apache-2.0) plugin for Claude Code, written by Reece Sim and published as ThemeSpot. It takes a design and turns it into an editable HubSpot theme written in HubL. The design can be a Claude Design export, HTML, CSS, Tailwind or React from ChatGPT or another tool, a Figma export, or an image of a page.

It then checks the build against the design, pixel by pixel, on a local renderer that comes with the plugin, and deploys the theme with HubSpot's own CLI.

The plugin runs on your own Claude subscription. It has no service, account or telemetry of its own.

Install

Run these two commands in your terminal:

claude plugin marketplace add reecesim/theme-devtools-for-hubspot
claude plugin install theme-devtools-for-hubspot@theme-devtools-for-hubspot

You need:

  • Claude Code.
  • Node.js 20 or newer.

Optional:

  • A way to take screenshots (Playwright, Puppeteer, Chrome or Edge), for the comparison between the design and the build.
  • HubSpot's CLI, version 8 or newer, and a HubSpot account with Design Manager access. You need these only to upload a theme.

Nothing is installed without asking you first.

How a run goes

  1. Pre-flight. The plugin checks what your machine has and tells you what is missing.
  2. Intake and plan. It reads your design and proposes a plan. You agree the plan before it builds anything.
  3. Build. It starts from HubSpot's CMS theme boilerplate. Every heading, piece of text, image, link and repeated item becomes an editable field, so you can change it in HubSpot's page editor.
  4. Check. It takes full-page screenshots of the design and the build at 1440×900 and 390×844, and compares them until they are identical or every difference is explained. It makes at most eight rounds.
  5. Deploy. With your agreement, it uploads the theme to a new location in your HubSpot account.

Signing in to upload

To upload a theme, the plugin needs to sign in to your HubSpot account. You have two options:

  1. Plugin configuration. Enter a HubSpot personal access key and your account ID in the plugin's configuration: /plugin configure theme-devtools-for-hubspot@theme-devtools-for-hubspot. Claude Code keeps the key in your system's secure store, and Claude never sees it.
  2. HubSpot's CLI. Run hs account auth in your own terminal and follow the prompts.

What it does not do

  • The local render is an approximation. HubSpot's own render is the authority.
  • It uses the theme's defaults and sample fixtures, not your real pages, posts or HubDB rows.
  • It does not draw CMS React modules.
  • It does not create or publish pages in HubSpot.
  • It is not for cloning themes from the HubSpot Template Marketplace.

Where ThemeSpot takes over

The plugin works on your machine, from the design you give it. ThemeSpot, the hosted product, picks up where that stops: previewing a theme on your portal's real content, quality checks, sharing a preview with a client, building and rendering React modules, and keeping the source in managed Git with CI so deploys run from there. Read more on the AI theme development page.

Source, issues and security

The source is on GitHub: github.com/reecesim/theme-devtools-for-hubspot.

Report problems in the repository's Issues. To report a vulnerability, use GitHub's private vulnerability reporting.

HubSpot is a trademark of HubSpot, Inc. This plugin is not affiliated with or endorsed by HubSpot.