How to build an email signature generator with Claude Code

Rule of thumb: if you are one person who needs one signature today, HubSpot’s free generator will do it for nothing, provided you have somewhere to host your photo. If a whole company needs the same signature installed in every mailbox without anyone pasting anything, the managed products are what you are paying for, and this template does not do that job. In between sits most small teams: five to fifty people who want to look alike, keep their photos at an address that outlives any subscription, and hand a new hire a link rather than a seat. That is who this build is for, and the running cost is the storage plan.

* The free-tier line to watch here is the pause. Supabase Free includes 1 GB of file storage and a 5 GB monthly egress allowance, which is thousands of signature photos and a great many inbox loads, but a free project is paused after a week without activity, and a signature builder is idle by nature once everyone has pasted theirs. A paused project serves no images, so every signature already in use loses its photo. Pro, from $25/mo, never pauses and raises file storage to 100 GB.

Prices and rates from supabase.com, developex.com and claude.com, checked September 2026.

Nothing here is worth memorizing. These four just need to exist on your machine. From step 01 on, you say what you want and Claude Code runs the commands.

1. 01

   Set up the project and the bucket

   An empty app running against your own storage project, plus a notes file so Claude Code keeps the three export rules this build depends on in front of it.

   PromptSet up the projectCopy

   Set up a new React 18 + Vite + TypeScript project with Tailwind and the Supabase JS client. Read VITE_SUPABASE_URL and the publishable key (the sb_publishable_… key, which replaces the older anon key) from .env, and add .env to .gitignore in the same step so neither value reaches GitHub. Add a typed Supabase client under src/lib, then write a short CLAUDE.md describing the stack and the vocabulary for an email signature builder (signature, layout, design, social links, QR code, export) and recording three standing rules: every style in the exported HTML is inline on the element it belongs to, layouts use tables rather than flex and fonts every operating system ships, and every image in a signature is a hosted file linked by address, never embedded. Then write a migration that creates one public storage bucket called signature-images, readable by anyone, limited to image types and 5 MB per file, and show me the SQL before running it.

   Write the export rules down now. A browser preview will happily use flex and inline SVG, and both look perfect right up to the moment somebody opens the message in Outlook.

2. 02

   Build the form and the live preview

   The screen you will live in. Five steps in a sidebar and a preview beside them inside a mock inbox, redrawn on every keystroke, with rows you can drag into a new order.

   PromptBuild the form and the previewCopy

   Build a single page with two tabs, Signature Generator and QR Code Generator, and start with the first. Put a five-step sidebar on the left (Details, Images, Social, Template, Design) that I can move through in any order, and a live preview on the right inside a mock inbox with a To line, a Subject line and a short confidentiality footer, so the signature sits where it will actually appear. Details holds full name, job title, company, email, phone, website, an optional address, a QR code address with a show toggle, and custom fields I can add and remove. Social holds LinkedIn, X, Instagram, Facebook, YouTube and GitHub. Redraw the preview on every keystroke, let me drag the rows of the signature into a new order in the preview, and add a Done Editing view that shows the finished signature with Copy HTML, Download PNG and Delete Draft buttons under it. Keep every field optional and make sure an empty field leaves no blank line behind.

   Type a name and nothing else, then a name with every field filled. The preview has to look deliberate in both states, and the rows a reader drags have to keep their order when the layout changes later.

3. 03

   Add the six layouts and the design step

   The same details six ways, plus eight fonts every computer already has and eight accent colours. Every layout has to survive a missing photo and a missing phone.

   PromptBuild the layouts and the design stepCopy

   Add six layouts to the Template step, each with a small preview card: Modern (name, accented title, contact lines, icons and photo in a row), Classic (a serif face with a rule above the company), Minimal (a single line with dots between the items), Professional (a photo or initials in a circle beside the details), Creative (a coloured bar down the left edge) and Compact (everything on two short lines). Switching layout keeps everything typed. In the Design step, offer eight fonts that ship with every operating system (Arial, Helvetica, Georgia, Times New Roman, Verdana, Tahoma, Trebuchet MS and Courier New) and eight accent colours applied to links and the job title, with a click on the chosen colour clearing it back to the default. Make every layout handle a missing photo, a missing phone and a long job title without collapsing, and show me all six with only a name filled in.

   Ask for the six cards with only a name filled in on purpose. A layout that looks right with every field present and falls apart with two is the version a new hire will produce first.

4. 04

   Host the images and add the QR tab

   Photos and QR images uploaded to your public bucket and linked by address, because a mail client shows only an image it can fetch. Then the second tab, which makes a code from any address.

   PromptAdd uploads and the QR generatorCopy

   In the Images step, add a photo or logo upload that checks the file is an image under 5 MB, uploads it to the signature-images bucket under a random file name, and puts the public address into the signature, with a preview of the image and a remove button. When the QR toggle in Details is on, draw a QR code of the address in the preview, and when the signature is exported, draw the same code as a PNG, upload it to the same bucket and link it by address, because a mail client will not show an inline data image. Then build the QR Code Generator tab: one address field, a live code drawn at the highest error-correction level with a quiet margin, https:// added if I left the prefix off, and a Download button that produces a 400-pixel PNG, falling back to SVG if the browser cannot rasterise it. Encode the address exactly as typed and add no redirect or tracking.

   Upload a 6 MB photo and a text file on purpose. Both have to be refused politely, by the app and by the bucket rule behind it, and the refusal by the bucket is the one that matters when somebody bypasses the screen.

5. 05

   Build the export, then test it in a real inbox

   What the product actually is. Copy HTML with every style inline, hosted icon images and table layouts, and Download PNG rendered from the preview at double resolution. Then a message to yourself from a phone.

   PromptBuild Copy HTML and Download PNGCopy

   Build the export. Copy HTML generates the signature for the current layout as HTML with every colour, font, size and spacing written as an inline style on its element, laid out with tables rather than flex or grid, using only the eight system fonts, with the photo, the QR and each social icon as a hosted image linked by address and carrying alt text, no inline SVG anywhere, and nothing wider than 600 pixels. Store the six social icons as small PNGs in the bucket once and link them. Put the result on the clipboard and confirm it with a toast. Download PNG renders the preview to an image at double resolution with a white background, waits for every hosted image to load first, and downloads it as email-signature.png. Then walk me through pasting the HTML into Gmail, Apple Mail and Outlook signature settings, and list what each client is known to strip so I can check the result against it.

   Send yourself a message from a phone and open it in a second client. The preview is not the test. A signature with a hole where the icons were is the kind of bug that is invisible to the person who built it.

6. 06
   Destination

   Decide about sign-in, lock the bucket, then use it as a stranger and ship

   Accounts and saved signatures are optional and the bucket rule follows the decision. Then the check nobody skips twice: open the app as a stranger and try to upload, and check the photo still loads a week later.

   PromptAdd sign-in if wanted, harden, test, and deployCopy

   Two paths, and I will pick one. If I want accounts: add Supabase Auth with email and password, a profiles table filled by a trigger on sign-up, a signatures table that saves the whole form as a row per person, a My signatures list to reload one, and per-user upload rules so a signed-in person can write only under their own folder in the bucket while everyone can still read. If I do not: keep uploads open to anyone but scoped to the bucket, images only and 5 MB, and give me the one setting on my host that puts a password in front of the whole app. Either way, then run the app and walk me through it as a stranger: open the address in a private window, try to upload a text file and a 6 MB image, copy a signature, paste it into a mail client and send it to a phone. Finally, tell me which storage plan keeps the bucket awake when nobody has opened the builder for a week, and set up the deploy to my host.

Review the access rules (row-level security policies) on every table. For each one, tell me in simple terms who can view, add, edit, and delete records, confirm that people can only reach their own data while the right roles can reach more, and flag anything left open that shouldn’t be.

One rule outranks everything above it: the only key in the shipped app is the publishable one, and it is designed to be seen. The moment you add a server-side function for an AI provider, that provider key lives in the function’s secrets and never in the app or a repository. If it ever leaks, assume it was used and issue a new one the same day.

Two questions decide this, and neither is about speed. Who should be able to open the builder, because as shipped anyone who can reach the address can upload an image to your bucket, so a company-only tool belongs behind a login page or a host that can put a password in front of it. And does a refresh on the editor still show the editor, which is one routing rule on each host, with Vercel’s already in the template. Recipients never touch any of this: they load two images from your bucket and nothing else.

Create one server-side function called ai that holds my AI provider key in its secrets and never returns it. It accepts a task name and a payload, calls a current model on my provider’s price list, and returns the result. Before contacting the provider it writes a row to an ai_calls table (task, model, tokens in and out, a cost estimate, success or failure) and checks the calls so far today against a limit I can change without a deploy, and answers with a friendly “that is enough for today” instead of an error when it is reached. The limit and the cost are never accepted from the browser. Finish with a small usage panel in the app that shows calls and estimated spend this month.

Add a “Paste your details” box above the Details step. Send the pasted text to the ai function and ask for the form fields it can find (full name, job title, company, email, phone, website, address, and social profile links by network), each with a confidence. Fill the form with the results, highlight anything the model was unsure about for me to confirm, and never overwrite a field I have already typed unless I ask.

When a logo or photo is uploaded, add a “Suggest a design” button that sends the image to the ai function with the list of the eight fonts and eight accent colours this app offers and asks for the closest pairing and one sentence of reasoning. Show the suggestion as a preview I can apply or dismiss, and never change the design without my click.

Add a “Check compatibility” action beside Copy HTML. Send the generated HTML to the ai function with a checklist of what Gmail, Outlook for Windows, Outlook.com, Apple Mail and Yahoo Mail do not render (inline SVG, flex and grid layout, web fonts, background images, images without alt text, anything wider than 600 pixels) and ask for a plain-language list of what will break where and how to fix each one. Show the list in a panel, and where a fix is mechanical, offer a button that applies it and regenerates the HTML.

Add a “Team” tab that accepts a pasted spreadsheet or CSV of people, sends the header row and three sample rows to the ai function to map the columns onto the signature fields, shows me the mapping to confirm, then generates one signature per row using the current layout and design, with each person’s photo left as a placeholder they can replace. Offer the result as a zip of HTML files plus a PNG each, and log one ai call for the mapping only, since generating the signatures needs no model.

Each prompt above picks the model that fits the job. As a rule of thumb, that is Haiku for high volume, Sonnet for everyday writing, and Opus for deeper reasoning. Model names move faster than this page does, so check the current list in the Claude docs (linked in the references below) before you build. Send every one of these prompts through that same ai function, so one key and one set of rules governs all of them.