Most people don’t know this, but Hightouch has an incredibly lean marketing team. We do a lot with very little. But every year, there’s one campaign in particular that we get really excited about: Hightouch Rewind—a yearly campaign (inspired by Spotify Wrapped) where we send out a year-in-review email to all of our customers.
This entire campaign is based on dynamic values that need to be inserted within each email, which are unique to each specific customer. Our data team runs some pretty sophisticated calculations for this campaign, and then we use our own platform to push that data to some custom properties we created in our CRM. The problem is when you want to create a custom, well-designed, branded email, you inevitably need to write some HTML, which is problematic when you’re not technical and you don’t have dedicated resources for this.
In this blog post, we’ll show how you can use GPT (or any LLM) to quickly and easily turn designs into deployable HTML in minutes rather than days—no more tickets and no more going back and forth with development teams or agencies who don’t understand the nuances of your ESP/CRM, or the subtle quirks of different email clients.
The old way (manual tickets)
HTML development never goes smoothly. For most companies, the typical process goes something like this:
- HTML development (5-7 days): Submit a ticket and pass your design templates to your development team so they can translate them into usable HTML for your ESP or CRM.
- QA Testing (2-3 days): Test all of your different HTML templates across various email clients, mobile devices, etc., to ensure everything is working properly.
- Restart this process and go back to square one if anything breaks.
Generating HTML without AI
What ends up happening is you get stuck in this development and testing cycle. Developers have competing priorities and limited resources, and before you know it, you’ve wasted 2+ weeks simply trying to get a campaign off the ground.
The new way (using AI)
If the old world for HTML was troubleshooting and submitting tickets, the new world is using LLMs to instantly create usable HTML specific to your exact specifications and requirements because LLMs excel at generation and adaptation(e.g., taking the context that you provide and transforming it into something new). The advantage here is that it gets you one step closer to creating a closed loop, eliminating the dependency on other teams. Instead of taking 5-7 days to create and test HTML, you can do it yourself in just a few minutes.
Generating HTML with AI
The process (how to use AI to create HTML)
For our particular use case, we just needed a single HTML module to place within our email template so we could insert dynamic values into some custom boxes to highlight five core product usage metrics:
- Rows Queried
- Records Synced
- Sync Runs
- Audiences Created
- Active Syncs
Unfortunately, our CRM didn’t have anything that could support our custom design requirements, so we asked our design team to create a custom asset we could use in the email. Here’s how we turned this visual design into fully deployable HTML for our email campaign.
The initial design
- Step 1: Upload a file or screenshot of your email design to your LLM of choice, explaining exactly what you’re trying to do, and ask the LLM to turn the image into HTML. (Note: Make sure to designate what email system you’re using.)
Prompting the LLM
Generating HTML
- Step 2: Copy the HTML into your email template or an HTML viewer.
Copying the HTML to our CRM
- Step 3: View how your HTML is rendering across web, mobile, and various email clients.
QA testing the HTML
-
Step 4: Identify anywhere the HTML is breaking and tell the LLM what it needs to adjust. (Note: You have to be extremely specific here. Sharing screenshots to point out what’s wrong helps a lot. It’s also important to tell the LLM what you want to stay consistent and not change.)
-
Step 5: Continue repeating this process and giving feedback to the LLM until you're satisfied with the result. (Note: this is the hardest part, and LLMs try to take the path of least resistance. You need to be extremely specific about exactly what you do and do not want to be changed; otherwise, the LLM will just make inferences and guess.)
Key learnings
There are a couple of important factors to keep in mind. First, you need to be very specific and exact with your prompting language because LLMs tend to stay within their scope and will not go out of their way to fix problems unless you explicitly make them aware of them. There are also a lot of email nuances that the LLM is not inherently aware of out of the box, such as email clients, image sizing, content blocks, etc. If you don’t explicitly mention these, the LLM will usually just ignore them.
In our case, the HTML was not optimized for mobile or any additional email clients, so we had to continue iterating. One of the coolest factors about this use case is that it’s really straightforward to create two entirely different experiences for web and mobile.
We used GPT for this scenario, but this should work on any LLM. The code generation is not nearly as fast as Claude's, but the output tended to be slightly higher quality. You’ll also want to take advantage of the canvas feature, which allows you to easily roll back to previous versions if you break something. The version control is super helpful.
Closing thoughts
If you’re not using an LLM to turn your email design into HTML, you’re missing out on a huge opportunity. Not only are you going to save a lot of time, effort, and money, but you can actually iterate and troubleshoot much faster to close the loop between ideation and execution.
Instead of waiting 5-7 days, you can have fully optimized deployable HTML in minutes. The beauty of this whole flow is that you don’t have to know or understand how HTML works. If there’s anything you don’t understand, you can ask GPT to explain it to you. The other advantage of this approach is that you could theoretically recreate email designs and templates from brands with more sophisticated lifecycle campaigns and they’ll be surprisingly accurate.
