Why this Claude Code engineer uses HTML files as AI specs | Thariq Shihipar (Anthropic)

1. 0:00 – 2:39

   Introduction

   1. TSThariq Shihipar0:00

      Markdown became a really popular way of interacting with agents, but the plans are so long, I honestly have stopped reading them. And this is honestly a mistake. I think that you still need to be really in the loop.

   2. CVClaire Vo0:10

      Plans matter. PRDs matter. Spec matters.

   3. TSThariq Shihipar0:13

      When you say, "Okay, Claude can run for eight hours," what you're really saying is, "Claude can spend 500 bucks." All of us are becoming these compute allocators now.

   4. CVClaire Vo0:21

      Yeah.

   5. TSThariq Shihipar0:21

      Right? And so you have to decide what is worthwhile spending the compute on.

   6. CVClaire Vo0:25

      People ask me all the time, "Claire, you said product management is dead. What's next?" And I'm gonna say, "You're a compute allocator, babe. That's the job now." [laughs]

   7. TSThariq Shihipar0:32

      HTML is a lot easier to read, and so it's just a richer communication medium between you and Claude.

   8. CVClaire Vo0:37

      Instead of saying, "Here's a markdown document," it was like, "What's the best way to convey this information?" So you can actually engage with it and pick something.

   9. TSThariq Shihipar0:46

      This is the plan. It's purely in HTML. This is something that I will actually read. [laughs]

   10. CVClaire Vo0:50

       This is not even personal software. It's like micro-software-

   11. TSThariq Shihipar0:54

       Yeah, yeah

   12. CVClaire Vo0:54

       ... on top of micro-software. [upbeat music] Welcome back to How I AI. I'm Claire Vo, 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 Thariq, 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 gonna show us how to use Claude Code to generate rich artifacts that both you and the agents can enjoy working on. Let's get to it. This episode is brought to you by Celigo. Every company today wants AI to improve how work gets done. The fastest way is building it directly into everyday business processes, automating employee onboarding, keeping customer data accurate, managing orders and inventory, or resolving finance and operations issues. When AI lives inside the flow of work, it can update records, trigger approvals, route work, and kick off the next step across systems. That's how teams operationalize AI and deliver measurable results. Celigo makes this possible, and now with Celigo Aura, it's never been easier. Celigo Aura gives you access to the entire platform through natural language, connecting your systems and turning intent into action, all of it under your control. Companies like Databricks, PayPal, and Olipop rely on Celigo to run critical business operations at scale. Ready to operationalize AI? Visit celigo.com/howiai. That's C-E-L-I-G-O.com/howiai.

2. 2:39 – 4:30

   HTML as the new Markdown

   1. CVClaire Vo2:40

      Welcome to How I AI.

   2. TSThariq Shihipar2:42

      Thanks for having me.

   3. CVClaire Vo2:43

      I am so excited to be here at Code with 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.

   4. TSThariq Shihipar3:01

      I mean, I think Markdown became a really popular way of interacting with agents, especially like, you know, Opus 4 and Claude 3.5, where, you know, they have a plan, and the plan is, like, how to do this l- 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 of 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 is 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 1,000-line markdown file, you know, I don't even edit them anymore. I just ask Claude to edit them instead.

   5. CVClaire Vo3:46

      Yeah.

   6. TSThariq Shihipar3:46

      And so I think one of the things that I've been seeing emergently in the Claude 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. [laughs] Like, they can-

   7. CVClaire Vo4:04

      Yeah

   8. TSThariq Shihipar4:04

      ... 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 ASCII markdown things where you're like, "Oh," like, "here's a little," you know, "a little mockup"-

   9. CVClaire Vo4:18

      Yeah

   10. TSThariq Shihipar4:18

       ... and it's trying really hard.

   11. CVClaire Vo4:20

       Yeah.

   12. TSThariq Shihipar4:20

       In HTML, it doesn't need to try nearly as hard, right?

   13. CVClaire Vo4:23

       Yeah.

   14. TSThariq Shihipar4:23

       Like, there... Uh, it can actually draw, like, things that you can look at. And so i- it's just a richer communication medium

3. 4:30 – 5:51

   The compute allocator mindset

   1. TSThariq Shihipar4:30

      between you and Claude.

   2. CVClaire Vo4:31

      And before we go further into HTML specifically, I do have to pause because I do have a vested interest in this-

   3. TSThariq Shihipar4:37

      Sure

   4. CVClaire Vo4:37

      ... which is you are saying, for the people who are not listening, listen up-

   5. TSThariq Shihipar4:40

      Yes

   6. CVClaire Vo4:41

      ... 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?

   7. TSThariq Shihipar4:48

      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, Claude can run for eight hours," what you're really saying is, "Claude can spend, like, 500 bucks." You know what I mean? [laughs] And, and so if you're spending 500 bucks, or, like, I think all of us are becoming these compute allocators now-

   8. CVClaire Vo5:09

      Yeah

   9. TSThariq Shihipar5:09

      ... right? And so you have to decide, like, what is worthwhile spending the compute on.

   10. CVClaire Vo5:14

       Yep.

   11. TSThariq Shihipar5:14

       And I think that is happened 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 Claude about what it's building.

   12. CVClaire Vo5:35

       I love what you said because people ask me all the time, "Claire, you said product management is dead. What's next?" And I'm gonna say, "You're a compute allocator, babe."

   13. TSThariq Shihipar5:42

       [laughs]

   14. CVClaire Vo5:42

       Like, that's, that's the job now.

   15. TSThariq Shihipar5:44

       Yeah, yeah, yeah.

   16. CVClaire Vo5:45

       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

4. 5:51 – 6:48

   How HTML makes specs more engaging

   1. CVClaire Vo5:51

      shape of that work. 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.

   2. TSThariq Shihipar6:30

      Yeah, that's right.

   3. CVClaire Vo6:31

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

   4. TSThariq Shihipar6:35

      You know, I'm not sure manage me is the right word exactly. But, you know, I just, I care a lot about being in sync with the agent.

   5. CVClaire Vo6:41

      Okay.

   6. TSThariq Shihipar6:41

      This is sort of like the features that I built in Claude Code have been like that.

   7. CVClaire Vo6:45

      Yeah.

   8. TSThariq Shihipar6:45

      You know, like, how can I get to know you better? So yeah, yeah, yeah.

5. 6:48 – 9:24

   Demo: Brainstorming in HTML with Claude Code

   1. CVClaire Vo6:48

      Okay, great. Well, we have, we have Claude Code up.

   2. TSThariq Shihipar6:50

      Yeah.

   3. CVClaire Vo6:50

      So let's walk through how that, how that works.

   4. TSThariq Shihipar6:52

      Yeah, so I, I did, like, 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 Claire Vo podcast. Um, I want to do a demo, you know, and can you brainstorm my... some ideas in a 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 mock-ups as well, right? So like PRD to working prototype, right? Like, it, it searched you up.

   5. CVClaire Vo7:31

      Mm-hmm.

   6. TSThariq Shihipar7:31

      Right? You saw that with the web search, right? Uh, whiteboard sketch to working UI, which I thought was really cool. This is such a cute, like-

   7. CVClaire Vo7:39

      It is

   8. TSThariq Shihipar7:39

      ... little thing, right?

   9. CVClaire Vo7:40

      Extremely cute.

   10. TSThariq Shihipar7:41

       Yeah, yeah, yeah.

   11. CVClaire Vo7:41

       And I... It's... What's really funny is just this morning a ChatPRD user messaged me, and they're like, "I love the mock-ups in ChatPRD." And I'm like, what in the wor- what are you, what are you talking about?

   12. TSThariq Shihipar7:51

       Yeah.

   13. CVClaire Vo7:52

       Because I have something very similar to this-

   14. TSThariq Shihipar7:54

       Yeah

   15. CVClaire Vo7:54

       ... in code review right now and haven't shipped it. And I'm like, did I... Like, did I acc- did Claude accidentally-

   16. TSThariq Shihipar8:00

       [laughs]

   17. CVClaire Vo8:00

       ... do this? And it was that like cute little a- [laughs] little ASCII-

   18. TSThariq Shihipar8:04

       Oh, yeah

   19. CVClaire Vo8:04

       ... you know, wire frame.

   20. TSThariq Shihipar8:06

       Yep.

   21. CVClaire Vo8:06

       Um, so this is definitely the dream.

   22. TSThariq Shihipar8:08

       Yes.

   23. CVClaire Vo8:08

       But not even... But now you're telling me I'm gonna build it, so.

   24. TSThariq Shihipar8:12

       [laughs] Yeah.

   25. CVClaire Vo8:13

       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.

   26. TSThariq Shihipar8:37

       Yeah.

   27. CVClaire Vo8:37

       And you just get like a much richer expression.

   28. TSThariq Shihipar8:40

       Yeah, exactly. Like, I, I think like another... Like, for brainstorming, one of my like sort of rules of thumb is that I'm not going to read a longer output than the screen on Claude Code, you know?

   29. CVClaire Vo8:49

       Yeah.

   30. TSThariq Shihipar8:49

       So like if I... I- if you gave me eight ideas, I'm just not gonna see all of them, and, and... But with HTML, I'm definitely... I scrolled through all of these, you know, and uh, yeah, the, the, the diagrams just make it so much more evocative for me to like sort of understand what's happening, right? The slash command starter pack, Vibe code to feature flag dashboard.
6. 9:24 – 11:20

   From brainstorm to full implementation plan

   1. CVClaire Vo9:24

      Um, okay, so you used Claude 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 r- I like the risk. It's like it could go sideways, as all good demos-

   2. TSThariq Shihipar9:41

      Yeah

   3. CVClaire Vo9:42

      ... can.

   4. TSThariq Shihipar9:42

      Yeah, yeah, yeah.

   5. CVClaire Vo9:43

      Um, and so you're gonna pick one, and then you're gonna show us how you pull this through to a full plan on-

   6. TSThariq Shihipar9:50

      Yes

   7. CVClaire Vo9:50

      ... on, on this idea.

   8. TSThariq Shihipar9:51

      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 mock-ups 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? It 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, mock-ups, code, when it- 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, it, it started scripting out the podcast itself-

   9. CVClaire Vo10:40

      [laughs]

   10. TSThariq Shihipar10:40

       ... which, you know, maybe I di- I didn't need all of that, but like, you know, we're making a skill.

   11. CVClaire Vo10:45

       Yep.

   12. TSThariq Shihipar10:45

       And so it, it, you know, fleshed out the, the file system. It gave me like an ex- excerpt 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, and th- this is, this is something that, like, I will actually read, you know?

   13. CVClaire Vo11:15

       Yeah.

   14. TSThariq Shihipar11:15

       Yeah.

   15. CVClaire Vo11:15

       And I wanna go back to Claude Code really quickly-

   16. TSThariq Shihipar11:19

       Yeah. Yeah, for sure

   17. CVClaire Vo11:19

       ... if you don't mind,

7. 11:20 – 13:50

   Prompting philosophy: Trust Claude but give it constraints

   1. CVClaire Vo11:20

      which is, you know, people are gonna ask-

   2. TSThariq Shihipar11:23

      Yeah

   3. CVClaire Vo11:23

      ... how did it know exactly what to put into the spec?

   4. TSThariq Shihipar11:25

      Mm-hmm.

   5. CVClaire Vo11:26

      And I just, I wanna go back to your prompt was very simple.

   6. TSThariq Shihipar11:29

      Yeah.

   7. CVClaire Vo11:29

      And it's so funny. I've done, I don't know, 75 of these How I AI episodes, and they get incredible outputs, and everybody's prompt's like, "Make the thing. Hopefully, it's good."

   8. TSThariq Shihipar11:39

      Yeah.

   9. CVClaire Vo11:40

      Kind of nice. And so I love that this prompt is literally just, "Create an HTML file with a plan. Help me visualize." You misspelled excerpts.

   10. TSThariq Shihipar11:49

       [laughs] I did, yeah, yeah, yeah.

   11. CVClaire Vo11:50

       And you're like, "Excerpts, mock-ups, code, et cetera, whatever is, is needed."

   12. TSThariq Shihipar11:54

       Yeah.

   13. CVClaire Vo11:55

       And so I do wanna 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 wanna get-And then letting Claude, let- letting, letting the model do what it needs to do will do a very high quality job.

   14. TSThariq Shihipar12:18

       Yeah. I, I think with prompting it's like this fine balance-

   15. CVClaire Vo12:21

       Mm

   16. TSThariq Shihipar12:21

       ... of like, I think you want to give enough information that you get what you want-

   17. CVClaire Vo12:25

       Yeah

   18. TSThariq Shihipar12:25

       ... but you don't want to over-constrain Claude.

   19. CVClaire Vo12:27

       Yeah.

   20. TSThariq Shihipar12:27

       You know? And so sometimes when I see people with a lot of like overbuilt skills-

   21. CVClaire Vo12:32

       Mm

   22. TSThariq Shihipar12:32

       ... kind of, like, you know, you're an expert planner or something-

   23. CVClaire Vo12:35

       Yeah

   24. TSThariq Shihipar12:35

       ... right? Like, that is usually like outsourcing too much and constraining it.

   25. CVClaire Vo12:38

       Yep.

   26. TSThariq Shihipar12:39

       Um, but in this case, for example, like I really did wanted to make sure it gave me code excerpts.

   27. CVClaire Vo12:43

       Yep.

   28. TSThariq Shihipar12:44

       And I wasn't sure if I did, uh, whether it would do that, you know? So this was really important, but then I always need to give Claude an out, you know?

   29. CVClaire Vo12:53

       Yeah.

   30. TSThariq Shihipar12:53

       I always need it to be like, okay, like you asked me for this, but, you know, like there's something else I want to give you.
8. 13:50 – 18:16

   The future of PRDs and tech specs

   1. CVClaire Vo13:50

      thing that I wanna walk people through-

   2. TSThariq Shihipar13:51

      Yeah

   3. CVClaire Vo13:51

      ... if you pull up the plan.

   4. TSThariq Shihipar13:53

      Yeah.

   5. CVClaire Vo13:53

      Because I think about this a lot, and I get people ask, or that ask me this a lot, which is like, what's the future of the PRD? What's the future of the tech spec? Are these things separate? Are they together? And I think what's nice is they... Whatever you want.

   6. TSThariq Shihipar14:07

      Mm. Yeah.

   7. CVClaire Vo14:07

      Right?

   8. TSThariq Shihipar14:08

      Yeah.

   9. CVClaire Vo14:08

      And whatever you want for the audience.

   10. TSThariq Shihipar14:09

       Yeah.

   11. CVClaire Vo14:09

       So you are a single builder in the instance of this demo.

   12. TSThariq Shihipar14:13

       Yep.

   13. CVClaire Vo14:13

       You want it all in one piece. You want the product idea, you want the, I guess you want a 12-minute walkthrough of how you're gonna demo it.

   14. TSThariq Shihipar14:21

       Yeah. Yeah, exactly.

   15. CVClaire Vo14:22

       You want code snippets, you want style guide. You want that all in one thing, because this is a self-contained little project that's easier to have it all in once. But what I can imagine in larger organizations is like, if you like put the PRD in one tab and put the tech spec in the second tab-

   16. TSThariq Shihipar14:37

       Yeah

   17. CVClaire Vo14:37

       ... because maybe separate people would be reviewing that information. And so you can really kind of like craft a ideal spec package-

   18. TSThariq Shihipar14:47

       That's right

   19. CVClaire Vo14:47

       ... to whatever you want with HTML in a way that Markdown is a little bit more constrained. It has to either be like one mega file or like separate files, and I, I think this is just nicer from that perspective.

   20. TSThariq Shihipar14:58

       Yeah, I think that's right. You have a lot more interactivity. I haven't asked it to make tabs here or something, but you can easily do that.

   21. CVClaire Vo15:04

       Yep.

   22. TSThariq Shihipar15:04

       It's like all the same to Claude, right?

   23. CVClaire Vo15:06

       Yep.

   24. TSThariq Shihipar15:06

       Um, I think one of the things on like the specs and PRDs is like I think you're trying to find like the boundary of like what you need to know with Claude. And for example, if you're doing something very technical, I like to do the type interfaces.

   25. CVClaire Vo15:18

       Oh, that's smart.

   26. TSThariq Shihipar15:19

       So this is like, you know, just like understanding what the types are so that... Uh, I don't often care about the actual implementation of it.

   27. CVClaire Vo15:26

       Mm-hmm.

   28. TSThariq Shihipar15:26

       I just like, okay, like the types help me understand what we're building, and then I might edit those, right? And that's like the boundary I want to-

   29. CVClaire Vo15:33

       Yep

   30. TSThariq Shihipar15:33

       ... interface that. And yeah, like a- across the problem, right? Like from, yeah, the, the arc of the podcast to-
9. 18:16 – 20:23

   Making HTML specs editable

   1. CVClaire Vo18:16

      Okay, so you-Have, have built this. But, uh, here's, here's the objection-

   2. TSThariq Shihipar18:22

      Yeah

   3. CVClaire Vo18:23

      ... I'm gonna get.

   4. TSThariq Shihipar18:23

      Sure, sure, sure.

   5. CVClaire Vo18:23

      Which is Markdown is accessible, right?

   6. TSThariq Shihipar18:26

      Sure.

   7. CVClaire Vo18:26

      I can, like, go into Markdown, type in it-

   8. TSThariq Shihipar18:30

      Yes

   9. CVClaire Vo18:30

      ... and make edits. And so I think that is one reason is it, it's been so popular, it's bridged this gap between machine writable and readable, human writable and readable at a very low level of sophistication, right?

   10. TSThariq Shihipar18:43

       That's it, yeah.

   11. CVClaire Vo18:43

       As soon as you understand, okay, these, like, hash signs mean headers, you're good to go on, on Markdown.

   12. TSThariq Shihipar18:48

       Yes.

   13. CVClaire Vo18:49

       How... Like, I wanna fix this. How do I, how do I touch this? How do I edit this?

   14. TSThariq Shihipar18:53

       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'd stopped reading them, I'd 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, and I forgot if it was here. No, it was here. Okay. I want to create an editable HTML artifact to help me define the, the decision rules. So these are the rules that it's defined here on, like, okay, how do you take data and turn it into-

   15. CVClaire Vo19:33

       Yeah

   16. TSThariq Shihipar19:33

       ... you know, a visualization? And I think some of these are kind of arbitrary. Um, and so I asked it, like, uh, you know, to h- h- create an HTML artifact. Uh, 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.

   17. CVClaire Vo19:49

       Yeah.

   18. TSThariq Shihipar19:49

       Uh, I really wasn't quite sure what it would give me, and this is one of the fun parts of HTML, too.

   19. CVClaire Vo19:53

       Yeah.

   20. TSThariq Shihipar19:53

       It's just like I just wanna see what, what Claude, like, cooks up here. And, um, yeah, this was 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. And so once I'm like, "Okay, I have this," I can copy it back into the, um,

10. 20:23 – 24:17

    The abundance mindset

    1. TSThariq Shihipar20:23

       to the output.

    2. CVClaire Vo20:23

       Okay, I wanna pause because people are gonna totally miss what you just did.

    3. TSThariq Shihipar20:26

       Yeah, yeah.

    4. CVClaire Vo20:26

       So I'm gonna repeat it.

    5. TSThariq Shihipar20:27

       Yes, yes, totally.

    6. CVClaire Vo20:28

       Which is you have this HTML plan.

    7. TSThariq Shihipar20:30

       Yep.

    8. CVClaire Vo20:31

       And there's a section in the HTML plan that is a pretty, like, specific table of rendering and visualization rules-

    9. TSThariq Shihipar20:39

       Yep

    10. CVClaire Vo20:40

        ... per data type that you could predict would be in a CSV.

    11. TSThariq Shihipar20:42

        Yep.

    12. CVClaire Vo20:43

        And you're like, "I don't like it."

    13. TSThariq Shihipar20:44

        Yep.

    14. CVClaire Vo20:45

        And instead of going back into Claude Code and being like, "I don't like it. Let's go back and forth and edit it in, like, the terminal-"

    15. TSThariq Shihipar20:52

        Yep

    16. CVClaire Vo20:53

        ... you said, "There's probably a way for me to interact with this persi- particular problem that's ideal from a user perspective." So basically build a throwaway UI-

    17. TSThariq Shihipar21:02

        Yes

    18. CVClaire Vo21:02

        ... for this very... It's like this is not even personal software. This is, like, sub... It's like micro-software-

    19. TSThariq Shihipar21:10

        Yeah

    20. CVClaire Vo21:10

        ... 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-

    21. TSThariq Shihipar21:19

        Yes

    22. CVClaire Vo21:20

        ... that's gonna engage me with the, the content to get to a higher quality. Um, I also like that it's, like, kind of gamified. It's, like, very consumery.

    23. TSThariq Shihipar21:30

        Yeah, yeah. Totally.

    24. CVClaire Vo21:31

        Very consumery. And you said in the prompt, "Give me the ideal UI-

    25. TSThariq Shihipar21:35

        Yeah

    26. CVClaire Vo21:35

        ... for this to, like, help me engage with this." You built this. Then you get the, the data, right, and then you're just gonna bop it back into the, into the file.

    27. TSThariq Shihipar21:44

        Yeah, exactly.

    28. CVClaire Vo21:45

        So fun. Is this how you're building now?

    29. TSThariq Shihipar21:47

        Actually, it is.

    30. CVClaire Vo21:48

        Yeah? And do you have any challenges with... Like, how are you passing this around from a collaboration perspective? Or is it just like-
11. 24:17 – 25:39

    Just-in-time documentation and throwaway software

    1. CVClaire Vo24:17

       I like this 'cause 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, consuming it was certainly expensive, finding it was really hard. And I think when all of that cost goes to, like, functionally zero... Although we're all paying our, I call them-

    2. TSThariq Shihipar24:52

       [laughs]

    3. CVClaire Vo24:52

       ... our, our, our Claude chits.

    4. TSThariq Shihipar24:54

       [laughs]

    5. CVClaire Vo24:54

       We're paying our Claude chits.

    6. TSThariq Shihipar24:55

       Yeah.

    7. CVClaire Vo24:56

       But 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. And so I do think there's this fun moment where you're really up- you, like, up-level the things that you should care about, which is, like, what is the content of the plan? Is it a good idea? Do we feel like it's gonna be executed well? As opposed to, like, I can't put a interactive Markdown document in our, you know, blessed document repository, and so I have to have, like, another asset somewhere else. And so I just, I like this idea of just-in-time documentation, very, very high quality, some throwaway software.

    8. TSThariq Shihipar25:35

       Yeah.

    9. CVClaire Vo25:35

       Which is nice, like, it's cheap.

    10. TSThariq Shihipar25:36

        Yeah.

    11. CVClaire Vo25:36

        So you can toss it.

    12. TSThariq Shihipar25:38

        Yeah,

12. 25:39 – 26:39

    Using plans as artifacts for implementation

    1. TSThariq Shihipar25:39

       yeah, yeah.

    2. CVClaire Vo25:39

       Um, and then I, like, you know, the executive in me is like, "What if we can't ever find this again?" I'm like, "Oh, Claude, Claude can find it-

    3. TSThariq Shihipar25:44

       Yeah

    4. CVClaire Vo25:45

       ... for us. It's fine."

    5. TSThariq Shihipar25:46

       Definitely.

    6. CVClaire Vo25:47

       Um, and then do you feel like this results in better products? Like, would you bu- how would you build off of this? Would you say, "Plan's good, let's go"?

    7. TSThariq Shihipar25:54

       Yeah. I, I think so. I, I didn't, uh, hit implement on this.

    8. CVClaire Vo25:58

       Yeah.

    9. TSThariq Shihipar25:58

       But yeah, I would basically use this as an artifact.

    10. CVClaire Vo26:01

        Mm-hmm.

    11. TSThariq Shihipar26:01

        And so, um, I would clear context.

    12. CVClaire Vo26:05

        Mm-hmm.

    13. TSThariq Shihipar26:05

        And I would say, like, "Here's a plan."

    14. CVClaire Vo26:07

        Yep.

    15. TSThariq Shihipar26:07

        Um, you know, implement it.

    16. CVClaire Vo26:10

        Yeah.

    17. TSThariq Shihipar26:10

        Uh, you could also have, like... You can also use this as a source of checking the truth.

    18. CVClaire Vo26:14

        Yep.

    19. TSThariq Shihipar26:14

        Right? And so a- again, a benefit of HTML is, like, I've got a little mock-up here as well, so, right? I can have the verification a- or I can have the verification agent check, like-

    20. CVClaire Vo26:24

        Yep

    21. TSThariq Shihipar26:24

        ... hey, what did I intend to do?

    22. CVClaire Vo26:26

        Yeah.

    23. TSThariq Shihipar26:27

        Right? And what actually came out in the output.

    24. CVClaire Vo26:29

        Yeah.

    25. TSThariq Shihipar26:29

        Right? Um, so yeah, I, I think this is, like, really, uh, helps Claude be more in the loop. Um, I've got some other examples of-

    26. CVClaire Vo26:37

        Yeah

    27. TSThariq Shihipar26:37

        ... planned here that we can...

    28. CVClaire Vo26:38

        Let's see it.

13. 26:39 – 30:16

    Demo: Living design systems in HTML

    1. TSThariq Shihipar26:39

       Yeah, this is, like, a, a post I'm working on. So, like, uh, it's just, like, different ways I'm, I'm using, uh, Claude Code, or Cl- sorry, using HTML with Claude Code. And one of my favorites is this living design system. And so it's this idea that, like, you know, oftentimes when I am making, let's say, a new app in the-

    2. CVClaire Vo26:57

       Yes

    3. TSThariq Shihipar26:57

       ... Anthropic design system-

    4. CVClaire Vo26:59

       Yeah

    5. TSThariq Shihipar26:59

       ... right? Like, Claude Design does this very well.

    6. CVClaire Vo27:01

       Yeah.

    7. TSThariq Shihipar27:01

       You s- link a GitHub repo, and you, uh, like, it will extract the design system from it.

    8. CVClaire Vo27:08

       Yeah.

    9. TSThariq Shihipar27:08

       Right? And, uh, yeah, I saw Nate did that. I'm like, "Oh, so smart." Uh, what this does is, like, basically I have an HTML file that represents my design system.

    10. CVClaire Vo27:18

        Yep.

    11. TSThariq Shihipar27:19

        You can see the colors here, typography, spacing, radius, core components, right? It's a fairly small one. Um, but once I have this, I can u- basically start passing this around.

    12. CVClaire Vo27:30

        Yep.

    13. TSThariq Shihipar27:30

        So I go to new project. I'm like, designsystem.html, right?

    14. CVClaire Vo27:34

        Yeah.

    15. TSThariq Shihipar27:34

        Instead of, like, design.md or something.

    16. CVClaire Vo27:36

        Yeah.

    17. TSThariq Shihipar27:36

        And it's got this, like, compressed understanding.

    18. CVClaire Vo27:39

        Yeah.

    19. TSThariq Shihipar27:39

        And you can literally just point Claude at a folder in your thing and be like, "Hey, find the design system here-

    20. CVClaire Vo27:45

        Yep

    21. TSThariq Shihipar27:45

        ... create a HTML artifact, and pass it around." So yeah.

    22. CVClaire Vo27:48

        I, I love this. I do this as well.

    23. TSThariq Shihipar27:50

        Yeah.

    24. CVClaire Vo27:50

        I will give you my, um, like, advanced mode version of this, which is I use Claude 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 so we have, like, colors and all this stuff, but we also have components, because there's some tweaks in how you want the design system implemented in particular components. 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-

    25. TSThariq Shihipar28:34

        Yeah

    26. CVClaire Vo28:34

        ... is I, um, have a, like, what I call a... God, what do I call it? Like, it's like a component visualization page, which is, like, the 25 components of our app in action and interactable-

    27. TSThariq Shihipar28:50

        Yep

    28. CVClaire Vo28:50

        ... in a page. So a marketer can go in and, like, get the co- the, get the component in the form factor it needs to look, quote-unquote, "real."

    29. TSThariq Shihipar28:59

        Yes.

    30. CVClaire Vo29:00

        And then you can download a transparent PNG.
14. 30:16 – 31:42

    Adding comments and annotations to HTML plans

    1. CVClaire Vo30:16

       And you're making me think of one thing that I love in Claude Design that I think you could bring into your plans. Again, it's one of these features that, like, sounds truly cuckoo bananas-

    2. TSThariq Shihipar30:24

       Yeah

    3. CVClaire Vo30:24

       ... to build, but is totally possible and easy to do, which is I love in Claude Design-Once you have your design going, you can like comment, you can circle things, and there's no reason you can't do that in a plan.

    4. TSThariq Shihipar30:35

       Yeah.

    5. CVClaire Vo30:35

       Right? I was like, "Oh, how would you interact with this?" And it's like, oh, just build an arbitrary like comment thing-

    6. TSThariq Shihipar30:40

       Yeah

    7. CVClaire Vo30:40

       ... into it and say, "People are gonna leave comments on any aspect of this," and when they do, and then they submit like fix, it fixes the core thing. And so I think people getting really creative with what interaction models you can do between content-

    8. TSThariq Shihipar30:54

       Yes

    9. CVClaire Vo30:55

       ... and code-

    10. TSThariq Shihipar30:55

        Yeah

    11. CVClaire Vo30:56

        ... is really fun.

    12. TSThariq Shihipar30:57

        Yes. Yeah, I mean, you could easily imagine that you did this plan as like a, like almost a lightweight Figma dashboard or something-

    13. CVClaire Vo31:05

        Yeah, yeah. Right

    14. TSThariq Shihipar31:05

        ... where you just ask it to like, "Hey, make a canvas, make a bunch of things."

    15. CVClaire Vo31:08

        Yeah.

    16. TSThariq Shihipar31:08

        "Let me comment on it, and then give me a place to copy out my comments into something that I can paste back into Claude Code."

    17. CVClaire Vo31:15

        Yeah, and we did an episode recently, um, with the Stripe team, and they built their own vibe coding platform, and they said what they loved about it, which I think really applies here, is they have just a particular way they wanna review products.

    18. TSThariq Shihipar31:28

        Yeah.

    19. CVClaire Vo31:28

        And they have a particular way they wanna run design review, and a particular way they wanna run spec review. And by building it in HTML, they can actually shape the tool to how they want the team to run, which I think is really compelling to

15. 31:42 – 32:21

    Recap: The HTML workflow

    1. CVClaire Vo31:42

       people.

    2. TSThariq Shihipar31:42

       Yes.

    3. CVClaire Vo31:43

       I love this. So just to wrap for people-

    4. TSThariq Shihipar31:46

       Yep

    5. CVClaire Vo31:46

       ... pull up Claude Code, ask it to make you... give you some ideas, brainstorm i- ideas, but brainstorm them in HTML.

    6. TSThariq Shihipar31:53

       That's right.

    7. CVClaire Vo31:54

       Pick an idea.

    8. TSThariq Shihipar31:55

       Yep.

    9. CVClaire Vo31:55

       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 Claude 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.md is dead. Long li- live design.html. Did I get it right?

    10. TSThariq Shihipar32:18

        Yeah, I think that's right.

    11. CVClaire Vo32:19

        Ugh.

    12. TSThariq Shihipar32:19

        I think that's right.

    13. CVClaire Vo32:19

        I'm a pro at this.

    14. TSThariq Shihipar32:20

        [laughs]

16. 32:21 – 35:56

    Lightning round and final thoughts

    1. CVClaire Vo32:21

       I'm pretty good. Okay. Well, this was so fun.

    2. TSThariq Shihipar32:24

       Yeah.

    3. CVClaire Vo32:24

       Before we get you out of here, back to this amazing event, couple lightning round questions. One, I have to... I ask everybody, there's three tabs in Claude desktop app.

    4. TSThariq Shihipar32:34

       Yeah.

    5. CVClaire Vo32:34

       One is your favorite tab.

    6. TSThariq Shihipar32:36

       Uh, it's gotta be code.

    7. CVClaire Vo32:37

       [laughs]

    8. TSThariq Shihipar32:37

       You know? Yeah. I love the team as well. I'm really close friends with them.

    9. CVClaire Vo32:40

       Yeah.

    10. TSThariq Shihipar32:40

        So, yeah.

    11. CVClaire Vo32:41

        Okay. So, so, so code. I, I thought it would be on brand. Okay, second thing, we were at this amazing event. What is the thing that you're most excited about or that you saw or heard today?

    12. TSThariq Shihipar32:50

        I think obviously we had a big announcement at the start of the day, uh, our partnership with SpaceX-

    13. CVClaire Vo32:54

        Yeah

    14. TSThariq Shihipar32:54

        ... bringing more compute online. I think, uh, yeah, I'm excited for... You know, we also said we are thinking about orbital data centers, and that's just-

    15. CVClaire Vo33:03

        I love it

    16. TSThariq Shihipar33:04

        ... yeah, you know, incredibly sci-fi and... but could, you know, it could actually happen, so yeah.

    17. CVClaire Vo33:10

        I know. We were watching this moon mission with my kids, who are like kinda elementary school, and I'm like, "Would you wanna work in the moon mine?

    18. TSThariq Shihipar33:17

        [laughs]

    19. CVClaire Vo33:17

        Would you wanna work in the moon mines? 'Cause I think it's coming." Yeah, orbital, orbital, that's, that'll be next year's demo, right?

    20. TSThariq Shihipar33:23

        [laughs] Yeah, exactly.

    21. CVClaire Vo33:24

        You and I will come back-

    22. TSThariq Shihipar33:25

        This is our whole data center

    23. CVClaire Vo33:25

        ... and we'll do this, we'll do HTML, we'll do testing, and then lunar data modu- modules.

    24. TSThariq Shihipar33:31

        That's right. Yeah, yeah, yeah.

    25. CVClaire Vo33:31

        Perfect. Okay, and then my last question, very important. I love that you just talk to Claude, Claude like a person.

    26. TSThariq Shihipar33:37

        Yep.

    27. CVClaire Vo33:38

        When Claude is not listening-

    28. TSThariq Shihipar33:40

        Mm

    29. CVClaire Vo33:40

        ... not giving you what you want-

    30. TSThariq Shihipar33:42

        Yeah

Episode duration: 35:58