Entenda sistemas de design para agentes de código

Um agente de IA sem um design system inventa um a cada prompt, e inventa o mesmo que todo mundo recebe. O que dar a ele em vez disso, o que esse arquivo deve conter para realmente funcionar e como instalá-lo em cada ferramenta principal.

2026-07-27

Os design systems integrados do Bolt exigem um plano Team pago para que você adicione o seu próprio. Veja do que esse recurso é compilado e a configuração que funciona em qualquer plano usando o terminal real do Bolt no navegador.

2026-07-27

O conselho padrão é escrever uma regra design.mdc e pronto. Isso funciona por cerca de três semanas. Aqui explicamos por que um design system não cabe em um único arquivo de regras, como dividi-lo com base em quando cada regra deve ser aplicada e o que colocar em cada parte.

2026-07-27

Um servidor MCP permite que um agente consulte seu design system em vez de tentar adivinhá-lo. Isso resolve nomes de props incorretos e imports obsoletos. No entanto, não resolve o problema de um agente que não tem ideia de como seu produto deve ser; esses são problemas diferentes que exigem soluções diferentes.

2026-07-27

A maioria das listas apresenta vinte ferramentas que fazem coisas diferentes como se fossem concorrentes. Aqui, elas estão agrupadas pelo problema que cada uma resolve, com a conclusão que realmente importa: nenhuma delas produz um design system, e todas assumem que você já tem um.

2026-07-27

A maioria das listas de prompts para Lovable reúne frases curtas. O design não sobrevive a frases curtas. Aqui está a anatomia de um prompt de design que se mantém consistente entre sessões, com exemplos prontos para copiar e colar.

2026-08-03

Uma skill é uma pasta com um arquivo SKILL.md que o Claude Code carrega apenas quando a sua tarefa corresponde à descrição dela. Essa única frase explica por que a maioria das skills instaladas nunca faz nada. Aqui estão o mecanismo, o formato do arquivo e um exemplo prático de uma skill de design.

2026-08-04

O Codex localiza pastas SKILL.md em cinco locais, carrega-as por correspondência de descrição ou via $ explícito, e compartilha o formato com o Claude Code e o Cursor. Aqui estão a anatomia, a ordem de descoberta e uma skill de design que você pode adaptar.

2026-08-04

O Copilot lê arquivos de instruções que ninguém preenche com decisões de design, e é por isso que a saída de UI dele costuma ser genérica. Aqui está a configuração: copilot-instructions.md, arquivos .instructions.md com escopo, design tokens reais e um DESIGN.md para o qual eles apontam.

2026-08-04

O Gemini CLI concatena cada GEMINI.md em sua hierarquia em cada prompt, o que torna excepcionalmente fácil integrar um design system: uma linha de importação e o contrato é carregado em cada requisição. Aqui estão a configuração e o arquivo que ele importa.

2026-08-04

Dois comandos instalam o plugin frontend-design da Anthropic, e ele deixa uma tela com um visual ótimo. Mas ele não consegue fazer a vigésima tela combinar com a primeira, porque ele entrega bom gosto, não valores. Aqui está a instalação, a lacuna e como fechá-la.

2026-08-04

Um kit de design é apenas o ponto de partida. O que faz funcionar é aplicar tokens em cada componente, construir sobre primitivas sólidas, encontrar a direção visual com geração de imagens e gerar variações em vez de aceitar a primeira tentativa.

2026-08-10

A documentação de design system escrita para humanos falha quando um modelo a lê, e falha de uma maneira específica e mensurável. O que descobrimos em 299 arquivos reais e as sete mudanças que tornam a orientação executável em vez de descritiva.

2026-07-27

Um DESIGN.md descreve a identidade visual em um formato que um agente de código consiga ler. Analisamos 299 arquivos públicos: aqui está o formato, seção por seção, e as quatro coisas que quase todos omitem.

2026-07-27

Quatro arquivos, quatro funções, uma ordem de precedência. O que pertence a cada um, quais ferramentas leem qual arquivo e por que o de design é aquele que ninguém escreve.

2026-08-04

Seis mudanças no nível de token, cada uma com o antes e o depois. Ajustes de prompt alteram uma tela; estas alteram cada tela que o agente construir de agora em diante.

2026-07-27

Drift é mensurável, não é questão de vibe. Como contabilizá-lo ao longo de uma sessão, por que ele começa por volta da quinta tela e a única mudança que impede que ele se acumule.

2026-07-27

A maioria dos guias foca nas ferramentas. O que separa os designers que entregam dos que recomeçam do zero é o que eles configuram antes do primeiro prompt e como revisam um diff sem saber ler código.

2026-07-27

A maioria dos checklists de consistência pergunta se a interface parece coesa, algo que ninguém sabe responder. Este aqui é uma lista de verificações com comandos e condições de aprovação, ordenadas pelo volume de drift que cada uma detecta por minuto gasto.

2026-07-27

Quatro padrões produzem essa mesmice: uma paleta neutra, uma fonte sans-serif, um border radius e um grid de cards. Veja de onde cada um vem e o que alterar.

2026-08-03

O que é um registry do shadcn, como o registry.json e o registry-item.json se complementam e o caso que a documentação mal aborda: distribuir um tema completo (tokens, fontes, radii, light e dark) como um único item instalável.

2026-07-27

Respostas fundamentadas para as perguntas que as galerias de paletas ignoram: se deve-se usar o preto puro, como mostrar elevação sem sombra, por que as cores de destaque precisam mudar e quais são os papéis que uma paleta escura exige além de cinco amostras.

2026-07-27

Uma paleta de dashboard tem três funções que uma paleta de marketing nunca tem: séries de dados distinguíveis, cores de status que não conflitem com a sua marca e cinzas que sobrevivam a uma tabela densa. Veja como construir uma que cumpra esses três requisitos.

2026-07-27

Por que produtos SaaS convergem para a mesma cor de destaque azul-violeta, o que uma paleta realmente precisa suportar em uma UI de produto e como escolher uma que seja distinta, mas que ainda funcione em uma tabela de configurações às 16h.

2026-07-27

Todo guia de fontes por setor dá a mesma resposta com rótulos diferentes: uma sans geométrica para tecnologia, uma serifada para advocacia, uma script para beleza. Aqui estão combinações que realmente funcionam por setor, além do motivo pelo qual a abordagem por categoria continua gerando marcas idênticas.

2026-07-27

A maioria das listas de design systems são apenas conjuntos de links. Este texto analisa nove sistemas reais, organizados pela decisão que cada um tomou com sucesso (camadas, aplicação, contratos multiplataforma, entrega), além de uma mudança que três deles implementaram nos últimos 18 meses e que ninguém documentou.

2026-07-27

O Carbon da IBM é o maior design system corporativo de licença aberta e, em 2026, ele faz algo que nenhum dos artigos menciona: expõe a si mesmo para agentes de IA via Model Context Protocol. Um guia prático sobre o que é o Carbon, como ele é estruturado em camadas e o que o servidor MCP altera.

2026-07-27

O Polaris React foi marcado como descontinuado e os Polaris Web Components são agora o que os apps do Shopify utilizam: carregados via uma tag de script de um CDN, não como uma dependência npm. O que realmente mudou, o porquê e o que isso significa para quem mantém um design system.

2026-07-27

A Stripe disponibiliza um design system que proíbe totalmente o CSS customizado e outro construído quase inteiramente para permitir que você o sobrescreva. Ambos são públicos, ambos são documentados, e a linha que os divide é a coisa mais útil que a Stripe já publicou sobre design systems.

2026-07-27

O Design Language System do Airbnb é o design system multiplataforma mais citado e o mais mal interpretado. Sua decisão fundamental foi rejeitar sumariamente átomos e moléculas, e o raciocínio por trás dessa escolha é o que o torna útil hoje.

2026-07-27

O Encore do Spotify precisou cobrir 45 plataformas e mais de 2.000 tipos de dispositivos. A própria equipe afirma que o pêndulo oscilou demais para o lado da flexibilidade e precisou ser corrigido. Essa correção, e a estrutura em camadas que dela resultou, é a parte útil.

2026-07-27

A Salesforce afirma que o SLDS 2 é "a base para o design system agentic": um design system corporativo de uma década rearquitetado em torno de CSS custom properties para que as interfaces geradas mantenham a identidade da marca. O que realmente mudou e o que isso significa se você não utiliza a Salesforce.

2026-07-27

A interface do Linear é imitada constantemente e reproduzida de forma medíocre. Uma leitura atenta do que é realmente observável (a faixa de peso, a linha fina, o único destaque) e por que a parte que todos copiam não é a parte que sustenta o visual.

2026-07-27

Empacotando o HIG da Apple, Material ou suas próprias regras internas como orientações legíveis para agentes: o que sobrevive à tradução de um documento de design humano para instruções de agente, o que não sobrevive e por que diretrizes de plataforma sozinhas ainda produzem UIs genéricas.

2026-07-27

Toda lista de fontes para SaaS recomenda as mesmas famílias. Entenda o porquê, o que uma tipografia realmente precisa suportar em uma UI de produto densa (numerais tabulares, separação real de pesos, legibilidade em tamanhos pequenos) e quando uma segunda família justifica seu espaço.

2026-07-27

O atomic design resolveu um problema de 2013: dar aos humanos um vocabulário compartilhado para as partes de uma interface. Um agente já possui o vocabulário, mas carece de julgamento. Quais partes da metodologia sobrevivem a isso e quais eram apenas andaimes?

2026-07-27

Primitivo, semântico, componente. A convenção de três níveis é quase universal, mas a maioria dos times ainda acaba com tokens que ninguém usa. Por que isso acontece, como nomear cada nível e o teste que indica que um nome está errado antes de ser implementado.

2026-07-27

Os modelos de governança foram projetados sob a premissa de que uma pessoa solicita uma alteração e outra pessoa a revisa. Quando um agente escreve quarenta telas entre uma revisão e outra, os processos de contribuição deixam de ser o gargalo e a aplicação das regras passa a ser o trabalho principal.

2026-07-27

Ferramentas de design-to-code reproduzem a aparência de um frame. Elas não conseguem reproduzir o significado, porque um frame do Figma não contém isso. O que realmente é transferido, o que não é, e a decisão de nomenclatura que reduz a maior parte dessa lacuna.

2026-07-27

Uma component library é código que você pode instalar. Um design system é o conjunto de decisões que fez esse código ter a aparência que tem. Confundir os dois é o motivo pelo qual equipes instalam o shadcn, entregam um produto genérico e não conseguem entender o que deu errado.

2026-07-27

O que realmente combina com Avenir, renderizado ao vivo em vez de prints. Além das Google Fonts que a substituem quando a licença não é viável, e sistemas completos construídos sobre essas combinações.

2026-08-03

As sans-serifs e monos que combinam com a Caslon, renderizadas ao vivo em revivals gratuitos da Caslon que você pode realmente implementar. Na dúvida, use Caslon; ao combiná-la, leia isto primeiro.

2026-08-03

As serifadas e mono que combinam com a Proxima Nova, renderizadas ao vivo com as fontes gratuitas que a substituem. A fonte padrão da internet merece um parceiro que não seja padrão.

2026-08-03

O que combina com a geometria arredondada da Gilroy, renderizada ao vivo com substitutos gratuitos do Google Fonts. Além de quais pesos gratuitos você pode realmente usar para construir um produto.

2026-08-03

Oito brand guidelines públicos que realmente ensinam algo, o que separa um documento funcional de um PDF bonito e por que a próxima geração de guidelines precisa ser executável por máquinas, e não apenas lida por designers.

2026-08-04

Um DESIGN.md é o brief de design escrito que seu agente de código segue para que ele pare de construir UIs genéricas. Aqui está o que deve constar em um, e como gerar um DESIGN.md completo e exportável a partir de um design system real.

2026-08-04

Ambos fornecem um DESIGN.md para um agente de código. O getdesign.md publica análises de marcas existentes; o Identity Forge gera um sistema original com os tokens semânticos referenciados no brief. Essa diferença estrutural define qual deles se adapta melhor ao seu projeto.

2026-07-27