Transformando um design system em uma máquina de gerar produto, do Figma ao código de produção.

Como mapeei um produto sem padrão nenhum e construí, do Figma ao código, a base que hoje ensina uma IA a montar telas sozinha.

Brasil

Localização

Design Engineer

Posição

2025 - 2026

Data

20 anos, muito aprendizado, vontade de fazer diferente e paixão pelo agronegócio. Essa é a história do MyFarm, que nasceu do desejo de compartilhar conhecimento e ajudar produtores rurais a gerenciarem suas fazendas de forma mais fácil e rentável.

O QUE É

A myFarm é uma plataforma de gestão agrícola usada por mais de 5.000 produtores rurais no Brasil.

O produto já existe e está em produção real, monitorando mais de 5 milhões de hectares, mas nunca teve um design system. Os componentes cresceram soltos ao longo do tempo, sem padrão entre telas.

O MYFARM TINHA UM PROBLEMA BEM GRANDE...

Um produto gigante, sem nenhum componente em comum.

Não existia design system, não havia padrão.

Situação do Figma

Entristecedor...

Só uma styleguide, sem nenhum componente.

Nenhum componente reutilizável

Crítico

Só cor e tipografia soltas

Cada tela com seu próprio estilo

Zero variantes ou estados

Sem documentação nenhuma

Situação do código

Deplorável...

Element Plus estilizada na mão. Nada reutilizável.

Manutenção praticamente inviável

Crítico

Tudo puxado da Element Plus

Estilizado à mão, um por um

Nenhum componente próprio

Mesmo botão, código duplicado

A SOLUÇÃO

Construir a fundação que nunca existiu,

e ensinar uma IA a usá-la.

Figma

Design system estruturado com componentes e templates, pronto pra virar código.

Código

Vue.js e Reka UI juntos: comportamento pronto, estilo definido pelo design system.

Agents.MD

Toda a documentação do design system escrita pra IA ler e usar sozinha.

FIGMA

Antes de qualquer decisão de código, era preciso entender o que já existia. Passei pelo produto identificando cada padrão repetido (e cada padrão quebrado) até ter clareza do que seria a fundação.

Foundations

Cores, tipografia, espaçamento e ícones mapeados a partir do que já existia solto no produto, agora como tokens reutilizáveis.

+700 tokens criados

Componentes

Botões, inputs, tabelas e cards remontados como componentes únicos, cada um com suas variantes e estados.

+1.300 variantes de componentes criadas

Templates

Composições prontas de tela, montadas a partir dos componentes, cobrindo os padrões de layout mais comuns do produto.

+20 templates de tela criados

CÓDIGO

O design system saiu do Figma e virou código de produção

De Element para Reka UI

Trocamos uma biblioteca com estilo próprio embutido por uma headless, sem nenhuma herança visual.

Ganhamos comportamento e acessibilidade prontos, e o design system virou a única fonte de estilo.

Nuxt

Framework que estrutura a aplicação em cima do Vue, cuidando de rotas, build e organização do projeto.

Vue JS

Base do frontend. Todo componente do design system é escrito e documentado nele.

Reka UI

Biblioteca headless que garante o comportamento correto por baixo dos componentes, sem impor estilo.

Bun

Runtime usado pra instalar dependências e rodar o projeto mais rápido que as alternativas tradicionais.

BUILDER COM IA

Toda a documentação do design system, escrita pra máquina entender e escolher o template certo sozinha

design-tokens.md

Todas as fundações do design system, em formato que a IA consegue ler e aplicar.

templates.md

Mapeamento de qual template usar pra cada tela, ensinando a IA reconhecer padrões de requisito.

components.md

Componente documentados com suas variantes e casos de uso. A referência pra IA escolher o certo.

guidelines.md

Regras de uso e boas práticas do design system, garantindo que a IA gere telas consistentes.

COMO FUNCIONA NA PRÁTICA

Da documentação ao código: A IA que entende o design system e constrói por conta própria

E O QUE ISSO RESOLVEU?

Um software inteiro passou a falar a mesma língua, e o time de produto começou a criar tela sozinho.

O design system deixou de ser referência e virou padrão real, aplicado em todo componente do produto. Com o builder, alguém do time de produto joga um requisito e recebe uma tela pronta.

Uma ressalva importante:

O builder acelera, mas não substitui revisão. Toda tela gerada deve passar por ajustes de um designer e validação técnica de um desenvolvedor sênior antes de ir pra produção.

Telas criadas por não-técnicos

O time de produto gera telas sozinho, sempre com revisão de design e validação técnica.

Velocidade de entrega

Menos tempo estilizando do zero, mais tempo resolvendo o problema real do fluxo e das tela.

Escala sem perder consistência

Novas telas seguem o padrão automaticamente, mesmo em um produto com centenas delas.

Manutenção simples

Mudar um componente muda o produto inteiro de uma vez, em vez de exigir revisão tela por tela.

A IA não inventa, ela escolhe

Ela decide entre o que já existe e está documentado. Nenhum componente novo, nenhuma solução fora do padrão.

Produto mais barato de manter

Menos hora de designer e dev gasta em ajuste de estilo, mais hora gasta em problema de negócio.

Cedo demais pra números, não pra progresso.

Design system no Figma: Fundação, componentes e variantes mapeados e documentados.
Templates no Figma: Composições de tela prontas, montadas a partir dos componentes.
Design system no código: Componentes portados pra Vue.js com Reka UI, já em produção.
Templates no código: Padrões de tela implementados no código, prontos pra reuso.
Agentes de design: Toda a documentação do design system, pra IA consultar.
Agentes de código: Documentação de arquitetura e padrões de código.
AI Builder: Cruza os arquivos pra escolher o template e gerar a tela sozinho.