Workshop
Resource Hub

Start with ChatGPT (free). Tell it your rough idea and let it help you shape a clear brief. You can also use Claude — whichever you prefer.

The output of this step is a structured brief — not a vague idea.

Think through these before you touch any design tool. This is what separates intentional design from AI slop.

A reference anchors the AI. Without one, you get generic output.

Use ChatGPT to write a video prompt, then generate it in Google Flow. The trick: upload the same image as both start and end frame — this forces a seamless loop and saves you tokens.

// Paste into ChatGPT to get your Google Flow prompt

I need a prompt for Google Flow to create a
6-second loopable video for a website background.

My project: [YOUR PROJECT NAME]
Visual direction: [DARK/LIGHT/CINEMATIC/MINIMAL]
Subject: [WHAT THE VIDEO SHOWS]

Make it minimal, atmospheric, and seamlessly
loopable. No text, no people, just ambient motion.

Google Flow Settings — configure these exactly:

ModeVideo

TypeFrames

Aspect16:9

Generate1x

ModelVeo 3.1 - Lite

Cost10 credits

• Write your prompt — use ChatGPT to craft it (template above)
• Open Google Flow — switch to Video → Frames
• Select Veo 3.1 - Lite from the model dropdown (10 credits per gen)
• Upload your start & end frame — use the same image for both to force a loop
• Set 16:9, 1x — landscape ratio, single generation to save credits
• Generate — download the result when done

Now take your video and host it on Cloudinary so you get a public CDN URL to use in your design.

• Log into Cloudinary — go to the Media Library tab
• Drag & drop your video — or click Upload in the top-right
• Copy the public URL — click on the uploaded file, copy the URL. This goes directly into your Lovable prompt next.

Combine everything — brief, copy, Cloudinary video URL, and sidqo.com as reference.

I'm building a header for [PROJECT NAME]
— [brief one-line description].

Use sidqo.com as the design reference
for layout, spacing, and overall feel.

Background video (Cloudinary URL):
[PASTE YOUR CLOUDINARY URL HERE]

Dark gradient overlay from the bottom.
Headline: "[YOUR HEADLINE]"
Sub-headline: "[YOUR SUB-HEADLINE]"
CTA: "[YOUR BUTTON TEXT]"

Must be responsive — mobile, tablet, desktop.
Prioritize mobile-first.

Iterate until the design system feels right. Then export the .md file with the full code.

Import the .md from Lovable. Preview locally. Use the magic prompt to get interactive sliders.

• Create a project folder in Documents — name it after your project
• Open Claude Code and import the .md file
• Preview at localhost:3000 — preview button in top-right corner
• Use the magic prompt below to get interactive controls

Show me all the things I can tweak here.
Give me sliders for gradient intensity, blur level,
gradient direction, start color, end color,
and positioning.
Let me adjust them live and lock in the values.

Drag sliders → find the sweet spot → lock values → tell Claude to make them permanent. Done.