Como criar interfaces com IA

Autoria: Asimov Academy · Assistir no YouTube

Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.

Idioma original: português

Vídeo original: Como Criar Interfaces com IA · Canal: Asimov Academy · 03:35 · Assistir no YouTube

Tópicos: Agentes de IA, Engenharia de software com IA, Geração de conteúdo com IA

Resumo

O vídeo aborda o problema de as IAs repetirem padrões visuais e explica por que pedir que elas gerem código diretamente pode limitar a criatividade do design. A proposta é mudar o fluxo para prompt para imagem para código, usando imagens para explorar ideias antes de implementá-las. Como as IAs ainda têm dificuldade para recriar interfaces a partir de imagens, o criador desenvolveu uma skill que orienta esse processo em etapas, com revisão do wireframe e construção da interface por camadas. Segundo o vídeo, essa estrutura pode melhorar a qualidade de sites, aplicativos e sistemas web criados com IA.

Pontos-chave

IAs de design tendem a repetir padrões visuais, como combinações de fontes, cards e composições recorrentes.
Gerar código diretamente pode limitar a criatividade da IA, que também precisa lidar com a funcionalidade e a estrutura do site.
Gerar uma imagem da interface antes de escrever código permite explorar composições visuais mais criativas.
O fluxo proposto é prompt para imagem para código, em vez de prompt diretamente para código.
A skill apresentada orienta a IA a analisar a imagem e criar um wireframe em SVG antes de avançar.
O usuário revisa e aprova o wireframe antes das etapas seguintes.
A reconstrução acontece por camadas, começando pelo background, seguindo pelos cards e imagens e terminando na tipografia.
O processo pode orientar diferentes modelos na recriação de interfaces a partir de imagens.

Capítulos

Início	Capítulo	Resumo
00:00	Padrões recorrentes no design com IA	O vídeo apresenta o problema de as IAs repetirem fórmulas visuais e explica como a geração direta de código pode restringir a criatividade.
01:00	Da imagem ao código	O apresentador propõe gerar uma imagem da interface primeiro e discute a dificuldade dos modelos para convertê-la em código.
02:02	Uma skill para recriar interfaces	Após mostrar resultados inconsistentes, o apresentador explica que criou uma skill para orientar a recriação de telas.
03:03	Construção da interface por camadas	O fluxo parte da aprovação do wireframe e reconstrói a interface do background à tipografia, com geração de imagens durante o processo.

Citações

Elas são viciadas em padrões. — 00:00

A gente deveria alterar o fluxo para prompt para imagem para código. — 01:31

Eu passei os últimos 10 dias aqui trabalhando numa skill. — 02:32

A gente vai trabalhar por camadas, de baixo para cima. — 03:03

Conceitos e entidades

image to code (conceito): Fluxo de trabalho que transforma uma imagem de interface em código.
wireframe (conceito): Esqueleto simplificado da interface, usado para identificar textos e componentes antes da implementação.
SVG (ferramenta): Formato usado no vídeo para representar o wireframe simplificado da tela.
Claude Code (ferramenta): Ferramenta na qual o apresentador testa a recriação de uma interface em HTML.
Claude Opus 5 (modelo): Modelo citado como exemplo de IA com padrões visuais recorrentes e testado na recriação de uma tela.
GPT-5.6 (modelo): Modelo citado em testes de implementação de interfaces a partir de uma imagem.
GPT Image 2 (modelo): Modelo mencionado para gerar imagens durante a reconstrução da interface.
Nano Banana (modelo): Modelo mencionado como alternativa para gerar imagens na etapa de construção dos cards.
skill (conceito): Instrução reutilizável criada pelo apresentador para orientar modelos na recriação de interfaces por etapas.

Tradução completa (pt-BR)

00:00 Eu criei uma skill que resolve um dos maiores problemas de design com inteligência artificial em 2026. E esse é o famoso problema de transformar imagem em código. Só que, para você entender por que isso é tão importante, precisa entender antes outro problema. Hoje, as IAs modernas já são muito boas em design. Muita gente já as usa para criar designs impressionantes de sites e aplicativos. Só que elas têm um grande problema. São viciadas em padrões. Se você usasse uma IA de 2025 e enviasse a ela um prompt pedindo que construísse um site qualquer, ela te

00:30 entregaria uma página parecida com esta, abusando de um degradê roxo e de uma estética bem limpa. E as IAs de agora, é claro, melhoraram: já não produzem mais isso aqui. Só que continuam tendo seus padrões. Eles só mudaram um pouco. Um exemplo é o Claude Opus 5, que é um dos modelos mais avançados do mundo hoje e adora fazer páginas com fonte serifada em itálico. E o GPT 5.6 também tem seus padrões. E, se você não for extremamente específico na hora de pedir alguma coisa a ele, ele sempre cai nesses padrões. A primeira dobra, o texto em cima, a headline embaixo, três cards. E esse problema normalmente acontece porque

01:00 você está entrando com um prompt e recebendo código diretamente. E o problema disso é que gerar um design muito fora da caixa com a IA já tendo que trabalhar em HTML e CSS, cuidando de responsabilidades e verificando se o site está funcionando, é muito difícil, mesmo para os melhores modelos de hoje em dia. E o fato de ela ter que trabalhar com código logo de cara engessa a criatividade da IA e limita o resultado do que ela pode fazer. Então comecei a pensar: cara, qual é o ambiente em que a gente consegue fazer a IA usar 100% da sua criatividade sem se preocupar muito com a funcionalidade da coisa? E a conclusão

01:31 a que cheguei é a geração de imagem. Porque, quando você pede para uma IA gerar uma imagem da interface ou do site que quer criar, cara, ela consegue dar ideias muito fora da caixa, muito mais criativas, porque não fica presa à estrutura do HTML. Ela pode explorar a composição, inclinar elementos ou realmente criar algo muito mais bonito. Então, em vez de usar um fluxo de prompt para código, deveríamos alterá-lo para que seja de prompt para imagem e depois para código. Primeiro, você prototipa a tela com a imagem para depois passar ao código. Só que, é claro, aqui há um grande problema. As IAs ainda são

02:02 ruins em transformar imagem em código por conta própria. Por exemplo, dê uma olhadinha nisto aqui. Entrei no Cloud Code e pedi ao Cloud Opus 5 que recriasse esta tela em HTML. E olha este resultado: está uma porcaria e ainda levou quase 20 minutos. Está bem distante da referência original. Os modelos do GPT são melhores hoje em dia, mas ainda oscilam. Neste caso, o GPT 5.6 só conseguiu implementar minha tela, mas levou meia hora. E, neste outro caso, ficou muito distante. E não é porque os modelos são ruins, mas porque não sabem qual é a melhor estratégia para usar na hora de

02:32 recriar uma tela dessas. Então foi por isso que passei os últimos 10 dias trabalhando numa skill que conseguisse orientar qualquer modelo de inteligência artificial a ter muito mais precisão na hora de replicar uma tela como esta. E aí, cara, depois de testar inúmeros fluxos diferentes, cheguei a um que funciona. Ele funciona mais ou menos assim. Na primeira parte, mando a IA analisar a imagem e gerar um wireframe daquela tela em SVG. Ali, ela vai identificar os textos e os componentes que vou ter que recriar em HTML, de maneira simplificada, mas com um esqueleto daquela tela que ela viu. E, antes de avançar em cada etapa, ela pede minha revisão. Depois que aprovei o

03:03 wireframe, vamos trabalhar por camadas, de baixo para cima. Primeiro, a IA vai reconstruir o background da minha aplicação; depois, vai construir os cards e gerar as imagens com GPT Image 2 ou Nano Banana. E aí, por fim, vamos focar na tipografia. Com esta skill, tenho conseguido fazer modelos muito ruins em design se tornarem muito melhores, por seguirem uma estrutura, um passo a passo que funciona para qualquer um. E trabalhar dessa forma vai elevar muito a qualidade dos sites, aplicativos que você estiver construindo, sistemas web, enfim, qualquer coisa no âmbito do design com

03:35 inteligência artificial. E, se você quiser ter acesso a esta skill, é só dar uma olhadinha no comentário fixado que deixei aqui embaixo, com o link para você baixar e testar.

Transcrição original

[00:00] Eu criei uma skill que resolve um dos maiores problemas de design com inteligência artificial em 2026. E esse é o famoso problema de image to code. Só que para que você entenda por que que isso aqui é tão importante, você precisa entender antes um outro problema. Hoje, as IAs modernas já são muito boas em design. Tem muita gente já usando elas para criar designs de sites, aplicativos impressionantes. Só que elas têm um grande problema. Elas são viciadas em padrões. Se você usasse uma IA de 2025 e enviasse para ela um prompt pedindo para ela construir um site qualquer, ela te

[00:30] entregaria uma página parecida com essa, abusando de um degradê de roxo com uma estética bem limpa. E as IAs de agora, é claro, melhoraram, não produzem mais [música] isso aqui. Só que elas continuam tendo os seus padrões. Eles só mudaram um pouco. Um exemplo é o Claude Opus 5, que é um dos modelos mais avançados do mundo hoje, adora fazer páginas com fonte serifada em itálico. E o GPT 5.6 lá tem os seus padrões também. E se você não for extremamente específico na hora de pedir alguma coisa para ela, ela sempre cai nesses padrões. A primeira dobra, letra em cima, headline embaixo, três cards. E esse problema normalmente acontece porque

[01:00] você tá entrando com prompt e recebendo diretamente código. E o problema disso é que gerar um design muito fora da caixa com a IA já tendo que trabalhar ali em HTML, CSS, cuidando de responsabilidade, se o site tá funcionando, é muito difícil, mesmo para os melhores modelos hoje em dia. E o fato de ela ter que trabalhar em código logo de cara engessa a criatividade da IA e trava o resultado do que ela [música] pode fazer. Então foi que eu comecei a pensar, cara, qual que é o ambiente que a gente consegue fazer a IA usar 100% da sua criatividade sem estar se preocupando muito com a funcionalidade da coisa. E a conclusão

[01:31] que eu cheguei é geração de imagem. Porque quando você pede para uma IA gerar uma imagem da interface ou do site que tu quer criar, cara, ela consegue te dar ideias muito fora da caixa, muito mais criativas, porque ela não tá presa ali à estrutura do HTML. Ela pode explorar composição, inclinar elementos, ou realmente criar algo muito mais bonito. Então, ao invés da gente utilizar um fluxo de prompt para código, a gente deveria alterar ele para ele ser prompt para imagem para código. Primeiro você prototipa a tela com a imagem para daí ir para código. Só que é claro, aqui tem um grande problema. As IAs ainda são

[02:02] ruins em irem de imagem para código por conta própria. Por exemplo, dá uma olhadinha nisso aqui. Eu entrei no Cloud Code, pedi para o Cloud Opus 5 recriar essa tela aqui em HTML. [música] E olha esse resultado aqui, ele tá uma porcaria e ainda levou quase 20 minutos. Tá bem distante da referência original. Os modelos do GPT são melhores hoje em dia, mas eles ainda oscilam. Nesse caso aqui, o GPT 5.6 só conseguiu implementar minha tela, só que ele levou meia hora. E nesse outro aqui, ele ficou muito distante. E não é porque os modelos são ruins, mas é porque eles não sabem qual melhor estratégia para usarem na hora de

[02:32] recriarem uma tela dessas. Então foi por isso que eu passei os últimos 10 dias aqui trabalhando numa skill que conseguisse guiar qualquer modelo de inteligência artificial para ter muito mais assertividade na hora de replicar uma tela como essa. E aí, cara, depois de testar inúmeros fluxos diferentes, eu cheguei em um que dá certo. Ele funciona mais ou menos assim. Primeira parte deles, eu mando a IA analisar a imagem e gerar um wireframe daquela tela em SVG. Ali ele vai identificar os textos, os componentes que eu vou ter que recriar em HTML, [música] de maneira simplificada, mas tendo um esqueleto daquela tela que ele viu. E antes de avançar em cada etapa, ele pede a minha revisão. Depois que eu aprovei o

[03:03] wireframe, a gente vai trabalhar por camadas, de baixo para cima. Primeiro, a IA ela vai reconstruir o background da minha aplicação, depois vai construir os cards, gerar as imagens com GPT Image 2 ou Nano Banana. E aí, por fim, a gente vai focar na tipografia. Com essa skill aqui, eu tenho conseguido fazer modelos muito ruins de design que se tornarem muito melhores por seguir uma estrutura, um passo a passo que funciona para qualquer um. E trabalhar dessa forma aqui vai elevar em muito a qualidade de sites, aplicativos que você tiver construindo, sistemas web, enfim, qualquer coisa no âmbito design com

[03:35] inteligência artificial. E se você quiser ter acesso a essa skill, é só dar uma olhadinha no comentário fixado que eu deixei aqui embaixo com o link dele para você baixar e testar.