Fiz um design system inteiro numa tarde. Guia visual, tokens, elementos, manual de uso, site com exemplos rodando e publicado no GitHub Pages. Uma tarde de domingo.

Ainda é versão 0.1, só modo claro, tem muita coisa pra melhorar. Mas já está no ar: eis-ds — a visual system for interfaces, slides, email and images

A primeira mensagem para iniciar foi essa:

Eu quero criar um design system completo, mas é um design system simples ainda, não precisa ser em react nem ndada... mas quero ter os padrões visuais prontos para serem usados em CSS e HTML.  
  
Depois disso, podemos passar para algo mais robusto, mas por enquanto, quero definir a linha visual.  
  
Esse design system será usado para criar slides, websites, emails, ilustrações, imagens de todos os tipos (para artigos, imagens de design, etc)...  
  
Mas, por enquanto, quero que ele tenha apenas os primitivos.  
  
Podemos fazer isso?  
  
Só entenda, me resposta e espere para fazermos.

Fiz no Hermes, usando Opus 5.5.

E se você quiser ler todo o chat, tá aqui nesse gist. Vai ver que não é nada de outro mundo.

<script src="https://gist.github.com/diegoeis/2c9a449139fc5674cdad6b81bc94de64.js"></script>

Eu precisava para desbloquear os outros projetos

Eu perco muito tempo fazendo design de slide, site, email, etc etc etc... Por isso, sempre quise e precisei ter um design system pessoal, não me fizesse perder tempo. Eu tenho um projetinho pessoal aqui que vai me ajudar a automatizar boa parte da minha vida online, e ter esse DS era o primeiro bloqueio. Agora não mais.

Hoje em dia tudo tá muito chique. Eu acabei descobrindo que existe uma recomendação do W3C para manter tokens de design desde 2025... Uns 25 anos atrás eu não deixaria uma novidade maravilhosa dessa passar fácil assim não. Essa coisa facilita muito pra quem precisa migrar ou reutilizar os tokens de design muitas vezes. A recomendação é Design Tokens Format Module do W3C Design Tokens Community Group (DTCG).

  • Formato: https://www.w3.org/community/reports/design-tokens/CG-FINAL-format-20251028/
  • Core: https://www.w3.org/community/reports/design-tokens/CG-FINAL-color-20251028/
  • Resolver: https://www.w3.org/community/reports/design-tokens/CG-FINAL-resolver-20251028/

O processo foi simples demais: comecei pela referência

Não é novidade para você que já trabalha com design usando IA, que a dica é começar definindo muito bem o conceito por meio de referências. Foi o que eu fiz.

Comecei trazendo as fotos dos produtos da Teenage Engineering, que é uma marca que eu admiro muito.

Aí, juntei um monte de referência num board do Pinterest, tudo conectado a retrofuturismo, minimalismo, cyberpunk... todos temas que gosto da linha visual... e pronto. A frase que guiou tudo foi "parece um manual de equipamento que alguém fez bonito demais". Neutros frios, linhas finas, uma fonte mono pra dados e um laranja que chama atenção. Daí, saiu o eis-ds.

Sem peduricalho de porcaria de React.

A partir daí fui construindo com IA do lado, decidindo, ajustando, pedindo pra refazer. Fui fazendo tudo na mão mesmo, tudo estático, porque é assim que se começa um design system. ABSOLUTAMENTE nada e penduricalho de React, dependência inútil que destrói o projeto logo no início... nada. Só HTML e CSS. Como nos velhos (e ótimos) tempos. Antes da porcaria do React estragar tudo. Nem JS tem direito, a não ser para fazer essas linhas laranjas horrorosas (tenho que arrumar).

Não tem pacote ou build: você baixa, linka um arquivo e pronto. Cllaaaarroooo que eu vou colocar isso num lugar depois para poder instalar no projeto e etc... claro que vou. Mas agora não precisa, mermão... Agora é baixar o CSS, linkar no seu projeto e usar. Eu sei... eu sei... você tá acostumado com o caos. Por isso que o país tá assim... cheio de node_modules espalhado no chão, com conflito no packages o tempo inteiro... é, to ligado.

Vários num só

E na verdade, não é pra ser só um design system, mas vários. Como eu preciso fazer sites, documentações e crio muitos slides com frequência, eu preciso que esse visual seja esteja presente e seja adaptável nos meus materiais.

Então, fiz tudo numa base compartilhada, com escopos separados pra site e pra app (dashboard, ferramenta, tela de sistema), que nunca conflitam entre si. Ainda não fiz slides, é o próximo... Toda a documentação foi escrita pra ser aplicada ao pé da letra tanto por pessoas quanto por LLMs, porque é assim que eu vou usar ele daqui pra frente.

Eu já falei aqui algumas vezes que capacidade técnica está virando commodity. Ok. Eu fui front-end durante muito tempo e trabalho com tecnologia a vida inteira. Mas isso aqui qualquer um consegue fazer.

O que a pessoa pode penar, vai ser no conceito, na estrutura do projeto, entender como vai sustentar a coisa toda, simplificar estrutura de pasta... começar pequeno e depois, só depois, ir deixando a coisa mais complexa... Mas até aí, vários devs "seniors" com 3 anos de carreira, também não sabem nada disso. Vão logo pro npm install e já era.

O que levou tempo de verdade foi saber o que eu queria, olhar as referências e tomar as decisões (e tem um log de decisões lá dentro, justamente pra eu lembrar de onde veio cada escolha).

Ainda é versão 0.1, só modo claro, tem muita coisa pra melhorar. Mas já está no ar. diegoeis.github.io/eis-ds