0:00 Let's walk through the process of creating this clickable infographic. The use case here is, explaining how AI can, support a workflow, in this case, a client deliverable, such as a report, and enhancing that through creation of a, a summary video, okay?
0:21 I wanted something that was more dynamic than, say, an image or a presentation deck, I wanted to have something that, that was, was more visual and clickable.
0:29 I used two tools for this. the first being, Claude Cowork and, Claude Design. So, both, products available in the Claude Pro, extension.
0:38 Count, and there are comparable tools out there in the marketplace. so, we'll dive in here. We're in, Claude Cowork and first step in the process is creating the prompt to generate the, dynamic infographic and, going through how to structure the prompt.
0:56 be, a longer walkthrough, but, just that, you know, you want to give, as much context as you can, details about what information you want in the graphic, and, importantly, I created this within Claude Cowork, you know, project, so it had a lot of context already about, how my business works, how I, how
1:14 I approach this type of consulting work, so it had that context, then I provided additional instructions, and in Cowork, because Cowork has access to create files directly on the machine, I was able to, automate creation and, the markdown file, Save that to the local drive, and then I can edit the file
1:33 , the markdown file, and go in here and manually make tweaks to, the prompt, this was, of course, generated by Claude, but lays out, the tone, the page structure that I wanted, the instructions, uhm, for each, this took my initial detailed notes and then structured it in a way that's ready for handoff
1:54 to Claude Design. So, Claude design. Was launched in, April of, 2026, so relatively recently.
2:06 what I really like about this is just the, the visual layout of the design system, so you can see here, you can, specify, you know, your colors, your fonts.
2:15 Uhm, all of the attributes, you can create templates, like, for a landing page, for a slide deck, for a document, and it's all within the Claude ecosystem, again, very, helpful, and, in this case, then, now that we've created the prompt, uh, in the form of a, a markdown file here, the next step is to
2:37 , uhm, upload that to Claude Design, I want to create this as a dynamic, infographic, so actually going to code as HTML and then host that so that I could send the intended audience a link for them to be able to click and navigate through the infographic.
2:59 and so, starting from my template, I can choose the landing page and then I can up, I would upload my, markdown file with the instructions, or, ah, paste in the prompt, and the first time I did this, I'm going to show you here, I actually was not happy with the result.
3:16 It felt more like a landing page, I wanted it to be, really just the infographic itself in one pane. So, I refined the prompt based on that and, um, was more specific about it just being one pane, about it being, mobile responsive and, and then the second pass I was more happy with.
3:38 and then you can see a version of what I ended up, I ended up publishing, Definitely more happy with this version, but, of course, there's always going to be tweaks you want to make, you can get in there, you can just describe the changes you want to make, you could actually edit, this in more detail
3:55 , getting into, all of the elements, one thing as well as working on is making sure it's mobile responsive, can either share it with people who are in your workspace, if this is, your team's account, or, if you wanted to, share this via a link, you can work with the HTML file, and, get into that in a
4:13 future walkthrough. Okay, hope this has been helpful, and, hope you get some use out of, Claude Design.