A IA se aproximou das capacidades humanas em várias áreas, mas o design sempre foi um dos campos onde ela enfrenta dificuldades. No entanto, acho que muitos entendem um pouco errado o que significa "projetar com IA".
Neste artigo, baseado no post "How To Actually Design With AI" de Leon Lin (@LexnLin), organizei cuidadosamente maneiras práticas de realizar design utilizando IA.
No final do artigo, estou distribuindo um kit de sistema de design para criar designs de alta qualidade com o Claude.
Você pode recebê-lo no final do artigo.
Pré-requisitos a serem lembrados
"Projetar com IA" não significa deixar tudo nas mãos da IA. As ideias, direção, intuição e criatividade vêm, em última análise, de você. É mais fácil entender se você pensar na IA como algo para "dar forma (executar)" essas coisas.
O fluxo geral consiste nestas 3 etapas:
- Desenvolva suas próprias ideias
- Reúna inspiração
- Traduza seus pensamentos em prompts e deixe a IA criar
Você pode usar qualquer ferramenta ou ambiente como Cursor, Codex ou Claude. A essência está em "converter seus pensamentos em instruções".
A IA é muito boa em execução, mas ainda não possui criatividade verdadeira. Ela entende "regras de design" como espaço em branco, tipografia, teoria das cores e hierarquia. No entanto, ela não consegue entender o que parece "realmente bom", "original" ou "significativo" — em outras palavras, bom gosto.
Esta é a maior lacuna. Neste ponto, você não pode dar bom gosto real à IA, mas pode contornar essa limitação assumindo que ele existe.
Método 1: Usando Habilidades de Design
Esta é a abordagem mais rápida. Quando você não tem tempo ou está criando algo pequeno, é eficaz contar com "habilidades de design" pré-preparadas.
Exemplos incluem:
- Impeccable (impeccable.style
- Emil Kowalski's UI skills (GitHub: emilkowalski/skills)
- Skills.sh
- TasteSkill (tasteskill.dev
O processo é muito simples:
- Adicione habilidades de design
- Dê contexto à IA
- Envie alguns prompts para que ela crie um site, aplicativo ou pôster
- Corrija problemas óbvios
- Publique
Os resultados geralmente são "razoavelmente bons". Eles podem parecer semelhantes a outros designs gerados por IA, mas usar habilidades de alta qualidade evita os piores fracassos e a aparência "genérica de IA". Este é o método que muitas pessoas realmente usam.
Método 2: Projetando Você Mesmo com IA
Se você quer criar algo que "realmente se destaque", precisa ir um passo além. Você quer que os usuários sintam que seu produto é "bem pensado" quando o tocam — para isso, um processo mais intencional é necessário.
Seja um aplicativo móvel, aplicativo de desktop, site, landing page, dashboard ou pôster, você primeiro precisa de uma direção clara. Se você não sabe o que quer fazer, a IA não vai encontrar por você.
Comece com o "Significado"
Primeiro e acima de tudo, defina a base. Tente responder estas perguntas:
- Para quem é isso?
- Que problema resolve?
- Qual deve ser a sensação?
- O que isso representa?
A UI reflete o "significado" de um produto. Escreva tudo isso. Você pode usar IA aqui também, mas o truque é usá-la para fazer perguntas a você em vez de projetar.
Por exemplo, peça à IA para te perguntar:
- Sobre o que é este produto?
- Quem são os usuários pretendidos?
- Que emoções você quer transmitir?
- Qual deve ser a atmosfera da marca?
- Quais cores e fontes se encaixam?
- Minimalista / Divertido / Premium / Técnico / Experimental — qual direção?
Reúna Inspiração
Uma vez definida a direção, comece a coletar referências. Uma fonte poderosa é o Mobbin, que tem telas reais de produtos em várias categorias.
O importante aqui não é apenas olhar e pensar "isso parece bom". Pergunte a si mesmo por que é bom.
- É o layout?
- O espaço em branco?
- A tipografia?
- A estrutura?
- A interação?
Salve coisas que você gosta e organize-as em pastas como:
- Navegação
- Hero
- Preços
- Cards
- Telas mobile
- Dashboard
- Animação
- Tipografia
Dedicar tempo para construir sua própria biblioteca de referências é como você cultiva o "bom gosto".
Outras fontes úteis incluem Pinterest, Cosmos, Awwwards, Webflow Templates, Craftwork, Rebrand Gallery, Component Gallery, Savee e Lummi.
Nota: evite copiar designs por completo. É importante combinar múltiplas ideias e elevá-las para algo que se encaixe no seu produto.
Mapeie a Estrutura
Em seguida, defina o que você precisa construir. Para um site, pode ser navegação, hero, funcionalidades, preços, depoimentos, CTA e rodapé.
Para um aplicativo, pode ser onboarding, home, busca, perfil, configurações, fluxos principais e estados vazios.
Cada seção precisa de conteúdo claro. Para uma seção hero, você precisa de um título, descrição, CTA e visuais. A IA pode ajudar com o texto, mas a "clareza" vem, em última análise, de você.
Construa por Componente
Finalmente, é hora de produzir. Pegue as ideias individuais que você referenciou e reconstrua-as para se adequarem ao seu produto.
Em vez de dizer "faça um site inteiro", a chave é dizer "com base neste estilo, faça uma seção hero adaptada à minha marca".
Siga passo a passo: Navegação → Hero → Cards → Botões → Tipografia → Detalhes. A IA é muito melhor em tarefas pequenas, e isso permite que você mantenha o controle.
Gere Assets Personalizados
Use geração de imagens conforme necessário. As ferramentas de geração de imagens agora são poderosas o suficiente. O truque é transmitir claramente contexto como cor, estilo, composição e propósito.
Evite imagens de stock genéricas. Usar visuais personalizados cria uma sensação de unidade em todo o projeto.
Fluxo de Trabalho Geral
Em resumo, o fluxo é assim:
- Defina a ideia
- Esclareça o propósito e o usuário
- Decida a direção da marca
- Reúna referências
- Organize-as
- Mapeie a estrutura
- Crie componentes
- Gere assets
- Adicione interações
- Polir o todo
Você obtém resultados muito melhores do que criar com um único prompt.
Método 3: Usando Quadros de Inspiração
Existe também um "meio-termo" um pouco mais rápido. Em vez de montar tudo um por um, você fornece à IA um conjunto curado de referências.
Reúna capturas de tela do Mobbin, Awwwards, Webflow, etc., e peça:
Por favor, combine o estilo e a direção dessas referências para criar um design para o meu produto. No entanto, não copie exatamente.
Claro, isso pressupõe que você forneceu contexto suficiente e deixou a IA fazer perguntas primeiro. É mais rápido que o trabalho manual, mas produz resultados muito melhores do que um prompt genérico de uma única vez.
Resumo das 3 Abordagens
- Método 1: Habilidades de Design — Rápido, resultados decentes
- Método 2: Baseado em Componentes — Mais lento, mas maior qualidade
- Método 3: Quadro de Inspiração — Equilibrado
Outras Ferramentas Úteis
- Geração de SVG: Ferramentas como Quiver podem criar SVGs. Como os elementos são separados, são mais fáceis de animar.
- Vídeo: Ferramentas como Google Flow. Podem melhorar heroes, backgrounds e demonstrações de produtos.
- Bibliotecas de Imagens: Plataformas como Lummi. Mas escolha imagens que combinem com a marca.
- Camadas (Layering): Adicione profundidade, movimento e interação com remoção de fundo e camadas. O acúmulo de detalhes faz uma grande diferença.
Conclusão
IA não é um substituto para o seu pensamento.
- O que fazer
- Por que é importante
- Para quem é
- Qual deve ser a sensação
Você é sempre quem decide essas coisas. A IA apenas executa mais rápido. Os melhores resultados vêm não de melhores prompts, mas de melhor bom gosto.
*Este artigo foi reconstruído em português com base no post de Leon Lin (@LexnLin) no X, "How To Actually Design With AI".
Estou distribuindo o "Claude Design System Kit" gratuitamente no LINE.
▼ Registre-se no LINE para receber o "Claude Design System Kit"
https://t.co/90omRA4UQ7
Por favor, entre no Open Chat (LINE OpenChat) e, em seguida, no LINE oficial mencionado nas notas, envie:
Design System
e você poderá receber o benefício.
※ Por favor, evite enviar palavras-chave dentro do próprio Open Chat.
Recomendo colocar o template no Claude Design como está e tentar fazer apenas um documento. Só isso já deve te dar uma noção de como usar um sistema de design.
▼ Registre-se no LINE para receber o "Claude Design System Kit"
