WEBVTT 00:00:00.000 --> 00:00:18.455 I've always wanted my brand to have a strong visual presence when anyone comes across my content or my website or my products. You know, like the vibe that you get when you walk through the storefront of a shop in your neighborhood. But my writing and my videos can only do so much to set that tone and so I've always tried to create strong visuals to complete the experience. 00:00:18.695 --> 00:00:28.295 The problem is I'm not an illustrator and I don't need just one great image. I need dozens and I want them all to follow the same visual aesthetic for every page, 00:00:28.455 --> 00:00:44.350 every piece of content that I publish. Well, it's 2026 now, so you would think that AI image generation would make this easy. And the models have gotten really good at creating one off images. But what I need is a repeatable system. Something that can maintain my brand aesthetic 00:00:44.385 --> 00:01:05.000 without recrafting these complex prompts every single time I need to generate a visual. So I spent the past week and some late nights trying to solve this. I created this complex automation workflow using n eight n. You know, nodes connected to nodes, API calls, conditional logic everywhere. And when I finally got it all hooked up, the output was 00:01:05.320 --> 00:01:06.200 garbage. 00:01:06.360 --> 00:01:25.595 I scrapped the whole thing, that whole week of work, gone. But then, I rebuilt it as a Claude code skill and it only took thirty minutes. And I didn't just rebuild it, I made it better. Higher quality output and it's way easier to maintain. So today, I'll tell you or I'll show you the story of how I over engineered what seems like a simple problem 00:01:25.970 --> 00:01:34.130 and it's a reminder that Claude code skills might be the most underrated feature in turning AI into repeatable business workflows. 00:01:34.130 --> 00:01:49.735 And hey, if you're new to the channel, I'm Brian Castle and I help professional builders stay ahead of the curve with AI. And every Friday, I send my builder briefing. That's a free five minute read where I give you my take on what's actually working right now. You can get yours by going to buildermethods.com. 00:01:49.815 --> 00:01:53.095 By the way, if you're serious about adopting Claude code here in 2026, 00:01:53.480 --> 00:02:13.485 my new course build with Claude code is available now for Builder Methods Pro members. Alright. Now, let me show you what happened. Okay. So I'll start by showing you the final output that I'm actually using now here on my Builder Methods site. So this is you know the home page and I've got this visual of the computer and the coffee here on the desk and let's see if I look at builder methods pro, 00:02:13.565 --> 00:02:18.765 know, now like the hero section has a similar vibe, you know, like a professional builders studio, 00:02:19.110 --> 00:02:31.430 The desk, we've got the chair, the the plant in the background. If I take a look at the new build with Claude code course page, this too has, you know, some visuals, a different plant there. And then as I scroll down, 00:02:31.750 --> 00:02:32.790 know, we've got additional 00:02:33.245 --> 00:02:34.045 illustrations 00:02:34.045 --> 00:02:44.605 and objects that help to support or offer like metaphors or visuals that go along with the content that I'm showing on the page. 00:02:44.925 --> 00:02:46.445 Each of these illustrations 00:02:46.820 --> 00:02:49.140 follows a very very similar 00:02:49.620 --> 00:02:51.220 illustration style. 00:02:51.220 --> 00:02:52.900 They all have a very consistent 00:02:53.140 --> 00:02:58.580 level of detail, the use of color. It's all the same, you know, and and it has the same 00:02:58.900 --> 00:03:16.985 look and feel. It's also feels like they're all pulled from the same visual world. And you know, it took me a really long time to develop and land on the exact style that I want and then how we can actually like describe the style and sort of codify it into a a brand visual guideline. 00:03:17.330 --> 00:03:47.125 So what I'm gonna show you here today is the entire process that I went through to get to the final output that got me here. Right? So I'll show you the, you know, multiple days of conversations that I had with Claude just to develop the visual brand, the visual world, the guidelines. I'll show you some of the early prototypes that I that I went through with this stuff. I'll show you how I went about finding inspiration on Dribbble. And then we will dig into the the highly complex 00:03:47.330 --> 00:03:49.170 n eight n workflow 00:03:49.330 --> 00:03:52.930 that I put together and I'll show you my thinking behind the systems 00:03:53.090 --> 00:04:08.685 on all of this and how I intended for it to work. Most of it actually did work and I'll show you how I went about assembling something this complex in in n eight n and I'm not even an n a typical n eight n user. You know, it interacts with the Slack account. 00:04:08.765 --> 00:04:27.200 Uh, but then ultimately, you know, I landed on building it out as a Claude code skill and I'll show you that as well. I'll walk through all of those pieces and sort of the creative decision making process that I went through along the way to arrive at this. Now, wouldn't make sense for you to just lift the entire system that I created here because it is very specific 00:04:27.615 --> 00:04:49.180 to my brand and and my guidelines. I hope that you'll be able to take away some of the ideas that went into the systems design and if you're doing any sort of like brand visual exercise, maybe some of my process that went into that could help as well. Now before I get into, you know, like the technical workflow or the Claude code skill, I do want to emphasize how much time I actually spent 00:04:49.260 --> 00:04:51.580 just creating the guidelines 00:04:51.580 --> 00:04:55.580 for for for what, you know, landed me on these final visuals. 00:04:56.055 --> 00:05:05.975 I did that using a basic conversations in my Claude account. This one here is extremely long. You could see how long it is. I actually put it inside of a project 00:05:06.215 --> 00:05:08.455 called builder method. So all of my projects, 00:05:09.020 --> 00:05:24.915 all my creative writing or planning or stuff that I do for the builder methods business and brand, I do that inside of the builder methods project in my cloud account so that it has all the memory of of what the business is all about and it has the history of all of my decision making that went into it. 00:05:25.315 --> 00:05:27.555 So my very first prompt 00:05:27.795 --> 00:05:36.835 was this, right? You know, I want to develop a visual brand identity for builder methods. I want to publish a lot of content including articles, workshops, courses 00:05:37.300 --> 00:05:44.180 and I want visuals. That was like the rough concept that I had in my mind, right, of of I just want it all really well connected. 00:05:44.340 --> 00:06:30.525 So then I just went through a really long back and forth. This is Claude being a thought partner for me. First I'm just saying like how should we even go about starting this whole process? That was my very first question to Claude. Right? And then we just sort of like engaged in this back and forth where I'm asking Claude to suggest some ideas and then I'm giving my reaction to those like I like this, I don't like that. It asked me questions for, you know, what what I like or and and how how things fit together. And you know, before we even get into the visual aesthetic part, this first one is really just about defining the brand, who I speak to like on my YouTube channel and and who I create things for, who I want to resonate with, who who what I'm all about. Ultimately, we're what we're creating is a visual 00:06:30.765 --> 00:06:32.285 identity system 00:06:32.770 --> 00:06:51.085 and we're sort of like building a a world. We're we're telling a story if if you will, know, and we and we sort of landed on this concept of a day in the life of a builder. Right? And sort of defining some constant things that you would see in this world like the home studio, the notebook, the mug. Um, and ultimately, 00:06:51.325 --> 00:07:00.230 these should show up as little pictures that that appear on the pages or on a thumbnail or or on a workshop. Let's see. These three, 00:07:00.470 --> 00:07:14.405 the main artifacts that came out of of this part of the process. Right? The first one that I want to highlight is kind of the builder methods visual world. So I I like this as a very first artifact to try to get to. We're not describing 00:07:14.405 --> 00:07:29.250 how things look. What we're defining here is like the subject matter. What the types of objects or scenes that you might see in this in this world. So that's the world definition and you know, just to show you sort of like the level of detail that that this goes into. 00:07:29.410 --> 00:07:33.730 Okay. So that's the the visual world. You know, an another key part of this system 00:07:34.130 --> 00:07:34.850 is 00:07:35.010 --> 00:07:36.290 the process 00:07:36.370 --> 00:07:38.290 by which we decide 00:07:38.770 --> 00:07:42.610 what to actually illustrate. Right? So for each little piece of content, 00:07:43.075 --> 00:07:49.235 I not only want to have the AI generate the actual image but I also don't want to be the one responsible 00:07:49.235 --> 00:07:50.675 for dictating, 00:07:50.755 --> 00:07:55.715 okay, we definitely need a mug sitting on a desk next to a pair of headphones. 00:07:55.795 --> 00:08:09.610 Like, that's a lot of mental cycles that a, I don't want to spend the time doing that and b, I don't necessarily come up with the most creative ideas. So then we we arrived at this artifact which is called idea to illustration 00:08:09.610 --> 00:08:12.865 mapping guide. Right? So we've already established 00:08:12.865 --> 00:08:23.105 the visual world and the concept that the day in the life of the builder but this is the guide to take the piece of content that I'm giving it or the landing page or wherever I need an illustration, 00:08:23.425 --> 00:08:52.065 analyze what that content is all about and the topic and who it's for and what I'm trying to say and then use this guide to decide or suggest or pitch concepts to me back to me on what we should convey in the illustration. What what should the actual object or the scene be. Right? So we've got like a literal like decision process for like what is the core idea? How do we choose subject matter from our visual world? How do we choose specific objects? 00:08:52.145 --> 00:08:59.620 And then some like example mapping. So like if I'm doing a thing about prompt engineering then maybe there's going be an image about chat interface. 00:08:59.700 --> 00:09:04.740 You know, I talk a lot about spec driven development. If the core concept is spec driven development 00:09:04.820 --> 00:09:15.095 then maybe the specific opt objects that we show are like an open notebook or or wire print with wire frames or notes or planning before building is the concept. 00:09:15.255 --> 00:09:22.295 So we need objects like a blueprint or an architectural drawing, you know, things like that. Okay. But then we come to the actual 00:09:22.535 --> 00:09:24.775 visual style. So this artifact 00:09:25.160 --> 00:09:26.840 is called illustration 00:09:26.840 --> 00:09:45.615 aesthetic guidelines and this sort of like locks in exactly how each illustration should actually end up looking. Now how do we come to this? And this this took the most time really. You know, I started this process by, you know, scrolling through Dribbble and getting some some ideas also through this through this long conversation. 00:09:45.935 --> 00:09:50.415 I started pasting in some images that I found on Dribbble, 00:09:50.415 --> 00:10:04.270 like things that I liked and then having Claude sort of send back to me like its description of of what these different styles are. So then I can use these descriptions that Claude helps me to to craft 00:10:04.350 --> 00:10:07.085 and I can use those to then sort of prototype 00:10:07.085 --> 00:10:30.140 what the actual AI generated illustrations could end up looking like for builder methods. So that's when I hopped into Google Gemini, you know, just the straight like Gemini chat product here. And so it gave me like some some options for me to to sort of consider and then I asked it to alright, let's run with this option and see what that looks like, you know, and then we started playing with different colors and different levels of detail. 00:10:30.380 --> 00:10:37.705 This one was kind of cool and different but then as we sort of move move along into the into the process we're just exploring 00:10:37.705 --> 00:10:44.505 and trying different styles on to see how I feel about them and the way that I'm I'm evaluating these 00:10:44.665 --> 00:10:51.990 is a like obviously do do I like it? Do I think that it fits the general feel? But also like is it a style 00:10:52.230 --> 00:10:58.230 that can expand out to many different images and you and be used in many different situations? 00:10:58.230 --> 00:10:59.030 Is it flexible? 00:10:59.375 --> 00:11:03.295 Another thing that I'm looking for is like is it distinctive? 00:11:03.295 --> 00:11:09.295 You know, does it look super AI generated? Does it look very typical to things that we see all over the Internet? 00:11:10.415 --> 00:11:12.015 Know, some of these were were interesting. 00:11:12.500 --> 00:11:35.115 Let's see if I move along. So this was another direction that I started to kind of like a little bit more like pixelated. The thickness of the lines, what we went through like different iterations like how thick and how consistent should the lines be. Just going deeper and deeper down the rabbit hole, you know. But ultimately, we we start to land on something that looks good. Now, by the way, I tried to see if I can get Google Gemini to generate a truly transparent 00:11:35.115 --> 00:11:50.060 image and I couldn't actually. So it it thinks that it's creating a transparent image here but it's not like the the checkerboard is actually in the image which is not helpful. So AI generation will generally just create you know flat PNG images. 00:11:50.220 --> 00:12:15.540 So that's the guidelines piece. So once I was happy with that, then I moved into the next phase which was to start to build this out as an n eight n automation. My goal with this was to have a Slack channel called illustrations and you can see these were like all of my tests where I could just put in a simple message like, hey, I need an illustration for a LinkedIn post about the morning coffee rituals. I was just doing these like test examples 00:12:15.780 --> 00:12:23.205 and then have the bot, you know, respond back to me and then pitch to me three illustration concepts 00:12:23.445 --> 00:12:34.470 and then I can reply back with a b or c and then it'll go ahead and and generate that. Behind the scenes this whole chat is powered by this n eight n automation. 00:12:34.790 --> 00:13:05.230 So my goal with this, number one, I wanna only be able to use Slack. I don't wanna have to like open up n eight n every time I want an illustration or anything like that. I just wanna be able to chat into into Slack and and then get some options back. I will sort of walk through how this all came together but I just want to tell you that like I am not an n eight n expert by any means. In fact, this was the first big project that I ever really worked on. How did I actually go about building this? You know, not being an N8N expert. 00:13:05.710 --> 00:13:10.990 Well, I used Claude, obviously. So this one no. This one is 00:13:11.390 --> 00:13:12.750 my conversation 00:13:12.750 --> 00:13:24.125 that I had with Claude and the way that I set it up was I just put this, you know, on the side and I put n eight n over here, you know. It looked like something like that. 00:13:24.445 --> 00:13:46.200 And and I would, you know, just be prompting and talking to Claude on the left side while I build out the thing the workflow on the right. So then we start to actually build out like node by node, you know, one node at a time, you know, for example, like if I just open up, let's say, this node which is a switch node, you know, I'm just I'm just pasting 00:13:46.365 --> 00:13:58.205 screenshots of what I see in in edit n into Claude and then it's it's telling me like, alright, fill fill out this configuration or we did that for every single node in this workflow. 00:13:58.810 --> 00:14:10.810 I'll walk through some of the logic for how we put this together. So we start with a webhook which comes from Slack. So when I when I initiate this with a message in the Slack channel, 00:14:11.050 --> 00:14:12.170 it sends this webhook. 00:14:12.665 --> 00:14:15.625 Then we load in all of those prompts and guidelines, 00:14:15.785 --> 00:14:32.230 we put them into some code variables and then this switch is sort of handling if it's like a brand new request then we're sort of processing that down here. If the request is already in process and now we're sort of like gathering information about what this illustration should be about, that interaction is happening up here. 00:14:32.710 --> 00:14:38.550 And this check says like, do we now have all the information that we have that we need? Is that complete? 00:14:38.950 --> 00:14:43.350 Then those feed into Okay. Now we are generating concepts. 00:14:43.885 --> 00:14:46.125 Meaning like in text giving me 00:14:46.685 --> 00:14:50.045 three concepts like it says here are three illustration concepts. 00:14:50.365 --> 00:15:06.800 That is happening here. So we have a prompt that says like how to generate a concept and then how to formulate your message, how to send it into Slack and then based on the selection a, b or c or if I ask it to like regenerate then it can sort of loop back and give me another round of concepts. 00:15:07.120 --> 00:15:12.000 But once I select the concept then we move into the actually create 00:15:11.695 --> 00:15:12.735 the image. 00:15:12.815 --> 00:15:16.735 Basically, I wanted to test out Google Gemini versus 00:15:17.135 --> 00:15:18.015 OpenAI's 00:15:18.015 --> 00:15:29.390 image generation. So those are like the two models that offer image generation. I wanted to have a split where I can I can just tweak this to say like I want Gemini for this one or I want OpenAI? 00:15:29.710 --> 00:15:37.285 I was also playing around with the idea of having it do multiple takes at the same time. So like generate basically 00:15:37.285 --> 00:15:40.405 giving it the same prompt and for the same illustration 00:15:40.485 --> 00:15:47.125 so that I can just choose like alright this version is a little bit better. This is the call to the to the actual model 00:15:47.285 --> 00:16:04.275 where we are like generating the image then it like sort of saves the image into a Google Drive folder then it sends me a message in Slack which looks like this. Now here is the link to view the image. Right? Now, let's see if I can view that one. Yeah. So here you go. So ultimately, 00:16:05.075 --> 00:16:11.795 when, you know, when it was all said and done, despite all of the all the effort that I that I put into this, 00:16:12.435 --> 00:16:19.610 I ended up with this and I tried it a few different times and, you know, this looks kind of cool but it is 00:16:19.930 --> 00:16:30.730 it's it's pretty far off from from what I actually want for my page here. Right? You know, it has way too much detail. It doesn't even follow the illustration 00:16:31.185 --> 00:16:44.920 guidelines at all in terms of like what it should be illustrating. Like, we were supposed to just make a picture of a mug on a table and I got a picture of an office with a with a weirdly shaded window. Right? So, you know, I thought incorrectly 00:16:45.000 --> 00:16:49.160 that I could build in the intelligence 00:16:49.400 --> 00:16:52.680 into this system. I thought I was doing that when I was loading 00:16:53.080 --> 00:16:55.320 when I was loading in all of these, 00:16:55.720 --> 00:17:02.515 you know, guidelines at the at the start of the system. And we do reference all this stuff in the prompts that we generate here. 00:17:02.995 --> 00:17:09.235 So, you know, I'm sure I'm sure one of the n8n wizards on on YouTube can probably figure out this problem. 00:17:09.635 --> 00:17:18.910 But I just, you know, yes, got it all technically to work like it it technically did deliver images into a Google Drive folder for me, um, but 00:17:19.150 --> 00:17:21.470 they were just way off from what I wanted, 00:17:21.470 --> 00:17:22.750 uh, which doesn't solve the problem. 00:17:23.505 --> 00:17:43.960 So that's when I gave up on this and yeah, I I thought I was done with this whole project until I came up with the idea of using a Claude code skill which duh, I should have done that from the very beginning. Now you're about to see me build this out as a Claude code skill, but first let me quickly explain what a skill actually is. Think of it as a self contained capability 00:17:43.960 --> 00:18:08.790 in a folder. So not just a prompt, but an entire mini system with its own files and templates and logic. And skills are super useful in application development, but in this case, the Claude code skill and Claude code itself is the actual tool for the job. I'm not actually building an app for this. Now, you might be wondering, how can I get Claude code to generate images when Claude doesn't offer an image generation model? 00:18:08.950 --> 00:18:17.670 Well, that's the beauty of a skill. I can build a simple script or Claude can build a simple script that uses Google's Gemini API or ImageGen 00:18:18.065 --> 00:18:19.505 or Nano Banana, 00:18:19.905 --> 00:18:21.505 whatever they're calling it this month. 00:18:21.985 --> 00:18:34.660 That's for the image generation piece. And then we can use Cloud Opus for the interaction and the prompting. Alright. Let me show you how I set this up. So as I said, this n eight n workflow turned out to be way over engineered and it just fundamentally didn't 00:18:34.820 --> 00:18:51.465 solve the problem that I was trying to solve. And I was pretty discouraged by that. I I really thought I wasted a lot a lot of time on this. But then I remembered about Claude code skills. And so here is the Claude conversation where I kicked off that process to try this out as a Claude code skill. 00:18:51.785 --> 00:19:05.680 So again, I started by giving it my guidelines that I had established in the first part of this project and then I gave it I would like to build a skill and then Claude read everything and Claude used its its own skill creator 00:19:05.840 --> 00:19:12.605 skill that's built into Claude to essentially build out the skill. Right? So, you know I course corrected it a few times 00:19:13.005 --> 00:19:18.125 then you know Claude suggested this structure for for what will go into the actual 00:19:18.365 --> 00:19:37.495 skill itself and it laid out some of the key decisions that it made and then it gave me the files to actually just download the skit the you know, like what what makes up the skill. I wanted to see if I could actually just run this in regular Claude but it turns out since we need since we do need to hit, you know, the, uh, API and I have to have like my my keys in there and everything, 00:19:37.815 --> 00:19:48.855 um, we end up using it only in Claude code. Okay. So here we are in the project and as you can see here, the project or the code base if you will is not even a code base. It's it's not an actual application. 00:19:49.450 --> 00:20:04.090 All it consists of is a Claude folder and inside that a skills folder and then and then I have one skill, the the brand illustrator skill that I had created, uh, with the help of Claude. I dropped that in and inside the brand illustrator 00:20:04.325 --> 00:20:10.725 skill, we have the skill m d and I'll I'll walk through this a little bit. Then it has these references 00:20:10.885 --> 00:20:17.525 to, you know, my visual world document, the visual style, some of the the prompts that will go into the system, 00:20:18.210 --> 00:20:25.330 that idea to illustration mapping system for it like how to choose what objects or what scenes to illustrate, 00:20:25.490 --> 00:20:29.650 and then sort of defining the brand colors here. Those are all the references 00:20:29.730 --> 00:20:34.155 in assets and I still actually need to build this out more. These are 00:20:34.715 --> 00:20:36.315 sample illustrations. 00:20:36.315 --> 00:20:40.955 Right? So this helps to train the model on how I want my illustrations 00:20:40.955 --> 00:20:47.035 to look and I I still intend to add more. I've been able to use the skill as is to achieve, 00:20:47.520 --> 00:20:59.920 you know the the illustrations the way that I want them. And then finally obviously like the most important part is the script and that is a Python script. I'm not even a developer in Python. I didn't write any of this. It was all written by Claude. 00:21:00.265 --> 00:21:05.865 This is what integrates with my API key which is in the the dot m file. 00:21:06.025 --> 00:21:07.385 You know, this 00:21:07.705 --> 00:21:08.505 generation 00:21:08.505 --> 00:21:09.225 script 00:21:09.465 --> 00:21:11.545 is pulling in all the references 00:21:11.705 --> 00:21:15.305 and it's assembling the prompt that goes out to the Gemini API. 00:21:15.620 --> 00:21:21.460 Okay. And then of course this the actual skill dot m d. This is like the core 00:21:21.780 --> 00:21:24.180 skill file that that makes it a skill. 00:21:24.500 --> 00:21:30.675 This is the thing that is essentially read by Claude Opus. I'm using Claude Opus 4.5 which is fantastic 00:21:30.675 --> 00:21:34.515 and this is sort of just going through like when we start it needs to 00:21:34.835 --> 00:21:39.715 create a project folder. Oh and then like this is the projects folder. So for every illustration 00:21:39.970 --> 00:21:43.650 this skill is instructed to create a new folder for each illustration 00:21:43.730 --> 00:21:46.690 and then you know save the the illustration takes 00:21:46.770 --> 00:21:53.490 inside that folder. Right? It needs to generate three concept options, wait for my choice, where to find the color system, 00:21:54.125 --> 00:21:57.965 how to reference all of the like the visual world, the aesthetic style, 00:21:58.365 --> 00:22:20.200 the prompts, the idea mapping, all of that is linked or referenced from the skill here. Like how to name the folder, you know, name it by date, sort of like the workflow for communicating with me and and yeah. So then ultimately it will it will go to work. So let's why don't we actually just test it out and I'll show you finally how how this works. Right? So I'm going to fire up 00:22:20.835 --> 00:22:24.275 And by the way, is brand new, uh, today or yesterday. 00:22:24.355 --> 00:22:26.835 This is version two point one point two 00:22:27.235 --> 00:22:34.115 and this is a an update that I've been waiting for. My previous video about Claude's skills when it first came out back in 2025, 00:22:34.630 --> 00:22:38.310 my main gripe was that we can't directly invoke. 00:22:38.470 --> 00:22:42.710 But now here in 2026, we can just do this, brand illustrator 00:22:42.710 --> 00:22:48.950 and just just go for that. And then I'll say something like, I'm creating a video all about 00:22:49.195 --> 00:22:52.395 how to develop a systems mindset. 00:22:52.715 --> 00:22:56.235 I need a hero image to go with the accompanying 00:22:56.315 --> 00:22:59.835 blog post. So brand illustrator skill is running 00:23:00.155 --> 00:23:14.390 and now it's going to gather the the information that it needs from me. Yeah. Let's go with the red. Then it's asking me about the dimensions and it recommends this one and that works. Okay. So it has everything that it needs. So it went ahead and it created 00:23:14.630 --> 00:23:34.140 a new folder in my project and that's this one. Okay. So now it's presenting to me three concepts. So again, I didn't need to think through like what are some good concepts for this particular blog post. It's given me these ideas and I can choose between them. Let's see. A workflow notebook, the blueprint stack, 00:23:34.140 --> 00:23:35.820 building blocks in sequence. 00:23:35.900 --> 00:23:42.700 I think the blueprint stack sounds kind of cool. Let's do that. So it says let me read the prompt reference to craft the best prompt. 00:23:43.155 --> 00:23:52.195 Alright. So now it it took everything that we just discussed and it put that into a little markdown file. So now it's running that Python script which hits Google Gemini's 00:23:52.195 --> 00:23:54.115 API to to generate 00:23:54.515 --> 00:23:56.995 the image. I think we're using the the image gen 00:23:57.540 --> 00:24:02.340 API which I mean they just keep renaming these things. It's it's kind of crazy. 00:24:02.820 --> 00:24:15.215 Alright. So we have v one. Let's take a look. And okay. So you know as you can see it it follows my guideline. You know this looks like it's pretty similar or consistent at least with the aesthetic 00:24:15.295 --> 00:24:17.615 of the type of image that could appear 00:24:17.855 --> 00:24:22.175 on my site like this. Right? It again like I didn't have to recreate 00:24:22.335 --> 00:24:30.830 all the nuanced detail for exactly how I want these lines to look. Now in practice I end up going back and and having it regenerate, 00:24:30.830 --> 00:24:44.265 you know, a couple different takes because I get a little bit more creative or I get very picky about how I want different objects and and things to look. So I can just show you like some of the previous ones like this one I went through, you know, five different 00:24:44.345 --> 00:24:45.145 attempts 00:24:45.145 --> 00:24:47.465 to just get it just right, 00:24:47.865 --> 00:24:52.745 you know. Let's see. This one this one actually has like two different images. 00:24:53.145 --> 00:25:13.565 One for the left side and then one for the right side. So you could see like like this one was like almost perfect but I didn't like how this how the shade was covering up the chair. So let's see. I think like the next one yeah. We sort of fixed the chair issue but the the rug is a little out of whack. So you know, just like little details that like that I would just go through and and re prompt. 00:25:14.045 --> 00:25:35.160 But that's essentially how I'm doing this. You know, then I'll bring it into Photoshop and make it transparent and and, you know, I'm even inverting it so that I can get a like a light and a dark mode working on the site. So that's kind of cool too. So what did I learn here? Well, the NA to N workflow technically worked. But by breaking everything into discrete nodes and rigid logic, 00:25:35.320 --> 00:25:38.760 I stripped away the intelligence that makes AI actually useful. 00:25:39.295 --> 00:25:45.695 The model couldn't think. It could only execute my predefined steps. But when I moved to the Claude code skill, 00:25:45.775 --> 00:25:48.895 the model could actually reason about my brand guidelines. 00:25:48.895 --> 00:26:02.170 It could understand my intent and deliver what I need while still following my process and nail the consistency that I'm going for. Now, what's interesting is we usually think of Claude code as a tool for building software, 00:26:02.410 --> 00:26:11.555 but what I built here is really a workflow. It's an interface for a business process that I'll use over and over. So Claude code itself became the application. 00:26:11.795 --> 00:26:21.155 And I took the same approach when I created design OS. That's a free open source system that turns Claude code into a complete product design workflow. 00:26:21.155 --> 00:26:29.675 So after you hit subscribe here on the channel, over there and I'll show you my complete workflow for how I use Claude code to power Design OS. Let's keep building.