Workflow clip: Streamline team engagement with Codex

[00:00:00] Peter Diamond

Yeah, of course I have a couple of slides that I'll share. And then I'll just jump into the tool, because I don't want to spend too much time in slides. I already touched on some of this. Let me just close this out.

So yeah, this is our problem: we offered a ton of trainings, and people weren't really aware of them. These were kind of the two old states. So you can see big, ugly spreadsheet over here with lots of crazy formatting and columns. Not a friendly kind of interface for educating people on what these trainings are. It was more of a tracker. For our internal team to see what we had on offer. And then we also had a big, ugly, shared folder, which was just a bunch of folders in Google Drive. That had all of the materials, and so again, not great. There's no hierarchy, really, it's hard to organize. It's not visual, so what I wanted to do is create a nice, compelling front-end.

This is kind of the process that I'm going to walk you through today, and I'm not going to be able to go into, you know, everything in a ton of detail, just because we only have thirty minutes. But when I'm setting up a new kind of front-end experience, these are kind of the steps that I use with Codex to build it.

So I start by gathering visual design references. I'll talk a little bit more about our Product Design plugin, which is set up for this kind of workflow, and design.md files, which are files that I generally create. It's great for scaling design systems across teams and just reusing. If you are working with Codex, vibe coding something and you get it to a really great state. From a visual perspective, it's great to ask it to create a design.md file. So that you can use that going forward. I'm not going to talk about too much, but image gen plus Codex is a really great workflow too. If you don't have a lot of visual references to begin, just asking Codex to actually create an image for you. And then, using that as a visual reference, or going back and forth. Great way to combine both image gen and ChatGPT and Codex.

Then you're going to go ahead and prompt Codex for an initial build. So you want to include things like your objective? Any design directions. I'll share the actual prompt that I use way back in the day. It's not the most impressive prompt in the world. Codex is pretty good at, even if you're not giving it super elaborate prompts. Understanding what you're doing, and taking a first shot at something which is great, then I'm going to show you how we can iterate.

This is really the bulk of the workflow is in this third bucket, iterating with markup and app shots. So how can you go back and forth with Codex and give it really detailed design direction on. You know, if something, if you want to add a new component. If the fonts are off, if the spacing is off, I'll show you some of the issues that I found in the first pass that Codex made. And how I corrected those.

And then, lastly, I'll talk a little bit about the automations and maintenance. This is obviously very important when you're building something especially for my team where we're constantly introducing new trainings and new content. And we don't want things to get stale, so we set up a lot of automations and skills that allow us to maintain it without you know. making it someone's full- time job. So I'm going to jump into some of the, let me see, some of the kind of process that I followed.

So my visual reference that I started with Codex was actually a site that I had previously made. So I had been working on this for a couple of weeks. It was essentially like an internal training site that I was thinking about building and rolling out to our team. And I really liked the sort of card format of this that I had landed on. And I thought it would be really appropriate for our course catalog, because each course could be essentially like a card. We wouldn't have illustrations or visuals, but I thought it might be a nice way to engage with the course catalog. Instead of going through a bunch of folders or a bunch of like a list of items, actually thinking about it. Like a deck of cards, and you can kind of like shuffle and make different stacks of learnings, and different kind of paths and decks and stuff like that. So I really liked that idea.

And what's great is, if you already are working on this in Codex, I actually just had Codex create a design.md file based on this project that we'd worked on. And it translated that, so that we could use it in this new one.

But if you don't have that, or if you have, sort of like a website that you like, or just a visual that you like, there's a couple of options that you can do. I'll just show you how you can do it.

We have a plugin called Product Design, which I'll just show you really quick.

So Product Design is really built for people who are vibe coding or coding front-end and want to make sure that Codex is kind of staying on task. What it's going to do is it's going to give you a package of skills that Codex will reference. Whether you invoke them or not, as it's approaching front-end design, so it's really great to just install. You don't really have to think about it. Afterward, Codex will essentially just use the skills that it has available to it. If it thinks it's relevant, but there's some great ones in here around design QA, auditing, image-to-code, and URL-to- code, which are two, that I think are really great. In this specific context, so if I want to do URL-to-code in this case, this is just a local URL, so I wouldn't be able to use it. But if you have a live site that you want to give to Codex, you can give it that URL, and it can actually just start building something based off of that URL. And then image similarly.

But if I don't want to jump right into code, and I want to just create that design.md file a lot of times, what I'll do is use app shots, which is a feature you can enable. On a Mac, I basically just press both command keys at the same time, and it will pull a screenshot in. I could also just you know, take a screenshot myself, and pull it in. Most of my workflow for front-end design is just taking screenshots and giving them to Codex. But I can just give it a bunch of you know, maybe I'll click into one of these, and I'll give it a reference for some of the different parts of my site. And just ask it to create a design.md file. So that will run. I actually did this before just because I know we are going to be running or this is going to go pretty fast. So I wanted to just go ahead and run it. And so I can show you what it did. I just gave it the same screenshots essentially.

And what it does is it creates a markdown file. You can go in and look at it, and it's pretty detailed, so it's using specific types of typography. It's giving me headings. Body, text, eyebrows, and labels, color systems, navigation, hero patterns. There's a lot in here.

So this is really great. And what's great is that as I give Codex design feedback as well, so like as I'm going back and forth with Codex and it's building the website out for me, I can also ask it to continue to update this design.md file, adding more tests and criteria so that it knows to follow these directions, or keeping these directions as up to date as possible.

So again, really great. What I try to do in Codex, as a general rule, is try to scale my sessions as much as possible. So anytime I'm giving Codex a lot of feedback on a specific project. I try to package that feedback up in some kind of reusable way. So that I'm not having to do that again next time I have a project with it. So a design.md file is a great way to package up design sort of criteria. In general, um.

So once you have your design references, you have a design.md file. Again, you don't have to make a design.md file to start. You can just give it the visual references and Codex can build from those. And you can give it all sorts of things. You can give it a website URL, and it can go to the website using its own computer and in-app browser. It can go to that website and take a look at it. You can give it images if you have like mood boards, or specific components that you like from other sites. Whatever you have, that you want to give to it, it's great. Just to give it context.

So the next step is to actually prompt Codex to take a first shot, and so what we call in Codex, or like vibe coding you probably heard of this term is one-shotting, which is like trying to build a fully working prototype in a single prompt, I generally don't encourage that. It's really hard for Codex to get something right on the first try, and so I encourage you to like work with Codex. And almost treat it like it was like a developer or someone on your team that you wanted to just help them get started on the project and just see what they come up with. And then you can give feedback.

So this is not the most impressive prompt I've ever written, but I think it is illustrative of the types of pieces of content that I include in front-end design, or kind of product-centric prompts, I give it a little bit of background on what I want to do.

So this is my objective. I want to create a site that acts as a course catalog for the full suite of ADM trainings. I could give it more business context as well. If I want, I could say, you know. This is the issue we're dealing with. Sometimes that context is actually really helpful for Codex, as it's making design decisions deciding kind of how to lay stuff out in this case. I didn't do that, but that's something you could include.

And then I told it. I'm envisioning a series of cards with filters on the left. So I want to be able to filter through the cards. Each card should represent a course, each course should have a specific taxonomy on it. So the title of the course, whether it's core versus builder. Those are just two different types of trainings. We offer any relevant platforms we're training on, so ChatGPT, Codex, or the API. A brief description, whether it's available or coming soon. Because we have a lot of trainings that are in the pipeline as well. The intended audience, and then the link. So this is just me giving a little bit of design direction essentially telling it how I want, or envisioning. the site and kind of a little bit more detail on what I'm envisioning for it.

Then I said, I gave it a couple references. So I gave it the current library of training offerings. Just that ugly, Excel sheet that I showed you earlier, as well as the link. To the Google Drive. And then a visual reference. So I just gave it the screenshots from the website that I just showed you. I could have also attached a design.md file.

At this point this is, I created this a little while ago, before I had added that to my workflow. So I just didn't do it. In this case, but it's great. It probably would have had a better first output if I had started with that, and I'd like to just get the catalog format down with at least placeholders. So I was like don't get too hung up on making everything perfectly accurate. I mostly just want to see how we would lay it out.

Then I gave it a little bit of feedback or kind of a vision. For what I was planning to do down the line, so eventually I wanted to be able to open a modal for each course and show more information. So who can deliver it? Maybe a preview of materials, maybe. A syllabus.

But I said, just start by creating the catalog page. And so take a shot.

And so I'll show you what it came up with. Actually, for its first stab, I was actually pretty impressed.

So right away you can see that it's following the sort of visual language of this site, pretty closely so. We have a top navigation. We have some nice hierarchy. There are some components that you know. I'm not a huge fan of like I didn't really love this. I thought it was kind of unnecessary. And then I was noticing some issues right away right. So these look really dense? I'm having a hard time scanning through it. This kind of spacing is kind of crazy, it's referencing. The Excel sheet which I don't think is needed, so it's a really good first pass but it's definitely not ready for primetime yet. And we can see I have the filters over here as well.

So what I would do at this stage is, I would go into Codex. And you can what's great about Codex as well is that you can actually view the app, the area of the website that you're designing or app that you're designing right in the browser. So I just asked it to stage it locally. And so I can inspect it. Usually I'll just pull that up. So oftentimes, if it's working on a site, you'll just see it come up here, so we'll say Browser, and you can just click that and open it. But if it doesn't, that's always an option. You can just say stage it.

So I can look at it because right now it's just an HTML file. Essentially, on my computer, so I'm going to open this up and scroll through so same thing as before. This is responsive, so yeah, it built it responsively which is great. If you're familiar with front-end development, that's just making it able to kind of work at different sizes. So I'm going to stretch this out to what I was looking at before, and I have a couple of options here.

So I can take screenshots at this point. In my workflow we hadn't introduced this feature. The feature I'm about to show you yet. So you can just take a screenshot pull it over and say this spacing is too tight. And it'll start working on that. And then I can say, let's make these a vertical stack, and so what I'm doing is as I'm going through. I can queue up a bunch of different tasks for Codex to handle. So once it goes through and finishes this one, it will start. Using this one, I'm not sure how advanced Codex users you are. But that might be a new concept to you.

What's really great is you can queue up a bunch of stuff. And then you can like go have a coffee, or you can go to bed. And when you wake up in the morning, if you leave, your computer plugged in, Codex will continue working. And it'll just work through the entire queue until it's done. So you might wake up and have a brand new site ready for you and you can see Codex is actually inspecting the site itself. So this is Codex's little cursor, so it's actually doing. a visual inspection of the site. And what's great, too, is, if you're running tests like UAT tests, Codex will actually go through and click through stuff as well. To make sure that stuff is working so that's really great. That's a great starting point.

But another thing we could do. I'm just going to let me get rid of this. I'm just going to. Pause it because. We don't need to actually be working on this right now. But another option that I can do is, I can annotate right in this browser. So this is really cool and really powerful. In terms of giving Codex really concrete feedback.

So I can go into this, I can inspect the font, the color kind of like. If I was looking at the HTML/CSS, and then I can just add a comment here where I could say make this bigger. I could add a comment here: this arrow is bumping up against the side. I could say like I said before like I would prefer these to be vertically stacked. I might say like oh yeah, I don't like this. So like get rid of this. Blah blah blah blah blah.

So I can go through and just add a bunch of comments if I don't feel like queuing stuff up. And then all I have to do is click, send and Codex will get the context for everything that I just made. So all the comments that I just added, it can take those with annotations and it can just start working on all of them.

And you can see it actually makes it faster for Codex to work. If you use this feature, because it can immediately tell where in the files those components are as opposed to. If I give it a screenshot, it has to kind of understand the screenshot. And then go into the file, and find out where that component is.

So I definitely recommend using this feature. If you can, because it's a little more token-efficient and lets Codex be a little bit more accurate as well.

So I went back and forth for a while with Codex, until I landed on a solution that I thought was appropriate for my audience. So what we ended on was this, so I would say, like a couple fun things as well is like you might notice that there's like a little motion in these. So they kind of drift around, which is really fun.

These are all things Codex can build out for you. There's filters. I have different kind of like decks of cards, based off of different types, whether we're building with AI or working with AI. I made a list format eventually which is really nice, I requested this specifically so you can go in and click on it that way. And then, also, if you're looking at the cards, you know, these changed pretty significantly from what they were before. And I think it landed in a really nice and beautiful place.

I can open this, and I can scroll down and see some detail on the course. I can also preview the deck directly. So I don't have to go to the big, ugly drive folder anymore. I can just click through the slides right here and see what the trainings would be if I do want to go to the training drive, I can click this, and it'll bring me right to that folder. And if I want to request it, I can get engagement on how to engage with my team.

So we built this first, and then we added additional tabs on things, like some of the enablement cohorts that we run. Some of the academy sessions.

So I actually have this pulled from our OpenAI Academy website. Codex goes to the website on a regular cadence, sees what upcoming trainings there are. And then makes this calendar for me, which is really great. And if I click on it, it'll bring me to the Academy page for it. Which is nice, so that makes sure our field team knows about our scale trainings that our team is offering, like what Kenna and Christina offer, and then I added an about the ADM team.

So just a little introduction to who we are, what we do. Some of the different folks you can see. We have Kenna and Christina as friends of the ADM team.

So yeah, overall, this is where I landed after quite a bit of back and forth. But I think what I would encourage you to do is push Codex a little bit. So even if you're just vibe coding you can come up with like really fun, playful things that make engaging with content at work, which is sometimes really stale. We're in SharePoint, we're in Excel files. Make it more delightful and fun to use. I think this specific little callout just moving around got a lot of callouts. People thought it was really fun and delightful, and all of that's possible just with a simple prompt, with Codex. Essentially, I just asked it to create that and make it turn clockwise and counterclockwise. Um. So yeah, as we are coming up on time, so I want to stop to make sure we can get questions yeah.