Claude Design 3.0 Can NOW Build 3D Animated Websites — Transcript

Full transcript

1. 0:00Clod design can now call other tools
2. 0:02directly from inside the canvas. So,
3. 0:05here's what that means in practice. You
4. 0:07[snorts] simply just type in a prompt
5. 0:09inside Clod design and then an average
6. 0:13image gets made right there while your
7. 0:16layout sits open in front of you.
8. 0:18There's no export, no color matching.
9. 0:21Change that to video generation and you
10. 0:23get a stunning website kind of like this
11. 0:26one. One continuous shot a window
12. 0:29building city planet a galaxy. There's
13. 0:32no cuts, no stock, no VFX team, just one
14. 0:37prompt inside Clod design. And here's
15. 0:39why AI websites usually look cheap. It's
16. 0:42not the code or the layout, it's the
17. 0:44design system. Every asset that you
18. 0:47generate somewhere else and copy back it
19. 0:50just looks a little out of place.
20. 0:53>> [music]
21. 0:53>> Now, it could be their own lighting, it
22. 0:55could be their own feeling. You can't
23. 0:56see it on any single image, but the
24. 1:00thing is you can feel it across the
25. 1:02whole page and that's the problem that
26. 1:04this video is going to solve. So, today
27. 1:06I'm going to be building two full sites
28. 1:09with it. Stars, a cinematic scroll
29. 1:11through universe, and Kai, which is a
30. 1:14product store. It's going to have the
31. 1:15same workflow, but completely different
32. 1:17results. And also, all of the prompts
33. 1:19that we're going to be using, it's all
34. 1:20inside the free school community. The
35. 1:21link is now in the description below. Go
36. 1:23and check it out right now. But now,
37. 1:25let's get started.
38. 1:31Now, to make our designs 10 times
39. 1:33better, we need to connect it to
40. 1:35Higgsfield because that's the tool that
41. 1:38lets Clod design access all of the
42. 1:40latest AI image and video models. So, if
43. 1:42you haven't already, just go and check
44. 1:44out the link in the description and make
45. 1:45sure that you sign up for Higgsfield.
46. 1:47Everything in this build is basically
47. 1:49running through it. So, make sure that
48. 1:51you get that done first. Right. Now,
49. 1:53assuming that you're done with that,
50. 1:54once you are signed up, go and grab your
51. 1:56MCP URL from Higgsfield, and I'll leave
52. 1:59the exact link also in the description
53. 2:01below so that you can simply just copy
54. 2:03it. And then what you're going to do is
55. 2:04you're going to head into Claude, and
56. 2:06you're going to go to your connectors,
57. 2:07and then you're going to add a custom
58. 2:09connector, and you're going to paste
59. 2:11that URL right over there. And you see,
60. 2:13that's basically it. You'll just be
61. 2:15prompted to authorize your Higgsfield
62. 2:16account, and now Higgsfield turns up
63. 2:18inside Design Daily to use, and you
64. 2:21never actually even have to ever think
65. 2:23about that ever again. So, from this
66. 2:25point on, Claude can now generate images
67. 2:28and videos without you ever leaving the
68. 2:30canvas. Claude handles the site, the
69. 2:32structure, the layout, the code, and
70. 2:34then Higgsfield on the other end handles
71. 2:36everything that you can actually look
72. 2:38at, which basically means that nothing
73. 2:40gets passed between them by hand.
74. 2:42Structure always comes first, okay? It
75. 2:44always does.
76. 2:49So, now I'm going to open up Claude
77. 2:50Design, and then I'm going to set the
78. 2:51model to Fable 5, and I'm going to ask
79. 2:54for a wireframe. So, gray boxes, no
80. 2:56color, no imagery, and just basically
81. 2:59the bones of the thing. And while
82. 3:01everything's still gray, I'm going to
83. 3:02ask for one specific piece, okay? That's
84. 3:05going to be the hero. It's a full-screen
85. 3:07video that scrubs with your scroll, so
86. 3:08scrolling down basically plays it
87. 3:11forward, and then scrolling back up kind
88. 3:13of rewinds it, okay? So, there's no
89. 3:15video in it yet, and that's pretty
90. 3:17deliberate because we are going to now
91. 3:19prompt inside Claude Design to generate
92. 3:22the video using Higgsfield.
93. 3:28Now, here's exactly what I want, okay?
94. 3:29One continuous zoom that runs from a
95. 3:31little window all the way out to the
96. 3:33universe, and then it should go back
97. 3:35again. Now, the way I'm going to be
98. 3:36building this is with nine pictures
99. 3:38first, okay? The window, the building,
100. 3:40the city, the atmosphere, the planet,
101. 3:42the solar system, the galaxy, the
102. 3:44universe, and then one final frame that
103. 3:47brings you back to the window. You see
104. 3:50the thinking over there?
105. 3:51Now, there's a single visual thing makes
106. 3:54the whole thing work. And it's literally
107. 3:57this. Every picture has to contain the
108. 3:59one before it. Small and also make sure
109. 4:03that it's dead center. So, I'm going to
110. 4:06prompt it and I'm going to make sure
111. 4:08that I'm doing it in simple words and
112. 4:10it's basically just to use Higgsfield to
113. 4:12generate all nine keyframes for the hero
114. 4:16zoom, okay? So, that's basically the
115. 4:18thinking behind it. Claude then prompts
116. 4:19Higgsfield and it fires off all nine and
117. 4:22it then waits for them to come back. And
118. 4:24then it takes roughly about a minute or
119. 4:26so and in that time nothing basically
120. 4:28gets exported or downloaded. They are
121. 4:30just nine renders running in parallel
122. 4:33with each other while the design still
123. 4:35sits open in front of me. And while
124. 4:37we've been talking, all of those nine
125. 4:39images are now ready and this is the
126. 4:41best part about Higgsfield. You get the
127. 4:43best image and best video models all in
128. 4:46one place and I didn't even have to
129. 4:48think about which model should I be
130. 4:50using. Like literally Claude just finds
131. 4:53the best one for me and then it
132. 4:54generates it using Higgsfield. And as we
133. 4:56can see, all the pictures look good so
134. 4:57I'm going to ask it to generate the
135. 4:59clips and I want eight of them, each one
136. 5:01traveling from one picture to the next
137. 5:03at a constant speed and from one picture
138. 5:05to the next and then Higgsfield
139. 5:06basically just handles the rest. And I
140. 5:08mean, there we go. Everything is now
141. 5:10done and that's the coolest thing about
142. 5:11Higgsfield. It literally builds all of
143. 5:13them in parallel which means you don't
144. 5:15have to wait whatsoever. And now, what
145. 5:18I'm going to do is let's ask Claude
146. 5:20Design to add these to our hero section
147. 5:22and then we are done. So now, it goes
148. 5:26straight into the container that's been
149. 5:28sitting there empty since the wireframe
150. 5:31and that's a VFX artist and weeks of
151. 5:34render time and it literally just
152. 5:36happened in a chat window while I was
153. 5:39talking to you.
154. 5:44So there, the hero is now done. So now,
155. 5:46let's build our next section. So, this
156. 5:48one is for the team, and I don't want a
157. 5:50grid of headshots. I want the building
158. 5:52that they're working at night, and I
159. 5:54want you to go and find them yourself.
160. 5:56So, we are going to be generating two
161. 5:58versions of the same building, one
162. 6:00completely dark and one completely lit,
163. 6:03and then we are stacking them so that
164. 6:04your cursor decides which one you are
165. 6:07looking at, okay? So, let's start off
166. 6:08with the dark one first. Use XF to
167. 6:10generate an office building at night,
168. 6:12every window unlit and black, and the
169. 6:15shape only just readable against a
170. 6:17slightly lighter sky, okay? And then for
171. 6:20the second one, which will be the lit
172. 6:22version of the same exact building, and
173. 6:24now it's time for Claude to wire it up,
174. 6:27okay? So, I'm going to say, "Stack these
175. 6:29two, dark on top and lit hidden
176. 6:31underneath. Mask the lit layer with a
177. 6:33soft radial gradient that follows the
178. 6:36cursor, okay? On touch devices, animate
179. 6:39it along a slow winding path instead,
180. 6:42okay? There we go." And here is the
181. 6:45result. The section opens completely
182. 6:47dark, and then light follows your
183. 6:49pointer, and inside every window there's
184. 6:52something working. Now, that's the way
185. 6:54to introduce a team. So, you are moving
186. 6:58a glow across the surface that actually
187. 7:01shows real information. These are the
188. 7:03kinds of effects that make a
189. 7:04thousand-dollar website. And on top of
190. 7:06that, the best part about this is that
191. 7:08because we are building in Claude
192. 7:09design, I can ask it to pull my brand
193. 7:11color and font palette from this
194. 7:14website. And now it can be used across
195. 7:16all media formats from decks to UI
196. 7:19mockups. One tool is literally the thing
197. 7:22that's keeping everything consistent.
198. 7:28And then, it's now time for the rest of
199. 7:32the page, okay? So, that is the copy,
200. 7:34the testimonials, the call to action.
201. 7:36So, I have one prompt covering it all
202. 7:38since I want to keep it pretty simple.
203. 7:40And again, XF is going to generate it,
204. 7:43and then Claude is going to build it in,
205. 7:45and just like that, our website is
206. 7:48ready. So, now to make this live, I'm
207. 7:50simply just going to click on a share on
208. 7:52the top right, and then I'm going to go
209. 7:54into more formats and apps, and there I
210. 7:57can directly import to Claude code, and
211. 7:59from there, we are just going to go
212. 8:02ahead and deploy it to Vercel in one
213. 8:05simple prompt, just like this. Okay. And
214. 8:07now, if you want to deploy it directly
215. 8:09from Claude design to Vercel, you can
216. 8:11also do that, but having it in Claude
217. 8:14code just makes it easier for any future
218. 8:16changes. And there, what you are looking
219. 8:19at right now is the live UI outlet
220. 8:22anyone can now access, meaning this is
221. 8:25now live.
222. 8:30So, now onto our second site, it's going
223. 8:32to be the same workflow, but it's going
224. 8:34to be a completely different site, and
225. 8:35I'm going to show you that in a minute,
226. 8:37but I'll keep this one super quick,
227. 8:39okay? So, Kai is going to be a store,
228. 8:42okay? So, it starts the same way, okay?
229. 8:45Wireframe first, the hero, the product,
230. 8:47then the product page, the checkout, the
231. 8:49gray boxes, no color, no images, okay?
232. 8:52So, you got the gist of that. Then, one
233. 8:54prompt for the visuals, and then
234. 8:56Higgsfield generates the product shots,
235. 8:58the lifestyle images, and a short
236. 9:00looping video for the hero. So, it's the
237. 9:03same style across all of it, and it's
238. 9:05going to be inside the canvas, and
239. 9:08nothing is going to be exported. So,
240. 9:10Claude then drops them straight into the
241. 9:12grid, and here is the final result,
242. 9:16okay? So, there's a clean product grid,
243. 9:19every item playing a short loop whenever
244. 9:21you have a hover it, just like this, and
245. 9:24a hero that moves, okay? Which is
246. 9:27basically what we're going for. A
247. 9:28product page that doesn't look like you
248. 9:30just found it on some template. Okay, so
249. 9:33that is two sites. One's a cinematic
250. 9:37scroll through universe that I really
251. 9:39like. The other one is a store. So,
252. 9:42these are different niches, but using
253. 9:44the same exact workflow. So, now you can
254. 9:47build whatever site you want with Claude
255. 9:50design. And also, let's not forget about
256. 9:52it, Higgs Field. So, get started now by
257. 9:54clicking the link in the description
258. 9:56below. Plus, also please don't forget
259. 9:59this every single prompt from today's
260. 10:01build is inside our free school
261. 10:03community. And also, that link is also
262. 10:05down below in the description below. So,
263. 10:07if this video helped you, like I'm
264. 10:09pretty sure it did, then what I want you
265. 10:10to do is hit that like button,
266. 10:11subscribe, and also turn on those bell
267. 10:13notifications that you never miss
268. 10:14another upload. Drop a comment down
269. 10:16below to let me know what you thought
270. 10:17about the video. And as always, I'm
271. 10:20going to be catching you on the next
272. 10:22one.