AI for Design Systems and Video Editing Webinar April 30th

This session is a tour of the entire creative pipeline with generative AI, end to end: fifteen minutes on design systems, fifteen on image generation, and fifteen on video editing (1:53). The idea is to show how you go from the conception of a brand to marketing assets to edited video, all with the same underlying logic. If you produce proposals, decks, social posts, websites, or video content, this one is for you.

Claude Design and the design system shift (4:09)

The elephant in the room is Claude Design, released about one to two weeks before this session. People call it a Figma killer, and while it does not do the same things as Figma or Canva, it introduced something pivotal: design systems.

A design system is literally the same thing as brand guidelines, with one difference. Brand guidelines are made for humans. A design system is made to be used by AI. Under the hood it is just a huge text file that tells an AI exactly how things should look: colors, typography, animations, tone, everything.

With Claude Design you can build prototypes, slide decks, websites, applications, and social media cards. It can even create videos, which we get to later. But everything downstream depends on the quality of the design system behind it.

Setting up your design system (7:14)

One practical warning before anything else: Claude Design has its own usage limit, and it burns fast. You can check what you have left in your Claude account under Usage, scrolled all the way to the bottom. During this session I checked mine live and I was at roughly 40 percent of my usage after about one hour of light use on the 200 dollar plan (1:11:32). So be deliberate about where you spend it.

Where should you spend it? On the design system itself. That is 60 to 70 percent of your time, and it is the part with the best return on investment. Once the design system is set, you no longer need to touch it.

Creating one is simple. In Claude Design you click Design Systems, then Create. Claude changed how generation works, so you now feed it a GitHub repository rather than a plain website URL. You can also add screenshots of your site, a Figma file if your brand guidelines already live there, and a short text description of your company. I demoed this live with my own site for Genial Agency, describing the brand as quirky, leaning geeky while keeping human at heart.

The result visualizes your animations, typography, primary and secondary colors, semantic colors, and the whole animation system. If you are not happy with something, you click Needs Work and tell it what to change. And if you do not want to start from zero, there are shared libraries out there: during the session Jose Luis dropped a repository of 72 ready-made design systems in the chat, and the assets it produces look fantastic (17:45). Take one, adapt it to your branding, and you save yourself massive amounts of time.

Demo: branded decks and proposal assets (10:51)

With the design system connected, generation becomes trivial. I asked Claude Design for a business proposal deck: mission, the system we are selling, an investment section, and payment terms. Because it is wired to my design system, it pulls in my branding and color palettes automatically and asks follow-up questions about the client and content.

Dmitry asked in the chat whether this is good for proposal generation, and the answer is yes: you can generate decks or full pages, so proposals work well. The honest caveat from my own demo is that my quick five-minute design system produced only okay slides. That is the point: if your design system is bad, you heavily compromise the quality of everything you generate.

Image generation is now visual reasoning (18:29)

ChatGPT broke image generation again, in the good sense. When Nano Banana was released, we moved from standard image generation to visual reasoning: models that understand an image and make the changes you want. Now we have gone a step beyond that, into what I would call visual analysis.

My favorite demo (19:49): I generated an image of a wall with a crack, then asked for three different ways to fix it at three different price points, with before and after pictures. That is not image generation anymore, that is a repair quote produced visually. Give it the dimensions of the crack and the pricing gets reasonable. Then I pushed further and asked for a visual step-by-step guide for each repair method, aimed at apprentices in a repair shop. Suddenly you have an educational asset, and it is not even a question of prompting, it is a question of keywords.

Two more things worth knowing here. First, GPT Image 2 also generates UI surprisingly well. Second, you can now combine image generation with reasoning and web search: when you see the small Thinking tag on image creation, ChatGPT researches on the web first and integrates correct information into the image. It is slower, but it is a different class of output.

I also shared motionsites.ai, a prompt library that inspired this whole episode. Their free prompts show what Claude Design can do when a solid design system sits behind generated video backgrounds: the beauty comes from the videos, not the layout.

Higgsfield inside Claude (27:47)

Higgsfield is one of the better services for image plus video generation because one account gives you access to every major model: Nano Banana 2, Nano Banana Pro, GPT Image 1.5 and 2, Kling, Seedance, Veo 3 and Veo 3.1. If you generate visual assets regularly, it saves you real money and keeps you current.

The reason it matters right now: Higgsfield released its own MCP server, literally the day before this session, so you can connect it to Claude as a custom connector in your settings. That gives Claude the ability to generate images and video directly, and it opens up a whole new panorama for marketing people, including scheduled asset creation for posts.

For the live demo (32:07) I asked Claude to generate brand visuals through Higgsfield: a purple, cartoonish necromancer-style potion with smoke and a skull on the bottle, generated in parallel on Nano Banana and GPT Image. Claude shows you the exact model and even picked a one-to-one aspect ratio on its own because the asset was for social media. Then I had it animate just the smoke into loop videos using Kling 3.0 and Seedance 2.0 side by side. In my experience so far, Seedance 2.0 has been giving me better results than Kling 3.0, but both are good.

The loop videos went straight into Claude Code with a request to design social cards around them (38:46), taking inspiration from six existing cards in my grid. Two prompts later I had branded social posts with an animated potion background. One caution: generating images and especially video consumes extreme amounts of credits, so be picky.

AI video editing with HyperFrames (42:21)

HyperFrames, explained simply, is code that creates video. Everything you see rendered is code in the back, and that is exactly why it works so well: we have reduced video to a code problem, and AI is very good at code (1:07:58).

There are two ways to use it. The lighter way is inside Claude Design: you follow the instructions on the HyperFrames site, download one Markdown file, and give it to Claude Design. The deeper way is inside Claude Code or Codex with two GitHub repositories. I deliberately ran this session's demo in Codex to show that once you understand the fundamentals, you can switch tools freely; Codex is the same idea as Claude Code on the OpenAI side (44:30).

The workflow has two skills. First, video-use handles trimming: it transcribes the footage, currently my pick is ElevenLabs because its timestamps are extremely precise, and then cuts hesitations, coughs, and dead pauses. I filmed a 59-second clip of myself explaining how to solve an equation and coughed on purpose; the system cut it out. This part works very, very well today, on videos as long as fifteen minutes or more.

Second, HyperFrames itself does the editing, meaning the visual overlays. I asked it to detect where my face sits in the frame, then place a dark glassmorphism card in the free space, pull the equation steps from the transcript into that card, and add educational animations matched to my pink hoodie and warm room palette (55:15). Within minutes I had a workable educational video about the Gaussian integral, with subtitles aligned to my voice. I am genuinely revising how I produce my own YouTube videos because of this.

Client design systems and the asset generation loop (59:10)

Rohan asked how to use this for client assets, and the recipe is: create a design system per client inside Claude Design. Feed it everything visual you can get, logos, presentations, website screenshots, the site code if you have access, Figma files, and any brand guidelines document. Out comes a design system you can reuse for all their assets.

Then everything closes into one loop (1:01:54). Claude Design generates the design system. Claude with Higgsfield generates images and videos that follow it. HyperFrames edits those videos inside Claude Code or Codex. And the finished assets flow back into Claude Design to become websites, applications, decks, and social posts. It is a loop, and the design system is the quality multiplier at every stage.

One more thing I said bluntly: I think designers will be among the last to lose their jobs. There has never been a bigger need for good design and branding to stand out, and Claude Design connects directly to Claude Code, which finally smooths the painful handover from designer to developer.

Content factories (1:08:54)

Yannick asked how you actually make money with this. My honest answer is that this specific stack is very new, but I showed the adjacent project I am building: a content factory. A system ingests my YouTube videos and LinkedIn posts, atomizes them into content atoms, and each atom can become its own social post in a predetermined visual format, infographic or standard visual. Because you are repurposing things you actually said, with your own design system on top, you preserve the uniqueness of the brand instead of generating generic content. And with editing this accessible, you can even start selling small video editing gigs.

Q&A highlights

• Seth asked whether quality holds for 4K input. The system detects resolution and tried to maintain 4K, which slowed the edit down, then stepped down to 1080p for the render. I am confident you can still do color grading in Premiere Pro afterwards if you need it (48:38).
• Nicholas asked how HyperFrames differs from ffmpeg-based editing. The pipeline is raw file, then trimming, then editing, then rendering. FFmpeg covers the trimming layer; HyperFrames is a library of components for the overlay and design layer, which is where the visual quality comes from (57:09).
• Benjy asked about prompting best practices across Claude, ChatGPT, and Nano Banana. I am still in the testing phase there and will report back once I have run enough experiments.
• Nicholas also closed the session with the kind of message that makes my week: the systems from these webinars helped him make several grand in the past couple of weeks.

If you want more sessions like this, I run these webinars every Thursday. Browse the full archive on the webinars page.