PSA: Claude 3.5 is very good at designing HTML emails

georgecollier · 2024-07-10T06:04:35.667Z

Claude 3.5 Sonnet (Claude) is very good at making custom email templates for tools like Postmark or SendGrid, way better than ChatGPT. It speeds up email design so much.

CleanShot 2024-07-10 at 13.55.45@2x1778×1484 247 KB

CleanShot 2024-07-10 at 13.55.53@2x1638×1240 168 KB

It will also generate and render code inline. Here I told it to redesign the same email but for a team member invitation:

CleanShot 2024-07-10 at 14.01.39@2x1412×1448 267 KB

And you can view the full email here…

claude.site

Claude Artifact

Try out Artifacts created by Claude users

Cool stuff - no more plain text emails for me!

In case you want to include HTML in SendGrid without too much effort, here’s the code for your API Connector call (replace Send email actions with the custom API call):

URL

https://api.sendgrid.com/v3/mail/send

Headers

Authorization: Bearer $SendGridAPIKey
Content-Type: application/json

Body

{
    "personalizations": [
        {
            "to": [
                {
                    "email": <email>
                }
            ]
        }
    ],
    "from": {
        "email": "admin@notquiteunicorns.xyz"
    },
    "subject": <subject>,
    "content": [
        {
            "type": "text/html",
            "value": <html>
        }
    ]
}

Then, just ensure all of your inputs are :formatted as JSON safe.

CleanShot 2024-07-10 at 14.03.56@2x1020×488 43.7 KB

boston85719 · 2024-07-10T06:31:32.692Z

This is awesome stuff, thanks for sharing.

Could you post what the prompt was you used to generate the email you provided in this post?

georgecollier · 2024-07-10T06:50:38.481Z

CleanShot 2024-07-10 at 14.47.40@2x1244×1290 116 KB

CleanShot 2024-07-10 at 14.47.50@2x1370×1436 88.6 KB

CleanShot 2024-07-10 at 14.49.11@2x1244×268 42.3 KB

CleanShot 2024-07-10 at 14.49.34@2x1372×1438 89.4 KB

Then, the code is literally a copy + paste + change the dynamic variables to dynamic data (and change the placeholder logo URL to your own URL - though, if you tell Claude the URL, it’ll put it in for you by default)

CleanShot 2024-07-10 at 14.49.43@2x1396×1446 218 KB

Email here: Claude Artifact

cmarchan · 2024-07-10T14:30:00.346Z

Straightforward … and … powerful!

Easy email html code (which as we all know has its tricks) and turning it into a super-easy-to-configure Bubble API call … !

Thanks for sharing @georgecollier !

GH5T · 2024-07-10T18:20:28.735Z

I use Claude more than 4o these days for API. The responses are always much more precise.