Clonei o design system de 90 sites em 4 dias

Tem dois jeitos de aprender uma coisa nova.

Um te deixa rico em volume. Você assiste, lê, salva, completa.

O outro não te deixa em paz enquanto você não abre o capô e vê como funciona por dentro.

Os dois geram a mesma sensação de progresso.

Só um deles serve pra alguma coisa.

Tem nome científico pra essa diferença.

Em 2005, um psicólogo chamado Jordan Litman publicou um paper que separa duas curiosidades.

Uma ele chamou de tipo I, de Interesse. É a curiosidade que gosta de descobrir coisa nova.

Te leva pro próximo vídeo, pro próximo curso, pra próxima ferramenta. Bate dopamina.

Você fecha o tutorial sentindo que aprendeu.

A outra ele chamou de tipo D, de Deprivation. É o incômodo de não saber como uma coisa funciona por dentro.

Não dorme enquanto não desmonta. Não confia até abrir o capô.

Os dois geram sensação de progresso. Mas só um deles produz vantagem.

E quando o assunto é design com IA, essa diferença ficou impossível de ignorar.

O Google soltou um arquivo chamado design.md em open source pelo Google Labs Code.

Um formato que junta tokens de design (cor, fonte, espaçamento, animação) com explicação em markdown. A IA entende não só os valores, mas o porquê de cada um.

Resultado: consistência visual em qualquer ferramenta que você usa pra criar design.

Pra muita gente isso ainda é novidade.

Pra mim é prática faz tempo. Não por sorte. Por causa de uma coisa que vou explicar agora.

O que eu vi quando abri o capô

Já contei na news passada que abri o capô do Stitch e do Claude Design pra entender como funcionavam por dentro. Foi assim que eu já usava design.md antes do Google soltar oficialmente.

O que não contei é o que veio depois disso.

Quando você entende como uma IA toma decisão, você consegue replicar essa decisão sem precisar dela. E aí o jogo muda em três frentes diferentes.

Como eu monto referência antes de pedir

Antes de qualquer prompt, eu monto mood board.

Mood board, em design, é o painel de referências que define o humor visual de um projeto. Tradução literal: dashboard de humor. Você junta o que te inspira ANTES de criar.

A maioria pula essa etapa. Vai direto pro prompt. "IA, cria uma landing page bonita." E recebe genérico.

Eu uso Pinterest. Não porque é melhor que Behance ou Dribbble.

É porque é mais simples e o algoritmo dele aprende rápido. Você salva 5 referências numa pasta, ele te entrega outras 5 parecidas.

Em 20 minutos você tem repertório visual pro projeto.

Daí eu jogo essas referências no Stitch. O Stitch pega uma imagem e gera variações.

Quando achei uma que serve, exporto pro AI Studio. Ele constrói o HTML em cima.

Mas tem um truque que multiplica isso por 10.

Você abre o projeto na ferramenta que tá usando (AI Studio, Claude Design, Lovable, Cursor, qualquer uma que aceite documento de contexto), vai em Files ou Knowledge, cola o design.md como System Prompt.

Pronto. Toda criação subsequente carrega esse arquivo automaticamente.

Sem precisar repetir contexto. Sem deriva entre páginas.

Você passa de "criar uma página" pra "criar uma página que respeita o sistema".

Resultado: consistência absurda entre tudo que sai, sem precisar revisar.

Esse fluxo, do Pinterest até o System Prompt carregado, é o que separa quem cria genérico de quem cria com identidade.

Como extrair de qualquer site e gastar pouco

Esse fluxo resolve o dia a dia. Mas eu queria mais. Queria pegar referência de qualquer lugar, não só do que tá no Pinterest.

Pra isso, construí uma skill. Extrai design.md de qualquer site do mundo. 4 dias de obra, 30 e poucos scripts, 90% código e 10% LLM.

Por que essa proporção? Porque LLM é caro e errático. Código é barato e determinístico. Quando você sabe o que quer, código entrega 10 vezes mais barato com zero alucinação.

Antes da skill, eu fiquei 2 dias baixando 39 design systems open source. Por inteiro. Pra entender quais componentes eram comuns entre todos e como fazer uma linguagem que qualquer IA conseguisse interpretar.

Pra extrair design.md, a skill precisa entender 5 convenções diferentes só pra cor.

Hexadecimal, RGB, RGBA, HSL, HSLA, mais nome literal tipo "red". Cada empresa usa uma. Sem padronizar, quebra.

Mais gradiente. Mais sombra. Mais animação, com keyframes, easing, duração.

Mais matriz de contraste WCAG pra acessibilidade. Mais detecção de breakpoint pra responsivo.

Testei em mais de 90 sites. Itaú, Nubank, Anthropic, Vercel, Linear, OpenAI, Cursor, Behance.

Todo mundo escreve a mesma coisa de jeito diferente. A skill traduz tudo pra uma linguagem só.

Você consegue mesclar também. Pega 5 sites que gosta, extrai cada um, e pede pra IA combinar.

Tipografia desse, botão daquele, espaçamento de outro. Vira mood board IA-friendly.

E aí veio a parte que ninguém te conta.

As primeiras extrações custavam $5 cada uma com Opus. Fiz umas 30 pra ajustar o padrão.

Aí parei e fiz uma coisa que poucos fazem: pedi pra IA analisar o que ELA acabou de fazer.

Quais decisões foram repetitivas? Quais poderiam virar código fixo em vez de raciocínio?

Ela me mostrou. Eu codei. Migrei o resto pra Sonnet. Custo caiu pra $1.

Repeti o método. Sonnet analisando o próprio output. Mais código. Migrei pra Haiku. Custo caiu pra $0,20. Mantendo 97% da mesma qualidade que tinha com Opus.

200 vezes mais barato. Mesma qualidade. Em modelo que todo mundo acha que serve só pra coisa simples.

Esse método não tá em tutorial de IA nenhum. Porque você só descobre quando abre o capô do que a IA já fez. Engenharia reversa do próprio processo.

Esse jeito de abrir o capô e mapear o padrão pra reduzir custo, não inventei. Tem cena documentada disso virando bilhão.

Em 1982, uma empresa chamada Compaq queria fazer um computador que rodasse os mesmos programas do IBM PC. Tinha um problema. O coração da máquina, o BIOS, era propriedade da IBM. Copiar uma linha de código era processo na cara.

A solução deles foi gastar $1 milhão e 9 meses montando uma operação chamada clean room.

Um time desmontava o IBM. Escrevia em folha o que cada parte fazia.

Outro time isolado, que nunca tinha visto o IBM, reescrevia do zero baseado só nas anotações.

Esperavam $30 milhões de receita no primeiro ano.

Fizeram $111 milhões.

E não é coisa só de 44 anos atrás.

Quando o código do Claude Code vazou em março por erro de release da própria Anthropic, a comunidade dev refez do zero em Rust e Python usando exatamente a mesma técnica.

Clean room. Time A leu o vazamento. Time B, isolado, reescreveu sem nunca ter olhado pro original.

Um dos rewrites já tem 75 mil estrelas no GitHub. Mesmo método de 1982, aplicado em 2026.

A lógica é a mesma que eu uso pra fazer skill, pra entender Claude Design, pra abstrair design.md do Stitch. Entender antes de copiar. Abrir o capô antes de usar.

Quem só usa a ferramenta repete o erro. Quem entende refaz.

Mas tem outra peça nessa equação que torna o assunto urgente em 2026.

Por que essa janela é curta

Aqui tem uma coisa que se você não vê, perde.

Em 1989, um economista chamado Brian Arthur provou matematicamente algo estranho sobre mercado de tecnologia.

Quem ganha não é o melhor.

É quem chega na massa crítica primeiro.

Pode ser melhor. Pode ser pior. Não importa. Travou.

Arthur chamou isso de lock-in por eventos históricos.

Em mercados de retornos crescentes, quanto mais gente usa uma tecnologia, mais valiosa ela fica.

E uma vez que atinge massa crítica, o sistema TRAVA. Todo novo adotante escolhe ela, independente de preferência pessoal.

Por isso design.md vai virar padrão universal. Não porque é a melhor convenção possível. Porque o Google soltou primeiro e a comunidade tá pegando.

Olha o que aconteceu com o protocolo anterior da Anthropic. MCP, Model Context Protocol. Lançado em novembro de 2024 com 100 mil downloads no primeiro mês.

Hoje: 97 milhões de downloads por mês.

OpenAI adotou. Google adotou. Microsoft. AWS.

12 meses do zero pra padrão universal.

Pra você ter ideia, OpenAPI levou 5 anos pra chegar nesse mesmo nível. OAuth 2 levou 4. HTML levou a década de 90 inteira.

MCP fez em 12 meses.

design.md tá entrando exatamente nessa mesma curva. 12 meses de janela, talvez menos.

Quem aprende design com IA pelo tipo I, consumindo tutorial, vai descobrir design.md depois. Quando todo mundo já tiver convenção própria.

Quem aprende pelo tipo D, abrindo o capô, já tá nele.

A diferença não é inteligência. É qual curiosidade você usou.

Mas mesmo o tipo D tem que shippar bugado

Tem uma armadilha que o próprio tipo D cai. E ela arruína tudo se você não vê.

Quando você abre o capô e entende, fica tentado a polir até estar perfeito antes de mostrar.

Não funciona. Mesmo com tipo D, polir sozinho vale 10 vezes menos do que interagir com gente real.

Eu vou contar uma história e depois uma cena.

Em 2004, um engenheiro chamado Eric Ries lançou um produto chamado IMVU. Era um chat com avatares 3D. Cheio de bug. Ele mesmo escreveu depois que o time de engenharia ficou envergonhado quando soltou.

E aconteceu o inesperado.

Os usuários amaram uma feature simples chamada teleport. Tecnicamente pior do que a dos competidores.

Mas que resolvia uma necessidade que ninguém tinha mapeado.

IMVU virou $50 milhões por ano.

Essa história fundou o livro Lean Startup. Que todo empreendedor de algum jeito já estudou.

E não é só 2004. Uma startup sueca chamada Lovable atingiu $20 milhões de receita anual em 2 meses. Crescimento mais rápido na história das startups europeias.

Hoje: $400 milhões de receita anual, valuation $6,6 bilhões.

E em paralelo, um review técnico independente do mercado sentenciou:

Reid Hoffman, que fundou o LinkedIn, tem uma frase que virou clichê em Vale do Silício mas continua verdadeira:

A cena.

Durante a live em que mostrei tudo isso, eu botei a galeria com os 39 design systems extraídos no ar. Funcionando. Bugada.

Banco de dados pendente. Mobile quebrado em alguns sistemas. Console mostrando erro pra 200 pessoas que estavam assistindo ao vivo.

Eu tinha duas opções. Esperar mais 2 ou 3 dias pra polir. Ou botar no ar imperfeito e interagir.

Botei no ar.

Porque interagir com gente real e errado vale 10 vezes mais do que polir sozinho e perfeito.

A vergonha de soltar quebrado é o preço da segunda versão chegar mais cedo.

O que muda quando você não tá sozinho

Tudo que tá aqui eu fiz sozinho. Mas o sozinho tem teto.

Quem desmonta junto desmonta mais rápido. Quem solta bugado pra grupo errar junto erra mais cedo. Quem abre o capô na frente de outro tipo D recebe ângulo que sozinho não vê.

Eu tenho um grupo onde isso acontece todo dia. Chama Comunidade Lendár[IA].

Não é só sobre design. Tem gente lá fazendo coisa que eu não saberia fazer.

Profissional experiente que decidiu parar de assistir tutorial e começar a construir.

Gente que já tentou de tudo e cansou de promessa vazia.

Gente que entende que o problema não é falta de informação, é falta de sistema e de tribo.

O que une não é o tema. É o jeito.

Gente que abre o capô antes de usar. Gente que solta bugado e melhora junto.

Gente fazendo agora e mostrando o que tá fazendo.

Se você leu até aqui sem fechar a aba, você é dessa gente.

Alan Nicolas ♾️
CEO, Academia Lendár[IA]

P.S. A skill + galeria com os design.md extraídos de mais de 90 sites tá aqui: galeria pública. Itaú, Nubank, Anthropic, Vercel, Linear, OpenAI, Cursor, Behance.

Entra, pega o que te inspira, cola no Claude Design.

Em 5 minutos você sai com o sistema visual de uma das marcas mais bem feitas do mundo rodando no seu projeto.

📚️ Livros Recomendados:

Em Busca De Sentido — Viktor E. Frankl: Frankl sobreviveu a Auschwitz e descobriu uma única lei: quem encontrava significado sobrevivia, quem buscava conforto morria. Aplicado: tutorial é conforto disfarçado de progresso. Desmontar é a coisa difícil que constrói significado real — e por consequência, capacidade real.

Impromptu — Reid Hoffman (with GPT-4): Hoffman é cofundador do LinkedIn e escreveu este livro com GPT-4 como coautor literal. Cada capítulo mostra ele desmontando a IA AO MESMO TEMPO que usa ela. É o exemplo mais radical de tipo D que existe: o livro inteiro é uma demonstração de que entender o substrato enquanto opera vence quem só opera.

A Singularidade Economica — Calum Chace: Todo mundo fala sobre IA. Quase ninguém leu a análise econômica séria do que acontece com mercado de trabalho quando o custo marginal de cognição cai pra perto de zero. Chace fez essa análise. Quem leu tem vantagem assimétrica de 5 anos sobre quem só consumiu tutorial de prompt.

💻 Vídeo Recomendado

Assista a minha ultima live:

🗞️ Sobre a Newsletter:

• Descubra como sobreviver e prosperar na Era da IA ♾️

• Escrita por: Alan Nicolas utilizando Obsidian potencializado com IA

• Mantenha-se atualizado: Últimas tendências e desenvolvimentos em IA

📲 Redes Sociais

Para mais conteúdos lendários sobre Inteligência Artificial e Business, aproveite para me seguir nas redes sociais:

Instagram | YouTube | X (Twitter) | Podcast (Spotify)