Claude Code + Claude Design + Kling AI: Client-Ready Web Experiences

Claude Code + Claude Design + Kling AI: Client-Ready Web Experiences

UI Collective 83.5K subscribers
11.1K views · 2026-06-23 UI Design
AI WORKFLOWS & MORE: https://uicollective.co/
Follow me on X: https://x.com/KirkMDesign
Design with AI - Full Guide: https://youtu.be/j_ZPV10bu54

Build world-class interactive websites with Claude Code, Claude Design, and Kling AI. In this video, I’ll show you how to combine AI-assisted development, custom design, and motion to create polished, high-end web experiences that feel genuinely client-ready.

Need a design system? (also included in the academy): https://collectivekit.co/

Why Join UI Collective Academy? Get access to premium courses, premium downloads, and so much more on the way (I am largely building this solo...trying to make design education available for all, support goes a long way!)

🔗 OTHER SYSTEM VIDEOS TO WATCH
Build a Design System: https://youtu.be/opTANvl9G1g
Complex Design System & Figma Variable Setup: https://youtu.be/L-tpK7Eeuow
Claude Design Video: https://youtu.be/eXlSgQmz02E

🔗 MORE LINKS
Let us build or fix your design system: https://designsystemlabs.co/
📣 Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective
Claude Design: https://claude.ai/design
Higgsfield: https://higgsfield.ai/
kirkland@uicollective.co

0:00 An Introduction
0:50 Apple as Inspiration
1:20 Using Higgsfield for Image Generation
4:13 Using Kling AI for Video Generation
5:20 Jumping into Claude Design
6:48 Pivoting to Claude Code
7:22 Converting the MP4 with FFMPEG
9:00 First Result
9:38 Making Changes
12:49 Final Result
13:45 Deploying to Vercel
14:32 Outro