With the help of AI, you can create custom email designs without having to write the HTML code yourself.
AI can help you turn a simple description into a complete email — including the layout, colors, buttons, images, and text sections.
The basic process looks like this:
- You describe what you want your email to look like.
- You have AI create a mockup first.
- You refine the design together with AI.
- Once you’re happy with the result, you have AI generate the HTML code.
- You then add the HTML code to Quentn.
- Finally, you send a test email and check how it looks.
1. Describe the Email You Want AI to Create
The more precisely you explain what you want, the better the result will be.
An instruction you give to AI is often called a prompt.
A prompt is simply the text you enter into the AI’s input field.
For example:
Create a modern email promoting our next webinar.
That already works. But it’s better to give the AI more information.
For example, describe:
- What is the goal of the email?
- Who should receive the email?
- Which colors should be used?
- Should the email look simple or eye-catching?
- What tone do you want to use?
- Do you already have finished copy?
- Which headlines should be used?
- Should the email include a button?
- Should images be included?
- Are there specific sections you need?
What Does “Target Audience” Mean?
Your target audience is the group of people who are supposed to receive your email.
For example:
- new leads,
- existing customers,
- webinar attendees,
- product buyers,
- course members,
- self-employed professionals,
- companies.
This information helps the AI tailor the design and copy more effectively to the recipients.
What Does “Tone” Mean?
The tone describes how your email should sound.
For example:
- casual,
- personal,
- professional,
- emotional,
- factual,
- direct,
- humorous.
For example, you could tell the AI:
The email should feel friendly, direct, and modern. Address the reader personally using “you.”
Example of a More Detailed Prompt
Create a mockup for a modern HTML email.
The email should promote a free webinar.
The target audience is self-employed professionals and business owners.
The design should look modern, premium, and well organized. Use mainly dark blue, white, and a bold accent color for the button.
The email should include the following sections:
- Logo
- Large headline
- Short introductory text
- Image
- Three benefits of the webinar
- Eye-catching button
- Short closing section
The tone should be direct, personal, and easy to understand.
You don’t need to know every detail yet.
A general idea is completely sufficient for the first draft.
2. Have AI Create a Mockup First
Before generating any HTML code, you should first have AI create a mockup.
A mockup is a visual preview.
It gives you an idea of what the finished email could look like.
This lets you evaluate:
- How is the email structured?
- Where is the headline placed?
- Where is the image displayed?
- What does the button look like?
- Do the colors work well together?
- Is the spacing appropriate?
- Does the email look clean and easy to follow?
The advantage:
You can make changes to the design before any HTML code is created.
For example:
I like the top section, but make the button larger and more eye-catching.
Or:
The design still feels too playful. Make it cleaner and more professional.
Or:
Move the image higher up and reduce the space between it and the headline.
Keep refining the mockup until you’re happy with the result.
Only then should you generate the HTML code.
3. Have AI Generate the HTML Code for the Email
Once you’re happy with the mockup, you can ask the AI to generate the HTML code from it.
HTML stands for “Hypertext Markup Language.”
HTML is a markup language that defines which content is displayed and how it is arranged.
For example:
- headlines,
- text,
- images,
- buttons,
- spacing,
- background colors.
You don’t need to write or fully understand the code yourself.
The important thing is to explain as clearly as possible what the code will be used for.
Make Sure to Include This Instruction
Tell the AI:
Create the HTML code so I can paste it as an HTML block into the body section of an HTML editor.
You should also clearly tell the AI that the code is intended for an email:
The HTML code is intended for an email. Therefore, only use HTML and CSS that are reliably supported by common email clients.
Why Is This Instruction Important?
HTML emails work differently from regular websites.
A website can use many modern design techniques.
Email clients are much more limited.
For example, Outlook may display certain HTML or CSS instructions differently than Gmail or Apple Mail.
That’s why the AI needs to know:
This is not a website. This is an email.
Example of Your Final Prompt
Now create the HTML code for the mockup shown above.
Create the HTML code so I can paste it as an HTML block into the body section of an HTML editor.
The code is intended for an email. Therefore, use HTML that is as simple as possible and compatible with common email clients.
Make sure the email also displays well on smartphones.
4. What Does “Responsive” Mean?
When creating emails, you’ll often come across the term responsive.
Responsive means:
The design automatically adapts to the size of the screen.
For example, an email should:
- look good on a large computer screen,
- work properly on a tablet,
- remain easy to read on a smartphone.
This is especially important for emails because many people read their messages on their phones.
You can therefore also tell the AI:
Make the email responsive. On smartphones, content should stack vertically and remain easy to read.
5. Using Your Own Images in the Email
If you want to use your own images in the design, the AI needs the image path or file path.
What Is an Image Path?
An image path is the address where an image can be accessed.
The HTML code uses this address to display the image in the email.
Without this path, the AI can create a placeholder for an image, but it cannot use your actual image.
How to Get the Image Path
In your email template, follow these steps:
- Open the template you want to use.
- Add the Image content block.
- Upload the image you want to use.
- After the upload, the file path will be displayed.
- Copy the file path.
- Add it to your AI prompt.
For example:
Use this image below the introduction:
[INSERT IMAGE PATH HERE]
The image should adapt to the width of the email and should not be cropped on smartphones.
Once you’ve copied the file path, you can remove the image block you previously added to the template.
The image itself can still be used in the HTML code through the copied path.
6. Adding Buttons and Calls to Action
A button in an email is often referred to as a call to action.
The abbreviation is CTA.
A call to action is a prompt that encourages the reader to take a specific action.
For example:
- “Sign Up Now”
- “Learn More”
- “Book an Appointment”
- “Try It Free”
- “View the Offer”
The button is meant to guide the reader toward a specific action.
That’s why you should always tell the AI:
- what text should appear on the button,
- where the button should link to,
- how prominent the button should be.
For example:
Add an eye-catching button after the main text.
The button should say “Sign Up for Free Now” and link to the following page:
[INSERT LINK]
What Is a Link?
A link is a web address that opens when clicked.
The button is simply the visible design element.
The link determines where the reader goes after clicking it.
7. Provide Existing Copy Directly
If your email copy is already finished, you should include it directly in your prompt.
This has a major advantage:
The AI can adapt the design to the actual amount of text.
For example:
Use the following copy exactly as written. Do not change the content.
Headline:
[HEADLINE]
Introduction:
[TEXT]
Button:
[BUTTON TEXT]
If the AI is also allowed to improve the wording, you can say so:
You may slightly improve the wording, but keep the message and tone unchanged.
This helps prevent the AI from making changes you didn’t want.
8. Why Email Designs Should Be Technically Simpler
AI can create highly sophisticated designs for websites.
With emails, however, you should be a little more careful.
The reason:
Email clients don’t support all modern HTML and CSS features.
For example, a design may look perfect in Gmail but suddenly appear differently in Outlook, with:
- different spacing,
- buttons displayed differently,
- elements shifted,
- certain formatting ignored.
That’s why a common rule for emails is:
Simpler is more reliable.
For example, you can tell the AI:
Use a simple and robust layout for the email. Avoid unnecessarily complex CSS effects.
You should also avoid elaborate animations or highly modern web effects in a standard marketing email.
9. Tables in HTML Email Code Are Normal
When you have AI generate HTML for an email, you may see many so-called tables in the code.
For example, terms such as:
<table>
<tr>
<td>
This may look unusual at first.
In modern websites, tables are generally not used for page layouts.
In HTML emails, however, they are still widely used.
The reason:
Many email clients display table-based layouts more reliably.
So if the AI uses tables to build your email, that is not automatically a mistake.
10. What Is Inline CSS?
Another term you’ll often encounter with HTML emails is inline CSS.
This means that design instructions are placed directly inside the relevant HTML element.
For example, the color of a button is defined directly in that button’s code.
This isn’t always the most elegant approach for regular websites.
For emails, however, it can be useful because different email clients often support this type of formatting more reliably.
For example, you can tell the AI:
Use inline CSS for important formatting whenever possible so the email displays reliably across different email clients.
You don’t need to modify the code yourself.
It’s enough for the AI to know how the code should be created.
11. Send a Test Email
After adding the HTML code to Quentn, you should never send the email directly to your entire recipient list.
Send a test email first.
Check:
- Is the headline fully visible?
- Are the colors correct?
- Is all text easy to read?
- Are the images displayed?
- Do the buttons work?
- Do all links lead to the correct page?
- Is the spacing appropriate?
- Does the email look good on a smartphone?
If possible, you should also test the email in different email clients.
For example:
- Gmail
- Outlook
- Apple Mail
This helps you identify situations where a particular email client displays your email differently.
12. What Should You Do If the Email Doesn’t Look Right?
You don’t need to fix faulty HTML code yourself.
You can simply give the existing code back to the AI.
Describe as precisely as possible what is wrong.
For example:
The button is too wide on smartphones.
Adjust the following HTML code so the button appears narrower on small screens.
Do not change anything else.
[INSERT HTML CODE]
Or:
In Outlook, there is too much space between the image and the text.
Review the following HTML code and adjust it for the most reliable possible display across common email clients.
[INSERT HTML CODE]
The more precisely you explain what is wrong and what should remain unchanged, the better the AI can adjust the code.
13. Don’t Make the Email Unnecessarily Wide
Emails should not stretch across the entire screen like a website.
A limited width is often used for the main content area.
For example, you can tell the AI:
Set the main content area of the email to a maximum width of approximately 600 pixels and center it.
What Are Pixels?
Pixels are tiny points of light on a screen.
They are commonly used to define sizes in digital design.
You don’t need to know exactly how wide 600 pixels are.
For your purposes, it’s enough to know:
A limited width prevents the email from being stretched uncomfortably wide on large monitors.
14. Don’t Forget the Sender Section and Required Information
When creating the main design, keep in mind that a marketing email consists of more than just the attractive main content.
Depending on the template and sending method you use, additional sections may be required, such as:
- sender information,
- legal notice information,
- unsubscribe link,
- other required information.
If these elements are already provided by your Quentn template, you should not unnecessarily include them in the AI-generated HTML block.
In that case, have the AI generate only the main content section.
The Entire Process Explained Simply
1. Describe the Email
Explain to the AI what you want the email to achieve and what it should look like.
2. Create a Mockup
First, have the AI show you roughly what the email could look like.
3. Refine the Design
Adjust the colors, structure, images, and buttons together with the AI.
4. Generate the HTML Code
Once you’re happy with the mockup, have the AI generate the finished code.
Always include the following instruction:
Create the HTML code so I can paste it as an HTML block into the body section of an HTML editor.
Also add:
The code is intended for an email. Therefore, use HTML that is as simple as possible and compatible with common email clients.
5. Prepare Images
If you want to use your own images, upload them using the image block and copy the file path.
6. Add Links
Give the AI the links for your buttons and other clickable elements.
7. Add the Code
Copy the finished HTML code into the designated HTML area of your email template.
8. Send a Test Email
Check the result on both a computer and a smartphone.
9. Have Errors Corrected
If something doesn’t look right, give the AI the existing code and describe exactly what should be changed.