Build Your Entire Presentation in Claude Code and Ship it as HTML

Are you struggling to find the right AI tool to build presentations? Well,

here's a hack. You can use Claude Code, go in, create your presentation, and then you can export it as an HTML file that you can share with anyone. This is

really the next frontier of building presentations. You no longer have to

presentations. You no longer have to spend so much time designing, animating, prototyping. You can just build it

prototyping. You can just build it directly in Cloud Code and ship it. And

it saves my team and your team a ton of time. So let's get started. Okay. So

time. So let's get started. Okay. So

here I am in my terminal. I created a repo called presentation YouTube. It's

on GitHub. Here it is on my local computer. This is what we are going to

computer. This is what we are going to go into. Perfect. Now we're going to

go into. Perfect. Now we're going to open claude. There we go. Now my

open claude. There we go. Now my

suggestion is that you are working in either if you want to pull from existing branding, you could work directly in your repo in your company repo. I'm

going to be working in a separate repo because I didn't have anything to reference. So that's why I'm starting

reference. So that's why I'm starting here. and presentation YouTube is what

here. and presentation YouTube is what I'm calling it. Okay. So, I have designed these in Figma. You can either do in Figma or you can go directly into the repo that you're working in and pull

the branding. Like I said earlier, I'm

the branding. Like I said earlier, I'm going to take this Figma design. I copy

these and I am going to export into a PDF. I'm going to place it in my deck in this assets folder. Okay, let's

go into my folder. I just named them frame. You probably should name them,

frame. You probably should name them, but you get the idea. Okay, the prompt I'm going to use. You are a worldclass deck designer. We are designing a

deck designer. We are designing a workshop presentation. I need you to

workshop presentation. I need you to upgrade it and make interactions, in-n-out text transitions, orbital elements, floating, moving gradients,

glass morphism, and follow my already existing branding I'm attaching here.

So, I'm giving it a very big prompt, and we're going to see what happens. And

then we're going to probably have to go in and edit details. Let's go ahead and share the full deck here. Enter. And

let's see what happens. So it says, I can see the full branding now. Beautiful

design system. Vibrant purples, coral orange backgrounds, glass morphic 3D shapes, bold serif displays, and the TDP logo. Let me build this as a fully

logo. Let me build this as a fully interactive HTML presentation with all the effects you want. So what's

important here is this HTML presentation that is the output is you will have a link that you will be able to share.

Okay, it looks like it's done. Let's

take a look. Okay. Oh,

interesting.

It made the moving shapes.

[clears throat] Oh, so look here. Claude

wants to actually go into the presentation. Okay, so we're going to

presentation. Okay, so we're going to take a look at it. If you see here, Claude is actually trying to go in and review it itself. Let's see. You see,

it's completed and now it's actually opening Claude and Chrome. So, it's

looking through it itself. So, it's

looking through all the pages to troubleshoot if there's anything wrong.

While it's doing that, let's take a look at what it did.

Still looking through. Okay,

so this looks pretty good. Look, it

already animated the shapes. This is a little funky here. love to figure out.

Um, but it has this nice little progression bar down here. Super cool.

It's very It's clickable.

There we go. So, if we go back to Figma, we'll see. You can kind of see here.

we'll see. You can kind of see here.

This was the screen we had. Let's go to the first screen.

This is the screen it came up with. Um,

so it's pulling the shapes, but it's not using the the right color scheme. So,

let's see if we can get it in the right place. Um, but what is cool is it's

place. Um, but what is cool is it's actually creating this movement. So,

let's go back to Ghosty. It's still

Ghosty. It's still reviewing each slide.

So, let's let it finish looking through.

We're going to go in and we're going to ask it to actually fix and mimic what was in Figma. Okay,

so it finished and it's saying all sides are working with smooth transitions.

Now, let me fix the visual issues. The

3D shapes need to match each slide's color. The logo has rendered glitch.

color. The logo has rendered glitch.

Okay, so you can see it went through and it noticed this. It noticed that the colors here are different than what we've defined in Figma, which is awesome. So, let's say yes, go. And

awesome. So, let's say yes, go. And

let's see what it does.

Perfect. Now, fix the shapes. Use purple

tone shapes for purple slides and orange for orange slides, which is going to be my feedback, but it looks like it's actually doing it on its own. So

something to note here is when I first built this presentation, I used way more generic at the beginning. I said make it look like this page. But if you remember, we prompted it specifically

use glass morphism um animate the shapes. And because I gave it so much

shapes. And because I gave it so much direction at the beginning, I think that's why it's going to be way less work this time around than when I did it the first time. So now it's going to reload and now it's going to go back

into Claude and Chrome and it's going to review. So the Claude and Chrome

review. So the Claude and Chrome extension, if you guys don't have it, I suggest getting it because it's a really great way for Claude Code to actually go and look at the interaction. So you can

tell Cloud Code, hey, click on this button and tell me if it's exactly how it should render or what errors are happening. Um, so I use it quite often.

happening. Um, so I use it quite often.

So you see here it's saying the shape should be behind the text but in front of the background. So it's recognizing that the shapes are not appearing in the right Z frame. So it's going to fix that. So it looks like it's made all

that. So it looks like it's made all these changes and now again it's going to go into cloud and code cla and chrome

and check to see the final. Let's also

check and see. Whoop. It looks like it made it worse.

Okay, definitely not.

It tried to do the monochrome, but it didn't work well. So, these

changes don't make sense. I'm actually

going to stop it now. Okay, so it didn't do what I want. So, let's do this. Let's

say let's go back to when you did the first render. Okay, so it looks like

first render. Okay, so it looks like it's reverted back to the original. Now,

let's think of how to prompt so that it's actually pulling the monochrome color palette. So, maybe I'll start with

color palette. So, maybe I'll start with do you see do you see the what you'll

learn screen? Okay, so it found the what

learn screen? Okay, so it found the what you'll learn today slide.

The iridescent asterisk should be >> which one?

>> The same color scheme as the page. So, it's orange.

They want it to have an orange color. I'm going to also tell it to

color. I'm going to also tell it to reference this Figma.

Okay, let's see what it does. So, it

says in the Figma sees that it uses the mix blend mode luminosity to make it monochrome orange.

So, let's see if that that does it.

Okay, so let's see. Refresh the page.

Okay, there we go. It's definitely

orange. It looks It doesn't look identical, but I I like how it how it's coming across. Let's look at the Figma

coming across. Let's look at the Figma again. No, it looks pretty good. Um

again. No, it looks pretty good. Um

now, so what I can do is I can apply it to this page as well, right? So we look at this page.

Going to copy it. Let's

apply the same luminosity to the Does this sound familiar?

page. See Figma here.

>> Okay, so it looks like it just finished.

Let's go take a look and see if it changed the color here.

Perfect. Shapes are moving. It's the

right color. Now, what I'm going to say is, can you apply these luminosity changes to every

screen in the presentation, making sure the shapes follow the same color

scheme as the page?

Let's see if it can apply it to the rest of the screens.

Okay, now it says it's done. And now Claude and Chrome is going to go look and make sure. We also can take a look while

sure. We also can take a look while cloud code is. Perfect. Oh, there's

still something funky here. So, we need to ask about that. Sounds great. Good.

And it applied it here. So, now

let's ask about let's go to Figma. Okay.

So you see it's still a little different here. So I'm going to reference this.

here. So I'm going to reference this.

Let's go back into Chrome. Okay.

Screen one has the right colors but not the right layout.

See how the background has outline.

Let's plan out.

Okay, so I'm giving it the Figma file and telling it to plan out how to rethink this.

The hard part here is that when I converted this file from Fig Jam, it actually just made it solid and it didn't actually create the screen. So,

it might be I might have to go in and do way more iterations on this one.

>> So, it's entering plan mode and it's going to >> suggest how we can implement this.

Okay. So, let's read the implementation plan.

scattered shape background noisy texture overlay. I think this makes sense. I have some questions on if

makes sense. I have some questions on if it's actually going to implement correctly, but let's try it and see.

Okay, let's take a look.

It's getting closer. Still not quite there. Okay, I'm going to try one more

there. Okay, I'm going to try one more time asking it to look at the Figma file. So, I'm saying look at the Figma

file. So, I'm saying look at the Figma file and compare the differences in the code verse Figma.

It is definitely getting closer though.

There's way more shapes in the background.

Okay, so it's saying it sees the full the differences.

So, let's see if it can fix it this way.

Okay, let's take a look.

>> Okay, it's getting closer. Still not

completely there. [clears throat] I think that the problem is the glass layer. So, let's link it from Figma. So,

layer. So, let's link it from Figma. So,

I'm going to copy here.

Do you see the glass effect on the layer I have selected in Figma?

Yes, transparent frame with rounded corners.

So, it's saying it has I think it actually has a the effect is

glass. The effect is glass in Figma.

glass. The effect is glass in Figma.

Okay. So, it can't actually see that.

What if I send this Here are the exact blur settings.

Okay, let's see if this can pull the information.

Okay, it's going to try to implement the glass material effect. Let's see if it's got it.

Okay, let's go see.

Okay, definitely better. It's missing

some of the shapes behind.

Um, but this one's floating on top, which is nice. So, see this one?

Remove the shape at the top right from slide zero.

And let me take a screenshot so it knows what I mean.

Okay, let's see if it removed it.

Perfect. So, what I'm going to do is I could spend more time putting it back in, but for time sake of this video, let me do a couple more changes. See this

line? Let me fix this line.

Let me make this line that is going through a copy go below the copy.

Perfect. Okay, so I think we're in a really good place.

I would still change some things like this I need to remove. Um, but let's do this. I want to show you how to convert

this. I want to show you how to convert this into a presentation that you can share with everyone. Okay. So, now that we're in a good place, we're going to say package standalone HTML. What is

this doing is this is basically creating a file in HTML file. So, I can send this HTML file to anyone and then they could click it and open it. You'll see in a

second. Okay. So, it says it's ready.

second. Okay. So, it says it's ready.

So, I'm going to go into my file. See

how this says presentation standalone HTML? I can open this and it's going to

HTML? I can open this and it's going to open this file. So, I can send this file to anyone and they'll be able to open it and then they'll get access to this full presentation.

So, this is the next step of building presentations. You no longer have to go

presentations. You no longer have to go into Google Slides. You no longer have to animate try to figure out how to animate something. You can literally ask

animate something. You can literally ask Quad Code to build it for you. Whether

you have a Figma as a reference or you can just build it from scratch with other references, it's really up to you.

Um, and I think this is really the best way to start and continue to build presentations because you can easily just chat with Cloud Code, update things as needed, and easily share to whoever

you want. If you like this video, please

you want. If you like this video, please like and subscribe. I am creating more videos on how to build AI into your product. Thanks.

product. Thanks.