Automate Photoshop w/Codex & Claude Code

0:01Hey everyone. Uh here to share a quick demo of a personal project of mine called agent bridge for Photoshop. Uh agent bridge is a way for you to use uh your uh coding agent of choice whether that's codecs, cloud code, cursor, etc. uh to drive Photoshop uh in the creation editing of uh Photoshop documents or PSDs. Um so getting started with agent bridge. Uh we're here on the website which is agentbridge for photoshop.jaredvery.com and you can uh read through the quick start. Um there's basically just a few steps. So first uh you can install the skill uh which teaches your agent everything it needs to know about how to

0:46use agent bridge effectively. Uh and it does that through the two components that make up agent bridge. The first is the agent bridge CLI. Uh so there's a command line interface that exposes uh a number of operations that your agent can call um to do whatever it needs to do uh inside of Photoshop uh in that document to create or edit you know whatever it needs to. Um so you install that with npm uh and then you get that uh running. It also runs as a a demon which as those commands are called from your agent, it communicates with a plugin inside of

1:27Photoshop which is the second component. Uh the Photoshop plugin uh is also called agent bridge for Photoshop. It's available through the Creative Cloud desktop app. Uh so just go to the um stock and marketplace uh plugin section and search for that and you can get it installed inside of um Photoshop. Okay. Uh so uh there's a lot more to it.

1:48Uh all these docs go into the details. These are both useful for humans and for agents. Uh so we can you know take a look at this website as well. And there are instructions inside of the skill that direct it to do so when it needs detailed information about uh the CLI or any of the individual operations. Um but let's go a little bit further. Uh let's

2:10take a look at the PS agent uh CLI. Um so yeah so again this is you know what's going to run the demon that communicates to the plugin. Uh it's what your agent is going to be calling into. It typically does that with uh PS agent op calls. Uh so if we ask for help about ops which is something your agent might do. Uh it gets a list of all the various commands that are available to it. you know they're very straightforward in naming m and uh that's you know to be as transparent as possible to the agents so that they can make judgment calls on

2:44which of these might be useful to use. Uh and then if we add you know one of these commands. So let's say we want to look at the uh set adjustment layer operation. Uh if we ask for help on that uh we'll get the supported arguments uh other aliases for this command and an example payload that it should send if it wanted to use this operation. And so you can see you know maybe it's you know hue saturation adjustment and it it shows which of the individual arguments you would send for hue saturation and lightness. Uh so this is you know again uh mostly intended for the agents to be

3:25able to consume and understand how the tool works. Um it builds on philosophy uh around CLIs uh you know being easier for agents typically to employ versus things like MCP which can pollute your context. Uh there is an MCP layer to this as well which just is there for uh as much compatibility as possible with different types of agents in the way that they work. Um but this goes back to the philosophy of um uh Peter Steinberger has talked quite a bit about the creator of OpenClaw. uh you can read his blog posts that go into more detail about how CLIs are sort of the right choice uh to

4:06open up interfaces between your agents and other uh tools and services. Uh so that's where I got some of the inspiration for building this out. Okay, so now we have um Photoshop open. Uh you'll see in the plugins panel uh we do have uh a panel for agent bridge. Uh it is currently disconnected. So why don't we go and get the bridge up and running now. So we're just going to call PS agent bridge

4:35dan. Okay, that is now started. And if we come back in and connect the bridge, um we'll see that the bridge is connected. And we'll get some basic logging as we work here. Uh which is mostly for debugging purposes, but uh nice to see that everything is flowing through. Of course, you'll see that visually as well. Okay, so now we're over in Cloud Code. Uh we've already installed the skill. So if we look at the skills that are available, we do see this agent bridge for Photoshop skill. Uh so we're going to instruct Claude to use that skill when it's working here. Uh so let's uh I'm going to use Whisper Flow

5:15to dictate here uh much faster than me typing out all the instructions. I use this on a kind of daily basis to interact with uh cloud code and codecs. Okay. Hey, let's create a new design for a settings page inside of a web application. Uh on the left side of the page, we're going to have a sidebar with navigation. Uh where the settings page is going to be selected. And on the right side, we're going to have a list of users in a table. Um maybe for each user row we want to have an avatar, a name, their role, uh maybe some other uh details that you can think of, and then

6:00at the end of the row, uh edit and delete buttons uh to act on that user. Uh on the bottom of the page, uh let's also have an upsell banner to subscribe to uh our pro membership of whatever this product is. Um, let's make it look really nice and compelling. So, use uh some graphics you can pull from the web for placement. Maybe some sort of a a gradient or abstract uh sort of shape uh that can be used on the left side of this banner and then have it fade as it uh moves to the right. And on the right side, we can have all of our typography

6:39that describes the pro membership and a button to upgrade. Uh you can also include the price in there uh on or near the button. Uh this is all for a demo. So let's uh keep it uh pretty simple and quick. Um and at the end uh make sure that we save the PSD and let's also export a PNG file u

7:09of the whole canvas. Okay. Okay, so now Whisper Flow is pasted into Cloud Code. You'll see the full instructions that I just dictated. Now it's kind of interrogating the CLI to figure out uh one of the bridge is running. Uh it's looking at different operations that it think it thinks it's going to need. So you can see it's trying to figure out how to create shape layers, text layers. Uh it's pulling all

7:36the information from the CLI. uh and a lot of this design for you know sort of how the information was being passed back through the CLI help functions and arguments uh really came out of watching claude code try to use the tool in early versions and seeing that it was essentially you know running these commands with dig didn't exist yet to try to get help on different operations and get the list of operations so rather than try to teach it uh oftentimes the best approach is to just uh meet it where it already is. And uh yeah, so that's the way that we kind of architected some of the uh choices

8:18that we made. Uh you can see that uh Claude has already um created a new document, named it Acme Settings. It's laid out a sidebar, and now it's kind of populating that sidebar with some basic navigation. Um, it's making a lot of this up as it goes because I didn't describe every page that we need. But, um, you can see it did follow my instructions to have a settings link on the left side that's selected. On the right side, it's now created a header called user management with an add user button. Again, something I didn't request, but it's, you know, sort of in its training data

8:55seen enough of these pages to know what's common here. So um next it's moving on to our table of users. It's put in a nice uh drop shadow effect on that table uh given the header uh a header row with you know different names of each of the uh things that are going to appear in the rows. Um it's populated a first row seems to be following my instructions. Um, couple of the things that it chose to include here were email, the date it was last active, the status of that user. Um, it looks like the avatar is a simple uh circle placeholder uh which is varying in color

9:35as it builds out some more of these rows. Uh, so everything's looking great so far. Let's see if it will continue on and finish up the table here. Um, we can look over at Claude to see what it's lining up to do next. Uh, and you can see too, like as it's doing this, each of these operations it's building out as an individual JSON file. Um, so what's neat about this is you get not just the output uh the PSD that's eventually going to be created here, but if you wanted you could also preserve these JSON files which are going to define the operations. Um, and you know,

10:14in this example, we're building out a user management uh kind of UI page, but you could imagine lots of different reasons why you would want to automate uh activities inside of Photoshop with simple English language talking to Cloud Code. So, um, you know, maybe I want to take one design that I've created and have it export it out in, you know, a variety of different formats or, uh, create multiple sizes. You know, create

10:43a responsive version of an existing PSD. Um, so there's all sorts of uh different ways that you might use this beyond just uh kind of imagining a new design in the way that I'm doing right now. Um, okay. So that the table is finished up. It's moved on to the um banner that I requested for the upsell to the the pro membership. Um I do see that there's kind of a abstract shape on the left side which is bleeding out of the banner a little bit. Um so uh I don't know if

11:17it'll go back and clean that up. Sometimes it will. um you'll actually see how it's working. You know, this most recent uh command it called was to render uh out to PNG. So, it's basically taking a rendering of the full canvas and then pulling it into cloud code itself to see its own work, right? So,

11:37it has vision into what it's creating. Uh and it can, you know, try to figure out uh what shortcomings there are. So you can see it actually just went and fixed that issue that we had noticed around the shape not being clipped to the banner. Uh it looks like it's kind of going through a polish phase right now. So you saw it created kind of icon uh placement for all the individual navigation in the sidebar. It added um sort of how many users it's currently showing to the bottom of the table. Uh I've also seen, you know, in preparing for the demo that sometimes it'll include pageionation and

12:15things like that. Um uh but yeah, one of the great things here is you're getting uh the full set of layers being built out inside of Photoshop. So when this is sort of done working, you can go in and tweak any of this in the same way that you would one of your own designs inside of Photoshop. Uh all right, great. So, it looks like uh it's done at this point. Uh you know, it's not perfect. There are a couple

12:42things that I would definitely change. Uh some of the text is going kind of right up to the edge of the buttons in the u the pro membership uh upsell. But overall, this saves me a ton of time idiating, trying to visualize, you know, what possibilities there are. Let's actually just take a quick look at the layers that it created. Uh you can see it's also great about naming layers. All this, you know, is very

13:10self-explanatory. Um and you can see there's a wide variety of different types of layers and uh layer effects that are being applied here. Um, it just goes to show that all you really need to do is give these intelligent tools an interface to these desktop apps uh that they can communicate and uh give them enough information on how to manipulate those operations and they can go to town and figure out what they need to do um without any of this being in sort of the training data in cloud code or codeex, right? Like this tool didn't exist when that happened. So, uh yeah, that's it for the demo. Uh the whole thing is free

13:51and open source. Thanks a lot for watching.