Siga ZDNET: Adicione-nos como fonte preferencial no Google.
Principais conclusões da ZDNET
- Testei o ChatGPT Pictures 2.0 em duas UIs de produtos ativos.
- A IA encontrou problemas de design e sugeriu soluções práticas.
- Para desenvolvedores individuais, a revisão do design de IA pode ser um grande negócio.
Durante a última semana, estive explorando as profundezas do novo lançamento ChatGPT Pictures 2.0 da OpenAI. Este é um lançamento com muito mais consequências do que parece à primeira vista.
Todos nós ficamos impressionados com os geradores de imagens de IA. Essas ferramentas criam lindas fotos e podem fazer alguns truques divertidos. Eles também podem produzir muitos resíduos de IA. Mas, até agora, eles têm sido limitados na compreensão do que estão produzindo.
Além disso: 7 técnicas de codificação de IA que uso para enviar produtos reais e confiáveis - rápido
O Pictures 2.0 adiciona inteligência do assunto à geração de imagens. Esse recurso significa que o ChatGPT pode receber atribuições e produzir resultados de alto valor.
Neste artigo, veremos um desses tipos de atribuição, a atualização de uma interface de usuário. Anteriormente, os agentes de codificação podiam tentar limpar um elemento da interface do usuário aqui e ali. Os chatbots poderiam fazer recomendações baseadas em texto sobre o que precisava ser corrigido. Mas eles não conseguiram fazer o design completo.
Agora, eles podem. Alimentei dois designs de UI nos quais estou trabalhando ativamente no ChatGPT Pictures 2.0 em meu plano ChatGPT Plus de US$ 20/mês. Em poucos minutos, o ChatGPT retornou duas interfaces de usuário redesenhadas, ambas resultando em uma série de melhorias de design que pretendo incorporar em meus produtos.
Aqui estão quatro artigos recentes que irão atualizá-lo sobre o que já descobri com esta nova ferramenta:
Costumo usar meu trabalho não relacionado ao ZDNET como materials de projeto para artigos de descoberta do ZDNET. Tento evitar compartilhar nomes e hyperlinks de produtos porque não quero nenhum conflito de interesses. Mas neste artigo é necessário mostrar os nomes dos produtos. Os nomes fazem parte do design de UI existente no qual pedi à IA para trabalhar. Se eu os tirasse, não faria tanto sentido. Continuarei evitando hyperlinks para os próprios produtos.
Além disso: concluí 4 anos de desenvolvimento de produto em 4 dias por US$ 200 e ainda estou surpreso
Vamos começar.
Design de interface Mac
Para este desafio, eu tinha duas interfaces que queria executar pela IA.
Além disso: usei Claude Code para codificar um aplicativo Mac em 8 horas, mas deu mais trabalho do que mágica
O primeiro é um aplicativo para Mac que estou codificando com Claude Code desde janeiro. Este projeto está demorando um pouco porque só tenho uma ou duas horas por semana para trabalhar nele e ele usa a IA interna do MacOS para processamento e análise de imagens.
Aqui está o design tal como existe em meu aplicativo agora. Muita coisa está acontecendo aqui. Estou particularmente investido nos botões grandes à esquerda, porque eles refletem as cores da marca do negócio de comércio eletrônico da minha esposa. Eles também se traduzem muito bem no aplicativo para iPhone:
Carreguei aquela captura de tela no ChatGPT e alimentei a mensagem: “Redesenhe esta interface de usuário para torná-la mais atraente e fácil de usar”. Aqui está o que o ChatGPT Pictures 2.0 criou:
No começo não gostei das alterações. A mudança mais óbvia foi a perda dos botões coloridos. Mas a IA também não entendeu muito bem que existem opções de visualização na parte inferior da visualização em grade.
Além disso: como a IA de repente se tornou muito mais útil para desenvolvedores de código aberto
Por outro lado, observe aqueles quadrados vermelhos. Essas são as áreas da nova maquete que eu realmente gosto e pretendo incorporar à minha IU:
- O conjunto de ações no canto inferior esquerdo eram ícones do aplicativo do iPhone, mas ficam muito melhores com a IU apresentada pela IA.
- Da mesma forma, a IA adicionou uma zona de cabeçalho muito mais clara na parte superior da visualização da grade, conforme mostrado na caixa vermelha central superior.
- A IA também espalhou as miniaturas dos padrões, dando-lhes mais espaço para respirar para tornar a caixa de seleção clara e atraente, conforme mostrado na caixa vermelha inferior no meio.
- A IA adicionou uma opção de favoritos que não conectei, mas que gosto muito.
- Por fim, gosto da ideia de um campo Adicionado/Atualizado persistente na parte inferior da visualização de detalhes.
Minha grande lição deste exercício são aquelas cinco novas notas de design que pretendo incorporar ao meu produto. Não estou redesenhando todo o aplicativo para refletir a interface de usuário sugerida. No entanto, a imagem incluía algumas ótimas ideias.
Além disso, ter uma maquete como essa tornará muito mais fácil mostrar a Claude Code o que eu gostaria que ela fizesse. Este exercício é um ótimo exemplo de uso do plano ChatGPT Plus de US$ 20/mês e do plano Claude Code Max 5x de US$ 100/mês para construir um software program melhor.
Design de interface net
A seguir está a interface do usuário da página inicial do meu produto de segurança. Meu design é limpo, mas bastante rudimentar, refletindo principalmente o fato de que não gosto de programar em CSS.
Além disso: fiz 24 dias de codificação em 12 horas com uma ferramenta de IA de US$ 20 – mas há uma grande armadilha
No outono passado, em meu primeiro projeto de codificação de vibração baseado em agente, usei o Codex da OpenAI em meu plano ChatGPT Plus (que esgotou a cota de IA muito rapidamente) para redesenhar a interface do usuário de bastante feia para inquestionável. Aqui está o resultado daquela primeira passagem no outono passado. Eu fiz o design, dizendo ao Codex onde e como fazer o structure do CSS:
Os resultados dos meus testes esta semana foram interessantes. Colei a captura de tela no ChatGPT, mas acidentalmente pressionei Enter antes de poder avisá-la. O ChatGPT decidiu por conta própria analisar a página, deduzindo que “Os maiores problemas são a hierarquia visible fraca, muito cinza, um bloco de introdução muito longo e três cartas inferiores que competem igualmente pela atenção, embora não sejam igualmente importantes”.
Também recomendou uma “estética administrativa mais moderna”, incluindo:
- Fundos de cartão branco em vez de grandes painéis cinza.
- Fronteiras mais suaves.
- Mais espaçamento entre seções.
- Uma cor de destaque forte, usada consistentemente para botões, hyperlinks e estados ativos.
- Comprimentos de linha mais curtos para corpo de texto.
- Melhor contraste entre títulos, subtítulos e corpo do texto.
Além disso: Claude Code ganhou surpreendentes US$ 1 bilhão em 6 meses – e meu próprio aplicativo para iPhone com código de IA mostra por quê
Nesse ponto, decidi usar o Pictures 2.0 e instruí: “Forneça-me uma imagem da interface redefinida”. Aqui está o que a IA produziu:
Esta saída também fornece algumas notas de design com as quais posso voltar ao Codex. Eu uso o Codex da OpenAI com o produto net e o Claude Code com o produto Mac, principalmente para me dar experiência com as duas ferramentas de codificação de agente para que eu possa escrever sobre elas. Se eu não tivesse escrever aqui como objetivo principal, escolheria uma ferramenta ou outra. Descobri que ambos são igualmente úteis.
Além disso: como o novo modo automático de Claude Code evita desastres de codificação de IA – sem atrasá-lo
ChatGPT Pictures 2.0 decidiu inventar um logotipo (principalmente porque eu não tinha fornecido um na minha primeira imagem). A IA adicionou vários recursos que gostei.
Em primeiro lugar, gostei muito da estética geral do design recomendada. Pode ser muito trabalhoso propagar isso pelo resto do produto (é um produto gigante), mas gostei do design.
Além disso, gostei de como a IA promoveu três áreas separadas de ajuda ao usuário: a zona Configuração rápida, a zona Precisa de ajuda e a seção Configurar privacidade/Visualizar documentos na parte superior. Embora a interface unique desse aos usuários acesso às informações, ela realmente não deixava claro por onde começar.
Também gostei da seção Standing do website na parte inferior. Muitas vezes pensei em adicionar um recurso como esse, mas fiquei um pouco assustado com os requisitos de codificação, porque os elementos de standing teriam que mudar com base em quais plug-ins freemium o usuário instalou. Ainda assim, ver uma representação desse recurso me fez querer adicioná-lo.
Isso é uma mudança de jogo
Acho que esse recurso é tão revolucionário quanto o ChatGPT quando foi lançado, e como foi a programação de pares de agentes quando foi lançado no verão passado.
Além disso: criei dois aplicativos apenas com minha voz e um mouse – os IDEs já estão obsoletos?
Enviei duas interfaces de usuário de produtos para a IA e recebi essencialmente comentários revisados por pares, junto com um conjunto de designs de protótipos. Como programador solo, esse resultado é inestimável.
Mesmo se eu tivesse uma equipe interna completa, com programadores e designers na equipe, provavelmente levaria cerca de uma semana para executar essa análise e construir protótipos para revisão. Somente as despesas com folha de pagamento para esse projeto teriam sido bastante substanciais. Mas, por US$ 20, recebi dois redesenhos muito úteis, muito construtivos e nada estúpidos de IA, que continham pepitas acionáveis que tornarão meus produtos melhores.
Apenas uau.
Se você estivesse emparelhando ChatGPT Pictures 2.0 com Claude Code ou Codex, usaria a maquete da imagem como um resumo de design para o agente de codificação? Deixe-nos saber nos comentários abaixo.
Você pode acompanhar as atualizações diárias do meu projeto nas redes sociais. Certifique-se de se inscrever meu boletim informativo semanal de atualizaçãoe siga-me no Twitter/X em @DavidGewirtzno Fb em Facebook.com/DavidGewirtzno Instagram em Instagram.com/DavidGewirtzno Bluesky em @DavidGewirtz.come no YouTube em YouTube.com/DavidGewirtzTV.
