Criando um Design System em 29 min com IA (Claude Code + Figma) — Transcript

Full transcript

1. 0:00No vídeo de hoje, eu vou mostrar para
2. 0:01vocês a técnica que eu uso para criar
3. 0:03design systems em tempo record, usando
4. 0:05apenas três prompts no Clode e no Figma.
5. 0:08E essa técnica é muito simples,
6. 0:10literalmente qualquer um pode usar,
7. 0:12mesmo que você não manje absolutamente
8. 0:14nada de design e mesmo que você nunca
9. 0:16tenha feito um design system na sua
10. 0:18vida. E o processo que eu uso é
11. 0:19basicamente o seguinte. Primeiro eu uso
12. 0:21um promptáveis
13. 0:23de estilo do meu projeto. Depois eu uso
14. 0:26um segundo prompt para criar os
15. 0:28componentes do meu design system. E por
16. 0:30fim eu uso um terceiro prompton
17. 0:33que eu criei no meu design system dentro
18. 0:35das páginas do meu projeto. Então esse é
19. 0:37o processo que eu uso basicamente. É
20. 0:39isso que eu vou mostrar no vídeo de hoje
21. 0:41para vocês. Por que que isso é muito
22. 0:43legal? Tá? Porque primeiro a gente
23. 0:45garante consistência no design do
24. 0:47projeto. E esse é o tipo de coisa que
25. 0:48deixa a sua aplicação com uma cara muito
26. 0:51mais profissional do que você ter coisas
27. 0:53completamente diferentes, né, e páginas
28. 0:55com com estilos diferentes dentro do seu
29. 0:58projeto. Segundo ponto, isso é bom para
30. 1:00a sua produtividade como builder ou como
31. 1:02desenvolvedor, se esse for o seu caso,
32. 1:05porque aí você não vai precisar
33. 1:06eventualmente ficar recriando
34. 1:07componentes que já existam dentro do seu
35. 1:10design system. E por fim, se você tá
36. 1:12usando AI para escrever o seu código,
37. 1:14isso também é bom, porque isso evita que
38. 1:15você tenha que usar tokens a mais,
39. 1:18fazendo a sua EAI, tendo que criar
40. 1:20componentes que já tem pronto ou que
41. 1:23você já tenha customizado antes, né?
42. 1:25Então fica uma coisa muito mais
43. 1:27produtiva para você e torna a cara do
44. 1:29seu app muito mais profissional do ponto
45. 1:31de vista de design. Para você fazer
46. 1:33isso, tudo que você precisa é começar um
47. 1:35projeto no cloud Code que tenha a
48. 1:37biblioteca do Chatsen e o Tail Wind
49. 1:40instalados. Para quem não conhece o
50. 1:42Chatsen, ele é basicamente uma
51. 1:43biblioteca que tem vários componentes
52. 1:45prontos e isso é muito bom também pra
53. 1:47sua produtividade, porque aí você não
54. 1:48precisa criar componentes do zero. Então
55. 1:51o Chatsen ele é super útil e quem
56. 1:54acompanha meus vídeos sabe que eu já
57. 1:55indiquei ele aqui outras vezes. E também
58. 1:57você vai precisar do tail wind. Se você
59. 1:58não sabe o que é te wind, basicamente
60. 2:00ele é um framework de estilo que permite
61. 2:02que você customize o estilo desses
62. 2:05componentes, né, do Chatsen, ã, com
63. 2:07muito mais facilidade, sendo que você aí
64. 2:09não vai precisar fazer toda a
65. 2:10estilização do zero. Então, isso vai
66. 2:14trazer muito mais produtividade pra
67. 2:15gente também. Agora chega de falar, eu
68. 2:17vou mostrar na prática para vocês como
69. 2:18que eu faço isso para que vocês também
70. 2:20possam copiar exatamente essa mesma
71. 2:22técnica dentro do projeto de vocês.
72. 2:24Então, vamos lá. Bom, estamos aqui
73. 2:26dentro do Visual Studio. Eu gosto de
74. 2:27usar a extensão do Cloud Code dentro do
75. 2:29Visual Studio. Então, se você ainda não
76. 2:31fez isso, faça porque vale muito a pena.
77. 2:34Eu gosto muito dessa UX aqui e é ela que
78. 2:37a gente vai usar. Então aqui eu criei um
79. 2:39projeto em NextJS, que é o framework que
80. 2:42eu gosto de trabalhar. E agora eu vou
81. 2:44rodar o primeiro pront aqui para vocês
82. 2:46verem acontecer. E aí, como que funciona
83. 2:49esse primeiro pront? Só para vocês
84. 2:50entenderem, primeira coisa que eu vou
85. 2:52fazer aqui é compartilhar com ele um
86. 2:54design de referência. E esse design pode
87. 2:57ser o design que você fez no Figma. Ou
88. 2:59se você não for o cara do design, você
89. 3:01pode compartilhar também um print screen
90. 3:03de alguma coisa que você achou na
91. 3:04internet e achou bonito. Eh, eu vou
92. 3:06mostrar aqui para vocês como que vocês
93. 3:08podem fazer isso. Muito importante. Eu
94. 3:10não estou falando para vocês plagiarem
95. 3:12nada, tá? Então, o que esse prompt vai
96. 3:14fazer é que ele vai extrair a inspiração
97. 3:17do estilo daquilo que você tá
98. 3:19compartilhando com ele. Então, a ideia
99. 3:21não é que você copie nada, mas que você
100. 3:22apenas use aquilo como uma referência ou
101. 3:25como uma inspiração se você não tem eh
102. 3:28algo que você mesmo tenha feito, né?
103. 3:30Então, basicamente, o que ele vai fazer
104. 3:31é extrair desse print screen ã algumas
105. 3:34variáveis, né? Então, vocês podem ver
106. 3:36aqui colors, typography, spacing radius.
107. 3:39Aí ele vai inicializar o chatn que eu
108. 3:41acabei de dizer para vocês que é
109. 3:42importante ter. Então ele vai já eh
110. 3:44começar eh instalar o chaten no projeto
111. 3:48eh com esses eh com essas configurações
112. 3:51aqui, né? Style default com a a cor
113. 3:54neutra. Ã
114. 3:57aí ele vai, a partir dessas inferências
115. 3:59que ele fez aqui, ele vai criar o
116. 4:02arquivo
117. 4:03Global CSS, né? A gente já tem, né?
118. 4:05Quando você instala um projeto de
119. 4:07NextJS, ele já vem com esse arquivo
120. 4:10Global CSS padrão, né? como vocês podem
121. 4:12ver aqui. Só que esse não é o arquivo
122. 4:14que a gente vai usar, é apenas o arquivo
123. 4:16que vem padrão na nossa aplicação. Eh,
124. 4:19então, até para poder mostrar aqui para
125. 4:20vocês como que vem a cara disso aqui. E
126. 4:22aí, só para vocês verem
127. 4:25que já existe um projeto e esse é o
128. 4:26estilo padrão desse projeto. Bom, então,
129. 4:28como vocês viram aqui na página, o que
130. 4:30ele tá nos mostrando é isso aqui na
131. 4:32prática. Então ele tá nos mostrando como
132. 4:34que esse Global CSS fica visualmente ali
133. 4:37no meu projeto. E aí o que eu tô fazendo
134. 4:39aqui no meu prompt é eu tô pedindo para
135. 4:41ele substituir o conteúdo que eu mostrei
136. 4:43agora para vocês que está dentro do
137. 4:45Global CSS que tem essas variáveis de
138. 4:47estilo padrão pelas variáveis de estilo
139. 4:49que eu vou extrair dessa página que eu
140. 4:51vou enviar como referência para ele
141. 4:53extrair os tokens. Então você vai ver
142. 4:55que ele vai fazer essa extração aqui.
143. 4:56Então ele vai extrair cor, vai extrair
144. 4:59eh border, border radius, cor de
145. 5:02gráfico, side bar, olha quanta coisa tem
146. 5:06aqui. Então tudo isso aqui ele vai
147. 5:08extrair e ele vai atualizar esse arquivo
148. 5:11aqui, Global CSS, com essas variáveis
149. 5:13que ele vai extrair de lá. Aí ele vai
150. 5:16instalar também alguns componentes pra
151. 5:18gente começar o nosso design system, né?
152. 5:21Ã, vocês podem ver aqui, ó. instal demo
153. 5:23components
154. 5:25e depois ele vai criar uma página que
155. 5:29vai ter essa fundação do nosso design
156. 5:31system. E aí depois eu vou passar pro
157. 5:33prompt pra gente seguir esse projeto.
158. 5:36Mas eu quero mostrar para vocês como que
159. 5:38o prompt um funciona. Então, basicamente
160. 5:40eu vou copiar esse prompt aqui. E
161. 5:43pessoal, só para vocês saberem, todos
162. 5:45esses prompts que eu tô mostrando aqui
163. 5:46para vocês estarão disponíveis na minha
164. 5:48newsletter essa semana. Então, se você
165. 5:50ainda não assina a minha newsletter,
166. 5:53encontra aqui na descrição do vídeo o
167. 5:55meu substac e assina para você receber
168. 5:57esses prompts também. Ah, o substack,
169. 5:59para quem não conhece, ele fica todas as
170. 6:01newsletters salvas. Então, mesmo que
171. 6:03você assista esse vídeo depois que eu
172. 6:04enviei a newsletter, você consegue
173. 6:06acessar no meu substack, tá? É
174. 6:09completamente gratuito. Então, só
175. 6:10procura aqui o o link e se inscreve para
176. 6:13você ter acesso a esses prompts também.
177. 6:15Então eu vou começar colando esse prompt
178. 6:16aqui
179. 6:18e eu vou dizer para ele que a gente tem
180. 6:20um screenshot
181. 6:23attached.
182. 6:25Qual é o screenshot attached? É esse
183. 6:27aqui. Então isso aqui é um projeto de
184. 6:29design que eu comecei fazer no meu
185. 6:30Figma, tá? E aqui eu tenho várias
186. 6:33páginas, como vocês podem ver, mas para
187. 6:36efeito de demonstração, eu vou focar em
188. 6:39algumas aqui, essa de bilinge.
189. 6:43Então, tudo que eu vou fazer é
190. 6:46tirar um print disso aqui
191. 6:50e aí eu vou mandar ali para ele.
192. 6:54E uma dica, segurem o shift para vocês
193. 6:57conseguirem fazer o drag and drop do seu
194. 7:00do seu screenshot, porque senão ele não
195. 7:03vem para cá, tá? E então eu acabei de
196. 7:05colocar o meu screenshot aqui e eu disse
197. 7:07que a gente tem um screenshot attached e
198. 7:09eu vou pedir só para reforçar. Então
199. 7:11aqui eu só tô reforçando quais são as
200. 7:13fontes que eu quero usar no meu projeto,
201. 7:14porque aqui no meu projeto são as fontes
202. 7:17que eu estou usando, tá? Eh, aí
203. 7:22vamos voltar para cá. Então, essa é a
204. 7:24única variável que eu preciso preencher
205. 7:25aqui no no nosso projeto. E aí eu vou
206. 7:29enviar aqui esse prompt e esperar ele
207. 7:31executar o que eu pedi. Então,
208. 7:33basicamente, ele está pensando aqui e
209. 7:35agora ele criou uma listinha de tasks
210. 7:39que ele precisa fazer para ele conseguir
211. 7:42completar o que eu pedi para ele fazer
212. 7:44no prompt. E agora ele vai editar esse
213. 7:46arquivo aqui do Global CSS e colocar
214. 7:49nele as variáveis que ele extraiu do
215. 7:51print screen que eu enviei. Pessoal,
216. 7:52enquanto ele faz aqui o trabalho dele,
217. 7:53eu vou mostrar para vocês o que que eu
218. 7:54faria se eu não tivesse esse projeto no
219. 7:57Figma e se eu não soubesse fazer o que
220. 7:59eu fiz no Figma, tá? Que que eu faria?
221. 8:01Eu viria aqui, entraria no Pinterest e
222. 8:04aí eu colocaria aqui design system. Aí,
223. 8:07como vocês podem ver, tem vários design
224. 8:08systems aqui de coisas que vocês podem
225. 8:11usar como referência. E aí, simplesmente
226. 8:15pegue um design system que você gosta,
227. 8:16por exemplo, esse aqui. Pode ser que
228. 8:18você tenha gostado. Você vem aqui,
229. 8:20copia. E aí você usa essa imagem como
230. 8:23variável, ao invés de usar a variável de
231. 8:26imagem que eu usei, que é o print screen
232. 8:28do meu Figma. Vocês vão ver que tem
233. 8:29exatamente a mesma coisa que eu coloquei
234. 8:31no meu Figma. Então, eu tenho aqui as
235. 8:32variáveis de cor, eu tenho alguns
236. 8:34componentes aqui prontos. O efeito vai
237. 8:37ser muito muito similar, só que em algum
238. 8:39momento vai ser importante você fazer as
239. 8:41páginas do seu projeto para que ele
240. 8:44consiga acertar o design dele, tá? Mas
241. 8:46só dando uma dica para vocês, se você
242. 8:48não tem um projeto no Figma, você pode
243. 8:50começar o seu design system a partir de
244. 8:52alguma referência de estilo que você
245. 8:53goste e essas referências você encontra
246. 8:56com muita facilidade, buscando pela
247. 8:58palavra-chave design system aqui no no
248. 9:00Pinterest. Tá bom? Vamos voltar para o
249. 9:03Visual Studio. Vou autorizar ele fazer
250. 9:06essa edição aqui no Global CSS. Então,
251. 9:08só para vocês acompanharem como que tá
252. 9:10ficando esse arquivo, olha como ele já
253. 9:11tá bem diferente do arquivo que a gente
254. 9:14tinha antes. Olha só como tem várias
255. 9:16variáveis aqui que não existiam antes.
256. 9:19Olha como ele criou a versão dark e a
257. 9:22versão root, que seria a versão light do
258. 9:24meu projeto.
259. 9:26E aqui você pode ver que já tem bastante
260. 9:29coisa aqui que ele fez a partir do
261. 9:31prompt que eu enviei. Voltando aqui, ele
262. 9:33tá criando agora a nossa página, né, do
263. 9:37nosso style guide. Então, só para vocês
264. 9:39entenderem, né, o o NextJS, ele tem essa
265. 9:42navegação que tudo que fica na pasta app
266. 9:46uma página, né? E aí a gente tem uma
267. 9:49página agora que vai se chamar Style
268. 9:51Guides, que é onde a gente vai ter
269. 9:53acesso à nossa biblioteca de componentes
270. 9:56e ao nosso design system. E aí uma uma
271. 9:58dica aqui para vocês, né? Obviamente
272. 9:59você não quer que o seu usuário tenha
273. 10:01acesso ao seu design system, então você
274. 10:03consegue na hora de fazer deploy, você
275. 10:05consegue excluir isso do seu deploy de
276. 10:08forma que isso fique visível apenas
277. 10:09quando você está em dev mode, né, quando
278. 10:12você está desenvolvendo a sua aplicação
279. 10:14e aí o seu usuário não vai ter acesso.
280. 10:16Então se ele digitar ali eh no no se na
281. 10:19sua aplicação barra style guides, ele
282. 10:21não vai conseguir ver o style guide da
283. 10:22mesma forma que você vai conseguir.
284. 10:24Então, só pra gente testar para ver se
285. 10:26ele fez certo, se tudo der certo, né, e
286. 10:28se ele fez o que eu pedi, quando a gente
287. 10:30navegar em style guides, a gente vai ver
288. 10:32o início do nosso design system. Então,
289. 10:35vamos voltar para cá.
290. 10:37Eh, style guides, vamos ver. Olha só.
291. 10:41Ha, então ele já fez aqui o início, né,
292. 10:44do nosso design system. Então, como
293. 10:45vocês podem ver, ele já criou toda a
294. 10:47paleta de cor com base naquelas cores
295. 10:50que eu enviei inicialmente. Ele criou
296. 10:53essa essas cores semânticas, eh, todas a
297. 10:57escala, né, de cor igualzinho, né?
298. 10:59Então, se a gente voltar aqui, né, ó,
299. 11:01igualzinho aqui, só que ele até expandiu
300. 11:04isso aqui com algumas outras cores pra
301. 11:06gente ter mais variação, tanto pro mais
302. 11:08escuro quanto pro mais claro, seguindo a
303. 11:11convenção do Chatsen, que é muito
304. 11:12importante. Eh, então, só voltando para
305. 11:15cá, ã, como vocês podem ver, ó, que
306. 11:17legal.
307. 11:19Aqui ele tem também as cores que a gente
308. 11:21usaria nos gráficos, se a gente tiver
309. 11:23componente de gráficos no nosso projeto.
310. 11:26Eh, aí aqui a gente tem a tipografia dos
311. 11:29headings e as tipografias dos bodies,
312. 11:33né, como vocês podem ver aqui.
313. 11:35Aí aqui a gente tem os radias, né, quais
314. 11:38são a as curvaturas ali da borda, as
315. 11:42sombras, né, como vocês podem ver aqui.
316. 11:45E aqui ele já colocou para mim alguns
317. 11:47componentes que a gente pode usar. Então
318. 11:49ele já adiantou pra gente os botões.
319. 11:51Como vocês podem ver, os botões já vem
320. 11:53aqui com essa interatividade, né? Então
321. 11:56eu já tenho os outros estados desses
322. 11:58botões. A gente tem também alguns beders
323. 12:01aqui, né, que vocês podem ver. a gente
324. 12:03já colocou alguns cards,
325. 12:06tem alguns eh componentes de alertas
326. 12:09também, alguns componentes de radio. E
327. 12:12aí aqui ele fez um sumário, né,
328. 12:13explicando um pouco desse design system,
329. 12:16eh, e explicando qual que é o overall f
330. 12:19desse design system. E aí, como vocês
331. 12:21podem ver aqui na nossa sidebar, ele tem
332. 12:23basicamente a fundação que ele chamou de
333. 12:25design tokens. E aqui ele tem uma parte
334. 12:27de componentes que está vazia porque eu
335. 12:29não adicionei nenhum outro componente eh
336. 12:32no nosso design system. Só que o que que
337. 12:35eu quero fazer, né, só para alinhar aqui
338. 12:36com vocês, eu quero criar, para
339. 12:39demonstrar esse processo para vocês, eu
340. 12:41quero criar essa página de billing aqui.
341. 12:43Então, como vocês podem ver, a gente já
342. 12:45importou o componente cards, né, que é
343. 12:48esse que vai aqui em volta do do
344. 12:51cards de de preço, né, que a gente pode
345. 12:54ver aqui. A gente já importou os radio
346. 12:57buttons, que são esses componentezinhos
347. 13:00aqui. A gente já importou esse bed. a
348. 13:03gente já importou o botão. Então, o que
349. 13:05que tá faltando aqui pelo pela minha
350. 13:07conta? É essa tabela basicamente, né?
351. 13:09Então eu vou mostrar aqui para vocês
352. 13:11como que eu importo uma tabela usando o
353. 13:14nosso segundo prompt, que é o que eu vou
354. 13:16mostrar agora para vocês. Então vamos
355. 13:20voltar para o nosso Visual Studio. E
356. 13:22agora eu vou fazer o seguinte, a gente
357. 13:24vai usar o promptem
358. 13:27qual que é a estrutura desse prompt, que
359. 13:29by the way também estará na minha
360. 13:31newsletter novamente. Se você quer ter
361. 13:33acesso a esse prompt, procura aqui o
362. 13:35link do meu substac e se inscreve na
363. 13:38minha newsletter para você também ter
364. 13:39acesso a esse prompt e usar no seu
365. 13:42projeto, tá? E agora eu vou mostrar para
366. 13:44vocês como que a gente usa o segundo
367. 13:45prompt, tá? Só que antes de eu mostrar
368. 13:47esse segundo prompt, é importante vocês
369. 13:49saberem que esse segundo prompt ele usa
370. 13:52o MCP do Chatscen. É muito simples de
371. 13:55você instalar. Eu vou mostrar aqui para
372. 13:56vocês como é que vocês fazem isso, mas
373. 13:58só para deixar claro que antes de vocês
374. 13:59usarem o segundo prompt, vocês precisam
375. 14:01instalar o MCP do Chatsen para que vocês
376. 14:03consigam usar esse prompt direito, tá?
377. 14:06Então, para você fazer isso, basicamente
378. 14:07você vai vir nessa página aqui do MCP do
379. 14:10Chatsen, e você vai vir procurar o clot
380. 14:14code aqui, que base que é o primeiro e a
381. 14:17gente vai copiar essa esse comando aqui.
382. 14:21Aí você vai lá no seu terminal e dentro
383. 14:23da pasta do seu projeto você vai colar
384. 14:27esse comando. Isso significa que ele
385. 14:28acabou de instalar o MCP do Chatsen.
386. 14:31Então, se a gente vier aqui no nosso
387. 14:32projeto, a gente tem agora esse arquivo
388. 14:34chamado mcp.jon, que explica que agora
389. 14:38ele pode usar o MCP do Chatsen. Eu vou
390. 14:41aproveitar que a gente tá aqui e eu vou
391. 14:43instalar também o do Figma, tá? Eh,
392. 14:47então como que você faz isso? Você clica
393. 14:48aqui nesse def mode e aí você vai ter
394. 14:52essa sessãozinha aqui de MCP. E aí você
395. 14:55vai vir aqui, tá? você vai encontrar
396. 14:58clot code e aí você vai seguir
397. 15:00exatamente esse processo. Então você vai
398. 15:02copiar isso aqui, você vai vir aqui no
399. 15:04seu terminal de novo, vai colar esse
400. 15:06comando aqui e ele vai instalar o MCP do
401. 15:08Figma também. Então agora eu tenho o MCP
402. 15:10do Chatsen, eu tenho o MCP do Figma
403. 15:12instalado e eu vou precisar usar esses
404. 15:15dois MCPs no meu prompt e no meu prompt
405. 15:173. Então, só para vocês saberem, a gente
406. 15:19precisa desses MCPs instalados e como
407. 15:21vocês podem ver, é super simples de
408. 15:23instalar. E aí, depois que vocês
409. 15:24instalam o MCP, é importante que você
410. 15:26reinicie o seu Cloud, porque se você não
411. 15:28fizer isso, ele não vai reconhecer que
412. 15:30você instalou o seu MCP. Um jeito muito
413. 15:33simples de você saber se ele conseguiu
414. 15:35instalar o MCP do Chatsen e do Figma,
415. 15:38né, além de você ver os logs do seu
416. 15:40terminal, é você perguntar para ele ou
417. 15:43você colocar slmcp
418. 15:46e aí você já vai ver aqui o MCP do
419. 15:48Figma, tá? às vezes, eh, ele não
420. 15:51reconhece o MCP do Chatsen, mas como ele
421. 15:53está aqui, você, a gente sabe que ele tá
422. 15:55instalado, mas se você ficar na dúvida,
423. 15:57você pode simplesmente perguntar para
424. 15:59ele, eh,
425. 16:04e a gente vai descobrir se ele consegue
426. 16:06acessar. Eu sei que ele vai conseguir,
427. 16:08mas só para vocês saberem, caso vocês
428. 16:10fiquem na dúvida, é só você perguntar
429. 16:11para ele e ele vai te dizer na hora se
430. 16:13ele consegue ou não acessar o MCP do
431. 16:15Chats Cien. Então ele diz que ele
432. 16:17consegue, ele também consegue essa saldo
433. 16:19Figma, porque a gente já conseguiu vir,
434. 16:21que a gente já conseguiu ver aqui na
435. 16:23lista, né, de de eh MCPs. Então tudo
436. 16:26certo, vamos continuar com o prompt.
437. 16:29Então indo aqui pro prompt, só para
438. 16:32vocês entenderem a estrutura aqui. Então
439. 16:34o que que ele vai fazer, tá? Ele vai
440. 16:36usar o Chatsen MCP. Então, por isso que
441. 16:38eu acabei de instalar ele para ele, hã
442. 16:42buscar esse componente aqui, que é esse
443. 16:44component que eu vou colocar, que vai
444. 16:47ser a table, porque é o componente de
445. 16:49table que eu preciso importar na minha
446. 16:51página de billing. Aí, se ele encontrar,
447. 16:53ele vai buscar os detalhes desse desse
448. 16:56componente e vai buscar usage examples,
449. 16:59né, como que exemplos de uso daquele
450. 17:01componente. E aí, se o componente
451. 17:03existir, e ele vai existir porque eu vou
452. 17:05usar literalmente o nome do componente
453. 17:07que existe, ele vai pro step 2. E se não
454. 17:09existir, ele vai pular para o step 4,
455. 17:11que é você construir um componente
456. 17:13customizado, que é basicamente uma
457. 17:15combinação de componentes que já existem
458. 17:18para criar um componente novo. Então ele
459. 17:20não vai criar de fato nada do zero, mas
460. 17:22pode ser que às vezes ele tenha que
461. 17:23combinar componentes para criar uma
462. 17:25combinação de componente nova que
463. 17:27eventualmente não exista na biblioteca
464. 17:29do Chatsen. Bom, e aí seguindo aqui, só
465. 17:31para vocês entenderem,
466. 17:33ele também já dá uma noção de quais são
467. 17:36os os Chats components que existem. Eh,
468. 17:39ele vai ter acesso a todos usando o MCP,
469. 17:41mas aqui já tem alguns para evitar que
470. 17:42ele tenha que usar muitos tokens, eh,
471. 17:45puxando pelo MCP. Aí ele vai instalar
472. 17:48esses componentes do ChatSen buscando
473. 17:50qual é o o comando de instalação daquele
474. 17:53componente. Ã, vai fazer customizações
475. 17:56necessárias nesse componente, se é que
476. 17:58precisa customizar alguma coisa. Bom,
477. 18:00isso aqui é para caso ele precise fazer
478. 18:02uma combinação de componentes nova, mas
479. 18:04eh eu acho que não vai ser necessário.
480. 18:06Eh,
481. 18:07e aí ele vai criar esse component
482. 18:10showcase, que é basicamente ele criar
483. 18:13uma página dentro do meu design system
484. 18:15para mostrar como que usa aquele
485. 18:17componente e toda a documentação daquele
486. 18:20componente, conforme vocês vão ver aqui.
487. 18:22Mas melhor do que eu ficar mostrando
488. 18:24todo esse prompt para vocês. Vocês podem
489. 18:25ver que ele é um pouco longo, vocês vão
490. 18:27ter mais chance de ler esse prompt na
491. 18:29minha newsletter. Eu vou mostrar ele na
492. 18:31prática para vocês que eu acho que fica
493. 18:33um pouco mais fácil de vocês entenderem.
494. 18:35Então, novamente, eu vou copiar esse
495. 18:37prompt aqui e eu vou substituir essa
496. 18:40variável component pela variável table.
497. 18:45Por que que eu sei que é table? Porque
498. 18:46eu vim aqui, né, no chatn e aí eu vi que
499. 18:51existe um componente chamado table.
500. 18:52Então não tenho a menor chance dele não
501. 18:55ter esse componente porque eu vi que
502. 18:56tem, mas sei lá, de repente você quer
503. 18:58criar um componente que não existe e aí
504. 19:01você vai precisar dar um nome novo para
505. 19:03esse componente e ele vai precisar fazer
506. 19:04combinações de componentes eh para criar
507. 19:07um componente completamente novo. H,
508. 19:11então, só para dar dica para vocês,
509. 19:13tentem usar ali o nominho do componente
510. 19:15que já existe na library do ChatCN. Como
511. 19:17que você sabe os componentes que
512. 19:18existem? Venham aqui no site do Chats
513. 19:20CN, busquem os componentes existentes e
514. 19:23vejam o que que cada componente faz para
515. 19:25vocês saberem quais são as opções de
516. 19:27componentes que vocês têm à disposição
517. 19:29de vocês. Voltando aqui, ã, agora a
518. 19:34gente vai enviar esse pront e vamos ver
519. 19:37o que que ele nos retorna.
520. 19:40Então, ele já criou uma listinha de
521. 19:42toos. Aqui
522. 19:45eu tenho o hábito de sempre pedir para
523. 19:48aprovar o que ele tá fazendo e é uma
524. 19:50coisa que eu recomendo que você faça
525. 19:52também, porque a gente nunca sabe o que
526. 19:54que o Clode vai fazer. Então aqui ele só
527. 19:56tá pedindo para acessar o MCP e eu tô
528. 19:58deixando porque isso aqui tudo bem.
529. 20:00Então ele criou aqui, como vocês podem
530. 20:01ver já a pasta de componentes. E aí
531. 20:04dentro da pasta de componentes, ele
532. 20:05criou uma pasta table. E agora ele tá
533. 20:08criando essa página aqui, como vocês
534. 20:10podem ver. Eu vou deixar ele criar.
535. 20:11Agora eu tenho um item novo aqui no na
536. 20:14minha side bar. E se eu clicar aqui, eu
537. 20:16consigo ver o nosso componente de
538. 20:19tabela. Então, olha só, agora eu tenho
539. 20:20uma tabela aqui, como vocês podem ver,
540. 20:23dentro do estilo, né, que a gente pediu
541. 20:25para criar. Eh,
542. 20:28ele tem algumas variações de tabela, ó.
543. 20:30Tabela com caption, tabela com footer,
544. 20:33eh, tabela com bad, que é o que a gente
545. 20:34vai precisar inclusive agora para criar
546. 20:37o nosso a nossa tabela de billing
547. 20:39history. Ã, e aqui a gente tem toda a
548. 20:43referência de componentes que a gente
549. 20:45usa para esse componente aqui. Então, o
550. 20:47que que eu fiz? Eu usei o prompt um para
551. 20:49eu criar o estilo, que é justamente
552. 20:52essas cores, essa fonte, a o
553. 20:54espaçamento, borders, etc, que eu
554. 20:56mostrei para vocês. E aí eu uso o
555. 20:58prompton
556. 21:02dentro do meu design system. Então, cada
557. 21:04sessão que eu criar vai vir uma
558. 21:05sessãozinha nova aqui nessa sidebar.
559. 21:08Então, tem table, ã, poderia ter
560. 21:11charts, poderia ter n outros componentes
561. 21:13aqui pra gente compor o nosso design
562. 21:16system. Então a ideia é que o prompt um
563. 21:19você use uma vez só, que é para fazer o
564. 21:21setup do seu estilo. E o promptis você
565. 21:23vai ter que usar várias vezes. Então
566. 21:25toda vez que você for criar um grupo de
567. 21:27componentes novo, você vai ter que usar
568. 21:30o prompto. Então eu criei agora a o o
569. 21:33grupo de componente de tabela, eu usei o
570. 21:35prompto. Então se agora eu quiser, por
571. 21:37exemplo, criar o grupo de componentes de
572. 21:40shorts, eu vou ter que de novo usar o
573. 21:43prompto. Então, só para vocês verem mais
574. 21:46uma vez na prática, vamos pegar aqui os
575. 21:48shorts. E a gente sabe que a gente tem o
576. 21:51shorts, eh, sei lá, bar shorts, tá?
577. 21:53Vamos supor agora que eu queira
578. 21:55adicionar ao meu design system e os
579. 21:57componentes de bar sharts, que são esses
580. 22:00gráficos de barra. Então, eu vou colar
581. 22:01de novo o prompt aqui. E aqui eu só vou
582. 22:05substituir isso aqui por bar short.
583. 22:09Aí, como vocês podem ver agora, ele tem
584. 22:12mais uma pastinha. Ele tinha só a
585. 22:14pastinha de table, agora ele tem a
586. 22:16pastinha de table e a de bar sharts. E
587. 22:18agora ele tá fazendo o trabalho de criar
588. 22:20a página do design system do barr, que a
589. 22:24gente já vai ver em alguns segundinhos.
590. 22:27E agora ele tá atualizando a navigation
591. 22:29bar. Então agora a gente já deve ver
592. 22:31aqui o bar shorts, tá vendo? Então agora
593. 22:33eu tenho dois itens dentro aqui da minha
594. 22:35side bar e agora um outro item se chama
595. 22:37bar shart. Então se eu clicar aqui eu
596. 22:40posso ver esse outro componente que ele
597. 22:43acabou de criar. Então eu tenho toda a
598. 22:45documentação aqui do meu barr, eu tenho
599. 22:48variações deles. Então se a gente tiver
600. 22:50multiple series aqui, eu tenho uma outra
601. 22:52versão, como vocês podem ver, sempre
602. 22:54seguindo os nossos design tokens, né?
603. 22:56Então, como vocês podem ver, exatamente
604. 22:59isso aqui
605. 23:02e ah, ó, stack,
606. 23:08horizontal,
607. 23:10negative vales,
608. 23:13shorts.
609. 23:16E aí, gente, obviamente, se você olhar
610. 23:17alguma coisa aqui e isso não tiver do
611. 23:19seu agrado, você pode fazer algum tipo
612. 23:21de edição. Mas o que eu tô mostrando
613. 23:23para vocês, né, e o que eu quero que
614. 23:24fique claro, é que o prompt você vai
615. 23:27usar para você criar a fundação do seu
616. 23:29design system. Então essa página aqui
617. 23:32que inclusive tem um dark e light mode.
618. 23:35E o prompt você vai usar para criar
619. 23:38essas sessões aqui do seu design system,
620. 23:40onde cada sessão vão ser os componentes
621. 23:42incrementais que você vai adicionar para
622. 23:45compor o seu design system. E agora a
623. 23:47gente vai pro prompt 3, que é o prompt,
624. 23:49onde a gente vai criar uma página de
625. 23:52exemplo para vocês verem como que eu uso
626. 23:54os componentes que eu criei do meu
627. 23:56design system. Então, só para lembrar
628. 23:58vocês, o que eu quero criar hoje é essa
629. 24:00billing page, né? Então eu tenho
630. 24:02basicamente aqui uma sidebar aqui do
631. 24:03lado e aí eu tenho aqui
632. 24:06os componentes que são esses pricing
633. 24:07cards e eu tenho um billing history aqui
634. 24:10que é uma tabela com algumas
635. 24:12informações. O prompt 3 basicamente ele
636. 24:15tá dizendo pro cloud code que ele quer
637. 24:16que ele crie uma página e aqui a gente
638. 24:18vai personalizar com o nome da página
639. 24:19que a gente quer. No caso, eu
640. 24:21personalizei com billing page, que é a
641. 24:22página que eu quero criar. E aí a gente
642. 24:25vai enviar ou um screenshot ou a URL do
643. 24:29seu node no Figma. Então, se você não tá
644. 24:31usando Figma, basta você enviar uns
645. 24:33screenshots no anexo desse desse prompt.
646. 24:37Mas se você estiver usando o MCP do
647. 24:38Figma, é só você vir aqui no seu projeto
648. 24:41e aí você precisa selecionar, né, a
649. 24:44página pra gente até pegar o URL
650. 24:47certinha aqui em cima. Como vocês podem
651. 24:48ver, eu não fiz um design system todo
652. 24:51bonitinho, como vocês podem ver, isso
653. 24:52aqui tá bem bagunçado, mas vamos ver se
654. 24:55ele consegue acertar a implementação
655. 24:56mesmo assim.
656. 24:58H, se você não tiver acesso ao Figma ou
657. 25:00quiser usar o Print Screen, vai
658. 25:02funcionar do mesmo jeito, tá? Então,
659. 25:04fica à vontade aí se você quiser usar de
660. 25:07uma outra forma. Aí a gente vai voltar
661. 25:09aqui e eu tô basicamente customizando
662. 25:11esse prompt com essas variáveis. Então,
663. 25:13disse para ele o nome da página que eu
664. 25:14quero criar, passei para ele a URL da
665. 25:17minha página ali no Figma para ele poder
666. 25:19pegar ã informações ali dessa página. Tô
667. 25:23pedindo para ele usar o o Figma MCP para
668. 25:26acessar isso. E eu tô reforçando aqui
669. 25:28alguns componentes do meu design system
670. 25:30que eu quero que ele use. Então eu falei
671. 25:31para ele usar a sidebar 07 do Chatsen. E
672. 25:34agora eu vou enviar esse prompt e a
673. 25:36gente vai ver se ele faz o que a gente
674. 25:39pediu. Bom, e agora a gente vai ver se
675. 25:42ele criou pra gente a página do jeito
676. 25:45que a gente queria. Como vocês podem
677. 25:47ver, isso está bem alinhado com o que eu
678. 25:48tenho ali no meu Figma. E como eu
679. 25:50mencionei para vocês, eu não criei um
680. 25:51design system no Figma, então tem
681. 25:53algumas coisas que estão um pouquinho
682. 25:54diferentes aqui, porque justamente a
683. 25:56gente tá puxando do nosso design system
684. 25:59que a gente acabou de construir para
685. 26:01manter a consistência. Então ele tá
686. 26:03puxando, por exemplo, o estilo dos
687. 26:04cards. Então se a gente vier aqui
688. 26:06ver os cards, a gente vai ver que a
689. 26:08gente tá usando exatamente o mesmo
690. 26:10estilo. A gente tá usando também os
691. 26:12mesmos estilos de botões, né? Então, se
692. 26:14você olhar aqui o estilo dos botões, ele
693. 26:17também tá usando exatamente o mesmo
694. 26:18aqui. O estilo do badg está sendo
695. 26:21mantido, como vocês podem ver aqui,
696. 26:24o estilo das tabelas. Então, se a gente
697. 26:26vier aqui e olhar as tabelas, o estilo
698. 26:29também está sendo mantido aqui. E assim
699. 26:32a gente consegue garantir a consistência
700. 26:35do nosso design system e ter a certeza
701. 26:38de que esse nosso projeto vai ficar
702. 26:40consistente do começo ao fim e
703. 26:42reutilizar componentes ao invés de ficar
704. 26:44criando componentes do zero. Então, ah,
705. 26:47na minha experiência, essa é a melhor
706. 26:49maneira e a maneira mais rápida de você
707. 26:51conseguir criar um design system, que é
708. 26:53uma coisa que, ah, historicamente sempre
709. 26:55precisou de muitos recursos, né? Você
710. 26:57precisava de um designer, de um
711. 26:59desenvolvedor, talvez mais de um
712. 27:00desenvolvedor para você conseguir fazer
713. 27:02o design system, mas você usando esses
714. 27:04promptos que eu passei para você, você
715. 27:06certamente vai conseguir criar um design
716. 27:09system sem que você precise de todos
717. 27:11esses recursos. E aí, só repetindo aqui
718. 27:13para reforçar como que é a melhor
719. 27:15maneira de usar esse essa técnica que eu
720. 27:18mostrei para vocês. Vocês vão começar
721. 27:19usando promptírem
722. 27:22as variáveis de estilo da sua
723. 27:23referência, seja a referência que você
724. 27:25criou no Figma, ou seja uma referência
725. 27:28visual que você importou do Dribble, do
726. 27:30Pinterest, enfim, alguma referência de
727. 27:32um design system que você goste. E aí
728. 27:34ele vai extrair essas variáveis e ele
729. 27:36vai montar essa sessão de design tokens
730. 27:39para vocês com todas as cores. é a
731. 27:42tipografia,
732. 27:44é sombras, é, e os componentes
733. 27:46primários, né, do seu design system,
734. 27:48como botões, badges, cards, essas esses
735. 27:52alertas, enfim, essa é a primeira parte,
736. 27:55é o primeiro, é o que o primeiro prompt
737. 27:56vai te entregar. Depois, com o segundo
738. 27:58prompt, você vai estender o seu design
739. 28:00system, adicionando outros componentes
740. 28:02ao seu design system que eventualmente
741. 28:04não estejam incluídos nessa primeira
742. 28:07sessão aqui. Então você pode adicionar,
743. 28:10por exemplo, como eu fiz aqui, uma
744. 28:11sessão só para mostrar como que você vai
745. 28:13trabalhar com tabelas ou uma outra
746. 28:15sessão para mostrar como que você vai
747. 28:17trabalhar com eh eh gráficos, né? Então
748. 28:20você vai estender o seu design system e
749. 28:23a ideia é que você estenda o seu design
750. 28:25system on então, por exemplo, agora eu
751. 28:28vou fazer uma página que precisa de
752. 28:30gráfico, usa o prompt para você estender
753. 28:33o seu design system e agora criar uma
754. 28:34sessão de gráficos de barra, por
755. 28:36exemplo. E aí o pronto
756. 28:42todos aqueles componentes que você criou
757. 28:45e documentou no seu design system, como
758. 28:47eu mostrei aqui para vocês. E aí, se por
759. 28:49acaso ele eventualmente criou algum
760. 28:52componente, isso pode acontecer, tá? Eh,
761. 28:54ele criou algum componente ali ao invés
762. 28:56de importar um componente que já
763. 28:58existia. E aí o que você pode fazer é
764. 29:00pedir para ele refatorar e falar: "Pô,
765. 29:03aqui você não importou o componente que
766. 29:05eu pedi. Eu gostaria que você
767. 29:07refatorasse esse componente que você
768. 29:08criou pel aquele componente que eu tenho
769. 29:10no meu design system". Então, eh, essa é
770. 29:13a minha sugestão para vocês, porque isso
771. 29:14já aconteceu comigo. Então, se isso
772. 29:16acontecer com vocês, fica a dica. É
773. 29:18assim que é a maneira mais fácil de você
774. 29:20resolver esse problema, tá bom? E para
775. 29:22não perder o hábito, se você gostou
776. 29:23desse vídeo, por favor, deixe seu like
777. 29:25aqui embaixo para eu saber que você
778. 29:26gostou. Aproveita e comenta também que
779. 29:28eu quero saber o que que você achou
780. 29:29desse vídeo. E se você ainda não se
781. 29:31inscreveu no meu canal, se inscreva no
782. 29:33meu canal, assim você ficar sabendo dos
783. 29:35meus próximos vídeos, tá bom? Então,
784. 29:37muito obrigada pela atenção de vocês e
785. 29:39até a próxima. Fui.