Como Criar Interfaces com IA

Author: Asimov Academy · Watch on YouTube

Video authored by the channel shown, not by IANIA; all rights belong to the creator. Transcript and summary generated automatically; the original-language content is preserved.

Original language: Portuguese

Original video: Como Criar Interfaces com IA · Channel: Asimov Academy · 03:35 · Watch on YouTube

Topics: AI agents, Software engineering with AI, AI content generation

Summary

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.

Key points

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.

Chapters

Start	Chapter	Summary
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.

Quotes

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

Concepts and entities

image to code, wireframe, SVG, Claude Code, Claude Opus 5, GPT-5.6, GPT Image 2, Nano Banana, skill

Full transcript (original language)

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.