1:27:43UI Collective · Tutorial
Designing With AI: Claude, Codex, Figma | Full Guide
An 87-minute practitioner guide to which AI tool belongs at which stage of the design process, and why using the wrong one burns tokens and time.
May 4thThe argument in one line.
Claude Code paired with an AI asset MCP can produce client-ready 3D animated websites in under 20 minutes, as long as you lock the typographic layout before touching any 3D or animation work.
Read if. Skip if.
READ IF YOU ARE…
- A web designer or developer who wants to deliver scroll-animated, 3D-heavy sites without writing raw Three.js or GSAP by hand.
- A Claude Code user who wants to connect external AI asset tools via MCP to generate media inline during a build session.
- Someone who needs a repeatable Dribbble-reference to deployed-Vercel-URL workflow in under 20 minutes.
- A designer currently starting projects with imagery first and struggling to find type treatments that fit.
SKIP IF…
- You need production-grade, maintainable animation code -- this workflow produces fast prototypes, not vetted long-term codebases.
- You want a deep dive into Three.js, WebGL, or CSS scroll APIs -- the video deliberately skips the generated code internals.
The full version, fast.
The core insight is sequencing: lock the typographic hero layout before touching any 3D or animation, because working backwards from text to visuals is far easier than trying to fit type around imagery. The host uses Claude Design to stub a text-only hero, exports to Claude Code, then connects the Higgs Field MCP to generate a rotating Mars planet and starfield via AI image/video generation. A scroll-linked zoom ties the hero planet into the second page section. Deployment is four Vercel CLI commands. The result is a shareable Vercel URL suitable for client demos or recruiter portfolios.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:48
01 · Hook + channel promo
Promise of 3D interactive sites in under 20 minutes. UI Collective Academy plug.
00:49 – 01:22
02 · Text-first principle
Core rule: lock typography before any 3D or animation work. Designers who start with imagery end up with type-fitting problems.
01:22 – 02:07
03 · Dribbble + Mobin research
Browsing for futuristic hero type treatments. Mobin noted as enterprise-leaning; Dribbble has more out-of-the-box futuristic references.
02:07 – 03:24
04 · Claude Design scaffold
Screenshot of Dribbble reference dropped into Claude Design. Prompt: text-only hero, white on black, no graphic elements. Result matches the type layout framework.
03:24 – 04:06
05 · Hand-off to Claude Code
Export Claude Design prompt to Claude Code. Hero rendered locally. Introduces Higgs Field AI.
04:06 – 04:41
06 · Connecting Higgs Field MCP
Paste Higgs Field URL into Claude connectors, authenticate. MCP is now active in the Claude Code session.
04:41 – 07:05
07 · First 3D prompt and iteration
Prompt: starfield background + Mars floating in from top-right. First result is a static image. Second detailed prompt (rotating, falls behind text, natural glow) produces the real 3D effect.
07:05 – 09:23
08 · Nav + text animations
Finds Resend nav button style in Mobin. Adds nav bar + staggered page-load text animations. Hero text and subtitle animate differently.
09:23 – 10:33
09 · Reviewing animations
Confirms stagger effect on page load. Nav button contrast noted as weak but acceptable.
10:33 – 13:24
10 · Scroll-linked section strategy
Strategy: whatever 3D element anchors the hero should zoom/pan into the next section. Prompt: bring Mars to center and zoom in as user scrolls to colonization section. Effect confirmed working and responsive.
13:24 – 14:32
11 · Vercel deployment
Claude Code generates four-step Vercel CLI walkthrough. Notes GitHub-to-Vercel as better practice for maintained projects vs. direct vercel command for one-off demos.
14:32 – 15:13
12 · Live result + CTA
Final site on Vercel domain. Scroll effects, Mars animation, responsive layout confirmed. Subscribe + UI Collective Academy CTA.
Lines worth screenshotting.
- Start with the text layout, not the 3D element -- type is harder to retrofit around imagery than imagery is to build around type.
- The Higgs Field MCP generates AI images and videos inline inside a Claude Code session, collapsing asset generation and code integration into one prompt loop.
- Vague prompts produce flat, image-quality results. Specifying rotation, scale, glow, and the layering relationship to text is what turns a static asset into a genuine 3D effect.
- One 3D element can anchor two page sections: zoom the hero Mars planet into the next section on scroll for near-zero extra prompt cost.
- Deploying complex animated sites through Lovable degrades reliability; Claude Code plus Vercel CLI is the more durable path for anything with custom 3D or animation logic.
- For recruiter or demo use cases, the direct vercel command is fast enough. For long-lived client projects, the GitHub-to-Vercel import path is better practice.
- Claude Design is best for getting the layout framework down quickly; Claude Code is where the buildable output comes from.
- The motion reference workflow: download an MP4 of the interaction you want, convert to GIF, feed to AI, and ask it to generate a prompt describing the animation.
Type layout first, 3D elements second.
WHAT TO LEARN
The reason this workflow produces a finished site in 20 minutes is a single sequencing decision: lock the text layout before touching any 3D element or animation.
- Most designers start with imagery and then struggle to find a type treatment that fits. Starting with the text frame reverses the dependency and makes the 3D asset easier to specify because you already know the spatial constraints.
- An AI asset MCP connected to a Claude Code session collapses two separate workflows into one: asset generation and code integration happen in the same prompt loop, eliminating the copy-paste cycle between tools.
- Prompt specificity determines output quality. A vague request produces a flat image. Specifying rotation axis, scale relative to the viewport, layering order relative to text, and a natural glow produces a genuine 3D effect.
- A large 3D hero element can anchor the next page section too. Zooming or panning it into the next section on scroll ties the two sections together visually and costs one extra prompt.
- Lovable is appropriate for simpler sites. For anything with custom 3D assets or scroll-linked animations, deploy directly via Vercel CLI -- the generated code will be more reliably editable in future sessions.
- The animation reference technique is worth memorizing: find the interaction on Dribbble, download as MP4, convert to GIF, feed to AI, and ask AI to write the animation prompt. This gives Claude a visual spec when words alone are imprecise.
Terms worth knowing.
- MCP (Model Context Protocol)
- A standard for connecting external tools and services to Claude. Here, Higgs Field AI is connected as an MCP so Claude Code can call its image/video generation API directly during a build session.
- Higgs Field AI
- An AI platform that bundles multiple image and video generation models into one interface, connectable to Claude as a custom MCP server for inline asset generation.
- Mobin
- A large UI reference library containing screenshots and flows of real product interfaces, used here to find a nav button style reference.
- Scroll-linked animation
- An animation whose progress is driven by the user scrolling the page rather than a time-based trigger. In this video, Mars zooms to center as the user scrolls into the second section.
Things they pointed at.
Lines you could clip.
01:02
“What a lot of designers do is they like to start with the animations. And then they realize they can't find a text treatment that actually goes with that image.”
07:07
“This is just something that you could do in PowerPoint. I'm pretty sure I did something similar in like the fifth grade.”
09:36
“Half the fun of working with AI is just seeing what it comes back with and burning through your tokens.”
13:41
“Hosting a more complex site like this on Lovable -- it doesn't always produce the best results, especially if you want to make changes in the future.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
analogystory
00:00Today, we're gonna look at how easy it is to produce these three d interactive websites all inside of Claude code with these great three d interactive scroll effects in just under twenty minutes. Super easy, a ton of fun, even they're deployed to a Vercel domain as well. Let's rock and roll.
00:14Real quick before we begin, check out our website, link in the video description. For Academy members, you can get access to over thirty hours of exclusive content on AI workflows, design topics, and a whole lot more, and can follow me on X. Link also in the description.
00:25I was on the SpaceX website very recently. I felt like I could probably use a little bit of an upgrade. So we're gonna use sort of this as our starting point where if this is the current SpaceX website, what could we maybe do to make it a little bit more interactive, make it three d, and just make it jump out a little more.
00:39Something I've learned least recently is instead of starting out with any three d interactive elements, it's easy to almost start out with the text layout of the header itself. What a lot of designers do is they like to start with the animations.
00:53They like to start with the imagery. And then what happens then is they have this imagery, they have these elements, then they try to fit it into a website or an app or whatever, and then they realize that they can't find a text treatment that actually goes with that image.
01:06So when you have the text layout, it's easier to work backwards and build three d elements around the look and feel that you're going for to start that better supports the end style of website.
01:17And this is what we're gonna look at first. And to do this, I generally like to start off with Dribbble. So there's a lot of futuristic design treatments and things that a little that are a little bit different.
01:26I still love Mobin, of course, but Mobin again is a little bit more of a, you know, enterprise level tool with more enterprise level designs. Nothing that's super out of the box and futuristic, at least not yet. So we're gonna take a look across Mobin and Dribbble.
01:39Within Dribbble here, I just, uh, searched for hero because that's where I'm gonna get a lot of that good initial type styles that I might want to explore. So I'm gonna take a browse here and through Mobin, and then we'll regroup once I find some that I like. What I did is I found this example here with tight treatment that I really think is kinda could work and it's kinda cool.
01:57Like, I'm almost wondering if we make these, um, heroes, like, space explorable, something like that.
02:04But anyways, we'll proceed with it for now. What I'm going to do is I'm gonna take a screenshot, uh, of this, and let's keep moving forward.
02:11We're gonna work in claw design very briefly before we flip over to claw to code and some other things as well. What claw design is good at, it's just getting a rough framework down. And I only really care about right now is the hero section of the site that we're going to build for SpaceX.
02:26So in this case, what I did is I just dropped in that screenshot that we took from Drbul, um, and we're gonna have it recreate that hero section. Please build me a hero section based on the attached design.
02:42Ignore all of the graphic elements and icons and only focus on the text.
02:52Uh, for now, the hero should have a white text, should be should be white text on a black, uh, background.
03:04Uh, do not build me an entire site yet. Uh, just a hero.
03:10Let's go ahead and run this. This is what it came back with. So relatively similar to what we provided or removed a lot of those elements, which is good.
03:18And again, as I said earlier, claw design is best for getting sort of this framework of things down better than clawed code, which is why we're in here very briefly. Now that we have this idea for the hero out of the way, one thing I'm going to do, we're gonna go up and we're gonna choose to send this off to Claude code.
03:33We're just gonna copy this command here and we're gonna open up Claude code. Inside of a Claude code session, what I did is I just pasted in that prompt and told it to run locally and let's submit that. And now we have this inside, uh, of Claude codes.
03:46Just recreated what we had inside of Claude design. What I wanna focus on next is one of those big three d interactive elements that's really gonna help this site pop and also come to life.
03:58Next, what we wanna do is connect Higgs Field AI. Essentially, this is is the platform that has access to all these great image and video editing capabilities and all these different models. And it's sort of a bunch of different tools really combined into one.
04:10You can look at it that way. So one thing we're gonna do is we're gonna connect the MCP. So let's flip back to Claude and also copy, uh, this URL.
04:17Back inside Claude, let's go to connectors and choose to add a custom connector. What And we're gonna do, we're just gonna paste in, uh, that URL, call it Higgs field, uh, Higgs field, and we're gonna choose to add that.
04:29Uh, one thing it's gonna do, we are gonna need to connect. So when we connect, uh, so just hit connect, and then you'll have to authenticate with Higgs field, and then let's look here. Now we can see that Higgs field's connected.
04:38Now let's start to describe what we want back inside of that Cloud Code session. So using the Higgs field MCP, we are going to want two things.
04:50For the hero for the hero, we are going to want want a very faint star very faint and realistic star background.
05:08Oops. Star star background. Sorry.
05:11Can't type today. It's a mimic space.
05:16Additionally, thinking about what we might want to add here, some type of effects, is at the top right here, maybe we want, like, Mars to sort of float in, expand a little bit, and then make itself a little bit bigger here on the right hand side.
05:35And then we'll have a treatment that when Mars loads in, this text will then float to the left. And I got that inspiration just from the SpaceX website as you can see here on the right hand side. They have have Mars floating around.
05:45We're thinking how we can take it to the next level. I was gonna take a screenshot of this just as a reference point in case we need it.
05:52Let's flip back to Claude and finish our prompt. So to complete our prompt ends, where we're at so far, is using the Higgs field MCP, we're gonna want two things. For the hero, we're gonna want a very faint and realistic star background to mimic space.
06:03Additionally, we are going to want, uh, an ultra, uh, realistic, uh, three d image of Mars, three d video image slash video of Mars to float in from the right hand side from the top right slash right hand side very slowly and dramatically.
06:37Let's see what it comes back with. I really can't cite today. Sorry.
06:41Let's fix this. Uh, so using the Higgs field MCP, we're gonna want two things for the hero. We're gonna want a very faint and realistic star background to mimic space.
06:48Additionally, we're gonna want an ultra realistic three d image video of Mars to float in from the top right slash right hand side very slowly and dramatically. Uh, let's go ahead and let's just see what it comes back with. Let's run.
06:59This is what it came back with. So let me replay it here. You're gonna see a couple things.
07:03So first off, I don't know if you can see it on the resolution, but the the starry background looks great. It looks phenomenal, I think.
07:09There's a subtle gradient to glow and then it fades out to black around, like, after the text, which is great. But the clear issue here is that you saw that Mars is just an image. And, like, this is just something that you could do in PowerPoint.
07:21Like, I'm pretty sure I did something similar in like the fifth grade. So one thing I did is I ran this prompt and this is on me because I didn't give it a really detailed prompt to start.
07:29Um, but if you spent more time than I did, it actually described what you want, you get a better first time output. So the story background looks great, but Mars should be three d and not a static image. Mars should be rotating like an actual planet, a much larger where it falls behind the text while still spinning very slowly.
07:44It's important to note that Mars is the most important part of the website. Mars should also have a natural glow. Currently, feels as if an image Mars is moving onto the background where it should feel like Mars is a part of the background.
07:54Uh, so let's go ahead and see what it comes back with now because you can see that it's thinking and we're gonna make some tweaks. While that's loading, uh, one thing I want to do is just find like a top navigation bar. I found this, uh, resend example.
08:08One thing I like about it is sort of like that treatment of button. Everything else, you know, it's pretty easy for AI to generate like a top navigation bar, but it's this sort of style of button that I really like. I'm not too sure if you could you could see it just with the resolution.
08:20I wanna go ahead and take a screenshot of that and we're gonna feed that to Claude code once that's done loading again just to add some more elements to that top hero part. And again, if you're not too sure what Movin is, it's it's essentially a massive repository of every screen UI element and flow that's out there. They are not sponsoring this video.
08:35I'm just a huge fan of them. And you can actually take 20% off the annual plan with the UI collective link that's in the description. Um, but, uh, let's flip back to Cloud Code and see if that's done generating.
08:44This is more what I'm talking about. Let me refresh this. So you can see how Mars like fades in.
08:50It's rotating. It looks clean. It has that three d effect to it because it's falling behind the text but still in front of the background.
08:57That is exactly what I want to see. Now, on the loading effect, there's still a couple things that we can do. Maybe some treatment with the text and also with, uh, the like the treatment with the hero, hero text, and also with the text down here as well.
09:10And then maybe also introduce our top navigation bar. So let's focus on some of those things. So I added that screenshot that I took from Maubin and I just entered typed out this prompt, so you didn't need to watch me type it.
09:20Uh, but please make some further changes. Always say you're pleased when you're talking to AI. Uh, starting with the navigation, where we need to introduce a type of treatment similar to the recent example attached.
09:29I also like a loading effect on the text. The loading effect does not need to be the same for the hero and the text beneath it. Use your best judgment for the hero text.
09:36Uh, we'll just see what it comes back with. Um, again, if we add more time, uh, you know, I do research and populate this prop a little bit more, but half the fun of working with AI is just seeing what it comes back with and burning through your tokens. Okay.
09:47So let's go ahead and let's run this. What it came back with is it came back with that top top bar, similar to the recent example, um, at least with the treatment of button. And now that I see it here, I don't know if I'm the biggest fan, it just doesn't stand out enough.
09:57That's okay. It's not the end of the world. There's a small change that we can that we can make.
10:01And again, part of the design process, we're never gonna get it right first try. But I think it's come a really long way. If I refresh now, notice the effects on page load that that text has.
10:12I'll do it one more time. So you can see that makes space and, uh, makes space explorable loads a little bit differently than the text down below. I'll do it one more time just in case you missed it.
10:22I think it's looking really good. It's come a long way at a very short amount of time. Let's do maybe just one more section.
10:27Let's sort of talk about some different strategy things and how to approach things is whenever I have sort of this big three d element anywhere on the page, one strategy that you can take is incorporate that into the scroll of the next section.
10:46What I mean by this is let's say, uh, if I scroll down to the next section, what I might want is this Mars to almost come towards me and then zoom in on part of the actual planet where it sort of connects the two sections via this big three d element.
11:04It's a pretty common strategy and one that works and usually looks really, really good. Let's explore this next. And as I was browsing Dribbble, just to see if I could find an example, I actually kinda found one that's kinda similar to what I was going for.
11:16We'll see how that actually zooms in. Um, and oops, that's went a little bit too far, where it sort of zooms in here and it sort of highlights something inside of the planet itself.
11:29That's something I want to explore. Let's run this prompt. Let's now focus on the next website section.
11:33As the user scrolls to the next section where we talk about the colonization of Mars, bring Mars to center and zoom it in where text then appears in a similar treatment to the hero, but not a one to one formatting match. So as the user scrolls, where we're gonna be talking about the colonization of Mars in the next website section, colonization of Mars, crazy, Bring Mars to center and zoom in on it.
11:54So describing that effect where ideally what Mars is gonna do is when it scroll into the center and then zoom in, uh, where text then appears in a similar treatment to the hero but not a one to one formatting match.
12:07Now in an ideal world, one thing I might wanna do is I might wanna find an example on a place like Dribbble where of, the animation or the interaction, and then I would download that m p four, convert it to a GIF, provide that GIF to AI, ask AI to come up with a prompt for it. But not every interaction that we ever want to have, um, has an example that we can easily find that's out there in order for AI to generate a prompt around what that looks like.
12:36So, uh, although this is basic prompting, as I was trying to simulate like what we might actually be going through in a real world if we don't have a ton of time or can't find an example of what we might like. So I'm kinda doing it on purpose. But anyways, let's see what it comes back with half the fun.
12:49This is what it came back with. So if I go ahead and refresh this, uh, you can see that everything appears.
12:54And as I scroll down the page, you can see that Mars actually comes into view along with the content of that next section. So using the approach of whatever larger l three d elements you have in the hero and zooming in out, moving them side to side for that next section is another really easy way to help your website come a little bit more to life.
13:15And we also see that as we adjust like the canvas size, like we don't lose those interactions. We can see it it does appear pretty responsive too, uh, which is really good.
13:25So let's go ahead and zoom that back out. So I think we're ready to keep moving forward. Back inside Claude code, we're gonna run this prompt, check this project to prepare it for Vercel, then walk me through each step one to one to deploy onto a Vercel domain.
13:36Now in the past, one thing I've done is I've showed how you can sort of bring designs from Claude design or Claude code or anti gravity into Lovable. But we have this type of, like, three d interaction, three d elements.
13:49Hosting a, like, a more complex site like this on Lovable, it doesn't always produce the best results, especially if you wanna make changes in the future. So for this, we're to keep building things in Claude code, but actually deploy onto a Vercel domain. So let's go ahead and run this prompt.
14:03What it's gonna do then is gonna give you some specific steps on what to install. It's like four steps. Now, one thing that's important to note is it might be best practice, especially if like you're iterating on it over time to push to GitHub and then bring that GitHub repo into Vercel.
14:17We're doing it a little bit of a shorter way just to show you how to get it up and running, especially if you wanna generate something that you can share with a hiring manager or recruiter. It's not something that you're gonna be maintaining over months and months and months. So I wanna go through these processes here.
14:29It's gonna tell you exactly what to do so you can really just like play that same command. Um, and we're gonna rock and roll from there. And now we can see that this is on a Vercel domain that we can share with the hiring manager or recruiter and don't really need to worry about anything else.
14:41And even if I was to refresh this, you can see that we have those nice effects. As I scroll down here, you can see that that city comes into that planet, sorry, comes into play. Things are looking pretty good.
14:53And, hey, thanks for watching this one. Really appreciate you being here. Be sure to drop a subscribe.
14:57Also, do check out our website for UI Collective Academy. I'm gonna have a lot more content coming both the academy and on YouTube on AI topics and a whole lot more. So again, thanks for being here.
15:05See you at the next one. If you wanna watch a video where I build an entire design system, click in the top left. If you wanna watch another video, highly recommend.
15:11Click in the top right. See you.
The Hook
The bait, then the rug-pull.
In fifteen minutes, a browser tab goes from the current SpaceX homepage to a self-hosted clone with a rotating Mars planet, a starfield background, and scroll-linked section transitions -- all generated inside Claude Code without touching a line of Three.js directly.
Named ideas worth stealing.
00:49model
Text-First 3D Workflow
Lock the typography in Claude Design first. Once the text frame is set, build 3D elements around it. Avoids the common trap of having great imagery with no compatible type treatment.
Steal forAny landing page or hero section with mixed type and 3D/video elements
10:33concept
Hero Element Scroll Reuse
Whatever large 3D element anchors your hero section drives the transition into the next section via zoom, pan, or rotation. One asset does double duty and stitches sections together visually.
Steal forMulti-section landing pages with a dominant hero visual
12:04model
Animation Reference Workflow
Find the interaction you want on Dribbble, download as MP4, convert to GIF, feed to AI, ask AI to write a prompt describing the animation. Gives Claude a visual spec when natural language alone is vague.
Steal forAny scroll or load animation where the intended motion is hard to describe in words
How they asked for the click.
VERBAL ASK
14:32subscribe
“Be sure to drop a subscribe. Also do check out our website for UI Collective Academy.”
Standard end-card with two next-video taps. Subscribe ask is brief and follows value delivery without a hard sell.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
