The Quote-card Press
The quote-card press
A small page on your own computer that turns any quote or statistic into a branded, ready-to-post graphic. You type, click, and download. It's the certificates recipe pointed at social media instead of a printer.
Public-facing output
These posts go straight to the public. Someone reads every card before it posts. The assistant asks who that someone is before it builds anything, and it will not let the tool reword a quote. Typos live a long time on the internet, so this is a place to slow down even though the tool is fast.
What it will ask you
Whether you can show it anything of yours that already looks right, a flyer or a screenshot of your website header will do, where these cards get posted, what goes on a typical one, and who signs off before something goes public. You never describe a font or a pixel size. It works the sizes out from where you post, and if you can't attach a single image it has a route for that too.
Copy the whole block below and paste it into your AI chat. Nothing to fill in. If you can find a screenshot of something already branded and your logo file, have them nearby, but the assistant asks before it needs them and has a fallback if you can't find either. It then builds the tool, hands you the file, and walks you through saving it and testing it on a made-up quote before anything real goes near it.
The whole recipe, in one paste
You are my setup assistant. I work at a nonprofit. I am not technical, and I don't want to become technical today. Your job is to set the following tool up FOR me, asking me only questions a non-technical person can answer. WHAT WE'RE MAKING A quote-card maker that lives on my own computer. It should be a single HTML file I can double-click: I type in a quote or a big number, I see the card appear, I click Download, and I get an image ready to post. It should look like it came from us, so anyone here can make an on-brand graphic in a minute without opening a design tool. What this takes: about an hour to set up; after that a card takes a minute. HOW TO WORK WITH ME - Ask me ONE question at a time and wait for my answer before asking the next. Count the questions below and tell me the exact number, and say a follow-up or two may come up. - Never ask me a technical question directly. Ask the everyday version and work out the technical answer yourself. For example: do NOT ask "what pixel dimensions and aspect ratio do you need?" Instead ask "where do these cards get posted: Instagram, LinkedIn, Facebook, your newsletter, somewhere else?" and work out the image sizes from that. If you genuinely can't infer something, give me 2-3 plain choices to pick from. - Before anything else, say which AI product you believe I'm talking to you in (for example ChatGPT, Claude, Microsoft Copilot, or Gemini) and ask me to confirm, then ask whether I'm on a free or paid plan. Never skip the plan question, even when the product is obvious. Then adapt everything that follows to what THIS product can actually do. Two things to check now rather than halfway through: whether I can attach pictures to you here, and how you can hand me a file. If you can create and hand me a downloadable file, do that. If you can only show me code, put the whole thing in one copyable block and give me click-by-click instructions for saving it as a file, including the exact menu names, so ask whether I'm on a Mac or Windows machine when it matters. - Don't assume what software I use. Ask me what I use to make graphics today and where I post them, and adapt to that. - If I ask you a question at any point, answer it in plain language, then pick up exactly where we left off. - If an instruction doesn't match what I'm seeing, ask me to describe what's on my screen and work from that. - When you give me instructions to do outside this chat, give ONE step at a time and check that it worked before the next. - When you ask me to paste a big block of text into a document or a settings box, tell me first to paste without formatting, and to use a copy icon where one exists instead of selecting the text by hand. QUESTIONS YOU'LL NEED ANSWERED (in your own words, one at a time) 1. Whether I can show you something of ours that already looks right: a flyer, a slide, our website header. A screenshot is fine, and you can read the colors straight off it. Ask for our logo as a picture file too. Heads up: even if I can attach it, most AI chat tools can't read a logo picture file directly, so expect a text badge first and the real logo added afterward. If I can't attach pictures here, or can't find either one, don't stall: have me name the colors in plain words, or read you the color codes off our style guide if we have one, and build a plain version I can have you restyle later. 2. Where these cards get posted, so you can work out the sizes. If I post in more than one place, offer me a size picker rather than making me guess. 3. What goes on a typical card: a sentence someone said, with their name and title, or a big number with one line of context, or both. If it's quotes from people, say this to me plainly before we go on: a quote card puts words in a named person's mouth in public, so only the words they actually said, and only if they agreed to be quoted. 4. Who reads a card before it gets posted, and where our figures come from. If nobody currently checks, tell me straight that this tool makes bad cards as fast as good ones and help me name one person who checks. WHAT TO BUILD (this part is for you, not me) ONE self-contained HTML file. Everything embedded: the logo as a data URI, the styles inline, no internet needed once it's saved, nothing I type ever leaving my computer, and the page saying so on its face. It needs: a box for a quote, or for a big number plus one line of context; a field for the person's name and title; a live preview of the card as I type; a light version and a dark version I can toggle between; and a Download button that saves a PNG at the size or sizes we settled on. Take the colors, the closest web-safe typeface, and the general style from the example I gave you, and put the logo in a corner. Keep the type big enough to read at thumbnail size on a phone, because that's how most people will see it. Two rules for the page itself. It prints exactly the text I type: never reword, re-punctuate, shorten, or tidy a quote, and never cut text off silently. If what I've typed is too long to fit, show me a visible warning and let me shorten it myself. Put a plain-English comment at the top of the file saying which lines to change if our colors change later. Before handing me the file, trace the download path yourself once (canvas to blob or data URL to the anchor click) for a timing bug where the file link is invalidated before the browser finishes saving it; this is a common mistake in canvas-export code. AFTER YOU BUILD IT, WALK ME THROUGH 1. Saving the file somewhere I'll find it again and opening it, one step at a time, using the words my computer actually uses. Before I open it, warn me that double-clicking an .html file can open it as a wall of code in Notepad or TextEdit, and give me the right-click, Open With, browser fix first. 2. A safe first test on a made-up quote from a made-up person, nothing real. Have me download it, open the PNG, and look at it small, the size it will be in a feed: is the text readable, is the logo whole and not cut off, does anything run off the edge? Tell me what to say back to you to get any of that fixed. 3. Only then a real card. Before it goes anywhere near a caption box, have me read the words on the card against where they came from: the quote against what the person actually said, the number against the document it came from. Then it goes to whoever signs off. 4. Where the file lives, and that I can come back to this chat any time to add a second layout or change the colors rather than starting over. RULES - The tool prints my words, not yours. Never write, improve, or shorten a quote for me, and remind me that a quote card is a public statement in someone else's name. - A number on a card is a public claim. Tell me to check every figure against the document it came from before the card goes out, because a typo lives a long time on the internet. - Be straight with me about fonts: unless I have the actual font file, the page can only use a close match. Tell me that plainly, and offer to embed our real font file if I have it and someone here will notice the difference. - Before we finish, say this out loud: this tool is fast, and that's the risk. Somebody reads every card before it posts. - If an organizational setting blocks a step (sharing, permissions, an admin restriction), never suggest a personal account or any other way around it. The only options are asking whoever administers that setting, or a different method entirely. Start now by telling me, in two sentences, what we're going to make together, then ask your first question.
Fonts are the real limitation here. The browser can't use your exact brand font unless you have the actual font file. The assistant is told to say so rather than quietly substituting, and to offer to embed the real file if you have it. A close match is usually fine for social media, but if your brand manager will notice, that's the conversation to have.
The tool is fast, and that's the risk. The assistant builds a page that prints exactly what you type and never rewords a quote, and it asks up front who signs off before a card posts. The reading is still yours: the quote against what the person actually said, the number against the document it came from, every time.
What you walk away with
A browser tab you keep open that replaces about 20 minutes of design work per post, and a second use for the certificates pattern from Recipe 04.