SideBling: design e encode com IA
Na continuidade SideBling (vídeo 7/8), o loop design→código com IA só fecha com critérios de aceite — não com 'mais um generate'.
Estado do projeto
Nesta parte do material sobre design e codigo com ia sidebling, o foco é «Estado do projeto». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
No vídeo anterior e agora não estamos salvo o dados de promoção que eu acessava, então se nós reforçarmos como esse dados perdidos não se mantém persistente em um database, então esse vai ser o passo agora que tentamos lidar com e podemos tentar conseguir gerar um botão de guia funcionando também neste vídeo, então o que vamos fazer é eu vou. As duas mesas que eu criei, a mesa dos usuários está funcionando, a mesa dos prompções ainda não está funcionando, mas decidiu gerar isso no voo agora, eu não sei se esses são todos os os campos corretos que vamos precisar, mas precisamos de mais coisas, precisamos guiar isso, então eu tenho um, você sabe, o servidor de dev está funcionando no mpm run dev e super base é nosso servidor mcp está pronto para ir e eu vou ler realmente rapidamente o imposto que estou a fazer Então, precisamos garantir que o início do prompt seja SAVE, que é o que é entrado pelo usuário, junto com a resposta do AI. Desde que cada ideia gera múltiplas ideias, eu deveria dizer prompt, nós precisamos armazenar cada ideia, talvez em uma terceira mesa que está associada à mesa de prompts.
De qualquer forma, precisamos armazenar em uma terceira tabela, que armazena o título da ideia retornado da AI junto com a descrição. E só para clarificar, ou verificar, como quer que você queira olhar, aqui está o título de uma das ideias e aqui está a descrição. Ok, continuando a ler isso, adicionalmente, como cada ideia tem seu próprio reporte gerado, precisamos verificar se aquela ideia tem um reporte associado gerado para ela ou não.
Loop design→código
Nesta parte do material sobre design e codigo com ia sidebling, o foco é «Loop design→código». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Então, o que isso significa é que nós temos que saber, quando apresentamos esta página, e se eles voltam para ela depois do fato, nós temos que saber se eles clicaram em gerar guia ou gerar reporte. Então, se eles geraram uma, vai mostrar, vamos voltar para a Figma, vai mostrar isso, potencial de ganho, o valor competitivo, e então todos os passos para tentar trazer essa ideia para a, você sabe, frutífera, por assim dizer. Então, deixe-me voltar e continuar a ler este propósito, não é muito mais tempo, onde está o cursor?
So when a user submits a prompt from the homepage and they receive a response from the AI, it should automatically store the info that they entered into the text field on the homepage as the prompt in the prompts table, along with their user ID and also the ideas it returned into the ideas table. Create these tables using the Supabase MCP server and update the code so that it stores the prompt information and ideas. Eu acho que vai fazer isso uma vez que recebermos uma resposta, espero que não, não vejo nenhum oh ok aqui está eu gosto de tocar solos de guitarra rápida, uh, está salvando a toda a resposta, acredito que também está nos dizendo usagem de token, isso é interessante, um seu modelo de resposta, GPT-4-0.
Na prática
Continuidade SideBling: desenhar e encodar com IA (vídeo 7/8).
Onde a IA erra
Nesta parte do material sobre design e codigo com ia sidebling, o foco é «Onde a IA erra». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Então, aqui estão todas as ideias associadas com o ID de prompt, o que é ótimo, cria uma relação entre as mesmas tables. Botão funcionando e então isso vai ser multi-passe você tem que pensar nisso o que acontece quando o botão de guia de gerar é clicado bem, a primeira coisa é que eu quero esconder este botão junto com o pequeno overlay do rave e então nós queríamos fazer com que nós tenhamos essa animação de rave de pensar que está meio que colocado na mesma posição aqui centrado para que possamos ver se estamos esperando uma resposta para gerar o guia. Então, uma vez que recebe a resposta, podemos dizer que ela integra a resposta, todos os diferentes passos e informações, neste contexto aqui.
Eu quero dizer, nós basicamente queremos ter o template pronto e ter certeza de que ele foi traduzido com certeza antes de tentar gerar dados reais. Então, o que faremos é voltar aqui e, novamente, aqui é onde precisamos garantir que o nosso server Figma MCP seja disponível, aqui, então está verde. Agora, uma coisa que eu quero fazer enquanto estou escrevendo esse prompt é clicar em CTRL-SHIFT-I aqui em Chrome para tirar o inspector de dados.
Critérios de aceite
Nesta parte do material sobre design e codigo com ia sidebling, o foco é «Critérios de aceite». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Então, realmente, esse contêiner aqui, se expandirmos isso no código, veremos que diz CTA section e IDEA header. Eu não acho que precisamos, podemos apenas colocar abaixo da div que está abaixo da seção CTA e garantir que não vá fora disso e colocá-lo em algum lugar porque isso vai quebrar o layout. Então eu vou dizer, ótimo, agora temporariamente eu quero que você use o server do MCP da Figma para implementar o contêiner de reportes de frame selecionado diretamente embaixo da seção CTA DIV.
De novo, garantir que a frame seja selecionada em Figma, chamando o MCP Tool, chamando Get Code. Deve ser um contêiner diferente que tem uma ampliação fixa que eu estou imaginando um sim, vamos fazer isso mais tarde a coisa responsiva então agora que nós realmente temos isso o que eu quero fazer agora é ir em frente e dizer que realmente coloque isso em conjunto e integrado de forma correta então o próximo ponto é que quando eles clicar no botão de guia de o botão guia que gerará, ele esconderá esta seção e mostrar o gráfico do Little Thinking Rive. Devem ser inscritos para encontrar porque lembre-se que tínhamos que remover a altura, você sabe, a coisa então, de forma geral, não mostra o relatório que apenas integramos do Figma, então isso pode ser escondido também agora quando alguém clica em um relatório geral, deve enviar um novo convite para a OpenAI que requer a seguinte informação em potencial de ganho associado com essa ideia particular, deve ser formado formatado como tal um um um valor competitivo baseado em como competitivo essa ideia é deve retornar um valor baseado em zero a 10 zero não sendo competitivo em todo o caso e então 10 sendo Muito competitivo Por exemplo, um proprietário de um BB Gun Range não deve ser muito competitivo.
Sinais de que está funcionando
Nesta parte do material sobre design e codigo com ia 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.
Agora, um guia de passo a passo que contém um título e uma descrição sobre como eles podem lidar com essa ideia particular e colocar essa planilha em ação. A informação acima deve ser guardada nas tables relevantes que existem na base de Supa, uma vez que um retorno é recebido. Então, nós queremos tirar isso e, em seu lugar, fazer a animação de pensamento publicloader.rive que nós criamos, enquanto está esperando uma resposta da AI.
E, uma vez que essa resposta é recebida, tirar essa seção de loader.rive e mostrar todos os dados que foram salvos nas tabelas de Supa Base, no layout que nós implementamos. Mostre todos os dados que nós salvamos nas tabelas do Supabase e o layout dentro do layout que nós implementamos no report. E também para mostrar todos os 20 passos, nós queremos garantir que isso é clicável e quando você clicar, ele revelará todos os passos.
O que evitar na primeira semana
Nesta parte do material sobre design e codigo com ia 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.
Agora, uma coisa que eu estou curioso antes de submeter é se eu clicar em Next Idea. Quando vamos voltar para a ideia 1, ela só mostra o botão de gerar guia, mas nós já o geramos. Então, vamos ter que resolver isso também por agora, não quero pedir que tente fazer muito, vamos apenas focar nesses três aqui, bem, vamos testar isso de novo, eu gosto de jogar hopscotch tão estúpido, bem, bem, organizador de eventos de hopscotch, guia de gerar, agora está centrado Ok, potencial de ganho de 2 a 8 mil por mês.
Então, se eu clicar em CTRL SHIFT I, Ai nós podemos ver o que está escondido oh é o contêiner para todas as cartas de futebol deixe-me apenas tirar isso eu vou instruir a ai para tirar isso também uh agora podemos clicar em todas as 10 ou 10 passos e aqui vamos nós olhando isso mostrar menos funciona e aqui vamos nós isso é louco bem então agora que temos isso vamos clicar na próxima ideia Ok, então agora o que queremos fazer é garantir que isso não aconteça, porque ideia 1 de 12, já geramos o guia para isso, então vamos voltar para entrar em um novo imposto. Então, no reporte de gerência, o potencial de renda está mostrando em duas linhas, expanda-o para que não esteja em uma linha. E também, depois que o reporte é gerado, eu clico na próxima ideia e depois clico na ideia anterior para voltar à ideia que eu apenas generou.
Como explicar isso para o time
Nesta parte do material sobre design e codigo com ia 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.
Porque muitas vezes as pessoas olham para uma ideia e dizem que não estão interessados nisso, não querem nem olhar para o relatório, ou seja. Às vezes, quando você começa a entrar nas bolas e nos dedos da aplicação e usar como um usuário pode usar, você pode entrar em problemas e esses problemas precisam ser resolvidos depois. Me faz um pouco preocupado falhou para repassar a resposta de ai interessante então vamos querer passar este contexto aqui tudo bem, então tudo isso funcionou, após gerar um relatório e clicar na próxima ideia e clicar em guia de gerar para a segunda ideia, ele retornou uma errada E isso é o que estou reportando ou pasteando da errada em si.
Vamos clicar em próxima ideia, vamos clicar em guia de gerar e vamos ver se ele parceria esta data corretamente que pode não ter sido o problema, então veremos ah sim, funcionou bem, vamos voltar à ideia anterior bem, são essas a mesma coisa desenvolver design único, material de qualidade de fonte, próxima ideia, oh sim, eles são diferentes Isso diz o mesmo número competitivo? Na próxima aula, provavelmente vamos pensar sobre, Se a gente for na página de casa, Agora que temos algumas dessas informações, podemos fazer isso funcionar e fazer um marquê, fazer isso repetir. E então, provavelmente, também podemos fazer uma página onde eles podem clicar em ideias e mostrar todas as ideias que eles tiveram, sabe, e trazer o formato de cartão para cada uma para que eles possam voltar a essas ideias.
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.