How to build an email signature generator with OpenAI Codex

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 learn.chatgpt.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 Codex runs the commands.

1. 01

   Write AGENTS.md before anything is scaffolded

   Codex loads AGENTS.md at the start of every task, so the three rules that matter most on this build (inline styles, tables and system fonts, hosted images) are loaded before any layout exists to break them.

   PromptSet up the projectCopy

   Start by writing an AGENTS.md at the project root: the stack is React 18, Vite, TypeScript, Tailwind and the Supabase JS client, and this project is an email signature and QR code builder. Fix the vocabulary (signature, layout, design, social links, QR code, export) and record three standing constraints: 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. You load that file automatically at the start of every later task. Then scaffold the project: a typed Supabase client under src/lib reading VITE_SUPABASE_URL and the publishable key (the sb_publishable_… key that replaced the older anon key) from .env, with .env confirmed present in .gitignore, and a migration that creates one public storage bucket called signature-images, readable by anyone, limited to image types and 5 MB per file. Show me the SQL before it runs.

   The three constraints are the ones worth writing down. Flex, inline SVG and a font from Google are all reasonable-sounding choices for a preview, and each one is a hole in the signature once Outlook has had it.

2. 02

   Give the form its own task, and the preview the next one

   The form feeds the preview and the preview is where you will live. Keep them as two tasks so each change is small enough to read.

   PromptBuild the five-step formCopy

   Build a single page with two tabs, Signature Generator and QR Code Generator, and in the first put a five-step sidebar (Details, Images, Social, Template, Design) that I can move through in any order. 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. Leave Images, Template and Design as empty steps for now. Walk me through the component structure before you build it.

   PromptBuild the live previewCopy

   Add a live preview to the right of the sidebar inside a mock inbox with a To line, a Subject line and a short confidentiality footer, redrawn on every keystroke. Let me drag the rows of the signature into a new order in the preview. Add a Done Editing view that shows the finished signature with Copy HTML, Download PNG and Delete Draft buttons under it, with the buttons wired to placeholders for now. Keep every field optional and make sure an empty field leaves no blank line behind.

   Type a name and nothing else, then fill every field. Both states have to look deliberate, because a new hire produces the first one before the second.

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 (one line with dots between 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. Every layout must handle a missing photo, a missing phone and a long job title without collapsing. Show me all six cards with only a name filled in before you finish.

   Six cards with only a name is the test that matters here. It is also cheap to fix now and expensive to fix once the export depends on each layout.

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.

   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 and a remove button. When the QR toggle in Details is on, draw a QR code of the address in the preview, and on export 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 with an SVG fallback. Encode the address exactly as typed, with no redirect and no tracking.

   Try a 6 MB photo and a text file. Both must be refused twice, once by the screen and once by the bucket rule, and the second refusal is the one that holds when somebody skips the screen.

5. 05

   Build the export in its own task, then test it in a real inbox

   What the product actually is, and the task to read most carefully: every style inline, hosted icon images and table layouts, then a PNG rendered from the preview at double resolution.

   PromptBuild Copy HTML and Download PNGCopy

   Build the export in this task and nothing else. Copy HTML generates the signature for the current layout with every colour, font, size and spacing 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 with a toast. Download PNG renders the preview at double resolution on a white background, waits for every hosted image to load, and downloads email-signature.png. Show me the generated HTML for the Compact layout before you finish, and list what Gmail, Outlook for Windows and Apple Mail each strip so I can check against it.

   Asking to see the Compact HTML is worth the round trip. It is the layout most tempted into flex, and flex is what Outlook for Windows drops on the floor.

6. 06
   Destination

   Decide about sign-in, then hand the hardening and the stranger test to one last task

   Accounts and saved signatures are optional, and the bucket rule follows the decision. The stranger test and the deploy are self-contained enough to hand off, provided you read the change before it merges.

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

   Two paths, and I will say which. With accounts: Supabase Auth with email and password, a profiles table filled by a trigger on sign-up, a signatures table saving 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 writes only under their own folder in the bucket while everyone can still read. Without: keep uploads open but scoped to the bucket, images only and 5 MB, and tell me the one setting on my host that puts a password in front of the whole app. Then run the app and take it end to end 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, and fix whatever does not hold up. Finish by telling me which storage plan keeps the bucket awake when nobody opens the builder for a week, and setting 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 should pick whichever model tier fits the job: a fast, lower-cost model for high-volume work, and a stronger reasoning model for anything that weighs tradeoffs against each other. Codex’s model names change faster than this page does, so check OpenAI’s current model line-up (linked in the references below) before you build, rather than copying a name you saw once. Keep all of it behind that same ai function, so one key and one rule set covers every feature you add.