Generate professional HTML email signatures that work in Gmail, Outlook, and Apple Mail. Users fill in their details, pick a template, customize colors, and copy the signature HTML with one click. No signup required, and all data stays local in the browser.
Build Prompt
Copy this prompt into Claude Code
Build a single-page email signature generator as a static HTML/CSS/JS site. Use a dark background (#0a0a0f) with a two-column layout on desktop: left column (400px) for the input form, right column for the live signature preview on a white card with subtle shadow.
The input form should have these field groups, each with a section header in #9ca3af uppercase small text:
PERSONAL INFO: Full Name (text, required), Job Title (text), Company Name (text), Department (text, optional).
CONTACT DETAILS: Phone Number (tel input), Mobile (tel, optional), Email Address (email, required), Website URL (url, optional).
SOCIAL LINKS: LinkedIn URL, Twitter/X handle (auto-prepend @ if missing), GitHub username, Instagram handle. Each social field should have the platform icon (use inline SVG) to the left of the input.
APPEARANCE: Headshot placeholder — a 80x80 circle with a camera icon that says "Paste image URL" on click (input for image URL, renders as a round photo). Color picker for accent color (default #2563eb) that tints the separator line, name color, and social icons. Font selector dropdown: Arial (default), Georgia, Verdana, Trebuchet MS.
TEMPLATE SELECTOR: A row of 4 clickable template thumbnails, each 120x80px with a mini preview:
1. "Horizontal" — photo left, details right, social icons in a row below
2. "Vertical" — centered stack: photo, name, title, contact, socials
3. "Minimal" — no photo, just name/title with a colored left border and contact below
4. "Corporate" — company name prominent at top, employee details below, logo placeholder area
The live preview panel (right side) must update in real-time as the user types. Render the signature using inline CSS only (table-based layout for email client compatibility — no divs, no CSS classes). The signature HTML must be fully compatible with Gmail, Outlook 2019+, and Apple Mail.
Below the preview, three action buttons in a row:
- "Copy HTML" (blue, copies the raw HTML source to clipboard)
- "Copy as Rich Text" (uses the Clipboard API to write the rendered signature as rich text so it can be pasted directly into Gmail settings)
- "Copy to Clipboard" (fallback that selects the preview content and runs document.execCommand)
Show a small success toast (green, top-right, auto-dismiss after 2s) on successful copy.
Below the action buttons, add a collapsible "Installation Guide" section with step-by-step instructions for Gmail ("Settings > See all settings > Signature > paste"), Outlook ("File > Options > Mail > Signatures > paste"), and Apple Mail ("Mail > Preferences > Signatures > paste").
Save all form inputs to localStorage on every change so returning users see their last signature. Add a "Reset All" button (small, gray, top-right corner) that clears localStorage and resets the form with a confirmation dialog.
On mobile (under 768px), stack the form above the preview vertically. Make the template thumbnails scroll horizontally in a row.
Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].
Make It Yours
Banner CTA
Add an optional promotional banner below the signature — great for product launches, events, or seasonal campaigns with a linked image.
Legal Disclaimer
Include a toggle for a small-print confidentiality disclaimer that auto-appends below the signature in 9px gray text.
Meeting Scheduler Link
Add a "Book a Meeting" button field that links to the user's Calendly, Cal.com, or Google Calendar booking page.
Pronouns Field
Add an optional pronouns field (he/him, she/her, they/them, custom) that appears in smaller text next to the name.
SEO Tips
Target "email signature generator" (33K monthly searches) and "free email signature maker" as primary keywords in your title and H1.
Create individual pages for "Gmail signature generator," "Outlook signature generator," and "Apple Mail signature" to capture platform-specific searches.
Add a gallery page showcasing 20+ signature examples across industries (designer, lawyer, realtor, developer) for image search traffic.
Write guides titled "How to Add a Signature in Gmail (2026)" and "Professional Email Signature Examples" to build topical authority.
Include Open Graph tags with a preview image showing a beautifully rendered signature so social shares look compelling.
Monetization Ideas
Offer premium templates (10+ designs) for $6.99 one-time — unlock with a payment that stores the purchase key in localStorage.
Sell team plans where a company admin creates a branded template and team members fill in their details — $29/month for up to 50 users.
Add affiliate links to professional headshot services (like Aragon AI or Remini) next to the photo upload field.
Offer a "Signature Analytics" upgrade that embeds a tracking pixel to count how many times the signature is viewed — $3/month.
Create a "Signature as a Service" API where developers can generate signatures programmatically — $0.01 per generation via Stripe metered billing.