Prototipar interação no Google AI Studio

O que o material diz sobre google ai studio ui

O episódio sobre google ai studio ui abre assim: Digamos, por exemplo, que você está trabalhando com este layout aqui, você está desenhando e quer ver como é quando alguém clica neste botão e há um pop-up. Bem, você poderia desenhá-lo sozinho ou você poderia colocar esse layout no Google AI Studio e você poderia pedir que ele desenhe o pop-up para você, resultando nisto. Vou mostrar-lhe um monte de exemplos e testes que eu fiz através deste novo modelo de imagem AI.

Chamado nano banana e você será surpreso com o quão capaz isso é e é ótimo para inspiração de design então aqui está o primeiro teste aqui está o layout não terminado e vou pedir que adicione uma ilustração de um city robótico atrás desta caixa de prompter no seqüelo herói desta página web use cores que complementam o esquema de cores atual aqui é o que me deu olhe para isso isso é realmente muito sólido é meio que o que eu imaginei que seria Então, realmente o quebrou com grande detalhes. Então, você poderia provavelmente reprompter, pedir que ele remova os elementos do UI, e dessa forma você pode ter essa imagem que pode ser vectorizada e usada na produção. Aqui está outra com o mesmo layout, apenas para fazer outro teste.

Coloque um personagem de robô realista feminino atrás da caixa de promoção nesta seção do Hero de um site. Coloque-a atrás de uma janela de vidro frouxamente frouxa, como o tipo que você pode encontrar em uma chuveira. Alright vamos ver isso bem bem, isso é na verdade bem sólido, fez o que eu queria ele tem um personagem de robô feminino o gás frouxo não vai até o e há uma barra no caminho, então decidi reprimir com essa imagem gerada e pedi para estender a janela de gás frouxo até até o lado da tela e tirar o rodel metal para o lado do robô só deveria consistir em gás frouxo no robô como foi feito bem Ele fez um bom trabalho, mas você ainda pode ver o lado da janela, você ainda pode ver a versão frouxa da barra, então não é perfeito, mas, no entanto, como eu disse, é muito bom para inspiração de design.

Para `google-ai-studio-prototype-ui`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Mecanismo e restrição em google ai studio ui

No miolo do material de google ai studio ui, o mecanismo fica explícito: Agora, aqui é um design completamente diferente do meu outro projeto falso chamado Riffscape. Eu disse, coloque este mock-up em um Macbook sentado em uma mesa com um músico tocando guitarra no foreground. Porque muitas vezes, se você está lidando com design web e tem clientes, você quer mostrar o que essa coisa pode parecer em uso diário.

Até o cabelo da guitarra e os marcadores de frete estão na correta localização. Agora, você pode ver o layout actual no fundo, o que quase quase encerrou. Ou você pode cortar e colocar aqui na gráfica do laptop para fazer mais suave.

Agora vamos usar um elemento desse design web e fazer um pouco de gráfico. O fundo deve estar escuro e escuro com o corpo completo do jogador jogando o personagem apresenta frente e centro e deve ser realista com iluminamento cinematográfico, é aqui que este modelo realmente brilha em termos de design gráfico, veja isso, é exatamente o que eu enviantei e completou o personagem de corpo completo um com roupas consistentes e um vestido mesmo que apenas tivesse a versão de versão de perna superior, isso é louco Então eu levei isso um passo mais além, eu reprometi com o logo do Riffscape e eu disse, pegue o logo do Riffscape e coloque-o atrás do guitarrista, desconecte-o com um sinal de neon azul, ele não deveria ser fechado em branco como atualmente é, deve ser grande e diretamente atrás do guitarrista guitarrista, isso é louco, veja isso, sim, é exatamente o que eu imaginei e praticamente mantinha todos os detalhes corretos do logo, você pode ver o riff atrás dele e então escape. S e você não consegue ver o C, mas A, P, eu quero dizer, ele realmente fez um bom trabalho de traduzir isso com certeza.

Para `google-ai-studio-prototype-ui`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Decisões práticas ligadas a google ai studio ui

As decisões práticas que aparecem quando o tema é google ai studio ui: Agora, aqui é outro exemplo do nosso projeto recente que completamos neste canal chamado SideBling. Muito bom, talvez tenha ficado 90% do caminho, podemos ver que estas duas cartas à direita ainda têm um pouco de cor verde para eles, é um pouco inconsistente, mas, no entanto, fez um trabalho bem forte, um apenas para você ter uma olhada muito rápida de diferentes esquemas de cores, agora outra coisa que fiz foi que pedi para transformar vários elementos deste layout em elementos 3D que têm profundidade, tudo bem, nem especifico quais elementos e fez um bom trabalho, escolheu pegar a parte central e apenas adicionar alguns com cores que têm profundidade com sombras. Outro exemplo que eu tenho aqui é tirar a caixa de prompt no meio e adicionar um spinner de carga com texto gerando resultados no meio.

No entanto, se você tentar gerar como full UIs de fora, não vai fazer um bom trabalho. Você pode imaginar que este gráfico de girando, talvez em Rive ou algo assim, porque tem Glow, está animando e girando, e na verdade, fez um bom trabalho, baseado na pequena prompção que eu lhe ofereci. Agora, aqui é outro, onde eu tenho um desenho de página de entrada novo, de designcourse.com.

Então, eu mandei com ele uma foto ou um escritório de mim mesmo de um vídeo recente. E eu disse, coloque a pessoa na foto, no layout, tire o microfone e faça ele olhar para a câmera. Deve ser uma imagem de fundo de fundo com a pessoa colocada à direita do texto, mas os estúdios devem consumir o todo o escritório e ficar atrás do texto no layout.

Para `google-ai-studio-prototype-ui`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Onde o fluxo de google ai studio ui quebra

Onde o fluxo costuma quebrar, segundo a fonte de google ai studio ui: Agora, isso é um prompt mais longo, e não fez as coisas perfeitamente, mas ficou muito próximo. Agora, a primeira coisa que eu notei é que meu rosto parece um pouco diferente. Eu estou olhando para o lado na imagem original, então você sabe, afetando isso, realmente fez um bom trabalho recriando meu rosto agora ele ainda tem o microfone também, mas tudo mais é realmente sólido e realmente funciona no contexto desta imagem, eu definitivamente poderia usar uma imagem de fundo como esta para a seção herói e o que também é legal é que podemos ver com os logos na parte inferior, não até queimaram essas coisas, todas estão mantendo e automaticamente sabia como situá-los em cima dessa foto.

Outra coisa que eu fiz é eu pedi para ele fazer mais fotos de mim mesmo e eu dei outro prompt onde aqui são três fotos de referência de uma pessoa's face faça a pessoa no site parecer mais como aquela pessoa e faça ele usar um tuxedo preto, só para o fun. Ainda parece um pouco estranho em termos de face mas o tuxedo preto é absolutamente espetacular. Fui para o Google Images e pedi para fazer designs web doces e aqui é um deles.

Nós sabemos que este é um design muito antigo porque há uma coisa do Adobe Flash Player lá. Então, como eu disse, modernizar este design web, fazer um melhor layout usando o mesmo conteúdo. Isto, na verdade, me deu uma resposta baseada em texto inicialmente, o que foi muito assustador.

Para `google-ai-studio-prototype-ui`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Como explicar google ai studio ui sem hype

Traduzindo o trecho de google ai studio ui para quem não viu o vídeo: Não me dê uma resposta baseada em texto, modernize-a, faça um melhor layout, etc. Quer dizer, não é perfeito, mas ele fez um trabalho muito bom considerando todas as coisas consideradas. Outra coisa que eu pedi para fazer, apenas por fun, isso não é um design web, isso é branding.

Este é um logo com uma marca de letra com um D e um C combinado. Come up with a more creative logo designs that consist of new letter marks that combine D and C. Mas é definitivamente que a pontuação está muito mais próxima e, finalmente, o último, que é o que eu mostrei no início deste vídeo, desenhar um menu de pop-up quando alguém clica em escala ou modo neste layout, deve ser desenhado consistentemente com o resto do layout e deve mostrar uma série de diferentes escalas e modos que uma pessoa pode escolher este é um dos exemplos mais interessantes na minha opinião porque fez um bom trabalho sim, ele arruinou alguns textos, mas adicionou o gelo frouxo A estética, a estética do Glassmorphism, e fez um trabalho muito bom, eu nem pedi para isso.

Então, isso é realmente um design de pop-up muito legal, eu estava realmente impressionado com isso, em termos de, você sabe, a execução geral. Você pode usar o Google AI Studio agora, só como um serviço para apagar de forma rápida os designs. Mais ainda, você poderia usar a API deles, que se chama Gemini Flash 2.5 Preview, eu acredito.

Para `google-ai-studio-prototype-ui`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Checklist observável para google ai studio ui

Para fechar o ciclo de google ai studio ui com evidência do próprio material: No vídeo de ontem, eu mostrei como você pode trabalhar com a mesma API para construir um gerador de thumbnails no YouTube. Você pode fazer um serviço onde alguém pode uploadar um mockup de UI e você pode ter OpenAI, talvez analisar a imagem, ou até mesmo este mesmo modelo. It will analyze and describe the image And then maybe with some additional user input Like in terms of what they want to see It will intelligently query este modelo de língua para criar um monte de variações diferentes e iterações apenas para inspiração e as pessoas podem pagar se for bom o suficiente, então, de qualquer forma, coisas muito, muito legais, eu adoro onde a indústria está indo ainda estamos recebendo, você sabe, melhorias, muitas pessoas estão preocupadas com que a ai está meio que desacelerando em termos de você sabe, onde está o chão, mas este aqui, este modelo novo que foi lançado nos últimos couple days is really showing that we know we're still getting really big improvements em termos de capacidades de imagem de AI.

Digamos, por exemplo, que você está trabalhando com este layout aqui, você está desenhando e quer ver como é quando alguém clica neste botão e há um pop-up. Bem, você poderia desenhá-lo sozinho ou você poderia colocar esse layout no Google AI Studio e você poderia pedir que ele desenhe o pop-up para você, resultando nisto. Vou mostrar-lhe um monte de exemplos e testes que eu fiz através deste novo modelo de imagem AI.

Chamado nano banana e você será surpreso com o quão capaz isso é e é ótimo para inspiração de design então aqui está o primeiro teste aqui está o layout não terminado e vou pedir que adicione uma ilustração de um city robótico atrás desta caixa de prompter no seqüelo herói desta página web use cores que complementam o esquema de cores atual aqui é o que me deu olhe para isso isso é realmente muito sólido é meio que o que eu imaginei que seria Então, realmente o quebrou com grande detalhes. Então, você poderia provavelmente reprompter, pedir que ele remova os elementos do UI, e dessa forma você pode ter essa imagem que pode ser vectorizada e usada na produção. Aqui está outra com o mesmo layout, apenas para fazer outro teste.

Para `google-ai-studio-prototype-ui`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Sinais de progresso em google ai studio ui

Mais um recorte útil sobre google ai studio ui antes de virar padrão do time: Coloque um personagem de robô realista feminino atrás da caixa de promoção nesta seção do Hero de um site. Coloque-a atrás de uma janela de vidro frouxamente frouxa, como o tipo que você pode encontrar em uma chuveira. Alright vamos ver isso bem bem, isso é na verdade bem sólido, fez o que eu queria ele tem um personagem de robô feminino o gás frouxo não vai até o e há uma barra no caminho, então decidi reprimir com essa imagem gerada e pedi para estender a janela de gás frouxo até até o lado da tela e tirar o rodel metal para o lado do robô só deveria consistir em gás frouxo no robô como foi feito bem Ele fez um bom trabalho, mas você ainda pode ver o lado da janela, você ainda pode ver a versão frouxa da barra, então não é perfeito, mas, no entanto, como eu disse, é muito bom para inspiração de design.

Agora, aqui é um design completamente diferente do meu outro projeto falso chamado Riffscape. Eu disse, coloque este mock-up em um Macbook sentado em uma mesa com um músico tocando guitarra no foreground. Porque muitas vezes, se você está lidando com design web e tem clientes, você quer mostrar o que essa coisa pode parecer em uso diário.

Até o cabelo da guitarra e os marcadores de frete estão na correta localização. Agora, você pode ver o layout actual no fundo, o que quase quase encerrou. Ou você pode cortar e colocar aqui na gráfica do laptop para fazer mais suave.

Para `google-ai-studio-prototype-ui`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Recortes adicionais da fonte sobre google ai studio ui

Estes trechos reforçam o raciocínio de `google-ai-studio-prototype-ui` sem resumo genérico:

Digamos, por exemplo, que você está trabalhando com este layout aqui, você está desenhando e quer ver como é quando alguém clica neste botão e há um pop-up. Bem, você poderia desenhá-lo sozinho ou você poderia colocar esse layout no Google AI Studio e você poderia pedir que ele desenhe o pop-up para você, resultando nisto. Vou mostrar-lhe um monte de exemplos e testes que eu fiz através deste novo modelo de imagem AI.

Chamado nano banana e você será surpreso com o quão capaz isso é e é ótimo para inspiração de design então aqui está o primeiro teste aqui está o layout não terminado e vou pedir que adicione uma ilustração de um city robótico atrás desta caixa de prompter no seqüelo herói desta página web use cores que complementam o esquema de cores atual aqui é o que me deu olhe para isso isso é realmente muito sólido é meio que o que eu imaginei que seria Então, realmente o quebrou com grande detalhes. Então, você poderia provavelmente reprompter, pedir que ele remova os elementos do UI, e dessa forma você pode ter essa imagem que pode ser vectorizada e usada na produção. Aqui está outra com o mesmo layout, apenas para fazer outro teste.

Coloque um personagem de robô realista feminino atrás da caixa de promoção nesta seção do Hero de um site. Coloque-a atrás de uma janela de vidro frouxamente frouxa, como o tipo que você pode encontrar em uma chuveira. Alright vamos ver isso bem bem, isso é na verdade bem sólido, fez o que eu queria ele tem um personagem de robô feminino o gás frouxo não vai até o e há uma barra no caminho, então decidi reprimir com essa imagem gerada e pedi para estender a janela de gás frouxo até até o lado da tela e tirar o rodel metal para o lado do robô só deveria consistir em gás frouxo no robô como foi feito bem Ele fez um bom trabalho, mas você ainda pode ver o lado da janela, você ainda pode ver a versão frouxa da barra, então não é perfeito, mas, no entanto, como eu disse, é muito bom para inspiração de design.

Agora, aqui é um design completamente diferente do meu outro projeto falso chamado Riffscape. Eu disse, coloque este mock-up em um Macbook sentado em uma mesa com um músico tocando guitarra no foreground. Porque muitas vezes, se você está lidando com design web e tem clientes, você quer mostrar o que essa coisa pode parecer em uso diário.

Até o cabelo da guitarra e os marcadores de frete estão na correta localização. Agora, você pode ver o layout actual no fundo, o que quase quase encerrou. Ou você pode cortar e colocar aqui na gráfica do laptop para fazer mais suave.

Agora vamos usar um elemento desse design web e fazer um pouco de gráfico. O fundo deve estar escuro e escuro com o corpo completo do jogador jogando o personagem apresenta frente e centro e deve ser realista com iluminamento cinematográfico, é aqui que este modelo realmente brilha em termos de design gráfico, veja isso, é exatamente o que eu enviantei e completou o personagem de corpo completo um com roupas consistentes e um vestido mesmo que apenas tivesse a versão de versão de perna superior, isso é louco Então eu levei isso um passo mais além, eu reprometi com o logo do Riffscape e eu disse, pegue o logo do Riffscape e coloque-o atrás do guitarrista, desconecte-o com um sinal de neon azul, ele não deveria ser fechado em branco como atualmente é, deve ser grande e diretamente atrás do guitarrista guitarrista, isso é louco, veja isso, sim, é exatamente o que eu imaginei e praticamente mantinha todos os detalhes corretos do logo, você pode ver o riff atrás dele e então escape. S e você não consegue ver o C, mas A, P, eu quero dizer, ele realmente fez um bom trabalho de traduzir isso com certeza.

Internalize com links reais do ecossistema CrazyStack: /blog, /curso-cursor-avancado-configuracoes-pro, /curso-claude-code-9-dicas-profissionais, /programa-crazystack e /checklist-independencia-cursor.