Recording: Make Work Flow: Streamline team engagement with Codex

[00:12:31] Kenna Valdez: We want to welcome you To make work flow. This is our series focused on showcasing how real activators the ai champions who are designing building an d scaling agentic workflows for their teams. Do just that, so we'll share. How members of different teams across func tions build workflows to help with the real work that their teams already do. Whether or not you think of yourself as a n ai champion. Yet this series is really intended to give you real examples of useful workflows. And how folks have b uilt them that you can take back in adapt for your teams and tips to help you. Design, build and scale those workflow s safely and effectively within your organization. Today's session is being recorded, and I will be sure to share the re cording. In the champion community, on OpenAI academy, where you most likely signed up to attend today's sessio n, please share any questions. In the chat we've saved a little time for Q&A at the end today, and we'll make sur e to address as many of your questions as possible. In today's session, peter diamonds is going to share how he us ed Codex to build a dashboard that helps streamline. Internal enablement intake, and quite a few other things. For hi s team, so I'll let him speak to that. But first, peter, I want to hand itoff to you to just introduce yourself. And a little bit about your your role in your team here. At OpenAI.

[00:15:13] Peter Diamond: For sure yeah, thanks for having me super excited to be here. My name is peter diamond, and I am a ai deployment manager here. At OpenAI, whichis essentially kind of like our training and enablement function, so what we do is we work with different customers and different account teams within our kind of like our field teams to identify training needs at different customers. And then deliver those trainings, and so kind of the solution that I'll talk about today. Is we had, we have tons of trainings, and we wanted to spread that knowledge. Throughout the organization what we h ad on offer and and what the right training was for different types of business situations. But we didn't have really a c entral place to do that. It was just a big, ugly spreadsheet that we would send people, and so that was kind of the tas k. That I was thinking, or what I was tasked with, is, how can we make it? Actually an engaging fun, kind of internal marketing platform. But also a tool that people can use to start initiating training engagements.

[00:16:20] Kenna Valdez: I love that, so you've already kind of, answered my first question. Before we dive into your build, which was, was wh at problem were you trying to solve?

[00:16:25] Peter Diamond: Yeah.

[00:16:29] Kenna Valdez: Who did you really design this for? And how is it kind of used today? And just everyday work.

[00:16:35] Peter Diamond: Yes, so this was sentout to our entire cro. So our entire field organization so account directors, customer, success managers. Anyone who's working on the front line with customers who are trying to use our OpenAI products. An d it was essentially yeah, the people who were not familiar with our team because it's a fairly new function that we've just set up. And so it was, for people to learn a little bit more about who. Our team is what we do. How to engage wit h us? And then all of our different services.

[00:17:06] Kenna Valdez: That's awesome, all right, and I am very much. Would love for you to share more about this in detail. When we get to actually see what you built. In a moment, but just at a high level. What impact has this driven for the the go to marke torg? At OpenAI or for the adm team.

[00:17:24] Peter Diamond: Yeah, it's been. I mean the feedback has been really great. I think, especially, which I'll show the design. Just becau se it's so, it's so easy to use, so it's been really great. From an education perspective sentout to you know thousand s of field people and it's also been really great. For our team to get more traction and accelerate the amountof leads that we're getting because we're essentially waiting for field people to engage with us to ask for us to deliver training s. And so it's been really great in terms of driving up that amount as well.

[00:17:57] Kenna Valdez: Love that all right, I'll let you take it. Away.

[00:17:59] Peter Diamond: Yeah, of course I have a couple of slides that I'll share. And then I'll just jump into the toolk, because I want to spend too much time in slides. I already touched on some of this. Let me just close this out. So yeah, we offered, 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 spreadsheetover here with lots of crazy formatting and columns. Not a friendly kind of interface for educating people on these. 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 a great. There's no hierarchy, really, it's hard to organize. It's not visual, so what I wanted to do is create a yeah. 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 aboutour product. Design. Plugin, whichis set up for this kind of workflow, and design.md files, which are a file. 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 pl us Codex is a really great workflow too. If you don't have a lotof visual references to begin, just asking Codex to actu ally create an image for you. And then, using that as a visual reference, or going back and forth. Great way to combi ne both image done 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 b ack in the day. It's not the most impressive problem in the world. Codex is pretty good at, even if you're not giving it s uper elaborate prompts. Understanding what you're doing, and taking a first shot at something whichis 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 m arkup and app shots. So how can you go back and forth with Codex and give it really detailed design direction on? Y ou 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 som e 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 litt le bit about the automations and maintenance. This is obviously very important when you're building something espe cially like 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 lotof automations and skills that allow us to maintain it without you know. Making it some one'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. S o 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 rolli ng out to our team. And I really like the sortof like card formatof this that I had landed on. And I thought it would be r eally appropriate for our course catalog, because each course could be essentially like a card. We wouldn't have illu strations 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 listof items, actually thinking about it. Like a deck of cards, and you can kind of like shuffle and make different stacks of 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 n ew one. But if you don't have that, or if you have, sortof like a website that you like, or just a visual that you like, ther e'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 e nd 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 packa ge 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. Afterwards Codex will essentially just use the skills that it has available to it. If it thinks it's relevant, but there's some greatones in here around. Design. Q a auditing image to code. And you were all url to code or 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 gi ve to Codex, you can give it that url. And it can actually just start building something based off of that url. And then i mage similarly. But if I don't want to jump right into code, and I want to just create that design, dot md file a lotof tim es, what I'll do is I'll just do. app shots, whichis a feature. You can enable where. On a mac I basically just press bot h command keys. At the same time, and it will pull a screenshot in. I could also just you know. Take a screenshot my self, and pull it in. This is like mostof my workflow from end. Design is just taking screenshots and giving them to co dex. 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 bef ore 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 an d 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 crea tes a markdown. File. You can go in and look at it, and it's pretty detailed, so it's using specific types of typography. I t's giving me headings. Body, text, eyebrows, and labels, color systems, navigation, hero patterns. There's a lot in he re. 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. This is general rule, is trying to scale my sessions as much as possible. So anytime I'm giving Codex a lotof feedback on a specific project. I try to package that feed back 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 sortof criteria. In general, um. So once you have your design ref erences 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 websit e url. And it can go to the website using its own computer, user inapp browser. It can go to that website and take a lo ok 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 promp t. The prompt code x to take a first shot, and so what we call in enCodex. Or like bipe coding you probably heard of this term is one shotding whichis like trying to build a fully working prototype. In a single prompt, I generally don't en courage that. It's really hard for Codex to get something right. On the first try, and so I encourage you to like work wit h 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 m ost impressive prompt I've ever written. But I think, is like 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 bitof background on what I want to do. So this i s my objective. I want to create a site that access a course catalog for the full suite of adm trainings. I could give it m ore business context as well. If I want, I could say, you know. This is the issue we're dealing with. Sometimes that co ntext is actually really helpful for Codex, as it's making design decisions deciding kind of how to lay stuff out in this ca se. 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 filt ers on the left. So I want to be able to filter through the cards. Each card should represent a course, each course sh ould have a specific taxonomy on it. So the title of the course, whether it's core versus builder. Those are just two dif ferent types of trainings. We offer any relevant platforms we're training on, so ChatGPT Codex or the api. A brief descri ption, whether it's available or coming soon. Because we have a lotof trainings that are in the pipeline as well. The i ntended audience, and then the link. So this is just me giving a little bitof design direction essentially telling it how I wantour 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 e arlier, 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 littl e while ago, before I had added that to my workflow. So I just didn't do it. In this case, but it's a great. It probably wo uld have had a better firstoutput. If I had started with that, and I'd like to just get the catalog format down with at leas t placeholder. 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 itout. Then I gave it a little bitof feedback or kind of a vision. For what I was planning to do down t he 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 s o take a shot. And so I'll show you what it came up with. Actually for its first stab and. I was actually pretty impressed . So right away you can see that it's it's following. The sortof 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 super. 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 aw ay 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. R eady 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 wo uld go into Codex. And you can what's great about Codex as well is that you can actually just see the you can view t he app. The area of the website that you're designing or app that you're designing right in the in f browser. So I just a sked it to stage it locally. And so I can expect it. 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, t hat'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. Essentiall y, on my computer, so I'm going to open this up and scroll through so same thing as before. This is a response, so y eah built it responsibly whichis great. If you're familiar with front end development, that's just making it able to kind o f work at different spaces. So I'm going to stretch this out to what I was looking at before, and I have a couple of opti ons here. So I can take screenshots at this point. In my workflow we hadn't introduce this feature. The feature I'm ab out to show you yet. So you can just take a screenshot pull itover and say this spacing is too tight. And it'll start wor king 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 the bunch of different tasks for Codex to handle. So once it goes through and finishes this one, it will st art. 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. An d 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 the site itself. So this is Codex's little cursor, so it's actually doing. A visua l 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 ne ed to actually be working on this right now. But another option that I can do is, I can annotate right in this browser. S o this is really cool and really powerful. In terms of giving Codex really concrete. Feedback. So I can go into this, I ca n inspect the font. The color kind of like. If I was looking at the hsrcss, and then I can just add a comment here wher e I could say make this bigger. I could add a comma here. That's. This arrow is bumping up against the side. I could say like I said before like I would prefer these speed vertically stack. 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 que uing 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's actually kind of it makes it faster for Codex to work. If you use this feature, because it can immediate ly 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 fe ature. If you can, because it's a little more token. Efficient and just Codex be a little bit more accurate as well. So I we nt 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 lik e a little motion in these. So they kind of drift around, whichis really fun. These are all things, I Codex can build out f or you. There's filters. I have different kind of like decks of cards, based off of different types. Of whether we're buildi ng with ai working with ai. I made a list format eventually whichis really nice, I'm requested. This specific, specificall y so you can go in and click on it that way. And then, also, if you're looking at the cards, you know. I these change pr etty significantly from what they were before. And I think, 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. The drive I can click this, and it'll bring me right to that folder. And if I want to reque st it, I can get engagementon. How to engage with my team? So we built this first, and then we added additional tab s on things, like some of the enablement cohorts that we run. Some of the academy sessions. So I actually have this poll from our OpenAI academy website. Codex goes to the website on a regular cadence, sees what upcoming tr ainings there are. And then makes this calendar for me, whichis really great. And if I click on it, it'll bring me to the a cademy page for it. Whichis nice, so that makes sure our field team knows aboutour scale trainings. Thatour team is offering like what kind of? And christina offer, and then I added a 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 kind of, and christina, as friends of the adm team. So so yeah overall. This is where I landed after quite a bitof back and forth. But I think what I would enco urage you to do. Is push Codex a little bit? So from a even if you're just vibe coding you can come up with like really f un playful things that make engaging with content at work, whichis sometimes really stale. We're in sharepoint, we'r e in Excel files. Make it more delightful and fun to use, I think, like this. Specific, like little kind of call out just moving around, got like a lotof call outs. People thought it was really fun and delightful, and all of that's possible. Just by, wit h, like a simple, prompt, with Codex. Essentially, I just asked it to create that and make it turn clockwise and counterc lockwise. Um. So yeah as you were coming up on. Time so I want to stop to make sure we can get. Questions yeah.

[00:37:18] Kenna Valdez: Thank you so much peter. Everyone is agreed that your site looks amazing, so really tip on on iterating on the ui. An d the iteration is partof it. In your first, you know, you don't have to try to. One shot every prompt, but a couple quest ions that came up were one.

[00:37:31] Peter Diamond: Yeah.

[00:37:35] Kenna Valdez: And I think this question is just a little bitof clarifying sites. How do you go about making creating this internal app or page and sharing it internally with others in your workspace?

[00:37:43] Peter Diamond: Yeah. Yes, so we have a sites plugin. That is offered, you probably have to check if it's offered at your specific organ ization. But if it's turned on for your organization, what you can essentially do is just ask Codex to create a site for y ou. And it will host it. Internally so it's an internal only and you can adjust the permissions as well. And then it creates a shareable link. So I just host it. Kind of locally for OpenAI employees. And then I also made a go link, so that you can just say go slash adm catalog. And people will go directly there, and it's great because it's live. So I can still m ake adjustments on my own locally. So I can make design tweaks and stuff and try stuff out. And I don't none of that kind of turns outor shows up for people who are visiting the site until I decide to push it to the live. Site.

[00:38:39] Kenna Valdez: Cool love that, and a lotof questions came up, and folks are wondering directionally. Are you finding yourself using p lan and goals more often lately? And how do you kind of think about when to use those.

[00:38:54] Peter Diamond: Yes, so goal mode. I use a lot honestly, I use goal mode actually a lot. Even with like powerpoint presentation updat es. I have a skill that just goes through my powerpoint. And like updates all of the formatting. And I use that in goal, and I go to bed and wake up, and it's done so. Go mode is really great, especially if you have a design.md file. Or you have a specific setof criteria. So like, say, like an auditof your site, you're like okay. Spacing across the entir e site is off typography looks wonky. You can give it more global feedback. And then run iton a goal mode with som e set criteria. So like make sure that you go through and check all of the stuff based on my new. My my feedback tha t I just gave and it will keep working. So you don't have to keep queuing stuff up so if you have more global feedback . I would use a goal plan. What's really great when you're starting out? If you are curious for. Codex's approach that i t's going to take. I generally find plan mode more helpful in like. Coding, or like yeah, more like workflowy style tasks front end. I'm such a visual person, I'm usually just like just make it and I'll give you feedback on it. I'm like I don't. Do n't give me a plan, I don't want to read. So it depends on what you like. It can definitely be helpful, especially if you're worried about it wasting time on building something that doesn't look good. Plan loads a great thing to add to your workflow as well.

[00:40:16] Kenna Valdez: Yeah agreed and I really liked to. A point that mickey made about plan mode in chat is that sometimes it surfaces qu estions that force you to kind of pressure test your thinking can be helpful.

[00:40:25] Peter Diamond: Yeah. Well, I love that team, I love that feature where it gives you the multiple choice questions or the recommendati on. I'm like huh.

[00:40:31] Kenna Valdez: Yes, yes, yes, I'm very helpful, because it's like well, I'm not sure. So let me give you something different.

[00:40:35] Peter Diamond: Yeah.

[00:40:36] Kenna Valdez: Options we always say with champagne work, too. Bring a recommended solution, don't just present three options. And withequal a couple more questions, as we're chatting about sites.

[00:40:42] Peter Diamond: Yeah.

[00:40:50] Kenna Valdez: Love it site solve. Some authentication hosting and deployment issues internally. How does it work with databases? So is there a limit to internal databases? I can pull from in order to surface things through sites more easily. For the restof the org.

[00:41:08] Peter Diamond: Yeah, so so I didn't get as much into the automation that I ran. But I did set up automations where I have a separate Excel spreadsheet. Now that I ask everybody to maintain, and so that's kind of like the source of truth, it's still an exc el spreadsheet. It just has like a really nice front end to it. And so I have an automation that runs every day that chec ks that the data in that Excel. And just makes sure that the site is still accurate based off of the data. So if anyone go es in and makes changes to that site or to the Excel? The site will get updated. Notion is great, for, like a plugin you can definitely use our plugins to send it to anything. That's hosted on a website. You can use our browser plugin any thing that's hosted in Notion you can use the Notion. Plugin for a back end database. You would just need a connecti on to Codex, so it would need either to access it. Through the browser, or you would need an MCP connection. So it's more dependenton once you connect Codex to that. I can use whatever data it has access to to update your site. T hough.

[00:42:09] Kenna Valdez: Great thanks so much, peter, I'm going to quickly share my screen again because we're running up on time. Just to say, thank you all so much for your questions today. And for sharing some of the things that you've built. And the skil ls, thanks so much. Daniel, in the chat, as you are able, always follow your organization's information and privacy po licies. We love to see what you've built. And the odds are far greater that there is that there than that. There isn't so meone else who's in a similar place. In their, you know, Codex maturity journey is you, so please feel free to share th ose in the champion community. This is on OpenAI. Ai academy. It's where mostof you signed up for today's sessi on. This is your space to find more ai adoption insights, more real examples. Like the ones we shared today and res ources to help it make. Make it a little bit more streamlined to design useful workflows, build the solutions responsibl y, and scale them to your teams. A little bit more quickly. So you can sign up for future make workflow sessions for more examples of things that we've built in real work. Sign up for the upcoming activator lab session. To learn a repe atable method, to help you prioritize, design, build and scale work close for your teams. And again, as you build new ways of working for your teams, please come back to the community and share what you're able. In the use cases f orum we love to see what you build. All right, everyone really appreciate you joining us today, thank you so much for your time. We hope today's session was helpful. We'll catch you in the champion community.

[00:43:47] Peter Diamond: Thanks so much for having me so much fun, I love this stuff all right. Have a good one everyone.