How to Create an HTML Email Using Benchmark’s Claude Skill

Key Takeaways

• Claude Skill is built into Benchmark Email. You don’t need a separate AI subscription or any outside tools. The skill is available directly inside your account.
• Describe what you want in plain language. Tell Claude the purpose of the email, your brand colors, the sections you need, and any specific copy. It generates the HTML structure from your description.
• The output is email-safe HTML. Claude produces table-based layouts with inline CSS, the format that renders correctly across Gmail, Outlook, Apple Mail, and mobile clients.
• You can iterate in the same conversation. If the first output isn’t quite right, tell Claude what to change, and it updates the code. No need to start over.
• Paste directly into the HTML editor and send. Once you’re happy with the template, it goes straight into Benchmark Email’s HTML editor for final review and delivery.

 

Building a custom HTML email used to mean writing table-based code by hand, fighting Outlook rendering quirks, and spending more time debugging than designing. For most marketers, that was enough of a barrier to stick with drag-and-drop templates and leave the custom work to someone else.

Benchmark Email’s Claude Skill changes that equation entirely. It puts an AI writing and coding assistant directly inside your email workflow, so you can describe the email you want and get back a fully structured, inbox-ready HTML template without opening a code editor or leaving the platform.

This post walks you through exactly how it works and how to get the most out of it.

What Is Benchmark’s Claude Skill?

Benchmark Email integrates with Claude, Anthropic’s AI assistant, as a built-in skill. Rather than switching between your email tool and a separate AI tab, you work with Claude directly inside Benchmark Email.

The Claude Skill is particularly useful for HTML email creation because it understands email-specific constraints: the need for table-based layouts, inline CSS, responsive media queries, and the quirks of different email clients. When you prompt it for an email template, you get output that’s built for the inbox, not for a webpage.

You can use it to generate full templates from scratch, modify existing HTML, add or remove sections, adjust colors and fonts, and produce variations for A/B testing, all through natural language conversation.

Step-by-Step: Creating an HTML Email with the Claude Skill

Here is a video tutorial on how to create an HTML email using Benchmark Email’s Claude Skill. 

Below are the steps written out for more clarification. 

Step 1: Open the Claude Skill in Benchmark Email

Log in to your Benchmark Email account and navigate to the campaign creation flow. Select the HTML editor option, where you’ll find the Claude Skill available as an AI assistant. Open it to start a new conversation.

Step 2: Describe your email

Start with a clear description of what you’re building. The more specific you are, the better the output. A good prompt covers:

• The purpose of the email. Is it a promotional offer, a newsletter, a product announcement, a welcome message?
• Your brand details. Primary color (hex code), secondary color, font preference (or web-safe fallback), logo placement.
• The sections you need. Header, hero image, body copy, CTA button, footer. List them in the order you want them to appear.
• Specific copy, if you have it. Or ask Claude to generate placeholder copy that you can swap out.

An example prompt:

“Create an HTML email template for a summer sale announcement. Brand color: #FF6B35. Background: #F9F9F9. Content area: white with 40px padding. Sections: 1) Centered logo at top, 2) Hero image placeholder, 3) Headline: ‘Our Biggest Sale of the Year,’ 4) Two short body paragraphs explaining the offer, 5) CTA button in brand color linking to [URL], 6) Simple footer with unsubscribe link. Mobile responsive. Table-based layout with inline CSS.”

Step 3: Review the generated HTML

Claude returns a complete HTML template. Before accepting it, review it for:

• Does the structure match what you described?
• Are the colors correct?
• Is the font size appropriate for both desktop and mobile?
• Does the CTA button stand out clearly?

You can paste the HTML into a browser tab to preview it visually before moving to the next step.

Step 4: Refine with follow-up prompts

If anything needs adjustment, tell Claude directly. You don’t need to rewrite your original prompt. Just describe the change:

• “Increase the headline font size to 32px.”
• “Change the button border radius to 6px.”
• “Add a two-column section below the hero with an image placeholder on the left and text on the right.”
• “The footer feels too crowded. Simplify it to just the unsubscribe link and company address.”

Claude updates the relevant section and returns the revised code. This back-and-forth is faster than manually editing raw HTML, especially for changes that require touching multiple elements at once.

Step 5: Add your content

Once the structure is right, update the placeholder copy with your actual text. If you want Claude’s help here too, ask it:

• “Write a 50-word body paragraph promoting a 30% off summer sale for an outdoor gear brand.”
• “Give me three subject line options for this email.”

Claude handles both copy and code so that you can use it throughout the drafting process.

Step 6: Paste into the HTML editor and send

Copy the final HTML and paste it into Benchmark Email’s HTML editor. Use the preview tool to check desktop and mobile rendering. Send a test email to yourself and review it in your actual inbox across Gmail, Outlook, and your phone.

Make any final tweaks in the code view, set your subject line and sender name, and send.

Tips for Getting Better Results

• Be specific about your brand. “Blue” means different things to different people. Hex codes like #0033CC give Claude something precise to work with and get you much closer on the first try.
• Name your sections explicitly. Saying “a two-column product feature with an image on the left and bullet points on the right” gives Claude more to work with than “a product section.”
• Use it for variations, not just first drafts. Once you have a working template, use Claude to generate A/B variants: a version with a different CTA color, a version with the hero image removed, a version with shorter copy. Testing becomes much faster when generating variants takes seconds.
• Save templates you like. When Claude produces a structure that works well for your brand, save it in Benchmark Email. You can reload it for future campaigns and ask Claude to update only the content.
• Ask for explanations when something looks wrong. If the HTML isn’t rendering as expected, paste the problem section into Claude and ask: “This section isn’t centering correctly in Outlook. What’s causing it and how do I fix it?” Claude can diagnose email rendering issues the same way it generates templates.

Frequently Asked Questions

Do I need a separate Claude or Anthropic account to use this?

No. The Claude Skill is built into Benchmark Email. You access it directly within your account without needing a separate subscription or login.

Can Claude Skill generate email copy as well as the HTML structure?

Yes. You can ask Claude to write subject lines, body copy, CTA text, and other content in the same conversation. It handles both the writing and the code.

What if I already have an HTML template I want to use?

You can paste your existing HTML into the conversation and ask Claude to modify it. Add a section, change the color scheme, fix a rendering issue: Claude works with code you bring to the conversation, not just code it generates from scratch.

Is the HTML Claude generates compatible with all email clients?

Claude produces table-based layouts with inline CSS, which is the most compatible format for HTML email. You should still test across Gmail, Outlook, and Apple Mail before sending to your full list, but the output is built specifically for email, not for web browsers.

Can I use the Claude Skill to build templates for future reuse?

Yes. Once Claude has generated a template you’re happy with, paste it into Benchmark Email’s HTML editor and save it as a reusable template. Load it for future campaigns and update the content without needing to regenerate the structure each time.

What kinds of emails work best with this workflow?

Any email where you want custom visual structure: promotional campaigns, product announcements, seasonal offers, newsletters with image-and-text sections. Simpler transactional emails (order confirmations, password resets) are usually handled fine with standard templates, but anything with a distinct branded layout benefits from the custom HTML approach.