Build a Design Portfolio with AI: Claude Design + Google Antigravity

Build a Design Portfolio with AI: Claude Design + Google Antigravity

23.7K views · 2026-06-08 Product DesignUI DesignInteraction & UX
In this tutorial, I’ll walk through a practical AI workflow for building a stronger UX and product design portfolio, from generating initial concepts and exploring visual directions to refining layouts, improving project presentation, and turning rough ideas into a polished portfolio website using Claude Design, Google Antigravity, Google AI Studio, and more.

This is for UX designers, product designers, UI designers, freelancers, and students who want to build or improve a portfolio website faster with AI tools. You’ll see how to use AI to move from rough ideas into a more polished, professional portfolio concept.

🔗 KEY LINKS
📣 LEARN AI WORKFLOWS AND MORE: https://uicollective.co/
❎ Follow me on X: https://x.com/KirkMDesign
Design with AI - Full Guide: https://youtu.be/j_ZPV10bu54

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!)

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

🔗 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
📣 Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective
Let us build or fix your design system: https://designsystemlabs.co/
Claude Design: https://claude.ai/design
Google Antigravity: https://antigravity.google/
kirkland@uicollective.co

0:00 An Introduction
0:55 Google AI Studio Intro
1:46 Using Google AI Studio for Ideation
3:59 Google AI Studio Output
8:25 Quick Low-Fidelity Generation
11:01 Claude Design
14:08 Claude Design Output
15:04 Modifying Claude Design Output
18:27 Using Kling for Hover Effect Interactions
23:41 Google Antigravity
25:38 Exporting Claude Design Output
26:20 Getting Started Inside Google Antigravity
27:05 Introducing Interaction Effects
32:52 Polishing the UI
37:35 Prepping for Publishing
38:51 Bringing AI Output into Loveable
42:19 Making Changes in Loveable
43:39 Deploying onto a Domain
45:39 Why Not Just Use One AI Tool?
46:16 Quick Note
47:11 Outro