Prompt for Creating SigStudio Compatible HTML Email Signature Templates Using External AI Programs that work with SigStudio's Visual Editor

Once generated, simply paste the HTML code starting with and ending with into the HTML code editor while editing any template. (Note: The HTML editor is not available during the 30 day trial, you will need to upgrade to a paid account to access this feature).

When you have pasted the code into SigStudio, you will be able to continue editing and fine-tuning the content of your email signature template using our Visual Editor.

—

Example AI Prompt for Creating a SigStudio Visual Editor Template

Copy the prompt below and paste it into ChatGPT, Claude or another AI tool. Replace the design brief placeholder with a description of the email signature you want to create.

You are an expert HTML email signature developer creating a template for the SigStudio HTML Editor and Visual Editor.

```

Create a complete, production-ready HTML email signature based on the design requirements I provide.

The finished HTML must be suitable for copying directly into SigStudio and must avoid validation errors.

My design requirements

Describe the signature I want here:

[PASTE YOUR DESIGN BRIEF HERE]

Include details such as:

Layout and positioning
Colours
Fonts
Profile photo placement
Logo placement
Contact fields
Social icons
Banners or calls to action
Disclaimer text
Green environmental message
Preferred maximum width
Any reference image or existing signature design

Critical SigStudio rules

Follow every rule below.

1. Return complete HTML

Create a complete HTML document using this structure:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
```

```

Do not return an HTML fragment.

Do not add JavaScript, forms, embedded video, external stylesheets or scripts.

2. Use table-based email HTML

Build the signature using nested HTML tables.

Use:

<table cellpadding="0" cellspacing="0" border="0">

Do not use:

CSS Grid
Flexbox
Absolute positioning
JavaScript
Forms
Iframes
SVG code
Base64 images
External CSS files

Use email-client-compatible HTML and inline CSS wherever possible.

A <style> block may only be used for email-client compatibility rules such as Apple data detector overrides.

3. Never invent SigStudio tags

Only use SigStudio tags that are explicitly listed in this prompt or supplied by me.

Never guess or invent a tag because its name appears logical.

For example, do not invent tags such as:

{{data.u.department.text}}
```

{{img.g.badge.src}}
{{dsgn.g.secondary.color}}

```

When my requested design requires a field or image that is not covered by the approved tags, ask me for the correct SigStudio tag before generating the final HTML.

Do not substitute an ordinary URL or static placeholder for an unknown SigStudio image tag.

4. Image source validation

Every <img> element must use an approved SigStudio image source tag in its src attribute.

Correct:

<img src="{{img.g.logo.src}}" />

Incorrect:

<img src="https://example.com/logo.png" />

Incorrect:

<img src="{{data.g.logo.text}}" />

Incorrect:

<img src="data:image/png;base64,..." />

Do not use a normal hosted image URL in an <img> tag.

Do not use CSS background-image URLs.

Where available, use the image’s matching width, height, alt and link tags.

Example:

<a href="{{img.g.logo.link}}">
```

```

For HTML attributes such as width and height, do not add px:

width="{{img.g.logo.w}}"

For CSS properties, add px after numeric dimension tags:

width:{{img.g.logo.w}}px;

5. Approved user-data tags

The following user-level tags are approved for this template:

{{data.u.name.text}}
```

{{data.u.role.text}}
{{data.u.mobile.text}}
{{data.u.email.text}}
{{data.u.email.link}}

```

Use the text tag for visible text.

Use the link tag only inside an appropriate href attribute.

Example:

<a
```

data-ss-entity="email-link"
href="{{data.u.email.link}}"
target="_blank"
style="text-decoration:none;"
>
{{data.u.email.text}}

```

6. Approved group-data tags

The following group-level tags are approved:

{{data.g.sal.text}}
```

{{data.g.name.text}}
{{data.g.mobile.label}}
{{data.g.email.label}}

```

7. Approved user image tags

The following user image tags are approved:

{{img.u.profile.src}}
```

{{img.u.profile.w}}
{{img.u.profile.h}}
{{img.u.profile.alt}}
{{img.u.profile.link}}

```

Use them together when displaying the user’s profile image.

8. Approved group image tags

The following group image tags are approved:

{{img.g.logo.src}}
```

{{img.g.logo.w}}
{{img.g.logo.h}}
{{img.g.logo.alt}}
{{img.g.logo.link}}

{{img.g.facebook.src}}
{{img.g.facebook.w}}
{{img.g.facebook.h}}
{{img.g.facebook.alt}}
{{img.g.facebook.link}}

{{img.g.x.src}}
{{img.g.x.w}}
{{img.g.x.h}}
{{img.g.x.alt}}
{{img.g.x.link}}

{{img.g.instagram.src}}
{{img.g.instagram.w}}
{{img.g.instagram.h}}
{{img.g.instagram.alt}}
{{img.g.instagram.link}}

{{img.g.linkedin.src}}
{{img.g.linkedin.w}}
{{img.g.linkedin.h}}
{{img.g.linkedin.alt}}
{{img.g.linkedin.link}}

{{img.g.youtube.src}}
{{img.g.youtube.w}}
{{img.g.youtube.h}}
{{img.g.youtube.alt}}
{{img.g.youtube.link}}

{{img.g.msggreen.src}}
{{img.g.msggreen.w}}
{{img.g.msggreen.link}}

{{img.g.templatewidth.src}}
{{img.g.templatewidth.w}}

```

Do not include a social platform unless its approved tags are listed above or I provide its exact tags.

9. Approved message tags

The following editable message tags are approved:

{{msg.g.customcta.text}}
```

{{msg.g.customcta1.text}}
{{msg.g.customcta2.text}}
{{msg.g.customcta2.link}}
{{msg.g.disclaimer.text}}
{{msg.g.green.text}}

```

Use .text tags for visible copy.

Use .link tags only inside an href attribute.

10. Approved colour tags

The following colour tags are approved:

{{dsgn.g.base.color}}
```

{{dsgn.g.feature.color}}
{{dsgn.g.accent.color}}
{{dsgn.g.custom3.color}}
{{dsgn.g.custom4.color}}

```

Use colour tags inside valid CSS colour properties.

Example:

color:{{dsgn.g.base.color}};
```

background-color:{{dsgn.g.feature.color}};

```

11. Approved typography and dimension tags

The following design tags are approved:

{{dsgn.t.primary.font}}
```

{{dsgn.t.primary.fontsize}}

{{dsgn.t.custom.font}}
{{dsgn.t.custom.fontsize}}

{{dsgn.t.socialgap.size}}

{{dsgn.t.msgdisclaimer.font}}
{{dsgn.t.msgdisclaimer.fontsize}}
{{dsgn.t.msgdisclaimer.lineheight}}
{{dsgn.t.msgdisclaimer.w}}

{{dsgn.t.msggreen.font}}
{{dsgn.t.msggreen.fontsize}}
{{dsgn.t.msggreen.w}}

```

Numeric design tags do not contain CSS units.

Correct:

font-size:{{dsgn.t.primary.fontsize}}px;
```

line-height:{{dsgn.t.msgdisclaimer.lineheight}}px;
width:{{dsgn.t.msgdisclaimer.w}}px;

```

12. Visual Editor entity attributes

Use the appropriate data-ss-entity attribute on editable elements.

Approved entity values demonstrated in the valid SigStudio template include:

salutation
```

profile
name
role
group-name
mobile
email
email-link
social-cta
facebook
x
instagram
linkedin
youtube
logo
cta-banner
disclaimer
green-message
templatewidth

```

Example:

<td data-ss-entity="name">
```

{{data.u.name.text}}

```

Example:

<td data-ss-entity="logo">
```

```

Do not invent new data-ss-entity values.

The entity value must match the type of content inside the element.

13. Visual Editor zones

The following zones are approved:

data-ss-zone="contact"
```

data-ss-zone="social"
data-ss-zone="base"

```

Use the Contact Zone around contact-information rows.

Use the Social Zone around social icons and related social text.

Use the Base Zone around supporting content beneath the main signature, such as:

Promotional banner
Disclaimer
Green message
Template-width element

Example:

<tr data-ss-zone="contact">
```

```

Do not invent additional zone names.

14. Blocks and between-items

Related fields displayed on the same row may use a SigStudio block.

For example, name and role may be grouped with:

<tr data-ss-block="name,role">

A separator that appears between the two fields may use:

<td data-ss-block-item="between">
```

•

```

Use this pattern for the approved name,role combination.

Do not invent additional block combinations unless I provide them.

15. Contact rows

Contact entities may be placed inside rows using:

<tr data-ss-row-limit="1">

Use this pattern for the approved mobile and email contact rows.

Example:

<tr data-ss-row-limit="1">
```

```

16. Spacers

Use SigStudio spacer attributes for intentional editable spacing.

Horizontal spacer:

<td
```

data-ss-spacer="h"
width="10"
style="font-size:1px;line-height:1px;width:10px;padding:0;"
>

```

Vertical spacer:

<tr data-ss-spacer="v">
```

```

Use ordinary cell padding only where appropriate for email compatibility. Use the SigStudio spacer pattern for meaningful gaps the user may need to control.

17. Email-safe styling

Use conservative email-compatible styling.

Recommended table style:

style="
```

font-family:{{dsgn.t.primary.font}};
line-height:0px;
font-size:1px;
padding:0;
border-spacing:0;
margin:0;
border-collapse:collapse;
text-align:left;
"

```

Use:

Inline styles
Fixed table layouts where appropriate
border-collapse:collapse
border-spacing:0
display:block on images
Explicit image dimensions
border:none on images
text-decoration:none on links
<font> tags where useful for legacy email compatibility
white-space:nowrap only where wrapping would break the layout

Avoid relying on:

Margins for layout
Modern CSS selectors
CSS variables
Web fonts
Hover effects
Responsive JavaScript
Complex media queries

18. Apple and Gmail link protection

Include the following compatibility CSS in the <head>:

<style type="text/css" media="all">
```

a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}

.aBn {
border-bottom: none;
text-decoration: none;
}

.gc-cs-link {
text-decoration: none !important;
}

```

19. Template-width element

Include a template-width element near the bottom of the Base Zone:

<tr data-ss-entity="templatewidth">
```

```

20. Do not add template metadata unless requested

Do not invent a SigStudio template code.

Do not include this element unless I specifically provide its values:

<meta
```

name="template-config"
data-name=""
data-code=""
data-description=""
data-status=""
/>

```

21. Comments

Add short HTML comments identifying the main areas, such as:

<!-- Profile Image -->
```

```

Do not add long explanations inside the HTML.

22. Missing tags or unsupported requirements

Before creating the HTML, inspect my design requirements.

When the design requires a SigStudio tag that is not included in the approved list above, do not guess it.

Ask me one concise question listing the missing fields or image types and request their exact SigStudio tags.

Examples might include:

Office telephone
Website
Address
Additional logo
Certification badge
Promotional image
TikTok
Calendly
Custom banner image

Only generate the final HTML after the necessary tags have been supplied.

23. Final validation audit

Before returning the result, silently check that:

Every <img src=""> contains an approved {{img...src}} tag.
No normal image URLs are present.
No SigStudio tags have been invented.
Every .link tag is inside an appropriate href.
Every image dimension uses the correct matching image tag.
Numeric tags use px in CSS but not in HTML width and height attributes.
Every supported editable area has the appropriate data-ss-entity.
Only approved zones and entity names are used.
The layout uses tables rather than Flexbox or Grid.
The document contains valid opening and closing HTML tags.
There is no JavaScript, SVG, iframe, form, Base64 image or external stylesheet.
The result is ready to paste into the SigStudio HTML Editor.

Output format

When all necessary information and tags are available, return:

One complete HTML document.
Place the HTML inside a single code block.
Do not include multiple design options.
Do not include a tutorial or line-by-line explanation.
After the code block, include only this statement:
SigStudio HTML generated using the approved tags provided.

```