SideBling com Claude Code e Cursor
No SideBling, Claude Code + Cursor aceleram encode custom — o risco é drift de design se não houver critério de aceite visual.
Divisão de trabalho IA/humano
Nesta parte do material sobre claude code cursor design custom, o foco é «Divisão de trabalho IA/humano». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
E agora o que precisamos fazer neste vídeo é utilizar o server Figma MCP para conseguir isso realizado aqui no front-end, no browser. Então, eu criei um prompt, ou eu escrevi um prompt aqui, usando o Google Docs para agora, para que você possa ler mais facilmente. Depois que OpenAI retorna a lista de ideias, e por favor, se você ainda não viu isso, este é o estado atual da aplicação até agora.
Você verá no layout selecionado que há um botão para a ideia anterior e a ideia seguinte, e quando pressionado, ele deveria mostrar a ideia anterior ou anterior. E isso lhe diz, sabe, apenas algumas as guia sobre primeiro e próximo se estivermos na primeira ideia e na última ideia, eles deveriam desligar esses botões para tipo 30% de capacidade no frame de cartas, você verá uma tag para a ideia de 1 de 12 isso deveria ser dinâmico baseado na ideia atual e os números de ideias que ele gerou e então há um título descrição e um botão de cta para gerar guia, não vamos integrar funcionalidade para isso ainda, então queremos focar apenas nesta parte, também quero tocar a animação de cada cartas quando eles vêm em e fora Eu acho que seria legal, alguma tipo de animação de sequência de G-SAP. Primeiro, você quer ir aqui para os seus seteinhos de chat, ferramentas e integrações, tenha em mente que o servidor Figma MCP está ativo e tem aquela luz verde ali, isso significa que está pronto para socar.
Design custom vs template
Nesta parte do material sobre claude code cursor design custom, o foco é «Design custom vs template». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Vamos pastear isso no chat do Cursor, em vez de usar o código do Cloud. A razão é porque eu ainda não consegui o server da Figma MCP para comunicar com o código do Cloud. E então, obviamente, eu tenho esta configurada como Cloud 4 Sonnet e então o modo de agente.
O que eu descobri foi que você não pode selecionar múltiplos nodos em Figma, como estes dois elementos diferentes. Então agora que está selecionado, vou voltar e alterar isso layout inicial de prompt e agora vou reenviar isso para ver se obtemos um melhor resultado estamos tendo problemas conectando-nos ao provedor do modelo, isso pode ser temporário, por favor, tente de novo em um momento aqui vai tudo bem, então eu só tive que clicar em retry algumas vezes Tudo bem, esta é a parte mais assustadora, é tentar, é assustador e é emocionante. Até agora, uma ideia boa, um dos 12 artistas de portas custom bird, a descrição oferece personalização, ok, então podemos tirar esta tag de descrição, que diz que tente tirar isso, vamos tentar clicar no próximo ideia, isso é tão assustador Isso funciona.
Na prática
SideBling com Claude Code + Cursor e design custom.
Ritmo da playlist
Nesta parte do material sobre claude code cursor design custom, o foco é «Ritmo da playlist». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Deve estar automaticamente diminuindo, o que podemos dar com essas instruções agora, eu nem estou preocupado com isso, eu acho que o que podemos fazer é apenas preocupar com esse tipo de coisa depois do fato, eu só queria trabalhar no desktop agora neste ponto em tempo, então o primeiro ajuste, você sabe, temos que tirar da parte de descrição, que novamente não é um grande problema, eu não sei nada, o que acontece quando chegarmos ao último, tudo bem, está pronto, não mais, ok Então, agora eu acho que o que eu quero fazer é focar em algumas ideias de animação. Se a UI entrar muito rápido enquanto a pensão ainda está aparecendo e ela está meio que se superando, eu acho que precisa haver um atraso. Então, deixe-me mudar isso, vamos dar uma rápida instrução para ajudar a fixar isso e desta vez vamos usar o nosso código cláudio, eu fiz o cláudio, eu instruo aqui para abrir o código cláudio e eu vou dizer, um certo, bem, uma vez que a AI está aberta, Oh, eu preciso atualizar meu cursor.
E uma vez que estiver feito, Vamos tentar isso novamente e depois vamos pedir que use o GSAP para começar a criar algumas animações muito legais para cada cartão que vem em e fora. Próximo, vamos construir um prompt especificamente para quando a carta é apresentada, tanto a primeira carta quanto qualquer outra carta, quando o próximo é clicado ou o anterior é clicado. Que ainda animará quando eles entrarem, vamos animar alguns desses elementos usando gsap tudo bem, então eu acho que isso poderia ser um conceito bem legal, então vou construir esse imposto e então eu o leio e então o subiremos ok aqui está o imposto use gsap para criar uma série de animações quando cada carta é apresentada Para a primeira carta, ela é carregada depois que a sequência de carregamento termina.
Riscos de drift
Nesta parte do material sobre claude code cursor design custom, o foco é «Riscos de drift». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Então, se eu usar o control shift I do Dev Inspector para pegar essa parte, e clicar nesse ícone, e clicar aqui, é o que estou falando aqui. Por cerca de 100 pixels para a direita da sua posição de default atual por cerca de 1 segundo com o Ease. Depois de cerca de 0,5 segundos, depois que a primeira animação comece, nós devemos fazer uma animação de masquem que move a tag IDEA1OF12 para a vista no ácido Y.
Se eu zoomar, esta IDEA1OF2 vai se mover de qualquer lugar e, de qualquer lugar, é realizado dizendo que o seu contêiner parente deve ter o overflow escondido para que ele se animasse de onde não é, basicamente. Então, basicamente, estamos dizendo que se animar de onde não é no ácido Y indo para cima e para cima, este elemento, o título, a descrição, o botão e então este texto aqui também. Isso significa que se clicarmos em a próxima ideia, então esta carta deve mudar para a esquerda por 100 pixels e desfazer.
Sinais de que está funcionando
Nesta parte do material sobre claude code cursor design custom, o foco é «Sinais de que está funcionando». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Essencialmente, blá blá blá, se a ideia anterior, ok, então, quando a próxima ideia é pressionada, a carta atualmente disponível para enviar pela esquerda, enquanto a próxima carta anima e é descrito abaixo, se a ideia anterior é pressionada, a carta deve reverter a animação para que a carta atualmente disponível se anima para o direito por 100 pixels e fade-out, e com a ideia anterior de carta entrando pela esquerda, então é um pouco confuso, há muito aqui, deixe-me só ir em frente e dar uma olhada e ver se pode meio que enganar o que eu envio para que a animação ocorra. Então, eu cliquei direito para apagar isso no prompt do código de código e vamos fazer isso. Eu acho que o texto precisa ser um pouco menor em uma maneira de voltar para fazer outra pesquisa, há um monte de coisas que vamos precisar se preocupar com.
E eu acho que o que eu quero dizer é eu acho que o que faremos é pedir que adicione mais espaço branco por cerca de 50% ou mais. Do que o que ele tem atualmente naquele pedaço de tipo, adicionar mais espaço branco embaixo e acima do termo de busca casado em quotes por cerca de 50% mais do que está atualmente lá ok enter bem, vamos refazer isso vamos fazer um novo um um eu gosto de andar pequenos cachorros isso é literalmente coisas estúpidas vindo do topo da minha cabeça bem, então como podemos fazer dinheiro caminhando pequenos cachorros isso é bem óbvio você começa um serviço Sim, um servidor de serviços de caminhada de cachorro. Left Click e drag algo assim e então nesse retângulo vamos mudar isso para um gradiente linear Deixe-me mover isso para que possamos ver o que está acontecendo aqui e o que farei, vejamos aqui bem por agora, vamos apenas focar nesse gradiente então a cor inicial começando seria essa a cor final será a mesma cor Este aqui, e no meio vamos adicionar um par, aqui, clique no meio, e este será mais liso.
O que evitar na primeira semana
Nesta parte do material sobre claude code cursor design custom, o foco é «O que evitar na primeira semana». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Vou mover isso aqui, vou selecionar esses três elementos, clicar em grupo e então pegar isso e adicionar clip e ver se podemos adicioná-lo como grupo. E acho que vou colocar esse keyframe em 40, porque não quero que ele continue indo de lado para lado, indo de um jeito louco. Se você clicar no barra de espaço, isso é o que parece, é muito rápido, então vamos pegar a velocidade de playback e clicar aqui e vamos fazer como 0.5 Vamos tentar de novo, talvez vamos ir um pouco mais lento 0.2 ok, isso é um pouco mais lento, vamos com 0.35, aqui vamos nós Tudo bem, isso é melhor.
Ok, então agora que temos isso, vamos criar outro artboard, que vamos para o tab de design, vamos apenas dar um Alt, clicar e desligar isso. Vamos deletar isso e isso, e agora vamos clicar em N no nosso keyboard para o tool Nested Artboard e então escolher Artboard. E depois duplicar uma vez mais, vamos pegar isso aqui, tudo bem, então agora se nós virmos aqui, ativar animar, ir para a máquina de estado, ativar o play, podemos ver como agora todos esses todos têm suas pequenas animações que adicionamos, eu acho que eu não quero que seja tão brilhante novamente, então vou voltar aqui, vamos pegar o o retângulo e reduzir a opacidade de 68 para talvez 38, então vamos voltar aqui vamos ir para animar e clicar no barra de espaço que é melhor agora, nós poderíamos provavelmente fazer isso mais legal criando talvez uma linha de tempo onde essas estão meio que se movendo indefinidamente, então vamos fazer isso rapidamente vamos tirar todos os três deles segurando shift e depois adicionar um keyframe no Y axis.
Como explicar isso para o time
Nesta parte do material sobre claude code cursor design custom, o foco é «Como explicar isso para o time». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Então vamos ver aqui é provavelmente porque precisamos pegar isso e aumentá-lo corretamente ok agora vamos voltar este precisa ter um keyframe também agora vamos mover isso aqui para o centro tudo bem e talvez vamos mover isso aqui e vamos colocar isso está loopando também Então vamos ver como isso parece, não vai ficar correto, vamos voltar ao design e vamos selecionar este artboard e queremos ter certeza de que não podemos ver fora do artboard, o que acredito que eu pensei que havia uma opção para modificar isso aqui, poderia estar errado, mas eu acho que de qualquer forma é assim que será, vamos dar uma olhada nisso Então, isso deve aparecer, uma vez que exportarmos isso, como uma lista grande que continua flutuando. Então, o que farei é pegar esse artboard, vamos clicar em exportar, exportar para o runtime, vou esforçar esse modo para a próxima vez, exportar arquivo, agora diz exportado, oh, aí está, aí. Vou entrar no meu fonte de código onde o nosso código atualmente existe público e isso vai ser uma animação de cartas agora podemos referenciar este nome de arquivo e agora temos que dar as instruções específicas, então vamos voltar aqui para o cursor em público Existe um novo arquivo Rive.
Um apenas nos descrever, quero que você adicione este arquivo de Rive atrás da seção guia de gerar a seção guia de gerar pode precisar ser posição absoluta com um índice mais alto para mostrar o arquivo de Rive, vamos ver o que faz com isso sozinho, um, provavelmente vamos ter que arruinar porque não realmente passar muito contexto nesse particular apontamento. Bem, eu acho que tenho que fazer isso, vou ter que mencionar aqui, vamos relaunchar o Claude, dizer qual artboard usar junto com o nome da máquina de estado, tenha cuidado para ter certeza, isso é idiota, tenha certeza de que o artboard sendo usado para um O que está acontecendo? Ok, nas cartas de ideia, o artboard é chamado artboard e a máquina de estado é chamada de máquina de estado 1.
Na prática
Próximo passo: escolha uma métrica (taxa de sucesso, tempo, retries ou conversão) e rode um experimento de 7 dias antes de escalar o padrão.