Recording: Make Work Flow: Automate CRM Updates with Codex

[00:00:00] 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, and scaling agentic workflows for their teams, do just that. We'll share how members of different teams across functions build workflows to help with the real work that their teams already do. Whether or not you think of yourself as an AI champion yet, this series is really intended to give you real examples of useful workflows and how folks have built them that you can take back and adapt for your teams and tips to help you design, build, and scale those workflows safely and effectively within your organization. Today's session is being recorded, and I will be sure to share the recording in the Champion Community, on OpenAI Academy, where you most likely signed up to attend today's session. Please share any questions in the chat. We've saved a little time for Q&A at the end today, and we'll make sure to address as many of your questions as possible. In today's session, Peter Diamond is going to share how he used Codex to build a dashboard that helps streamline internal enablement intake, and quite a few other things for his team, so I'll let him speak to that. But first, Peter, I want to hand it off to you to just introduce yourself. And a little bit about your role in your team here at OpenAI.

[00:02:42] Peter Diamond: For sure yeah, thanks for having me super excited to be here. My name is Peter Diamond, and I am an AI Deployment Manager here at OpenAI, which is 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 had on offer and what the right training was for different types of business situations. But we didn't have really a central place to do that. It was just a big, ugly spreadsheet that we would send people, and so that was kind of the task 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:03:49] Kenna Valdez: I love that, so you've already kind of, answered my first question. Before we dive into your build, what problem were you trying to solve?

[00:03:54] Peter Diamond: Yeah.

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

[00:04:04] Peter Diamond: Yes, so this was sent out to our entire CRO, so our entire field organization: account directors, customer success managers. Anyone who's working on the front line with customers who are trying to use our OpenAI products. And 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 with us, and all of our different services.

[00:04:35] Kenna Valdez: That's awesome, all right, and I would very much 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 go-to-market org at OpenAI or for the ADM team.

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

[00:05:26] Kenna Valdez: Love that all right, I'll let you take it away.

[00:05:28] 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 I'll just do. App shots, which is a feature. You can enable where. 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. This is like 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 trying 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 the 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 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, and 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's actually kind of it 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. Of 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.

[00:24:47] Kenna Valdez: Thank you so much Peter. Everyone is agreed that your site looks amazing, so really good tip on iterating on the UI. And the iteration is part of it. In your first, you know, you don't have to try to. one-shot every prompt, but a couple questions that came up were one.

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

[00:25:04] Kenna Valdez: And I think this question is just a little bit of clarifying on Sites. How do you go about creating this internal app or page and sharing it internally with others in your workspace?

[00:25:12] 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 organization. But if it's turned on for your organization, what you can essentially do is just ask Codex to create a site for you. And it will host it internally, so it's 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 make adjustments on my own locally. So I can make design tweaks and stuff and try stuff out. And none of that kind of turns out or shows up for people who are visiting the site until I decide to push it to the live site.

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

[00:26:23] Peter Diamond: Yes, so Goal Mode I use a lot, honestly, I use Goal Mode actually a lot. Even with like PowerPoint presentation updates. I have a skill that just goes through my PowerPoint and updates all of the formatting. And I use that in Goal Mode, and I go to bed and wake up, and it's done. So Goal Mode is really great, especially if you have a design.md file. Or you have a specific set of criteria. So like, say, like an audit of your site, you're like okay. Spacing across the entire site is off typography looks wonky. You can give it more global feedback. And then run it on a Goal Mode with some set criteria. So like make sure that you go through and check all of the stuff based on my new feedback that 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 Mode. What's really great when you're starting out? If you are curious about Codex's approach that it's going to take. I generally find Plan Mode more helpful in coding, or more workflow-style tasks. For 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, don'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 Mode is a great thing to add to your workflow as well.

[00:27:45] Kenna Valdez: Yeah agreed, and I really liked a point that mickey made about Plan Mode in chat is that sometimes it surfaces questions that force you to kind of pressure test your thinking, which can be helpful.

[00:27:54] Peter Diamond: Yeah. Well, I love that too. I love that feature where it gives you the multiple choice questions or the recommendation. I'm like, huh.

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

[00:28:04] Peter Diamond: Yeah.

[00:28:05] Kenna Valdez: Options. We always say with Champion work, too: bring a recommended solution, don't just present three options. And with equal weight. A couple more questions, as we're chatting about sites.

[00:28:11] Peter Diamond: Yeah.

[00:28:19] Kenna Valdez: Love it. Sites 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 rest of the org.

[00:28:37] 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 Excel spreadsheet. It just has like a really nice front end to it. And so I have an automation that runs every day that checks that the data in that Excel and just makes sure that the site is still accurate based off of the data. So if anyone goes in and makes changes to that site or to the Excel? The site will get updated. Notion is great. For 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; anything that's hosted in Notion, you can use the Notion plugin for a back end database. You would just need a connection to Codex, so it would need either to access it through the browser, or you would need an MCP connection. So it's more dependent on once you connect Codex to that, I can use whatever data it has access to to update your site. Though.

[00:29:38] 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 skills. Thanks so much, Daniel, in the chat, as you are able, always follow your organization's information and privacy policies. We love to see what you've built. And the odds are far greater that there is than that there isn't someone else who's in a similar place. In their, you know, Codex maturity journey as you, so please feel free to share those in the champion community. This is on OpenAI Academy. It's where most of you signed up for today's session. This is your space to find more AI adoption insights, more real examples like the ones we shared today and resources to help make it a little bit more streamlined to design useful workflows, build the solutions responsibly, and scale them to your teams. A little bit more quickly. So you can sign up for future Make Work Flow sessions for more examples of things that we've built in real work. Sign up for the upcoming Activator Lab session to learn a repeatable method, to help you prioritize, design, build and scale workflows 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 to in the use cases forum. 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:31:16] Peter Diamond: Thanks so much for having me so much fun, I love this stuff all right. Have a good one everyone.