SideBling: live coding com escopo real
Live coding SideBling funciona quando há escopo de sessão, ferramentas claras e lições reutilizáveis — não só vibe ao vivo.
Por que live coding ensina
Nesta parte do material sobre live coding projeto sidebling, o foco é «Por que live coding ensina». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Aproveite se você é novo neste projeto neste canal para ver a playlist para assistir a este vídeo, mas vamos fazer um código vivo, que é muito, você sabe, eu vou ser honesto, E aí É um pouco pesado tentar fazer desenvolvimento dirigido a AI, porque você não sabe às vezes como essas merdas de LLMs vão se comportar. Mas vamos trabalhar nesse projeto um pouco e vou mostrar aqui momentaneamente o que ele faz atualmente e o que vamos tentar nesse vídeo, que esse stream, espero que não seja mais de uma hora, pode ser até mais curto. Não, não é, não é, é apenas local, mas o documento Figma está disponível, e para que as pessoas possam acompanhar um pouco, eu não sei se as pessoas têm, como 100 e mais pessoas que descarregaram o documento Figma ou replicou-o, mas sim, vamos, vamos conseguir isso rock e eu tenho alguns apenas alguns prontos eu só tenho alguns objetivos através disso Eu estarei streamando hoje e eu vou mostrar o que são em um segundo, mas como todos sabemos, se você tem feito qualquer tipo de codificação de AI, leva tempo, especialmente se é um prompt mais longo.
Mas se clicar nisso, o que acontecerá é que teremos esta animação de rave, nós criamos isso em um dos vídeos e está esperando uma resposta da OpenAI para dar uma lista de resultados, que você verá aqui em um segundo. Eu criei e vai ser um dos prompções que nós vamos fazer aqui primeiro e este é o primeiro propósito aqui, então quando um usuário clica no botão de reportagem de gerar, vou colocar botão para uma ideia dita , deixe-me fazer isso ainda maior para que todos possamos ler isso, deve iniciar outra chamada para abrir ai para fazer o seguinte, então primeiro há quatro diferentes passos, desfaz o botão de reportagem de gerar botão de reportagem e a animação do ride atrás dela e em lugar dela show the public loader animation, which is that little where it says thinking. Então, aqui está a coisa, eu não sei o quanto vai fazer tudo isso, nós podemos ter que criticá-lo e fazer algumas prompções de seguida para realmente fazer isso, como valores de retorno que fazem mais sentido, certo?
Escopo da sessão
Nesta parte do material sobre live coding projeto sidebling, o foco é «Escopo da sessão». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Openai has returned a response the above information the four bullet points i.e the earnings potential competitive score and the step-by-step guide should be integrated into this new layout from figma only show the first three steps in the guide by default and if the user wants to read all the steps allow them to click show all 10 steps beneath it so once again if i go back here this is what we hope we gets returned after we run this response now i'm fairly certain i did ask it Este é um ponto secundário que vamos fazer um prompt. E adicionalmente, vou ter certeza aqui em Cursor, se eu for para as funções de contato, quero ter certeza que o meu server Figma MCP está em verde, e está. E a maneira como isso funciona é que quando você está tentando traduzir um pedaço de design ou um todo ou um design inteiro, você tem que abrir o Figma, é para ter certeza que este frame que queremos integrar no layout é selecionado, o contêiner de relatórios.
Para a topografia, o color e há variáveis, então se eu clicar nisso, você verá variáveis aqui, nós usamos variáveis de várias formas em todo lugar, este é todo o contexto que é enviado para a ai para que maximize as chances de que vai alcançar o layout um tanto quanto possível, agora geralmente não é perfeito, ele fica como 90 a 95 por cento lá, mas tudo depende do nível de trabalho que você tem entrado no layout automático, os estilos e as variáveis, então vou recortar vou clicar em contêiner de report, vou minimizá-lo e então aqui em cima no chat, então não vou usar código cláudio para este exemplo particular e a razão é porque eu não consegui conseguir o server mcp figma para se comunicar com o código cláudio, então essa é a única razão pela qual estou usando o chat cursor, então vou apenas usar o modo agente e com o sonnet cláudio 4 e então vou pastar esse imposto em cima aqui, essa é a coisa inteira que nós apenas lemos E vamos orar e esperar que funcione. Bem, então vou ver algumas das contas que estão acontecendo aqui, superbo UI, obrigado, Smooth, estou gostando dessa série, muito bom, sim, qualquer coisa que pode errar, vai errar, talvez eu deixe esse comentário aqui, mas aqui é um bom sinal, se olharmos e zoomarmos aqui, podemos ver, chamada GetCode, esse é o servidor Figma MCP, eu acredito. Agora eu tenho o contexto perfeito, eu posso ver que o design da Figma mostra um layout de reportagem compreensível com potencial de ganho, um valor competitivo e um guia passo a passo.
Na prática
Live stream SideBling: construir em público com disciplina de escopo.
Ferramentas no fluxo
Nesta parte do material sobre live coding projeto sidebling, o foco é «Ferramentas no fluxo». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
E esperamos que isso funcione muito bem agora, claro, esse design, esse layout ainda não é muito responsável, isso é algo que eu vou tratar depois, mas está funcionando por mais parte no desktop, tudo bem, esperamos e esperamos e esperamos que isso funcione Veja, é por isso que fazer isso em um setting vivo pode ser um pouco assustador, dependendo de quanto tempo ou quão lento os LLMs estão funcionando. Que eu quero, tudo bem, então vamos tentar antes de eu tentar alguém me deu uma super conversa muito legal MG muito generoso de você fazer essas demos de código vivo demos em um back-end de código duro ha e back-ends de dados extensivos, mas eu adoro um bom design simples, eu só uso código clave para tarefas específicas, não confio muito, tudo bem, bem, veremos se se não for. E ler novelas de romance ok, mostre-me o dinheiro, tudo está funcionando ainda neste ponto por acaso, isso é verdade, eu escrevo romance, não, estou brincando, tudo bem, novela de romance, escritor de gosso, tudo bem, então vamos fazer com que tudo mais funcione, isso faz, isso é ótimo, gerar guia, é clicável, você está pronto?
É vir aqui para o código cláudio, vamos usar o código cláudio agora que não precisamos usar o server figma mcp e vou dizer que a gráfica de carga está superposta no topo do título de ideia e deixe-me avançar e descrição, mova-o para baixo, não quero dar uma quantidade de pixels Eu vou dizer isso, tenha certeza que é somente visível, peraí, tenha certeza que está embaixo do título e descrição. Discord avançado, se alguém não sabe quem é o 2Advanced, por acaso, você sabe, os originais OGs dos melhores desenvolvedores Flash e eles estão meio que rebootando e eles têm um server Discord, então definitivamente veja isso. E também há um contêiner de reportagem, tudo bem margem, vamos ver o que aconteceu o problema aqui é que este contêiner geral tem um valor de altura encodado duplo e é por isso que não está estendendo, mas sim tudo bem o que assusta é que estou incapaz de clicar em mostrar uau tudo está superposto eu acho que o que farei é um remove that little adjustment that I made.
Lições reutilizáveis
Nesta parte do material sobre live coding projeto sidebling, o foco é «Lições reutilizáveis». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Sim, quero dizer, por mais que seja simples, coisas como essa, e eu digo simples porque eu estava usando o Cloud, quero dizer, eu estava usando o Cursor para construir algo realmente complexo com visão de computação e AI, e também 3JS com uma mesa de pulo interativa com física de bola e coisas assim. Operações de credo e pôr API como simples, mas isso é ainda mais robusto imposto que eu exigei, então você vai ter a ideia de que um-shot perfeitamente, talvez com GPT-5 saindo muito cedo, qualquer dia agora, quem sabe, talvez seja muito melhor, tudo bem, ainda está funcionando Como você decide entre usar o cursor chat? A única razão pela qual eu usei o cursor chat foi para o Figma MCP server porque eu não conseguia conectá-lo ao código cláudio.
GitHub com encode, eu normalmente faço coisas manualmente através de um git e terminal apenas para adicioná-los eu mesmo e então comprometê-los, tudo bem, vamos, vamos, perfeito, eu acabei de resolver todos esses problemas, tudo bem, vamos tentar, vamos dar mais um toque, pelo menos nós fixamos o problema principal, tudo bem, o que é um hobby, não sei o que aconteceu com o meu, o que aconteceu Oh, havia um problema. Oh não, então fez algumas mudanças de layout e completamente enganou o, o que você chama, o navbar, que não sei por que teria feito isso, mas talvez tenha fixado isso no processo, ok, gerar guia, tudo bem, isso é melhor, não é ideal, deve ser centrado, você sabe, nesse espaço um pouco melhor, hum, está na parte superior obviamente, vamos lá, trabalhe, trabalhe, trabalhe, algo me diz que vai funcionar essa vez, pelo menos não seja superposto sobre a parte superior desta coisa porque realmente fez algumas mudanças é uma dessas coisas que você chega a um ponto como se não funcionasse de mão, então eu posso entrar lá manualmente, ok, então ainda estamos tendo problemas de layout com isso Oh, que frustrante. Eu imagino um futuro com melhores modelos onde nada desse aconteceu, só conhecia, tipo, ok, eu posso ver o design da Figma, espero que a visão computacional seja melhorada para que não tenhamos que passar todo esse contexto adicional, porque como humano, eu posso olhar para um layout, como um mockup, e eu sei exatamente como estruturar o mockup e coisas assim, mas os LLMs não são inteligentes o suficiente ainda para fazer isso sozinhos.
Sinais de que está funcionando
Nesta parte do material sobre live coding projeto sidebling, 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.
Veja, o que eu faria normalmente se isso fosse um live, mas para o propósito de gravar um vídeo e postá-lo, eu só iria passar por isso como estou agora, mas eu iria cortar toda essa outra , como o esperando e coisas assim. Nós entramos aqui sim, tão assustador porque como este show todos os 18 passos eu nem consigo clicar nisso agora o que farei é um vamos resolver este problema onde há os passos são literalmente superlados em cima de um outro bem, então vou fazer um prompt de seguida no net apenas mover isso por O contêiner de passos. Bem, deixe-me olhar isso também realmente rapidamente novamente para ver o que mais eu poderia querer resolver há algo innecessário, como eu não sei o que este elemento está fazendo, como nós nem precisamos do elemento canvas, então eu acabei de deletar isso e este aqui, não sei por que isso não está indo 100% fora, então deixe-me olhar para isto, bem, então temos esse elemento, este é o contêiner de idéias e então temos este elemento que é o que eu não quero A seção CTA tem um padrão, sem necessidade, então se eu tirar isso, vamos lá, então eu vou dizer também, remova o padrão, eu vou dizer remova o padrão esquerdo e direito, de cada lado, ou melhor, do contêiner CTA ou da seção CTA, uma vez que a OpenAI retorna a resposta.
Bem, vamos descer nisso, potencial de renda pode ser apenas um problema de eu o que é estranho é se eu clicar aqui eu não há conteúdo, então vamos ver aqui eu quero clicar nisso oh, há conteúdo no dom, embora eu olhe para isso e diga por mês aqui Então vamos ver por que isso está acontecendo. Fixar esses problemas, ok, tudo bem, tudo bem, bem, vamos esperar que esse funcione um pouco melhor, vou ver os comentários aqui Só perguntando, quando você tem algumas questões de CSS que você gosta de overflowar neste vídeo, por que você não fixa isso sozinho? Github, Spark, que eu acabei de fazer um vídeo sobre, Bolt, você sabe, essas, na minha opinião, se você já é alguém que entende com algum código e design, não é para você, você seria melhor em Cursor ou, você sabe, WinSurf ou qualquer coisa, ou ClodCode, é mais robusto.
O que evitar na primeira semana
Nesta parte do material sobre live coding projeto sidebling, 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.
Eu acho que preciso fazer isso mais interessante porque leva um pouco de tempo, então há diferentes maneiras de você fazer um pouco mais engajador essa pequena seção de pensamento a menos que esteja estalado, sem erros, apenas levando um pouco de tempo talvez eu o retome Eu estava realmente esperando para chegar mais além disso e não ter todos esses problemas. Você sabe, talvez eu provavelmente, se eu voltar para Figma e olhar como eu eu coloquei o layout automático com esses porque muitas coisas estão apenas cozidas com o layout automático Você sabe, isso pode ser um problema com isso, como por exemplo, isso não deve ter uma altura fixa, isso deve ser um conteúdo hug, isso aqui deve ser um conteúdo hug também, então eu, isso é meu problema, porque quando você tem uma altura fixa, então é aí que você tem os problemas de overflow estúpidos, então se eu olhar para o passo um, por exemplo, o que é isso? É uma altura fixa, então conteúdos hug Se eu mudar, se eu olhar aqui dentro e dar um passo no header, isso é uma altura fixa, isso deve ser o conteúdo do hug, descrição de cartas, ok, isso é bom, passo no header, tudo bem.
Então, eu estou meio curioso, o que se ao invés de tentar fazer isso manualmente, fixando o problema do overflow através do código, nós fazemos isso selecionando o frame específico que eu apenas ajustei e dizendo que o update. Os valores do CSS baseados no que eu selecionei, talvez isso realmente funcione, vamos dar uma olhada, então vou fazer a altura aqui, vou fixar isso, contatos de abraço, vamos colocar isso aqui em posição aqui, vamos lá e deixe-me ver se tem mais alguma coisa dentro, isso deve ser e também o conteúdo do Hug. Desta vez, vou usar o cursor chat porque, novamente, o server Figma MCP está somente conectado a isso, não com o código de código de código.
Como explicar isso para o time
Nesta parte do material sobre live coding projeto sidebling, 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.
Estou curioso porque eu não fiz o follow-up de seleção do server Figma MCP, então está funcionando, está chamando de Get Code, isso vem do server Figma MCP. O fundo verde é mais brilhante do que o que eu tenho, como significativamente, isso é meio estranho, de qualquer forma, hum, eu posso ter que ajustar isso, vamos fazer um show de todos os 16 passos e por algum motivo não é clicável, então eu cliquei no ctrl shift i, pegamos sim, há algo sobrelazido, cartas de footer, vamos deletar isso, vamos lá, então eu vou dizer que remove as cartas de footer para esta seção, vamos lá Hidração de passos extras, isso é legal. Provavelmente algo como Supabase, para que quando alguém gera uma ideia, ele salva todas essas 12 ideias iniciais e também qualquer ideia que tenha um reporte associado gerado com ela, para que eles possam voltar a essas ideias no futuro.
Card animation rive file se aquela ideia particular ainda não se aquela ideia particular ainda não teve um relatório gerado para ele se eles voltarem para a ideia anterior deveria mostrar a ideia quero dizer, o relatório não, eu não acho que eu preciso passar na última frase, vamos apenas fazer essa parte, hum, eu acho que há provavelmente o contexto suficiente lá, vamos tentar isso rapidamente e vamos terminar aqui em breve, já estamos a 58 minutos, oh sim, eu deveria ter, eu deveria ter, hum, sim, Sim, esses precisam de um fixo de altura de linha. Eu estava olhando aqui no chat do cursor, eu pensei que estava terminado de funcionar, mas não, está ainda fazendo isso, parece que está quase terminado, embora também deveria ter dito que remove as cartas de futebol estúpidas aqui embaixo, o que me preveniu de clicar no botão de mostrar mais. Quase funcionando isso precisa ser resolvido uma coisa estúpida, mas se eu clicar em seguida, seguida, coach de escrita de romance, organizador de book club romance, talvez devemos começar um book club sobre novelas de romance novos no curso de design, tudo bem, romance novela de romance, vamos fazer um segundo, então ideia 3 de 12, vamos ver se gostamos desse, de novo, eu meio que quero fixar isso, você Eu provavelmente mantenho o outro lote vivo.
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.