Branded HTML Team Emails with an AI Assistant: a free step-by-step guide

Hi, I'm Mounaim. In the video I turned a boring plain-text announcement into an email that looks like a design team made it. A free AI assistant, no code, about a minute.

This guide is the full version, so you can do it yourself today. Al Noor Logistics is just an example company. Swap in your own.

What you need

• An AI assistant. The free version of any mainstream assistant works.
• Your brand colour as a hex code, for example #0F766E. Ask your marketing person, or check your website.
• Optional: a public link to your logo (more on that below).
• Gmail or Outlook to send it.
• Five minutes.

Step 1. Copy this prompt

Copy it, paste it into your AI assistant, and change the parts in [brackets].

You are an email designer. Create an HTML internal announcement email for [Company name].

Topic: [our new flexible working policy starts 1 November].
Audience: [all employees]. Tone: warm, clear, short.

Design:
- Brand colour [#0F766E] for the header and the button. White background, dark grey text.
- Header with the company name [and this logo: LOGO URL].
- Three short sections with headings: [What's changing], [Who it applies to], [What to do next].
- One button: [Read the policy] linking to [URL].
- A short footer: [HR team, Company name].

Technical rules (important, so it survives being pasted into Gmail or Outlook):
- Table-based layout, 600px wide, centred.
- Inline CSS only. No <style> block, no JavaScript, no external fonts, no background images.
- Use web-safe fonts: Arial, Helvetica, sans-serif.
- The button must be a table cell with a background colour and a link inside, not an image.

Reply with the complete HTML code only, in one code block.

Why these rules? Email apps strip a lot of normal web code. Tables and inline CSS are the old-school way that still works everywhere. You don't need to understand the code. Think of it like a recipe: you don't eat the recipe, you eat the dish.

Step 2. Variations you can reuse

Keep the "Design" and "Technical rules" parts from the prompt above, and only replace the first lines.

Monthly newsletter

Create an HTML monthly team newsletter for [Company name], [Month]. Sections: a short welcome from [name], 3 team highlights, 1 upcoming date, and "a tip of the month". Keep each section under 50 words.

Policy update

Create an HTML policy update email for [Company name]. Policy: [name]. Explain what changes, from which date, who it affects, and where to ask questions. Plain English, no legal wording. Button: [Read the full policy].

Welcome email for a new joiner

Create an HTML welcome email for [new joiner name], joining [team] at [Company name] on [date]. Include: a warm welcome, what their first day looks like, who their buddy is, and what to bring. Button: [Open your onboarding checklist].

Event invite

Create an HTML event invitation for [Company name]: [event name] on [date] at [time], [location]. Include what it is, why to come, the agenda in 3 bullets, and an RSVP button linking to [URL]. Add a line for dietary requirements.

Tip: after the first version, just talk to it. "Make the header shorter." "Add an Arabic version below the English one." "Make the button bigger." That's it.

Step 3. Preview it

Option A: open it as a file (most reliable)

1. In your AI assistant, click Copy on the code block.
2. Open Notepad (Windows) or TextEdit (Mac; first go to Format → Make Plain Text).
3. Paste, and save as email.html. Make sure it ends in .html, not .txt.
4. Double-click the file. It opens in your browser and you see the designed email.

Option B: an online HTML viewer

Paste the code into any free online HTML viewer (search "HTML viewer online") and look at the preview. Please don't paste anything confidential into online tools. For internal policies, use Option A.

Option C: the assistant's built-in preview

Some assistants show a preview button on the code. Handy, but always check it in the browser too.

Step 4. Send it

Gmail (Chrome works best)

1. Open your email.html in Chrome.
2. Click anywhere on the email, press Ctrl+A (Cmd+A on Mac) to select everything, then Ctrl+C to copy.
3. In Gmail, click Compose and paste with Ctrl+V into the message body. The colours, sections and button come with it.
4. Add the subject and recipients. Send it to yourself first.
5. Open the test email on your phone and on your laptop. Check the button link.

If the layout looks off after pasting: ask the assistant to "make it simpler: one column, tables only, no margins on outer elements". Paste-in works best with simple designs.

Outlook (desktop app, Windows)

1. Open email.html in your browser, select all, copy.
2. In Outlook, create a New Email and paste into the body. Outlook keeps most of the design.
3. Another way that also works: in Outlook desktop, go to Insert → Attach File → choose email.html → click the small arrow → "Insert as Text". The HTML becomes the email body.
4. Send a test to yourself first. Outlook on Windows is the strictest email app, so if something looks wrong, tell the assistant: "Make this Outlook-safe".

Outlook on the web / new Outlook

Use the same copy-and-paste from the browser method as Gmail.

Brand tips

• Colours: use one main brand colour plus white and dark grey. One accent is enough. Always give the hex code, never "our blue".
• Logo: the logo must be a public image link (ending in .png or .jpg), for example the logo on your company website. Right-click the logo on your site → "Copy image address", and put that link in the prompt. A logo saved on your laptop will not show up for the people you send it to.
• Logo size: ask for "logo max 160px wide". Huge logos look bad on phones.
• Consistency: once you love one design, save the HTML. Next month, give it back to the assistant and say "same design, new content: …". Now you have a template.
• Language: for UAE and GCC teams, you can ask for English and Arabic in the same email. Ask for the Arabic section to be "right-to-left (dir=rtl)".

Common mistakes

• Pasting the code itself into Gmail. You'll see a wall of code. Open the file in a browser first, then copy what you see.
• Saving as .txt. The file must end in .html.
• Logo from your laptop. Use a public link instead.
• Not testing. Always send to yourself first, and open it on your phone.
• Trusting the details blindly. AI can get dates, names and links wrong. You stay on top of AI: check every date, name and link before you hit send.
• Too much content. If it needs scrolling for a minute, nobody reads it. Three short sections and one button.
• Confidential info in random online tools. Keep sensitive content in a file on your computer.

Checklist before you send

• Brand colour hex code is correct
• Logo shows (public link)
• Dates, names and numbers checked by a human
• Button link works
• Test email sent to myself
• Checked on phone and laptop
• Subject line is clear (what + when)
• Saved the HTML as a template for next time

Need help?

This is one small use case. The real win is when your whole team uses AI like this in their daily work.

Need help rolling AI out in your team? See corporate AI training →

— Mounaim Lamouni

Example company names are fictional.