All Field Notes
Field Notes#810:58

AI thumbnails: generate the art, not the layout

Dave separates generated key art from a fixed HTML/CSS layout so AI Operators thumbnails keep consistent typography, logos and branding. He shows transcript-led prompts and the agent reviewing its first attempt.

Watch on YouTube

Show notes

Field note

Dave walks through the reusable Hermes skill behind the AI Operators thumbnails. HTML and CSS fix the layout, typography, logo and other brand elements, while image generation supplies the episode-specific key art.

The episode transcript informs the image concept and prompt. Dave shows a literal-thread image that the agent rejected before producing a clearer contrast between one crowded chat and separate specialist chats.

What this covers

  • Keeping brand rules deterministic rather than regenerating the whole design.
  • Asking the model to write a detailed image prompt before generating the artwork.
  • Reviewing the artwork against the intended message.
  • Using the same hybrid approach for episode comics and PDF carousels.

Dave describes this as faster and easier than his earlier manual Canva workflow; it is his experience, not a universal performance guarantee.

Transcript
Dave: In my travels using AI, one of the things that impressed me most this week was this. What is that? Well, actually, it's not that, it's this, but this was a key part of getting there Welcome to Field Notes, the show where we share tips and tricks, just short little ideas, learnings, things we've been amazed by, things we've been impressed by, things that have helped us during our week here at AI Operators that we wanna share with you. Just little lessons learned. Maybe not necessarily the best practice for you, just ideas, things to get you thinking creatively, and just learning lessons around all of this magnificent AI things that we have. So what am I talking about? Why was I so impressed by this? This is, of course, the thumbnail for this week's show, and if you've been with us for some time watching the show, you'll have seen since we started, back way back when, we've changed our art style a little bit. We've changed the visual direction. We updated the logo. But we started with these thumbnails, which, you know, that was basically AI-generated out of ChatGPT that I then threw in Canva and put some labels across. So I wanted to be able to, you know, change the date, change the time, change the titles, but that was heavily, like, a static image with the three of us and the logo all built into one. I couldn't really do much with that. Uh, and then, you know, Richard joined, and we experimented with maybe doing some little, uh, little hero images on the side there, but this was all very manual. I had to go into Canva. I had to create all of these things. And so then I got really lazy and started going with the candid YouTube thumbnails, where it would just pick a frame out of the episode, and I was running with that a little while just to see whether that worked and got people's attention. Guess what? It didn't. So we continued that for some time, experimenting, until I got tired of it down here at around episode 29, episode 30, uh, and I wanted to do something different. And you'll see since then we've had this very consistent look and feel, and the amazing thing is this is easy and fast, and I don't have to do much work. Now, how am I doing that? I'm doing that through Hermes. So in my Hermes setup, I have a profile set up that helps me manage the podcast, and here you can see Edit Skill, AI Operators Thumbnail Systems. And this is something that Hermes wrote for me. I told what I wanted. We iterated back and forth, and it developed this skill for reusable AI Operators YouTube thumbnail systems. Lots of text here. We're not gonna read through all this, um, but this is how I get these consistent look and feel on the thumbnails. Okay, so you are all wondering, how did I get back to that wall of text? Um, well, when I was generating this, how do I get it so consistent? How do I make sure with image generation that we get the same colors, the same text, uh, the same font, the logo in the right place every week? How am I doing that? Because the first attempt at trying to standardize and get these things automated and created for me didn't go how I wanted. This was the first one. It's kind of on brand, but where's the logo? Where's... It just didn't feel like AI Operators. I didn't like it. Uh, and that's when I realized, hey, if I'm just gonna use image generation every week, I'm not gonna get the result I want. Now, often you'll hear us talk about with AI deterministic versus probabilistic. If you just go pure image generation, you're 100% in probabilistic genie land. You're just rubbing that lamp, you're pulling the slot machine, and just waiting to see what gets spat out. I didn't want that. I wanted a consistent look and feel, and I know for many of you with your brands and organizations, consistency is critical. That's why applications like Canva invest so much in having brand packs and being able to apply brand and styling to your assets, because having that corporate, that, that, that company vibe, whatever it is, whether it's corporate or casual, you have your branding, you want that to be consistent. And here at AI Operators, we are no different. Uh, so the difference between this one and this one is that this one is an image. See? Copy image, save image. This one is actually HTML. So what I did is I got it to create a HTML. See, machine, speed, brakes, H1s, all the CSS, it's all in there. I got it to build this as a HTML template. So all the static stuff, all the stuff that I really care about, like fonts, text, layout of these things, is all configurable, and it's all defined, and it's not random, and it's not probabilistic. There's a template that it builds and applies. The thing that it has to do is come up with the caption title based on the transcript and generate the image, and that's where this comes in. This is the image for this week's episode. So, uh, this is the final image. This is the final thumbnail we had, "One Bot or a Team?", where we discussed the idea with things like the OpenAI dots. You're trying to cram all these different conversation topics into a single chat versus having broken-out chats. And so I thought this image was fantastic, the way it's got the big text box with the pencil and the cog and the, the megaphone all jammed into one box versus breaking it out into clean three separate chats. Awesome. I didn't actually come up with that idea. The agents worked that out based on the conversation, based on the transcripts, based on that skill and the way it's decided and been defined, what sort of images fit the podcast and what it should put in that key art, and even double-checks itself. So the first thing it gen- generated was this, where it had this concept of, you know, three different streams, different visual look to the stream, all coming in together, winding together into this sort of big knotted thing into the machine. I get where it was going, but obviously that's not quite what we were talking about with multiple chats, different threads. It was very more on the, the, the literal thread concept. And guess what? The system, the skill reviewed that, automatically rejected it. I never saw that until just now prepping for this podcast. I was like, "Ah, I'd used the V2 image. What was the V1 image? Ah, very interesting." So we ended up with the much better, much more appropriate chat boxes because the system itself reviewed its own work, went back and had another run. But what I love about this, and this is something I've talked about before in different, different places, is prompt inception, where if you wanna draw a picture, don't say, "Draw me a picture." Say, "Write me the prompt to draw a picture like this," which is pretty much what's happened here. The skill has gone through, looked at the transcript, decided what it wanted. Now it's model on model, which is a bit better than human on model when it comes to describing what you want, and that's why you get model on model. It's why you say, "Give me the prompt to dr- to draw this picture," versus just, "Draw this picture." Because to get this picture with this workbench, with the lighting, with the different chat boxes- at that level of detail to make sure that the right content is actually split across them, that's incredible, and that's why it's this giant wall of text. "Create striking text-free editorial key art for the AI podcast debating one AI assistant versus a team of specialists." Gives it this context and then says, yeah, "Make a, a chunky chrome and graphite sculpture shaped unmistakably like a chat speech bubble with a pointed tail. Its face is an open, deep, rectangular inbox cavity, not a screen. A pencil, a silver tooth gear, a compact megaphone, and pile of blank project cards all try to squeeze inside this one chat bubble." And it goes on and on. And then it goes, okay, "One mixed workload versus three clear specialist context shown as side-by-side alternatives, not a pipeline from one into three. The pencil, the gear, the megaphone are simple, large, readable." Just the level of detail here is just brilliant. It says, "Show the cinematic front three-quarter view of a dark workshop table at roughly 61% of the canvas width, one large..." It's just that level of detail in order to generate this key image, and then the consistency comes because the template takes that one image and puts it there on the right edge with all of the HTML layout text. And that, that is why the channel now has this consistent look and feel, and it's faster and easier and better than anything I was doing manually in Canva. So Slightly different one this week, but if you are working with brand systems, if you are trying to get consistency in output and maybe you're struggling and you need help, reach out. Love to have a chat to you about how we can help you streamline some of your workflows, get some of your brand consistency into your asset generation, because there are ways to do it and there are ways to not do it. Uh, and like I'm using Hermes, but this sort of skill layout setup could work in Claude Code, could work in OpenCode, could work in Codex. Doesn't really matter. The important part is to actually establish the rules, define what good looks like, uh, and then get the agent to do that work for you in, uh, the, the whatever workflow pattern that fits for you for doing this. And so this was something that wowed me when I looked at the detail of that image prompt, I was like, "Whoa, that's wild." So good. Uh, and that's how we are now getting consistent look and feel. Anyway, this has been Field Notes. This... If you like these kinda quick little snapshots into the world of AI operators and things that we're doing and things we're learning, like and subscribe. Drop a comment. How are you going? Do you get visual consistency when you get assets out? Is that something you strive for? Have you thought about actually getting these tools to do this sort of hybrid HTML and generative image layout? It's really, uh, it's a big unlock when you sort of go, "Let's lock in the things that we can lock in as like a HTML template, and then let's generate the things we need to generate." Same way we do the comics, generate the comics each week. If you follow us on LinkedIn, you'll see the, uh, episode comics. Great fun. Uh, I generate all them and then put them in a HTML wrapper to put all the borders and titles, and then output it as a PDF for the carousel format on LinkedIn. So again, it's that blending of which bit's generative, which bit is deterministic, and we want that consistency and it always to be laid out the same way. Lock that in. Don't rely on the image generator to get your layout perfect every single time. So like, subscribe, hit the bell icon, and we'll see you next time.