UI com IA: Cursor, Claude Code e subagentes no fluxo
Construir app com Cursor e Claude Code ficou fácil; UI boa ainda não. Workflow: estrutura de UX primeiro, depois subagentes — sem polir cedo.
Resposta direta
Construir app com Cursor e Claude Code ficou fácil; UI boa ainda não. O workflow do material: estrutura de UX primeiro, depois subagentes — sem polir pixel cedo demais. Com a AI, fazer designs de apps está ficando melhor todos os dias e nunca foi mais fácil construir a app que você quer com ferramentas de AI como Cursor e Claude code. Mas aqui está a coisa, mesmo que seja fácil, ainda não é tão simples. Nós fizemos muitos vídeos neste canal mostrando como fazer sua UI melhor e as formas mais fáceis de conseguir o que você quer.
Fácil construir ≠ simples acertar UI
No material original, o ponto de partida não é teoria abstrata: é uma sequência concreta ligada a «UI com IA: Cursor, Claude Code e subagentes no fluxo». Mas nós continuamos fazendo mais e isso é porque todos os dias algo novo aparece que completamente muda como fazemos as coisas. O workflow de UI que estou a cobrir hoje usa uma nova funcionalidade do Claude code chamada Subagents.
Na prática, isso vira rotina: Então, a primeira coisa no workflow de UI completo é para você entender que você precisa delegar cada e cada tarefa a cada agente. E deixe-me mostrar como o workflow funciona com o primeiro passo, construir a estrutura da app ou do UX. E é aqui que os subagentes de código cláudio realmente brilham na prática.
Workflow: UX → subagentes
O contexto importa porque a mesma ideia muda de preço conforme visto, renda, ferramenta ou fase do produto. E eu vou compartilhá-los para você usar em seus próprios projetos. Vamos começar com o engenheiro de UX móvel que eu fiz.
O que esse agente faz é take your idea and develop it into something concrete. For instance, Eu dei o conceito de construir uma aplicação móvel para uma universidade, junto com algumas requerências básicas. Eu simplesmente descrevi o que eu queria que a aplicação faça.
Anti-padrão
Em vez de colecionar slogans, trate o conteúdo como checklist operacional: o que fazer nesta semana, o que medir, o que descartar. Uma vez que eu subo isso, o código cláudio então ativa o engenheiro do UX móvel. 200 mil contas limitadas por chat, mas agora com esses subagentes isso aumentou e isso acontece porque cada agente que o código cláudio acelera realmente tem sua própria janela de contexto, você pode ver o número de tokens que este engenheiro UX consumiu em suas próprias sub-sessões, o que isso significa é que cada agente tem uma janela de contexto de 200 mil contas para trabalhar e por causa disso, menos alucinação e melhor performance, então o sistema foi em frente e implementou minha aplicação móvel para alunos da universidade, deixe-me mostrar para você o que aconteceu com isso Aqui está o portal da universidade que foi gerado. Agora, você vai notar que a UI é simplesmente simples sem qualquer cores.
E isso é por design, porque a coragem vai ser um passo separado. Eu especificamente configurei o engenheiro de UX móvel para focar somente em layout e experiência de usuário, baseado nas requerências que eu ofereci. O que é remarcável é que a experiência de usuário que esta app entrega é realmente excepcional.
Information gain
Ganho específico deste material (não genérico): Se eu tivesse apenas pedido para uma app da universidade sem dividir o processo em etapas, Eu poderia ter conseguido algo que parecia bom visualmente, mas o UX não seria quase tão forte. Separando essas preocupações e lidando com elas individualmente, o UX se torna muito mais intuitivo e bem organizado.
Erros comuns e trade-offs
Os erros mais caros aparecem quando você copia a estética do caso e ignora as restrições que tornaram o caso possível. O sistema sabe qual escolher baseado nessas descrições, e quanto mais detalhados essas descrições são, mais bem as implementações serão. Para mostrar a versatilidade deste sistema, eu também pedi alguns adicionais.
Uma aplicação de e-commerce, uma aplicação de rentabilidade de ciclo e uma aplicação de traqueamento de saúde também. Então agora temos agentes dedicados para tanto a aplicação de e-commerce como a aplicação de traqueamento de saúde, cada um optimizado para seus casos de uso específicos.
Próximo passo acionável
Feche com uma ação única nas próximas 48 horas — pequena o bastante para executar, grande o bastante para gerar sinal. E se você está gostando do conteúdo, tenha certeza de clicar no botão de se inscrever para não perder o que vem a seguir. O segundo passo é usar o implementador de UI agora, depois de implementarmos o nosso UX.
Na prática, isso vira rotina: Enquanto a generação da UI é o segundo passo, outro passo importante nisso é a geração de várias variações de UI. Agora, quando eu tentei dar duas esquemas de cores, algo interessante aconteceu. Apesar de tentar diferentes prompções, respondeu a apenas um prompt e configurou incorretamente dois agentes.
Perguntas frequentes
Subagente resolve UI sozinho?
Acelera implementação. Não define produto nem hierarquia de informação.
Começar pelo visual?
Não. Fluxo e estados primeiro; visual depois.
Claude Code ou Cursor?
Use o que mantém contexto do repo. O método importa mais que a marca.
Quando parar de polir?
Quando o fluxo crítico converte e o visual não gera dúvida de uso.