Desenvolvido em parceria com Plathanus
O UX Core é um método que criei para acelerar a entrega de projetos de produto digital na Plathanus. Tomei a frente desse estudo, que prometia acelerar a entrega. À medida que trabalhava nos projetos dos clientes, eu deixava o UX Core mais robusto. Eu e outro UX/UI Designer do time aplicamos o método e víamos na prática o que funcionava e o que não funcionava. O UX Core tem duas peças: um sistema base que inicializa e gerencia cada projeto novo, reunindo biblioteca de componentes, documentação no Storybook e protótipos num só lugar; e uma skill que escrevi do zero para conduzir a IA na construção das telas, mantendo o design system consistente em cada uma delas. O resultado é prototipação de alta fidelidade entregue em código.
A gente já usava IA para acelerar as etapas estratégicas dos projetos, como descoberta, estudo de mercado e arquitetura da informação. A etapa seguinte, de montar o design system e prototipar todas as telas em alta fidelidade, continuava toda manual e tinha virado a mais longa do cronograma. A entrega era um Figma bem organizado e documentado, porém fora do código: o dev precisava traduzir tudo linha a linha, e o cliente validava sem conseguir usar de fato.
Sentindo que algumas etapas precisavam de entregas mais ágeis, a Plathanus me passou esse desafio. A forma que encontrei para resolver foi aplicar IA nas etapas que ainda não usavam. O desafio era ter cuidado para encurtar o prazo mantendo a consistência do design system e o controle do designer sobre cada decisão visual.
Comecei separando o que já estava resolvido com IA nas fases estratégicas do que continuava manual. Ficou claro que o gargalo estava na repetição: a mesma decisão visual precisava ser aplicada em dezenas de telas, uma a uma.
O caminho mais natural era manter o Figma no centro e trazer a IA para dentro dele. Conectei o Claude Code ao Figma via MCP e testei. Funcionou, mas cada tarefa consumia tokens demais para o que entregava, e fazendo a conta para um projeto inteiro, o custo ficava inviável. Foi aí que testei a hipótese contrária: e se, nessa etapa, o Figma saísse do caminho?
A decisão mais importante do método foi definir o que a IA não faria. Se a direção visual ficasse com ela, cada projeto sairia com cara genérica e o cliente aprovaria algo que nenhum designer pensou. Por isso, desenho à mão no Figma uma tela complexa do projeto, com a identidade visual do cliente. Escolho uma tela complexa de propósito: quanto mais elementos ela tem, mais decisões ficam registradas nela. O cliente valida essa tela, e só depois a IA extrai dali o design system inteiro.
Tirei o Figma da etapa de produção e reorganizei o trabalho em três partes, todas em código: uma pasta que cadastra os componentes e faz o papel da biblioteca, o Storybook lendo essa pasta como documentação, e as telas construídas direto em frontend como protótipo.
Escrevi uma skill com as regras do projeto: conferir a biblioteca antes de criar qualquer coisa, esperar aprovação, respeitar a hierarquia do atomic design e registrar cada tela nova na página de protótipo. Foi ela que tornou o trabalho da IA previsível dentro do sistema e sem devaneios.
Cada versão do método foi colocada à prova em projetos de clientes. Eu construía e ajustava, e outro designer do time aplicava nos projetos dele, trazendo o que travava na prática. Quase tudo que separa a primeira versão da atual nasceu desses problemas reais.
Depois de três projetos entregues assim, os limites ficaram visíveis: clonar o projeto anterior deixava sobras, testar uma alteração sobrescrevia o que já estava aprovado, e qualquer pessoa com o link via tudo. Transformei o método num produto, o UX Core, com base limpa para cada projeto, playground para testes e acesso por usuário.
projetos entregues com o método, 3 conduzidos por mim e 2 por outro designer do time.
de redução no tempo de entrega: de cerca de 3 meses para 3 semanas.
das telas entregues em código, com os componentes documentados no Storybook.
A direção visual não é pedida à IA. Desenho no Figma uma tela complexa, à mão, com a identidade visual do cliente, e é essa tela que o cliente valida. A IA lê dali os tokens de cor, espaçamento, raio, tipografia e ícones e monta o design system. O designer decide como o projeto vai parecer, a IA se encarrega de repetir isso com consistência em todas as telas seguintes.
Descrevo o contexto do projeto e tudo o que a tela precisa ter. A skill compara o pedido com a biblioteca e devolve duas listas, o que já existe e o que precisa ser criado, e nada é gerado antes da aprovação. Ela também respeita a hierarquia do atomic design: antes de criar um botão com ícone, verifica se a biblioteca de ícones existe, porque o átomo vem primeiro.
O objetivo era ganhar tempo, e vieram junto dois ganhos que eu não tinha planejado: frontend pronto para o desenvolvimento e um protótipo que o cliente usa de verdade. Os dois foram efeito de mudar o formato da entrega.
A velocidade veio das regras. A IA sozinha gera telas rápido, mas sem a skill obrigando a conferir a biblioteca, pedir aprovação e respeitar a hierarquia dos componentes, o resultado vira um amontoado de telas soltas.
O Figma segue no processo como o lugar onde a direção visual é decidida. Tirei ele apenas da etapa em que tinha virado gargalo. O próximo passo segue a mesma linha: aproximar os protótipos do código de produção com React e Tailwind.
O UX Core liga quem constrói o produto a quem vai viver dele. O time ganha organização, automação e velocidade. O cliente recebe a biblioteca de componentes documentada no Storybook, o frontend em código pronto para o desenvolvimento e um protótipo que se comporta como o produto final.
Cada projeto iniciado no UX Core entrega a biblioteca de componentes, a documentação do design system, os protótipos navegáveis com comentários do cliente, o controle de acesso por usuário e categoria e a skill com seus modos de trabalho: Desktop, Mobile, Playground e Análise de Playground.
Se você quer lançar um negócio com presença forte ou levar sua empresa para o próximo nível, posso te ajudar. Seja para um projeto pontual ou uma parceria fixa, clique abaixo e vamos conversar – tenho certeza de que posso agregar valor ao seu time!
ENTRE EM CONTATOCookies
Uso cookies pra entender como as pessoas navegam por aqui e melhorar o site.
