Big Idea

The argument in one line.

Building a reusable Claude Code skill from existing assets compresses every future ad from hours of manual work to a single slash command and a URL.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You sell a SaaS product or online community and want professional video ads without hiring a video editor.
You already use Claude Code and want to see how to turn a one-off prompt into a reusable slash command.
You are frustrated that most AI ad tutorials show polished final outputs without showing the messy iteration process.
You want to connect image and video generation tools like Higgsfield to Claude Code via MCP.

SKIP IF…

You need ads for a physical product or want UGC-style creator content — this workflow is specifically for UI/screen-first SaaS ads.
You have never opened Claude desktop and want a beginner orientation before a build-along.

TL;DR

The full version, fast.

Rather than starting from a blank prompt, the host collects three existing assets (a sponsor-provided PDF with a master prompt, a free motion-graphics skill from the Higgsfield blog, and his own product website) and drops them into a new Claude Code folder. He asks Claude to synthesize these into a repeatable skill — one slash command that accepts any product URL and produces a storyboard, brand extraction, and rendered video. Two storyboard revisions show how conversational iteration improves the output before any render credits are spent. The resulting ad is imperfect but usable in minutes, and every piece of feedback automatically improves the skill for future runs.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →

Chapters

Where the time goes.

00:00 – 00:58

01 · Hook — the gap from last video

Previous video covered physical-product ads; this video addresses the SaaS/website gap. Four-step pipeline sketched on whiteboard canvas.

00:58 – 02:56

02 · Asset gathering — three pieces

Introduces Higgsfield as sponsor and tool. Pulls the CRM launch-package PDF, identifies the master prompt, downloads the mograph skill from Higgsfield blog.

02:56 – 03:31

03 · Framework — collect first, then synthesize

Names the three pieces (master prompt, mograph skill, CCC website) and explains the pattern.

03:31 – 05:18

04 · Claude Code prompt engineering

Creates CCC folder on desktop, drops in the files, writes a multi-paragraph goal prompt. Addresses beginner fear about breaking it.

05:18 – 06:04

05 · Higgsfield MCP setup

Shows how to add a custom MCP connector in Claude desktop: copy the URL, click +, paste, sign in.

06:04 – 07:08

06 · Claude reads, plans, asks two questions

Claude synthesizes the PDF and mograph skill, proposes a plan, asks about sound design (music + on-screen text chosen) and whether to test-render (skipped).

07:08 – 08:33

07 · Skill builds — inline revision

User adds inline comment to switch to GPT2 image model. Claude finishes the /saas-ad-studio skill file. Desktop app restart required.

08:33 – 10:08

08 · First run — brand extraction + concept selection

Runs /saas-ad-studio against claudecodeclub.ai with 16:9 and 15s params. Claude screenshots site, extracts brand DNA, presents 3 concepts, recommends User to Paid.

10:08 – 11:25

09 · Storyboard review — art direction round 1

Reviews local HTML brief with 5-shot storyboard. Too screenshot-heavy. Requests revision to 8 shots with more visual variety.

11:25 – 12:37

10 · Revised storyboard — render approval

Claude delivers 8-shot storyboard with laptop hands, product screens, proof-point callouts, logo lock. Duncan approves render.

12:37 – 13:05

11 · Final video + CTA

Plays the finished 15-second ad. Honest verdict and skill download CTA.

Atomic Insights

Lines worth screenshotting.

Dropping existing assets into a folder and asking Claude to synthesize them produces a better skill than describing everything from scratch.
A locally-generated HTML brief file acts as the shared spec between you and Claude — approve it before spending render credits.
The first storyboard is a draft, not a deliverable; forcing one revision round consistently produces a meaningfully better output.
An inline comment inside Claude's plan is faster than re-prompting from scratch.
Restart the Claude desktop app after building a new slash-command skill — the command won't appear in autocomplete until you do.
The real ROI of a Claude Code skill is the reuse loop: every future run for any URL starts from the same entry point, and feedback refines the skill permanently.
Claude Code can take a full-page screenshot of a live website, extract brand colors and typography, and build a design brief autonomously.
MCP server setup in Claude desktop takes about two seconds: paste a URL, name the connector, sign in.
Treating yourself as the art director — not the executor — is the mental shift that unlocks Claude Code for creative production.
Most creators show the finished ad; showing the iteration (including the mediocre first storyboard) is the actual tutorial.

Takeaway

Skills compound — feedback trains the tool, not just the output.

WHAT TO LEARN

The gap between a one-off Claude prompt and a production-grade ad machine is three assets, one synthesizing request, and the discipline to treat every storyboard as a draft.

Collect raw inputs first — an existing prompt document, a generation skill file, and your product URL — before writing a single line to Claude. Synthesis beats description.
Gate the expensive step (render, API credits) behind a human-readable checkpoint. The local HTML brief is the approval moment; fix it before you spend money.
Your first storyboard is a draft. Forcing one revision round with specific art-direction notes consistently produces a better output than approving the first pass.
Inline comments in Claude's plan are faster than re-prompting. One sentence inserted mid-plan steers the entire downstream output without breaking the flow.
After creating a new slash-command skill in Claude desktop, restart the app — the command won't appear in autocomplete until you do.
Every piece of feedback you give to the skill improves all future runs, not just the current one. The compounding is in the skill file, not in your memory.

Glossary

Terms worth knowing.

MCP (Model Context Protocol): A standard that lets Claude connect to external tools and services. Adding an MCP server gives Claude the ability to call that tool's API directly from a conversation.
Higgsfield: An AI image and video generation platform that supports MCP integration, allowing Claude to generate and animate video frames without leaving the chat interface.
Slash command skill: A reusable Claude Code workflow saved as a markdown file and invoked with a /name prefix. Once built and the app is restarted, it appears in autocomplete like a built-in command.
Brand DNA extraction: Claude navigating to a live website, taking a full-page screenshot, and parsing colors, typography, stats, and messaging into a structured brief before any creative work begins.
Locked frame UI reveal: A cinematic video style where the product interface stays fixed on screen while animated elements appear around it, giving the impression of motion without screen recording.
Motion-graphics skill: A pre-built Claude Code skill file available free on the Higgsfield blog that handles storyboard creation and video animation via MCP.

Resources

Things they pointed at.

00:58productHiggsfield ↗

02:43toolHiggsfield MCP for Claude ↗

03:03toolHiggsfield motion-graphics skill (free download) ↗

08:30productClaude Code Club ↗

Quotables

Lines you could clip.

03:47

“The more that you start building with Claude Code, the more you start to collect all of these different pieces and you begin to see how they fit together.”

Standalone insight about the compounding effect of Claude Code skill-building — no setup needed→ TikTok hook↗ Tweet quote

10:27

“This is your opportunity as the art director to decide, is this good enough for you?”

Reframes the user's role from prompter to art director in 15 words→ IG reel cold open↗ Tweet quote

10:56

“What's great about working with Claude is not only can you improve on the existing storyboard, but you can actually use your feedback to improve the skill. So anytime you use this in the future, it's just going to be better.”

Articulates the flywheel — feedback compounds into a better tool, not just a better output→ newsletter pull-quote↗ Tweet quote

12:47

“Is it perfect? No. But is it pretty cool for just a couple of minutes work? Absolutely.”

Honest closer that sets realistic expectations while still landing the value→ TikTok hook↗ Tweet quote

The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

metaphoranalogystory

00:00We're going to do things a little bit differently today. In one of my recent videos, I showed how to make beautiful cinematic AI ads from a single prompt like this. This ad started with a [music] single product photo and we extracted the brand color palette, research about the audience.

00:16We created a hero shot and a full story board to work from before turning everything into a final polished video. But one of the most common questions that I got was, "This is great for if you have a product or something you could hold in your hand, but what do I do if I have like a SAS company or a website, something that isn't tangible?" So, today we're going to start completely from scratch.

00:36I'm going to show you how I think about the pieces of this puzzle and how we can put them together to create a skill or a prompt for Claude Code. We're going to extract info or screenshots from the website. We'll create a story board and then we'll stitch everything together to create the final video.

00:51Today, we're going to take my website for the Claude Code Club, which is my community where I teach people how to build cool things with Claude Code and earn income. And hopefully, some of the skills you learned today, you can apply to your own products or websites.

01:03So, focus in, close all your open tabs, and let's build. If you want to get access to the Claude skill we built today already done for you, just check the link in the description. Today, we're going to be using a platform called Higsfield to do this.

01:14They are the sponsor of this video, but they have some of the best image and video generation models around. But like I said, I wanted to do something a little bit differently because what I have found is there are a lot of creators on the internet who tend to show you a finished final product, but they don't always show you how they got there.

01:29And so, while Higsfield is the sponsor of this video, they didn't tell me exactly what to create, but they did give me some cool pieces to pull from. So, this is the actual brief that Higsfield gave me. It tells me all about their product, what makes it different from some of its competitors, how to set it all up, and things like that.

01:45But the thing that's really interesting is they actually gave me some of these sample use cases. So if we come down here, the one that I thought was the most interesting was this Higsfield CRM. The reason that I thought this was cool was because a CRM is a SAS product.

01:58It's a digital product. It's not a jacket or a tumbler that you hold in your hand.

02:01Like it's a little bit different. And so if we open this up here, the thing that was the most interesting to me was this 60-second product launch video. So let me open this up real quick.

02:09And so I'm just going to scrub through this. You can see it has some screen capture and some clicks and it's definitely not 100% perfect, but that's why I wanted to do this video today to show you what it's like to truly create something from scratch and then kind of have to test the end result. And then from there, we can figure out how we want to improve it.

02:25So, if we come down all the way to the bottom, they actually have this master prompt for recreating all of these assets, but for a different product. So, like for a different website.

02:33So, I'm just going to make note of this down here in red, and I'm just going to say we have the Higsfield master prompt. Because the more that you start building with claude code, the more you start to collect all of these different pieces and you begin to see how they fit together. There's another piece that I thought might be interesting.

02:48I saw this video the other day about using Higsfield to create these really highquality motion graphics. Things that look like this or things that look like this or something that's a little bit more UIUX focused that looks like this.

02:59So, I thought this was pretty cool and I thought maybe there's a use for this skill as well. What's cool about Higsfield is that if you come into their blog, they give you access to all the skills that they create. So you can just come in here like totally for free and you can download this to start testing out motion graphics.

03:14So we can just go ahead click download and we're good to go. So I'm just going to add this here and just say mograph skill. So that's piece number two.

03:21And I guess really the third piece is the cloud code club website. So I think we kind of have the pieces to get started. So remember the first thing that we want to do is we want to take what exists and we want to try to create some sort of skill that we can reuse anytime we want to make a video featuring our product.

03:35So, we're finally ready to come into Cloud Code. I'm going to open this up. I'm going to create a brand new folder on my desktop.

03:42And I'll just go ahead and name this CCC for Cloud Code Club. And we're all ready to get started. And I don't know what I don't know at this point.

03:49And that's okay. One of the most common things I hear from people is like, can I do this or should I try this? Or what if I break it?

03:55And the answer is like, yes, you should try it. Yes, you can probably do it. No, you're most likely not going to break it.

04:01All you need to do is tell Claude Code what you are trying to accomplish and then have it back and forth from there. You can think of it like a chatbot that can actually do things for you. All I've done is added the motion skill that we downloaded to this folder.

04:12And if you open this up, you can see this is just like a motion design skill. And so basically, this just figures out like the style of the ad, the length, and the format if you already have any existing assets, and it generates the storyboard. And then from there, it actually creates the video for you.

04:25And the other thing is I'm just going to add this PDF into the folder as well. So now we can just talk to quad to tell it what we are trying to achieve.

04:33My goal is to be able to create a high quality professional cinematic ad for a SAS tool or a product. Not a physical product that you hold in your hand, but actually a website or something like that. I need you to create a skill so I can redo this over and over again.

04:48We will use the Higsfield MCP. Inside of your folder, you have a CRM PDF and at the bottom of that is a master prompt for creating this style of ad. It has some things that you maybe don't need like UGC and things like that.

05:02Can we make use of this? There's also a motion design skill that I thought might be helpful as well.

05:07Read through that, see what you have access to, figure out if we can make use of it. Again, our goal is to be able to take a website for a SAS company or a product and turn it into a high quality cinematic ad featuring UI. I'm going to send this to Cloud Code and see what it comes up with.

05:21So, while Cloud is doing its thing, I might as well show you how to connect Higsfield to Claude Code. It's super super easy. So, all you want to do is come to higsfield.ai and you can click up here to MCP and CLI.

05:32And you can see that all we need is this URL right here. So, I'm just going to copy this. And if we come back into Claude, you can click the plus.

05:39You can go over to connectors and you can click manage connectors. I already have this set up, but for you, you're just going to click the plus, click add custom connector, name this Higsfield, paste in that URL, and click add. From there, it's going to ask you to sign in to your Higsfield account with your name and password.

05:56And just like that, in about two seconds, you'll be connected and ready to go. This MCP will give you access to every single thing you can do inside of Higsfield.

06:04You can generate all your images, video, and audio from directly inside of Cloud Code. So, check this out. This is how I like to work, and I recommend that everybody just read everything if you're trying to learn Cloud Code.

06:15So, the PDF documents a Higsfield launch package pipeline. The master prompt at the bottom covers a lot, but the part I care about is the 60-second locked frame UI reveal. So, we can see that the UGC stuff is what I want to cut.

06:26It's not needed right now. And we can see that it read through that motion design skill and it figured out that this is that skill that creates a storyboard and all the video and sea dance.

06:35This says I've got everything I need to design this. There are just basically two decisions that we have to make. So, how should the default sound design work?

06:42Should we have music and on-creen text? Do we want music and an AI voiceover? I think for this probably music and on-screen text makes the most sense.

06:48So, I'm going to select this. Or you can tell it something else. And then once the skill is built, do you want me to run one full end toend test render to prove it works?

06:55This is going to use credits or not. I'm just going to say no, just build it for now. So I'm going to have it build the skill.

07:01We're going to give it the website and we're going to try it with the Claude Code Club website and then refine from there. So Claude put together this big ass game plan for me. It says, I want a repeatable way to turn any SAS or website into highquality cinematic ad that features the real UI.

07:14So this is not a physical product ad or UGC. Pretty cool. So the skill is going to package this into a pipeline.

07:20That's great. It's going to use sound. It's going to use the Higsfield MCP server.

07:24It's going to generate any images or things like that that I might need using Nano Banana Pro. I might actually instruct this to use GPT2. Can I actually leave a comment here?

07:32Uh, use GPT2 image model instead because I think that one does a better job of preserving text, which is great. And so this is the part that's kind of the most interesting. It's just basically the whole pipeline, right?

07:43So what are we going to give it? It's just a product URL. It's going to actually look at and extract the brand DNA. like any colors or fonts or things like that.

07:50It's going to figure out a concept for me with a strong hook and a strong problem that it solves. It's going to put together a shot list and hero frames.

07:57It's going to animate all of the shots. It's going to do all the music and assemble everything together and then at the end deliver a final product. So, this is awesome.

08:05Other than this one thing, I'm pretty happy with this. I'm just going to click revise. And that's really it.

08:10And we should be good to go. So, Clog did its thing and it says the skill is ready to run with SAS Ad Studio. And then all I have to do is put in the URL for my site.

08:19If you just created a skill, you do need to restart the desktop app to have access to it. So, I'm just going to close this down, reopen it, and let's try it out. All right, we're back.

08:29I can type in slash and then SAS to bring up the SAS ad studio. And all I need to do is give it a product URL.

08:34It's cool because it says I can give it a couple of optional parameters, like if I need like login credentials for the site, if there's a certain aspect ratio, a particular duration, or any brand colors that I already know. So, first things first, I'm going to give it the cloudcode club.ai URL. And I think the other thing that I want to do is give it the aspect ratio.

08:53And I'll just say 16 by9 aspect ratio. And so maybe I'll just do like a 15-second ad for now so I can just save on credits while we're testing. So that's all I said.

09:01Let's see what happens. So let's take a look at what's happening.

09:04So basically, it went through and extracted all the brand. It actually took like a full page screenshot of the site itself. extracted all of the colors like the content of the site and it just asked me like a couple of questions. So one is like which 15 second concept do we want to build because we just got to start with one for now.

09:22So this is the recommended concept which is the core promise which is this idea that you can go from not knowing anything to building with claude and getting paid something that's proof first like lead with receipts like anything that our members have actually built or one of the talking points like the number one community.

09:37Let's just go with the user to paid cuz that's what it recommended so why not? So, this is already pretty cool. This is starting to build out this little brief for us with all of our colors like some of the like key stats right here like any of the actual screen captures that it's going to use in the video like presumably.

09:51And then even the three concepts it presented to us along with the recommendation. Okay, cool. So, this finished and actually updated the storyboard in the brief on our little website and we can just go through it and now's the time for us to make some decisions.

10:03So, we start with this little kind of orange bloom in the corner and little like confetti pixel things. That's cool. All right, we have a couple of screenshots like the real hero with like a slow push.

10:13Another push in on some of the member wins and then kind of this transition here to the logo. So again, this is just like a 15-second video. It's not a lot, but like I do think we can do better.

10:23And so this is your opportunity as the art director to decide, is this good enough for you? Like if we come back into Claude, you can see this says, okay, here's the storyboard. Do we want to approve and render this and animate everything or do we want to make some adjustments?

10:36And so what's great about working with Claude is not only can you improve on the existing storyboard, but you can actually use your feedback to improve the skill. So anytime you use this in the future, it's just going to be better. So this is where I just want to give you permission to try stuff and test stuff and just let it not be perfect the first time because it's not going to be.

10:54So personally, I'm okay with this opening shot. I do know that we're going to want to think through like transitions between the scenes.

10:59I think there's too many screenshots here for like a five shot sequence. I do think with like a total run time of 15 seconds, we probably could actually have like eight to 10 shots in here. Maybe closer to eight.

11:09I don't mind this logo at the end so we can keep it. I do think there's a world in which like maybe we want to show this on a laptop or maybe we want to show something abstract. And I'm not sure what that is.

11:18So, let's just talk with Claude Code to refine the storyboard one more time before we go into production on the actual video. So, I'm just going to come in here and I'm going to say we need to adjust this a little bit more.

11:28Like I think we should probably have eight total shots. We want this to be fast-paced. I do think we are overindexing on screen capture.

11:34There's three in a row. Is there something more interesting we can do? Can we maybe show one like inside of a laptop screen?

11:41Is there a person holding it? Is there something abstract that represents the Cloud Code Club? And we also really need to think about the transitions between these scenes because we don't just want like hard cuts cuz that's kind of boring and not polished and professional enough.

11:54Okay, cool. So, this did a revision and honestly, I think it is much better. Is it perfect?

11:59Maybe not. But we're much closer. We now have the shot of like me typing on a laptop.

12:03We still have our product shots. We have some cool text call outs like $400 in your first client paid or 200k views in 4 days based off of actual member proof points. We have this abstract representation of a community that ships and then the logo at the end.

12:16I'm happy enough with this to send it off and see what we get. And of course, if you're doing this for yourself, you can give it a lot more specific details on how you want these shots refined. So, our video finished.

12:30Let's give it a look. >> [music] >> So, is it perfect? No.

12:42But is it pretty cool for just a couple of minutes work? Absolutely. Of course, you now have the foundation to really turn this into anything you want from here and to add any type of improvements that you want.

12:54If you want to get access to the skill we built today already done for you, just check the link in the description. If you want to see how I built my own agentic OS using cloud code, check out this video right here. I'll see you over there.

The Hook

The bait, then the rug-pull.

Every Claude Code tutorial shows you the finished demo. This one shows you the mess first — three mismatched assets dumped into a folder, a prompt that didn't know what it didn't know, and a storyboard that had to be thrown back twice before it earned approval. What came out the other side was a 15-second ad and, more importantly, a skill that makes the next one free.

Frameworks

Named ideas worth stealing.

03:31model

Three-Piece Assembly Pattern

Existing master prompt (PDF or doc)
Existing generation skill (downloaded or built)
Your product URL or asset

Collect three raw inputs before prompting. Claude synthesizes them into a new skill rather than you describing everything from scratch.

Steal forAny time you want to build a repeatable AI workflow — assemble existing pieces, don't describe from nothing

09:00concept

Brief HTML as Shared Spec

The skill auto-generates a local HTML brief file (brand DNA, shot list, storyboard previews) that serves as the checkpoint between planning and render.

Steal forAny agentic workflow where render or API costs are real — gate the expensive step behind a human approval checkpoint

CTA Breakdown