Claraveo: welcome back to how I AI. I'm Claraveo, product leader and AI obsessive here on a mission to help you build better with these new tools. Recently, I was able to attend Code with Claude, Anthropic's first developer conference. And as part of that, I got to spend a little time with Thoric, who works on Claude Code, and taught me something that has blown my mind ever since I heard it. HTML is the new markdown. He's going to show us how to use cloud code to generate rich artifacts that both you and the agents can enjoy working on. Let's get to it.

Thariq: Thanks for having me.

Claraveo: I am so excited to be here at Codewith Claude in San Francisco. There's a lot of exciting things that were announced and we'll get to that in a little bit. But you told me something I was not expecting to hear today which is you heard it here first. HTML is the new markdown. Tell us more.

Thariq: I mean I think markdown became a really popular way of interacting with agents especially like you know Opus 4 and cloud 3.5 where you know they have a plan and the plan is like how to do this feature and maybe it's like 50 lines of code and you can edit it right like I think back then you were still like reading all the outputs and editing the the markdown and making it right but you know as the agents have gotten longer and longer running when you have Opus 4.5 and 4.7 they're running for like an hour or something and the plans are so long I honestly have stopped reading them and this was honestly a mistake. Like I think that you still need to be really in the loop. You really need to understand what the agents are doing. Uh but like a thousandline markdown file, you know, I don't even edit them anymore. I just ask Claude to edit them instead.

Thariq: And so I think one of the things that I've been seeing emergently in the cloud code team is that like they that we're using HTML files instead. And so HTML is like the models are still very good at it. They have a lot of more context now. So you can spend the more extra tokens and they like it's a lot easier to read like they can uh have a lot more information. They're a lot scrollable more scrollable. And when you're talking about implementation like you know sometimes you see claude make these like little asky markdown things where you're like oh like here's a little you know little mockup and it's trying really hard. in HTML it doesn't need to try nearly as hard right like there uh it can actually draw like things that you can look at and so it's just a richer communication medium between you and quad

Claraveo: and before we go further into HTML specifically I do have to pause because I do have a vested interest in this which is you are saying for the people who are not listening listen up: plans matter, PRDS matter, spec matters. even as these models get more intelligent you still feel like that's a really important part of the process

Thariq: oh 100% yeah I I think that you know everyone has different views on how it'll go but I I think that this will just forever be the thing because when I you say okay cloud can run for eight hours what you're really saying is cloud can spend like 500 bucks you know what I mean and and so if you're spending 500 bucks or like I think all of us are becoming these compute allocators now right and so you have to decide like what is worthwhile spending the compute on.

Thariq: and I think that is happens in the spec and planning phase right you have to really understand like what do you want? And sometimes you don't know. Sometimes you have to like pull it out of yourself by chatting with Claude. Uh sometimes you have like unknown unknowns you need to figure out. Uh but yeah, I think this is like the whole thing now is just like really getting in in sync with Cloud about what it's building.

Claraveo: I love what you said because people ask me all the time, Claire, you said product management is dead. What's next? I'm going to say you're a compute allocator, babe. Like that's that's the job now. You're still doing the same thing, though. You're writing documents to decide whether or not something else should do do work in the shape of that work.

Claraveo: Okay. So, you've convinced me HTML is the future. And I I like how you said this. It's not that it is necessarily harder or easier for the agents to read. They're very smart. They can read all sorts of code. But in fact, what you're finding is that HTML makes it easier for you to engage with the content, which then uplevels the quality overall because you're not your eyes aren't crossing looking at a bunch of raw markdown, being like whatever, it's probably good. Instead, you're actually getting pulled into the spec or the document or the plan and then interacting it with a way that upgrades the the quality and then you can ultimately build something better.

Thariq: Yeah, that's right.

Claraveo: Okay. So, you're building something with the agent so the agent can manage you.

Thariq: You know, I'm not sure if manage me is the right word exactly, but you know, I just I care a lot about being in sync with the agent. This is sort of like the features that I built in Cloud Code have been like that, you know, like how can I get to know you better? So, yeah.

Claraveo: Okay, great. Well, we have we have Claude Code up. So, let's walk through how that how that works.

Thariq: Yeah. So, I I did like uh a little bit before we started uh and so I like to talk with Claude just as a human, you know, and like I always start with brainstorming. It's so much easier to brainstorm once you like, you know, uh once you have a partner. So, I was literally like, "Look, I'm on a Claro podcast. Um I want to do a demo, you know, and can you brainstorm some ideas in the HTML file, right?" And this is literally the prompt I gave it, right? Like there's not it's not complicated. And so here you can see the eight visual demos that it made for me. And uh it has these little mockups as well, right? So like purity to working prototype, right? Like it it searched you up, right? You saw that with a web search, right? Uh whiteboard sketch to working UI, which I thought was really cool. This is such a cute like little thing.

Claraveo: So it's giving you basically instead of saying here's a markdown document of kind of like what you should talk to Claire about and some descriptions of things you could do. Instead, it was like, what's the best way to convey this information so you can actually engage with it and pick something? And it used HTML to make this visual guide of a potential agenda or a set of demos

Thariq: and you just get like a much richer expression.

Thariq: That's right. Yeah. So I I think the what I like about HTML is like really Claude really understands this. And so my next prompt here was really like okay uh I asked it to make some mockups in in the follow-up prompt and then I was like I asked it to interview me about number eight, right? And so this is something that like you know similar to specs and PRDs, right? Like uh finding out my unknown unknowns. What do I want it to do? I answered a bunch of questions and uh now I'm like okay create a HTML file as a plan that helps me visualize what the implementation plan is include excerpts, mockups, code when whatever is needed to give me like maximum context, right? Um and so then it made me this HTML file here. Yeah, you can see now this is this is the plan. Uh but it's it's purely in HTML. It's got like it started scripting out the podcast itself which you know maybe I I didn't need all of that but like you know we're making a skill and so it it you know fleshed out the the file system. It gave me like an exerpt of the skill.md um it put together like a a mood board as well some example components. um some of the logic here um yeah insights and templates helper scripts right and like helping me get a sense of like what's the important things for me to know here um yeah this is this is something that like I will actually read you know yeah

Claraveo: We love a dashboard. Uh I used to say when I was in enterprise, I guess I still am in enterprise software, dashboards equals dollars. So, I like this one. Um, okay. So, you use clog code. You said brainstorm, but brainstorm in HTML. Give me a couple things that I can talk about. It gave you eight ideas, including visuals and this lovely like why her, what the visual is, and then the I like the risk. It's like it could go sideways as all good demos Yeah. can. Um, and so you're going to pick one and then you're going to show us how you pull this through to a full plan on on on this idea.

Claraveo: I do want to encourage people, you know, don't stress so much about what should go in the thing. And in fact, it might change initiative to initiative. It might be slightly different to engage you with the work, but like identifying what you want to get and then letting the model do what it needs to do will do a very high quality job.

Thariq: Yeah. I I think with prompting it's like this fine balance of like I think you want to give enough information that you get what you want but you don't want to over constrain claude you know and so sometimes when I see people with a lot of like overbuilt skills kind of like you know you're an expert planner or something right like that is usually like outsourcing too much and constraining it. um but in this case for example like I really did wanted to make sure it gave me code exerpts and I wasn't sure if I did uh whether it would do that you So this was really important. But then I always need to give Claude an out, you know, I always needed to be like, "Okay, like you asked me for this, but you know, like there's something else I want to give you." And so whatever is needed to give me maximum context is like my way of saying like, "Hey, Claude, like I I trust you here. I want to just like be in the loop with you."

Claraveo: Markdown is accessible, right? I can like go into Markdown, type in it. And make edits. And so, I think that is one reason is it has been so popular. How like I want to fix this. How do I how do I touch this? How do I edit this?

Thariq: Yeah. Yeah. So, I I think that this is like a great point, right? And I think one thing I felt with Markdown was that one I because I had stopped reading them, I had stopped editing them as well, you know, and so I would end up asking Claude to edit them. And so like that is like the most basic form is just to be like, "Hey Claude, I didn't like this part of the plan. Can you edit it? Uh, but let's say you want to get really in the loop, right, and like really get in depth with it. Claude can also do that for you. So, the next prompt I had was "Okay, I want to create an editable HTML artifact to help me define the the decision rules." I don't like the ones we have right now. Make this a custom UI that helps me with structure but gives me flexibility. Design the ideal interface for this problem. I really wasn't quite sure what it would give me. And this is one of the fun parts of HTML 2. It's just like I just want to see what what cloud like cooks up here. And um, yeah, this is what it gave me, right? So it's like a my own beautiful custom interface. Um, I can sort of like, you know, edit any of these fields. Uh, I can, you know, like hide them. I can copy. I can, you know, add new fields here. Um, and it gives me a markdown to to copy back.

Claraveo: Okay. I want to pause because people are going to totally miss what you just did. So, I'm going to repeat it, which is you have this HTML plan. And there's a section in the HTML plan that is a pretty like specific table of rendering and visualization rules. And you're like, I don't like it. And instead of going back into cloud code and being like, I don't like it. Let's go back and forth and edit it in like the terminal, you said, there's probably a way for me to interact with this p particular problem that's ideal from a user perspective. So basically build a throwaway UI. This is not even personal software. This is like micro software on top of micro software which is like I've made this very personalized plan and then I'm taking a module in the personalized plan and zooming into it using a very custom UI.

Thariq: Yes.

Claraveo: So fun. Is this how you're building now? And do you have any challenges with like how are you passing this around from a collaboration perspective?

Thariq: Actually, it is. on the scale of an implementation plan it's way better, right? And I think that this is cuz you just like can upload it to like you know whatever AWS or something and then you just share the link around and so definitely the likelihood of like I don't know cat or Boris like reading this is like a hund times better right. I also just you know somewhat related I use it a lot in like collaborating overall. So, for example, uh you know, I report to cat and so like every week I send her a weekly status update in HTML of everything I've done. I get Claude to read my Slack and just like create this message and and like she actually gets to read it and I don't have to spend that much time on it, you know?

Claraveo: I like this because I've been in the in the product game for quite some some time, many decades. And people used to get so wrapped around the axle on like what's our source of truth for specs and what's our source of truth for PRDs and you know is all this information in some centralized place that we can all access it and is it all in the same format? Is it all in the same template? And there were these arbitrary rules because creating this content was relatively expensive. when all of that cost goes to like functionally zero, you can kind of put stuff wherever in whatever format because we know these models are very good at using tools to discover the context that they need.

Thariq: Yeah, I I think so. I I didn't uh hit implement on this but yeah, I would basically use this as an artifact. And so, um, I would clear context and I would say like here's a plan. Um, you know, implement it. Uh, you could also have like you can also use this as a source of checking the truth, right? And so again, a benefit of HTML is like I've got a little mockup here as well. So, right, I can have the verification a or I can have the verification agent check like, hey, what did I intend to do, right? And what actually came out in the output, right? Um, so yeah, I think this is like really uh helps cloud be more in the loop.

Thariq: one of my favorites is this living design system. And so it's this idea that like you know oftent times when I am making let's say a new app in the entropic design system, right? Like Cloud Design does this very well. You link a GitHub repo and you uh like it will extract the design system from it. what this does is like basically I have an HTML file that represents my design system. You can see the colors here, typography, spacing, radius, core components, right? Once I have this, I can basically start passing this around. Yeah. So, I go to a new project. I'm like design system.html, right? Instead of like design.md or something. And it's got this like compressed understanding.

Claraveo: I love this. I do this as well. I will give you my um like advanced mode version of this, which is I use claw design. I pull in my both my marketing site repo and my app repo which have like some expressions of the same design system in I say make the design system. Then I actually make it ask ask it to make a design system or a style guide but I want it at the component level. and then I drop that into the repo and then yes I say exactly this um reference the design system. The advanced thing that I do that I think is really useful for people who have to interface with marketers is I um have a like what I call a component visualization page which is like the 25 components of our app in action and interactable in a page. So a marketer can go in and like get the get the component in the form factor it needs to look quote unquote real. And then you can download a transparent PNG. And like drop it in a deck or drop it in a video.

Thariq: there's also something here around like component variations, which I thought was um fun where it's like Yeah. like you you create a component, you want to see like, oh, like what if I change the padding or what if I change the border, you know, solid things like that. like these are like a pretty simple like you know uh way of just playing with this. This is also claw design like right like where you create these little components and or these little knobs and sliders. Um but yeah you you can imagine one this is like the abstract of like oh like what's the interface for this thing that you're trying to do and how can you visualize it and yeah there's not a trade-off between like being nice pretty for you and understand being nice for Claude you know like they're They're really the same, right? So,

Claraveo: Yes. So, just to wrap for people, pull up Cloud Code, ask it to make you give you some ideas. Brainstorm ideas, but brainstorm them in HTML. Pick an idea. Plan it in HTML. Pick a part of that idea you don't like, have it create a micro app to edit it in HTML, and then some like bonus things is use cloud design, make a design system, but not only that, use HTML to encode that design system in your repo so it can be referenced at any time. design.mmd is dead. Long lived design.html. Did I get it right?

Thariq: Yeah, I think that's right. I think that's right.