Desenvolvido em parceria com Plathanus
O UX Core é um método para acelerar a entrega de projetos de produto digital, construído sob minha liderança dentro do time de design da Plathanus. Ele se apoia em duas peças: um sistema base que inicializa e gerencia cada projeto novo, reunindo a biblioteca de componentes, a documentação no Storybook e os protótipos num só lugar; e uma skill criada do zero, que conduz a IA na construção das telas e garante a consistência do design system a cada uma delas. O resultado é uma prototipação de alta fidelidade entregue em código.
As etapas estratégicas dos nossos projetos, como descoberta, estudo de mercado e arquitetura da informação, já vinham sendo aceleradas com IA. A etapa seguinte, de construir o design system e prototipar todas as telas em alta fidelidade, continuava inteiramente manual e tinha se tornado a mais longa do projeto. A entrega dessa etapa era o Figma do projeto, bem organizado, documentado e estruturado, mas ainda não em código: o desenvolvimento precisava traduzir aquilo linha a linha e o cliente validava sem conseguir de fato usar.
O time de design identificou que essas etapas estavam consumindo tempo demais e começou a estudar como usar IA como ferramenta de produção sem perder a qualidade da entrega. Esse era o desafio: encurtar o prazo mantendo a consistência do design system e o controle do designer sobre cada decisão visual.
Separei o que já estava resolvido com IA nas fases estratégicas do que continuava manual, e identifiquei que o gargalo não era decidir como o projeto ia parecer, era repetir essa decisão em dezenas de telas.
O caminho natural era manter o Figma no centro e trazer a IA para dentro dele, então liguei o Claude Code ao Figma pelo MCP. Funcionava, mas o consumo de tokens era alto demais para o que cada tarefa entregava, e terminar um projeto inteiro assim sairia caro. Foi aí que considerei a hipótese contrária: em vez de fazer a IA trabalhar dentro do Figma, tirar o Figma dessa etapa.
Tirei o Figma dessa etapa e dividi o trabalho em três conjuntos, cada um construído em código: uma pasta que cadastra os componentes no lugar da biblioteca, o Storybook lendo essa pasta no lugar da documentação e as telas construídas como frontend no lugar do protótipo.
Defini que a direção visual continuaria sendo do designer. Desenho à mão no Figma uma tela complexa do projeto, com a identidade visual do cliente, e é dela que a IA extrai o design system inteiro.
Criei uma skill com as regras do projeto: conferir a biblioteca antes de criar, esperar aprovação, respeitar a hierarquia do atomic design e registrar cada tela nova na página de protótipo.
Depois de três projetos entregues assim, os limites apareceram: 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 no UX Core, com base limpa, playground e acesso por usuário.
projetos entregues pelo time de design com o método.
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 tempo, mas o ganho maior foi outro. Junto com o prazo menor vieram o frontend pronto para o desenvolvimento e um protótipo que o cliente usa de verdade em vez de imaginar. Foi o efeito colateral de mudar o formato da entrega, não algo que estava no plano.
O ganho de tempo também não veio da IA sozinha, veio das regras. A skill é o que obriga a conferir a biblioteca, pedir aprovação e respeitar a hierarquia dos componentes antes de criar qualquer coisa. Sem isso, a IA produz volume, não sistema.
O Figma continua no processo e continua sendo onde a direção visual é decidida. O ganho veio de tirá-lo da etapa em que ele tinha virado gargalo. E quase tudo que separa a primeira versão da atual nasceu de um problema encontrado em projeto real. O próximo passo segue essa linha, aproximando os protótipos do código de produção com React e Tailwind.
O UX Core é uma ponte entre quem constrói o produto e quem vai viver dele. De um lado, o time ganha organização, automação e velocidade. Do outro, o cliente recebe uma 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 que ele vai ter no fim, e não como uma representação dele.
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 CONTATO
