Design System para Humanos e IA: como a Evil Martians construiu um sistema em sete semanas com apoio de LLM
Aprofundamento CEVIU
Aprofundamento
A Evil Martians não só construiu um design system em sete semanas, ela codificou uma nova gramática visual para humanos e IA operarem no mesmo plano. Não é só sobre tokens ou componentes: é sobre desenhar decisões que sejam legíveis como código *e* interpretáveis como intenção. A escolha da fonte Innovator Grotesk (versão 1.1, lançada em outubro de 2024) foi técnica e estratégica: métricas idênticas ao Inter permitiram troca zero-layout, mas sua arquitetura variável e suporte a OpenType avançado dão margem para ajustes finos por agentes, sem quebrar alinhamento com ícones ou espaçamento. Já o Figura One (versão 2.0, maio de 2025) não é só um conjunto bonito: sua estrutura de pesos e largura de traço ajustável diretamente no Figma transforma ícones em primitivas programáveis, não em assets estáticos.
O pulo do gato está no OKLCH. Ao definir todas as cores nesse espaço perceptualmente uniforme, com luminosidade, cromia e matiz explícitos, o time não só garantiu acessibilidade WCAG e suporte a telas P3, mas criou um sistema de cores que IA pode estender com segurança: 'um tom mais suave que border.default, mesma tonalidade' vira uma operação matemática, não um palpite em hex. Isso é design *como contrato*, não como referência.
O que mudou
Em abril, o CEVIU mostrou sistemas agentic como experimentos bidirecionais (Antigravity IDE + Figma Console MCP). Em maio, falamos de sistemas 'estruturados para agentes'. Agora, em junho, temos um caso real de produção: um design system entregue em sete semanas, com documentação nativa em Figma, Storybook *e* GitHub, tokens OKLCH usados em produção, e mapeamento de migração 90% automatizado por IA. O que era teoria virou pipeline: o 'harness' de vulnerabilidades da Cloudflare (14h por repositório) e o 'sistema autorregenerativo' com Claude Code agora têm um par na camada de design, um sistema que não só resiste à IA, mas a convoca como coautora.
Por que isso importa
Um design system que não fala a linguagem da IA já é um risco operacional. Em 2026, 73% das empresas Fortune 500 já integram IA em seus fluxos de design. Se seu sistema ainda usa hexadecimais soltos, nomes de tokens como 'primary-blue-500', ou ícones sem mapeamento semântico, você está forçando engenheiros e agentes a improvisar, e cada PR assistida por IA vira uma semente de dívida visual. O projeto da Currents prova que não é preciso esperar por um time grande ou um orçamento gigante: com foco em legibilidade técnica (OKLCH, tokens com funções explícitas, fontes com métricas compatíveis), dá para construir um sistema que escala com a velocidade do código gerado, e não contra ele.
Linha do tempo
CEVIU publica sobre o 'Sistema de Design Autorregenerativo', com arquitetura baseada em Claude Code e seis agentes especializados conectados a Figma e GitHub.
CEVIU cobre experimento com Antigravity IDE e Figma Console MCP, demonstrando workflow bidirecional entre código e design com sincronia de tokens.
CEVIU define 'Sistemas de Design Agentic' como evolução de bibliotecas UI para infraestruturas compreensíveis por agentes de IA.
CEVIU analisa 156 design systems públicos e mostra que apenas 26 abordam IA de forma significativa, revelando lacuna crítica de documentação.
CEVIU orienta que preparar um design system para IA exige tratar decisões de design como infraestrutura: registrá-las, nomeá-las e estruturá-las para consumo automático.
Evil Martians entrega design system para Currents em sete semanas, com tokens OKLCH, mapeamento de ícones 90% assistido por IA e tipografia projetada para interoperabilidade com agentes.
Perguntas frequentes
Por que usar OKLCH em vez de HEX ou HSL?
OKLCH oferece uniformidade perceptual: variações de cromia ou luminosidade geram mudanças visuais previsíveis. Para IA, é mais fácil manipular valores numéricos (luminosidade=72, cromia=24, matiz=142) do que decifrar o impacto de #4A90E2 vs #50A0F0. Também suporta gamut P3, essencial para telas modernas.
Como um ícone 'pixel perfect' como o Figura One ajuda agentes de IA?
Ícones pixel perfect têm bordas nítidas e proporções consistentes, o que reduz ruído na detecção automática de uso. Com o wrapper SVGR criado pela Evil Martians, os ícones viram imports React com propriedades controláveis (como largura de traço), não imagens estáticas. Isso permite que IA os selecione, redimensione ou substitua com base em regras, não em tentativa e erro.
O que significa 'design system legível por IA' na prática?
Significa tokens com nomes funcionais (ui.default, content.heading), não descritivos (blue-dark, icon-lg). Significa documentação em Storybook com exemplos de uso *e* casos de não-uso. Significa cores em OKLCH, tipografia com regras de contexto ('use ui.default apenas em labels interativos') e mapeamentos explícitos entre antigo e novo, tudo estruturado para ser consumido por parsers, não só por humanos.
Esse modelo funciona só para times pequenos?
Não. Times grandes sofrem mais com dívida visual: quanto maior o código-base, mais inconsistências a IA amplifica. O caso da Currents mostra que a urgência vem da velocidade da entrega, não do tamanho do time. Um sistema 'agentic-ready' é hoje pré-requisito para qualquer produto que use Cursor, Claude Code ou Figma Make, independentemente de ter 3 ou 300 engenheiros.
Fontes
- evilmartians.comfonte original
- Categoria
- CEVIU Design
- Publicado
- 22 de junho de 2026
- Editoria
- CEVIU Design

