COMO CRIAR UM SITE COM CLAUDE CODE DO ZERO EM 2026 (SEM SABER PROGRAMAR) — Transcript

Full transcript

1. 0:00In this video, I will teach you how to
2. 0:01create a website step-by-step from
3. 0:03absolute scratch using Cloud Code. If
4. 0:05you are an entrepreneur or business
5. 0:07owner tired of depending on others to
6. 0:08create websites, you will learn how to
7. 0:10build one in practice in this video.
8. 0:13And if you are a marketing professional
9. 0:15, a traffic manager, a social media
10. 0:17manager, or any other profession, and
11. 0:19you want to add website services to
12. 0:21your offerings, I will teach you
13. 0:23step-by-step here. And before we begin,
14. 0:28I want to show you the last three
15. 0:29websites I created with Cloud Code,
16. 0:30using strictly the same step-by-step
17. 0:32process I will show you. This one here
18. 0:34is the website for my paid traffic
19. 0:35community. So, this entire site was
20. 0:37made—it has a really cool animation
21. 0:39when you enter—this whole site was
22. 0:41built using the process I’m about to
23. 0:43show you. This here is the website for
24. 0:46my mentorship for traffic managers. It
25. 0:48was also made 100%with Cloud Code, and
26. 0:50it has several really cool animations
27. 0:52here. All of them are mobile-friendly,
28. 0:54highly adapted for mobile, with
29. 0:56absurdly fast loading speeds. And this
30. 0:58is another one; it’s a paid traffic
31. 1:00mentorship for business owners and
32. 1:02entrepreneurs. So, these are three
33. 1:04websites I created 100%using the
34. 1:05step-by-step process I will show you. I
35. 1:08currently divide my website creation
36. 1:09process with Cloud Code into four steps
37. 1:11. I will show two of them here, which
38. 1:14is the purpose of this video, but if
39. 1:15you ask for it a lot in the comments,
40. 1:17I’ll record another video explaining
41. 1:19how I do the other initial steps. The
42. 1:21first step is the research for writing
43. 1:23the copy. So, understand that for us to
44. 1:26make a website, it must have copy. And
45. 1:28to have copy, you need to have a
46. 1:29research process. So, my first step is
47. 1:31the research process I will use to be
48. 1:33able to write the copy for my site. The
49. 1:36second step is effectively writing the
50. 1:38copy for my site. Nowadays, this is a
51. 1:40major process of mine within the cloud,
52. 1:42with all copywriting agents trained by
53. 1:45me so I can write the site's copy. So,
54. 1:48when you look at these three sites I
55. 1:50showed you as a reference, not just the
56. 1:53site visually, but 100%of the copy was
57. 1:55written with copywriting agents made
58. 1:58with the Cloud Code I built. And part
59. 2:01three is effectively the construction
60. 2:03of the website, which is what I will
61. 2:04focus on in this tutorial. And there is
62. 2:06a fourth step, which is the publishing
63. 2:08of the website. So, with much love, if
64. 2:10this video blows up, if this video gets
65. 2:12a lot of likes, I'll make more videos
66. 2:14about the copy and about publishing the
67. 2:16site, which I’d say is one of the
68. 2:17simplest things. What’s the
69. 2:19construction like? So, folks, first
70. 2:21thing, every time I'm going to do the
71. 2:23copy, I like a block-oriented copy.
72. 2:25What for? So that it’s visually
73. 2:27easier to build this within Cloud Code.
74. 2:30So, to give you an idea, one of the
75. 2:32sites you saw from Invictus Imus, the
76. 2:34prototyped version, the wireframe
77. 2:36version, it’s more or less like this.
78. 2:39So, this was the previous step of the
79. 2:41construction. So, I like doing this so
80. 2:44that, starting from there, I can build
81. 2:47it. So, how do I do that? So, first
82. 2:49thing, the copy arrived for me. I have
83. 2:52the copy in hand. What am I going to do
84. 2:54? I’m going to come here to Cloud
85. 2:56Code, I’ll upload a document with the
86. 2:59copy, and I’ll basically ask it—so
87. 3:01you have 100%clarity on how the process
88. 3:03starts. Copy. Then block prototyping.
89. 3:08And then what I do is, I put it here
90. 3:11more or less like this. I use
91. 3:13voice-to-text a lot to talk to Cloud
92. 3:15Code so I don't have to type so much.
93. 3:17So I put in a prompt more or less like
94. 3:19this. Attached, you have the copy for a
95. 3:22site for a mentorship program for paid
96. 3:24traffic managers. Your task is to take
97. 3:29this copy and bring me a wireframe
98. 3:31proposal with which blocks we will
99. 3:34build on a site. Naturally, the next
100. 3:37step after that will be to build the
101. 3:39site visually. But before that, I want
102. 3:42to bring a wireframe view. Bring this
103. 3:45proposal to me. I want you to include
104. 3:47in this proposal the construction
105. 3:50intent for the elements. Here there
106. 3:53will be an image, here there will be a
107. 3:54graph, here there will be this, but
108. 3:56still in a wireframe prototype, I don't
109. 3:58want any visual construction for now.
110. 4:01So when I run a very simple command
111. 4:03like this, it brings me this. It brings
112. 4:07me a visual wireframe prototype. What
113. 4:09do I do in this step? And why do I like
114. 4:12this step? If we just take the copy and
115. 4:15say, "Hey, build a site," which is what
116. 4:17I see a lot of people doing, it will do
117. 4:20it, a cool site will come out, but man,
118. 4:22I didn't give it any direction. So it
119. 4:25will assume a lot of things, which is
120. 4:27what many people call hallucinating. It
121. 4:30will hallucinate a lot, it will do many
122. 4:31things I didn't ask for, and that's
123. 4:33okay. It is one way, I'm not saying
124. 4:35it's wrong, I've done it like that in
125. 4:36the beginning, but you go back a lot
126. 4:38and you also spend a lot of tokens. If
127. 4:40you don't have an account with
128. 4:42stratospheric limits, there comes a
129. 4:44time when it literally becomes
130. 4:45expensive. Here, where I already
131. 4:48approve the structure, I can say: "Look
132. 4:50, no, I don't want an opening video
133. 4:52image. No, I don't want a CTA here, I
134. 4:55want it centered, no, I don't want this
135. 4:57, I don't want that." So here I can
136. 5:00approve, for example, I don't want them
137. 5:02side-by-side, I can say, I want one
138. 5:04below the other. Here I invest more
139. 5:07time in getting the visual structure
140. 5:09ready. Or better, correcting myself,
141. 5:12the structure isn't the visual part yet
142. 5:14, but it is the organizational
143. 5:15structure. Just remembering, for those
144. 5:18from the website building era, man,
145. 5:20this is very much part of the actual
146. 5:22site construction process. It's hard to
147. 5:25have a site structurally rejected when
148. 5:28we follow this. All right? With this in
149. 5:30hand, now I'll go to the visual
150. 5:31construction. I don't go straight to
151. 5:34Claude and say: "I want you to run a
152. 5:36first version, a first visual build."
153. 5:39No. What do I like to do? First, I like
154. 5:43to define for it what visual identity
155. 5:46it should follow. If you have a brand
156. 5:49manual, for example, I am a more
157. 5:51structured company, so here we have a
158. 5:53large brand manual, where each
159. 5:55sub-brand has its own. So, guys, it's
160. 5:58very easy to build, because I take the
161. 6:01PDF, attach it here in Claude, and then
162. 6:04I would be building the site, right? So
163. 6:07I will attach it and say: "Man, here is
164. 6:10the brand manual, here is the brand in
165. 6:14SVG or PNG or, well." And we will build
166. 6:17a site and the entire visual identity
167. 6:19must be based on this manual. For
168. 6:22example, my PDF manual, it has the
169. 6:24acceptable typography, what the colors
170. 6:26are, the color codes, and then it
171. 6:27becomes very easy, okay? Adriano? I
172. 6:30don't have one. What are you going to
173. 6:32do? It's simple. Imagine as if it were
174. 6:35possible. that you don't have anything,
175. 6:38but you have a reference site where you
176. 6:41know the typography of that site or the
177. 6:43colors of that site, or everything
178. 6:46together is what you would like to
179. 6:48build. You're going to say the
180. 6:49following, look. For the site
181. 6:53construction we're going to do next, I
182. 6:56need a color identity and typography
183. 6:59manual, that is, a color and identity
184. 7:02system to be followed when building the
185. 7:05site. Since I don't have this built yet
186. 7:10, I want you to set one up for me based
187. 7:12on the URL I'll provide below and bring
188. 7:15this proposal in HTML, and open it in
189. 7:18the browser for me, so I can analyze it
190. 7:20and say if I want any changes or if
191. 7:23we'll move forward with these as color
192. 7:26standards when building the site. I'll
193. 7:30press enter here, let it run, and man,
194. 7:33it's going to build it, okay? In a
195. 7:35simple way. There's a there's a thing
196. 7:37worth mentioning and I've already left
197. 7:38it in God's hands. What does that mean?
198. 7:42When you start using the cloud, instead
199. 7:43of automatic, you set it to manual and
200. 7:45then you end up approving everything,
201. 7:47approving everything, approve
202. 7:48everything, everything, everything
203. 7:49manual. Then afterwards you move to the
204. 7:51second one, then you move to the third.
205. 7:53I've already left it in God's hands,
206. 7:54okay? So when I say open the browser
207. 7:56for me, since mine is on automatic, man
208. 7:58, it just goes beautifully, it already
209. 7:59opens, it becomes the most beautiful
210. 8:01thing in the world. I'll I'll give it a
211. 8:03moment here. Eh, so, in a simple way,
212. 8:06it will finish this here with HTML. And
213. 8:11and while it's doing this here, pay
214. 8:13attention, Adriano. What if I skip this
215. 8:15step? I'll even push it further. And if
216. 8:17I skip all these steps, man, it's going
217. 8:19to be a disaster. If you skip the copy
218. 8:21construction step, you're going to
219. 8:23waste a lot of time building copy. If
220. 8:27you skip the grid and visual
221. 8:29typographic system construction step,
222. 8:31colors, all of that, you're going to
223. 8:33waste a hell of a lot of time saying
224. 8:35what you want. And when you ask for a
225. 8:38task, it executes it. So what it will
226. 8:40do is fulfill your order. When you
227. 8:42already include the step of writing
228. 8:44copy and structuring the copy in blocks
229. 8:47, having a wireframe system for you to
230. 8:50approve the structure and then ask for
231. 8:53the colors and typography. Man, from
232. 8:57here to the site, we are very close to
233. 8:59the site coming out practically
234. 9:01finished. But there is still one step
235. 9:04before this construction, and I will
236. 9:05show you. Well, folks, after it built
237. 9:15all of this, uh, it already brought it
238. 9:16to me. Man, just, just so you
239. 9:18understand the level Cloud Code is at,
240. 9:20this construction here, this is the
241. 9:21HTML, where where it is bringing the
242. 9:23visual proposal; so, it already brought
243. 9:25the logo, right? It already found it,
244. 9:27the site has a logo, it brings the
245. 9:29entire typography, all all everything
246. 9:31it understood, okay? Uh, it brought the
247. 9:35gradients, it brought the patterns, all
248. 9:38the colors, the font families. Man,
249. 9:41it's done. Most beautiful thing in the
250. 9:43world. I will use this now as a visual
251. 9:45foundation. So, what is my next step?
252. 9:48It is to tell it like this. In the past
253. 9:51, let me take a step back, way back,
254. 9:53when I when I did this phase, I used to
255. 9:55just say: "Build the site." And then,
256. 9:57after a while, I stopped doing that. So
257. 10:00I say like this, cool, now we have
258. 10:02everything in our hands. I want you to
259. 10:05bring me a design direction proposal,
260. 10:07three proposals for me to choose from,
261. 10:10and after I approve, you bring me what
262. 10:12you are going to build. Detail, I don't
263. 10:15want you to make the entire site. I
264. 10:18want you to make at most the first fold
265. 10:21plus one block of the line you will
266. 10:23follow. So this here is a real file of
267. 10:25a prompt I gave it regarding these
268. 10:27directions. So look, this is the new
269. 10:29page for another training of mine. it's
270. 10:32not even a URL I showed. And then it
271. 10:34brought more or less how it would do it
272. 10:35. Then it brought a second proposal and
273. 10:39then it brought a third proposal. I
274. 10:42didn't like any of them, and so much so
275. 10:44that here I asked it to bring another
276. 10:46line, but what is the trick here? I
277. 10:49didn't build an entire site, get it? So
278. 10:52what is your next step? It is to ask
279. 10:54for a visual direction. So cool. Now
280. 10:57that you have built this visual
281. 10:59identity, bring me three visual
282. 11:01direction proposals so that when I
283. 11:03approve, you build the site. And then
284. 11:05it will bring you a document that might
285. 11:07be completely different from this one.
286. 11:08It will depend on all the context you
287. 11:10provided. When you approve the visual
288. 11:12direction, then you move to the final
289. 11:14step. You will say: "Cool, visual
290. 11:16direction approved, now build the site.
291. 11:19" What do I see in this process? It's
292. 11:22rare for me to have a site that I don't
293. 11:25approve of after this whole process,
294. 11:27because first I wrote the copy, then I
295. 11:29broke it into blocks, then I structured
296. 11:32the frame, and I made all the
297. 11:33corrections I needed to make on the
298. 11:36frame. I either uploaded my brand
299. 11:39manual document, my visual identity, or
300. 11:42I used some site to inspire me to
301. 11:44create my manual. I asked for direction
302. 11:47on which paths it intends to follow in
303. 11:50the construction based on this
304. 11:52direction I already provided. I approve
305. 11:55one of them, and when I go to build it,
306. 11:57man, it's very hard to make a mistake.
307. 11:59Oh, one detail: still in this visual
308. 12:01direction process, you can include
309. 12:03three sites—and when I say three, it
310. 12:06could be three, 4, 5, 6—that you
311. 12:08really like as good references and the
312. 12:10same amount as bad references. I'll
313. 12:13just add a warning here. Don't just
314. 12:15throw them in. These three sites are
315. 12:17sites I really like. These three are
316. 12:19sites I don't like. Make it clear what
317. 12:21you like and what you don't like in
318. 12:23each of them, otherwise it will take it
319. 12:25as a literal rule. And so, just to give
320. 12:28you an idea, that direction file I
321. 12:30showed you that I didn't like—when I
322. 12:32asked for a new direction, this was the
323. 12:34new site it created. You're seeing it
324. 12:37kind of firsthand before it's published
325. 12:39; look, this is the site that's on "
326. 12:41Traffic and Conversion Machine." This
327. 12:43is the site that's live today. And this
328. 12:46is the new site that will be coming
329. 12:48soon. I'm even going to test a version
330. 12:50here with my photo, but all of this was
331. 12:52done 100%using Claude Code. I hope you
332. 12:55implement this process for building
333. 12:56sites for yourself. And if you want to
334. 13:00understand more about how I master this
335. 13:03process of building several agents—
336. 13:05one to be a copywriter, another to
337. 13:07create the site, to be a designer—
338. 13:09I'll soon open the first class of paid
339. 13:12traffic agents, where I'll show you how
340. 13:14to create and orchestrate paid traffic
341. 13:17agents to plan campaigns, create
342. 13:19campaigns, and create creative sites,
343. 13:21from the copy to the visuals and much
344. 13:23more. If you want to know more about
345. 13:27when I'll open registration for this
346. 13:28mentorship program and all its details,
347. 13:30the link will be here in the
348. 13:32description of this video. Big hug,
349. 13:34subscribe and hit the bell icon.