Vou te contar uma coisa que eu demorei pra aceitar.
Durante os últimos meses, eu vi centenas de software houses abraçando o vibe coding — pedindo pra IA gerar código, criar landing pages, montar dashboards inteiros. E o resultado funcional? Impressionante. Mas o resultado visual? Parecia template gratuito de 2019.
Esse era o elefante na sala que ninguém queria admitir: IA sabe codar, mas não sabe fazer design.
Até agora.
Um repositório chamado awesome-design-md acaba de explodir no GitHub — de zero pra 20.000 stars em 6 dias. E pela primeira vez, eu vi uma solução simples e elegante pro problema que estava travando a revolução do vibe coding nas software houses.
O que é o awesome-design-md
É uma coleção de 58 arquivos DESIGN.md extraídos de websites reais — Stripe, Airbnb, Apple, Spotify, Notion, Linear, Figma, Vercel, e mais 50. Cada arquivo captura o design system completo do site num formato que LLMs entendem nativamente: Markdown puro.
O conceito é brutalmente simples: copie um DESIGN.md no root do seu projeto, diga ao seu agente de IA “build me a page that looks like this”, e receba UI que realmente combina com o design de referência.
Sem Figma exports. Sem JSON schemas. Sem tooling especial. Só um arquivo .md.
O projeto foi criado pela VoltAgent, uma startup de AI Agent Engineering fundada por Omer Aplak e Necati Ozmen, que já tinham um framework open-source de agentes em TypeScript. O awesome-design-md foi lançado em 31 de março de 2026 e em 6 dias já tinha 20.400 stars, 2.500 forks e uma comunidade contribuindo ativamente com 123 issues e 16 PRs.
O problema real que isso resolve
Na minha experiência com 300+ software houses, vejo o mesmo padrão se repetir:
- CEO descobre vibe coding e fica empolgado
- Dev usa Claude Code pra gerar uma landing page em 20 minutos
- CEO olha o resultado e fala: “Legal, mas… não parece profissional”
- Dev passa 3 horas ajustando CSS manualmente
- Economia de tempo da IA: zero
O problema não é a IA. O problema é que ninguém deu contexto visual pra ela. Pedir “faça uma landing page bonita” é como pedir pra estagiário novo fazer o layout sem mostrar a identidade visual da empresa.
O pipeline tradicional de design — PRD → Figma → Specs → Handoff → Frontend — funciona, mas cada etapa perde contexto. E quando você joga IA no meio sem dar esse contexto, ela improvisa. E IA improvisando design é um desastre.
DESIGN.md resolve isso colocando todo o contexto visual num único arquivo que a IA lê antes de gerar código.
Como funciona na prática
Cada DESIGN.md do repositório tem 9 seções padronizadas:
- Visual Theme & Atmosphere — A filosofia e mood do design
- Color Palette & Roles — Cores semânticas com hex values e uso funcional
- Typography Rules — Fontes e hierarquia completa
- Component Stylings — Botões, cards, inputs, navegação com todos os estados (hover, active, disabled)
- Layout Principles — Escala de espaçamento, grids, whitespace
- Depth & Elevation — Sombras e hierarquia de superfícies
- Do’s and Don’ts — O que fazer e o que nunca fazer
- Responsive Behavior — Breakpoints e estratégias mobile
- Agent Prompt Guide — Prompts prontos pra usar com IA
Além do DESIGN.md, cada site vem com preview.html e preview-dark.html — catálogos visuais mostrando cores, tipografia e componentes.
O workflow é direto:
# 1. Copie o design system que quer
cp awesome-design-md/design-md/stripe/DESIGN.md ./DESIGN.md
# 2. Peça ao seu agente
"Leia o DESIGN.md e crie uma landing page de pricing"
# 3. Resultado: UI consistente com o visual do StripeOs 58 design systems disponíveis
A curadoria cobre 7 categorias:
- AI & ML (12): Claude, Cohere, ElevenLabs, Mistral AI, Ollama, xAI, e mais
- Developer Tools (14): Cursor, Linear, Vercel, Supabase, Sentry, Warp, e mais
- Infra & Cloud (6): Stripe, MongoDB, HashiCorp, ClickHouse, e mais
- Design & Produtividade (10): Notion, Figma, Framer, Miro, Webflow, e mais
- Fintech (4): Coinbase, Revolut, Wise, Kraken
- Enterprise & Consumer (7): Apple, Airbnb, Spotify, Uber, SpaceX, NVIDIA, IBM
- Automotivo (5): Tesla, BMW, Ferrari, Lamborghini, Renault
Só essa lista já dá pra perceber o poder: você tem o DNA visual de empresas que investiram milhões em design, capturado num arquivo Markdown que qualquer IA entende.
O contexto maior: Google Stitch e o nascimento do “Vibe Design”
O DESIGN.md não surgiu do nada. Ele foi introduzido pelo Google Stitch, a ferramenta de IA do Google Labs que transforma texto em UI.
Em 2026, o Google lançou 5 features de uma vez no Stitch:
- Canvas AI-native
- Design agent mais inteligente
- Voice Canvas (fale mudanças de design em tempo real)
- Prototyping instantâneo
- DESIGN.md como formato portável de design system
O mais importante: Stitch tem SDK e MCP server que conectam diretamente a Claude Code, Gemini CLI, Cursor, Codex e OpenCode. Isso significa que seu agente de código pode consultar seus designs do Stitch sem você copiar specs manualmente.
O Google chamou isso de “Vibe Design” — o equivalente do vibe coding para design. Descreva a emoção (“confiável”, “rápido”, “minimalista”) e o Stitch gera múltiplas direções de design.
O pipeline inteiro colapsa: em vez de PRD → Figma → Specs → Frontend, agora é Vibe Design → DESIGN.md → Vibe Coding → Deploy.
Como usar na sua software house
Aqui vão 5 cenários práticos que já vi funcionando:
1. Landing pages para clientes em minutos
Cliente quer algo “parecido com Stripe”? Copie o DESIGN.md do Stripe, peça ao Claude Code pra gerar. Resultado profissional em 15 minutos, não 15 horas.
2. Propostas comerciais com protótipo funcional
Antes de fechar contrato, mostre um protótipo real com o visual que o cliente quer. Diferencial competitivo brutal.
3. Padronização interna da sua SH
Crie um DESIGN.md da sua própria software house e distribua pra todos os devs e agentes. Acabou inconsistência visual entre projetos.
4. Onboarding acelerado
Dev novo? Lê o DESIGN.md e já sabe exatamente o padrão visual. Não precisa pedir pra alguém explicar “como a gente faz botão aqui”.
5. White-label escalável
Mesmo código, DESIGN.md diferente = visual completamente diferente. Escale produto white-label sem duplicar frontend.
Os números que importam
| Métrica | Valor |
|---|---|
| Stars | 20.400+ |
| Forks | 2.500 |
| Crescimento | 0 → 20K em 6 dias |
| Design systems | 58 websites |
| Seções padronizadas | 9 por arquivo |
| Commits | 17 |
| Licença | MIT (uso comercial livre) |
| Compatível com | Claude Code, Cursor, Gemini CLI, Codex, OpenCode |
O que eu penso
Vou ser direto: esse é o tipo de projeto que parece óbvio depois que alguém faz, mas que ninguém tinha feito.
Na minha experiência mentorando software houses, design sempre foi o gargalo invisível. Devs sabem codar, mas não sabem traduzir “quero algo clean e moderno” em CSS consistente. E IA tinha o mesmo problema — até agora.
DESIGN.md não é perfeito. Os críticos apontam que o formato ainda está acoplado ao ecossistema do Google Stitch e não é um padrão aberto formal. Isso é verdade. Mas README.md também não era “padrão” quando alguém decidiu que todo repo deveria ter um. O mercado adota o que funciona.
E DESIGN.md funciona. Testei com Claude Code: copiei o DESIGN.md da Linear, pedi uma página de settings, e o resultado era genuinamente parecido com a Linear. Sem ajuste manual de CSS. Isso nunca tinha acontecido antes.
O que me impressiona mais é a simplicidade. Não é um framework. Não é uma dependência. Não é um SaaS. É um arquivo Markdown. Qualquer dev entende, qualquer IA lê, qualquer projeto usa.
Se sua software house está fazendo vibe coding (e em 2026, deveria estar), esse repositório é obrigatório no bookmark.
Conclusão
O awesome-design-md representa uma mudança fundamental: design systems como infraestrutura de primeira classe para IA. Não como exports do Figma que ninguém atualiza, não como tokens JSON que só o frontend lead entende — como Markdown que qualquer agente de IA lê e aplica.
20.000 stars em 6 dias não mentem. A comunidade está faminta por essa solução.
Se você quer implementar esse nível de maturidade de IA na sua software house — começando por dar contexto visual pros seus agentes de código — o caminho começa aqui: github.com/VoltAgent/awesome-design-md
Sou Thulio, mentoro 300+ SHs desde 2016.
Quer levar sua software house para o próximo nível com IA? Conheça a Imersão Software House 10x — o evento presencial exclusivo para empresas de software que querem crescer com inteligência.
Referências:
- VoltAgent/awesome-design-md — GitHub
- Google Blog — Stitch AI UI Design
- DesignWhine — What is Google Stitch’s DESIGN.md
- MindStudio — What is Google Stitch DESIGN.md File
- Muzli — Google Introduced Vibe Design
Artigos relacionados:
