# Design system to video: prompt pack The prompts used in the AI for Design Systems and Video Editing webinar, in the order of the workflow. Replace the parts in [brackets] with your own details. The loop: Claude Design (design system) > Claude + Higgsfield (images and videos) > HyperFrames (video editing) > back into Claude Design (final assets). --- ## 1. Create your design system (Claude Design) Where: Claude Design > Design Systems > Create. What to give it (as much as you have): - The GitHub repository of your website - Website screenshots - Logos and presentations - A Figma file, if your brand guidelines live there - A brand guidelines document Company context (my example): ``` The name is Genial Agency. It's an AI upskilling firm and AI implementation firm. The branding of the company is a bit quirky, leaning over the geeky side while keeping human at heart. ``` Notes from the webinar: - Generation takes about five minutes. - If the result is off, click Needs Work and describe the change. - Check your remaining usage in your Claude account > Usage (bottom of the page). Spend most of your Claude Design credits here. --- ## 2. Generate a branded proposal (Claude Design) Where: Claude Design > Prototype > slide deck, connected to your design system. ``` Using this design system, I want you to create a business proposal. First, I want you to show our mission. Then I want you to show the system that we want to sell to our customer, which is going to be [what you sell]. Third, I want you to put the investment section. And fourth, I want to give the payment terms. ``` Answer its follow-up questions (client, industry, mission statement, language). --- ## 3. Image generation as visual reasoning (ChatGPT) ``` Can you please generate an image of a wall with a crack? Make the image 16:9. ``` ``` Show me three different ways at three different price points through which I can fix this. I want to budget out and look at the before and after pictures of how it would look after I fix this wall. ``` Tip: pricing can be wrong unless you give it the dimensions of the crack. ``` Instead of showing me the before and after, create a visual guide on the step-by-step instructions on how I can fix this wall myself with the three different methodologies. This is aimed towards apprentices of a repair shop that really need to learn, and you have to be very precise on the step-by-step guide. ``` Tip: turn on Thinking under Create Image to have ChatGPT research the web and put correct information into the image. --- ## 4. Check your models (Claude + Higgsfield connector) Add Higgsfield as a custom connector in Claude (Settings > Connectors), following the step-by-step guide on Higgsfield's website. Then: ``` What video generation models do you have access to, and which image generation models do you have access to? Check Higgsfield. ``` --- ## 5. Generate brand images in parallel (Claude + Higgsfield) ``` Use Nano Banana 2 and GPT Image 2. I want to create some visual assets for my brand. It's a brand based on 3D cartoonish characters around magic. The color palette is purple, sort of like a Necromancer vibe. I want to generate an image of a potion showing some smoke going out of it. The potion should be purple, and it should have a cartoonish skull on the bottle. ``` For your own brand: paste your design system and ask for a visual asset that follows it. --- ## 6. Animate the image into a loop (Claude + Higgsfield) Click Animate on the image, then: ``` Animate this reference image into a short video. The only thing that I want you to do is to animate the smoke. We will use this as a loop for a social media post, and I want you to use two video generators: Kling 3.0 and Seedance 2.0. ``` Warning from the webinar: image and video generation consume a lot of credits. --- ## 7. Turn the loop into social cards (Claude Design) ``` I want you to generate a seventh social card in this grid with this video. It's a video of a spooky potion that's meant to be venomous. Take inspiration from the six cards that you currently have, and generate three different cards with three different layouts, so I can choose. ``` --- ## 8. Trim a raw video (Codex or Claude Code, Video Use skill) ``` Do you have the Video Use skills and the HyperFrames skills? If so, go to my Movies folder and tell me which videos are in there. ``` ``` Let's start with the [video file name] video. As a first step, I want you to use the Video Use skill to do the trimming of the video for me. ``` What it does: transcribes the video (I use ElevenLabs for precise timestamps), then cuts coughs, pauses and hesitations and aligns subtitles. --- ## 9. Add educational overlays (HyperFrames) ``` Now I want you to analyze the transcript of the video. It's a video about mathematics and how to solve the Gaussian integral. For each step, first analyze where my face is located inside the video. Then, where my face is not, put a big glassmorphism card. Inside that card, pull out all of the elements of the equation and the steps that I'm giving to solve that equation. Make sure the glassmorphism is transparent and add some nice educational animations, because this is aimed towards students. Let me know if you have any questions before you start the editing. Please make sure to use HyperFrames for this. ``` Style answer I gave to its follow-up questions: ``` I want it to look playful and warm. Dark glass. Match my pink hoodie and my warm room color palette for the colors. ``` Then ask it to open the preview so you can review before rendering: ``` Can you please open the renderer so I can look at this? ``` --- ## 10. Quick video inside Claude Design (HyperFrames) Follow the HyperFrames instructions for Claude Design (download the Markdown file and give it to Claude Design), then: ``` Using HyperFrames, create a 10-second goodbye video with confetti all around and some pop-ups coming up left and right saying "I'll miss you". Then play the video. ```