AI for Design Systems and Video Editing Webinar April 30th
This webinar shows you how one AI-ready design system in Claude Design can feed image generation, video generation and code-based video editing, so a single brand turns into proposals, decks, social posts and videos.
Pour qui: Business owners, marketers and builders who want to produce on-brand visual assets and edited videos with Claude, ChatGPT, Higgsfield and HyperFrames instead of generating them one prompt at a time.
À retenir
A design system is brand guidelines written for AI
As I explain it, a design system is the same thing as brand guidelines, except it is meant to be read by agents and generative AI rather than people. In practice it is a large text file describing your colors, typography, animations and tone of voice. In my view, the quality of every deck, page, image or video you generate depends on it, and a bad design system heavily compromises everything built on top of it.
Spend most of your Claude Design credits on the design system
Claude Design has its own usage limit, which you can check in your Claude account under Usage, at the bottom of the page. I suggest spending 60 to 70 percent of your time and credits building the design system, because once it is set you no longer need to touch it. On my $200 plan I used about 40 percent of my Claude Design usage in one hour, and you cannot buy extra credits for it yet.
How to create a design system in Claude Design
In Claude Design, click Design Systems, then Create. You can give it the GitHub repository of your website, screenshots, a Figma file, logos, presentations or a brand guidelines document, plus a short description of your company and brand personality. Generation takes about five minutes. The more you give it, the longer and more token-expensive it gets. If the result is off, click Needs Work and describe what to change.
Image generation is now visual reasoning
Using ChatGPT, I generate a wall with a crack, then ask for three repair methods at three price points with before and after pictures, then a step-by-step visual guide for apprentices at a repair shop. Pricing can be wrong unless you give the crack's dimensions. I also point out the Thinking option under Create Image, which makes ChatGPT research the web and put the correct information into the image.
Connect Higgsfield to Claude to generate images and videos
Higgsfield gives you access to many image and video models (GPT Image, Nano Banana 2 and Pro, Kling, Seedance, Veo) and now has an MCP server you add to Claude as a custom connector through Settings, then Connectors. From a Claude chat you can generate several images in parallel, then click Animate to turn one into a looping video with Kling 3.0 and Seedance 2.0. Be picky: image and video generation consume a lot of credits.
HyperFrames edits video by writing code
HyperFrames is code that creates video: the AI writes code that is then animated frame by frame. In Codex or Claude Code, I first use the Video Use skill to trim a raw clip (it transcribes with ElevenLabs and cuts coughs, pauses and hesitations), then ask HyperFrames to add on-brand overlays such as a glassmorphism card with each equation step placed where my face is not. You can also use HyperFrames inside Claude Design by giving it a Markdown file.
The asset loop: Claude Design, Higgsfield, HyperFrames, back to Claude Design
Use Claude Design to build your design system. Paste that design system into Claude with Higgsfield (or ChatGPT) to generate images and videos. Edit the videos with HyperFrames. Then bring those assets back into Claude Design to build websites, applications, social media posts and proposals, and export them. I want to stress that the design system is what gives you quality at every step of the loop.
Outils présentés
- Claude DesignCreating the design system from a GitHub repo, images and Figma files, then generating branded proposal decks, prototypes, social media cards and short videos from it.
- ChatGPT (GPT Image 2)Image generation with visual reasoning: before and after repair visuals at three price points, a step-by-step visual guide, and images that use Thinking plus web search.
- Nano Banana (Google Gemini)Image generation model (Nano Banana 2 and Nano Banana Pro) used through Higgsfield to create brand visuals.
- HiggsfieldOne account for many image and video models (GPT Image, Nano Banana, Kling, Seedance, Veo), connected to Claude as a custom connector to generate and animate assets from chat.
- HyperFramesCode-based video editing: adding on-brand overlays and educational animations to a trimmed clip, previewing it in its own studio before rendering, and making short videos inside Claude Design.
- Codex (OpenAI)Running the Video Use and HyperFrames skills to trim and edit a video; I describe it as the same thing as Claude Code on the OpenAI side.
- Claude CodeThe alternative to Codex for running the video editing skills, and where Claude Design designs can be handed over to developers.
- ElevenLabsTranscribing the video with precise timestamps so the trimming step knows exactly what to cut.
- FigmaOptional input: if your brand guidelines already live in Figma, you can add the file when creating the design system.
- Motionsites.aiA free prompt library I used for inspiration on Claude Design pages with generated video backgrounds.
Questions du public
Is Claude Design good for generating proposals?
Yes. Claude Design can generate decks or pages, so it works for proposals. I demo it by picking a slide deck, then asking it to use my design system to build a business proposal with the mission, the system being sold, an investment section and payment terms. Because it is connected to the design system, it applies my branding and color palette, and it asks follow-up questions such as who the client is before building the deck.
Does the video quality stay the same when you edit 4K footage this way?
The editing agent detects the resolution and recognized the file as 4K. Trying to keep 4K quality made it spend much more time on the edit, and in the demo it switched the output from 4K to 1080p. I am not yet sure whether it can be forced to stay in 4K and will test it, and that you can still do color grading in Premiere Pro afterwards if you need it.
How is HyperFrames different from editing with FFmpeg?
I split video editing into steps: raw file, trimming, editing and rendering. For the trimming, FFmpeg does the job. For the editing, meaning putting overlays inside the video, HyperFrames gives much better results because you can think of it as a library of components for visual design. You can use it inside Claude Design with one Markdown file, or go further in Claude Code or Codex with two GitHub repositories.
How do you use Claude Design to create assets for clients?
Go to Claude Design, then Design Systems, and create one for the client. Give it as many visual assets as possible: logos, presentations, website screenshots, the website code if you have access (fine if you do not), Figma files and any brand guidelines document. The result is a large text file telling AI how things should look. You then copy and paste it whenever you generate images or videos, for example in Higgsfield, and bring the results back into Claude Design.
