From Figma to HubSpot with Claude
How I turned a Figma design into custom HubSpot components by connecting the design target, brand context, build environment, and human review in one AI-assisted workflow.
The page worked. It just didn't look like us.
We needed to recreate marketing landing pages in HubSpot. The standard drag-and-drop starting point did the functional job, but visually it wasn't getting us anywhere close to what we wanted.
Our designer had already created a much stronger direction in Figma. The challenge was figuring out how to get from that design to something custom that would actually work inside HubSpot — without turning the handoff into a long back-and-forth development project.
I hadn't used Claude with HubSpot before, so I treated the project as a practical test: could giving the model platform access, a real design target, and brand context shorten the handoff between design and implementation?
From a design handoff to a live build loop
The acceleration came from giving AI the real context and environment of the job — not just describing the job in a prompt.
Figma direction
The designer's work established the visual target instead of asking the model to invent one.
Brand context
Relevant guidance helped keep styling and implementation decisions grounded in the existing brand.
HubSpot environment
The model could work against the actual platform and its constraints instead of generating generic code in isolation.
Human feedback
I reviewed what it produced, explained what wasn't working, and kept steering the build toward the design we wanted.
I connected the design target, brand context, and build environment into one working loop
The speed came from removing translation steps.
The model wasn't trying to imagine the design, guess the brand, or write code for an abstract environment. It had the actual context of the job — and I could stay in the loop to make decisions as we went.
Getting code out of the model wasn't the hard part
Generating an implementation was the easy part. The work was deciding whether it matched the design, respected the brand, made sense inside HubSpot, and was actually worth keeping.
I translated visual feedback into useful direction, recognized when the model was solving the wrong problem, and decided when to keep iterating versus when a direct fix was faster.
Design intent or literal translation?
What mattered about the Figma direction, and where could the implementation adapt?
Generate or guide?
When could the model make the next move itself, and when did it need clearer direction?
Good code or good experience?
Something functioning technically did not automatically mean it was the page we wanted.
A working first version — and a new way to get there
In the first working session, I had a custom version that moved well beyond the standard drag-and-drop starting point. The pages and components are still being refined, so I'm not treating this as a finished implementation or attaching performance results to it yet.
What I did come away with was a much clearer workflow for using AI between design and implementation: give the model access to the real environment, surround it with the right context, and keep human judgment in the loop as the work takes shape.
First working version
A custom implementation was functioning in HubSpot after the first working session.
A better design-to-build loop
Figma, brand context, HubSpot, and AI became parts of the same working process instead of isolated handoffs.
Still evolving
The pages are being refined before launch, so the implementation remains an active build.
The biggest gain was removing translation steps
What surprised me was not that Claude could produce code. It was how much faster the work became once the design target, brand context, platform environment, and review loop were connected.
Instead of moving from design → explanation → development → review, I could work much closer to design → build → inspect → redirect.
That did not eliminate the need for judgment. It made judgment the higher-value part of the work.
Building the foundation layer for marketing AI
How I turned scattered prompting and disconnected source material into a shared context system that marketing workflows could build from.
View case study: Marketing AI Context Layer →