Do Vibe Styles ao designmd.app
O Vibe Styles nasceu como uma biblioteca simples com quase 100 estilos (98, para ser exato) para usar como referência em agentes e no NotebookLM, e gerar sites, vídeos e diagramas. Cada estilo vinha com prompt copiável e demonstração ao vivo.
Quando o padrão DESIGN(.)md apareceu, o site passou a gerar esses arquivos e ganhou domínio próprio. Daí em diante cresceu, ganhou categorias e hoje reúne quase 800 variações, com cerca de 1.500 acessos diários, todos orgânicos.
O vídeo de 44 segundos resume o percurso:
Foi um dos projetos em que mais aprendi na minha jornada de #AIDLC. Nele testei as primeiras implementações de multiagentes, especificações com BMAD e outros frameworks, web scraping, SEO e GEO.
Tip
Se você já usou o Vibe Styles, vai reconhecer o DNA. Se não conhece ainda, o designmd.app é onde essa ideia chegou depois de maturar.
O que é um DESIGN.md
Um DESIGN.md é um arquivo Markdown que documenta um design system completo — tipografia, cores, componentes, layout, motion e anti-patterns — em um formato que LLMs entendem nativamente.
Diferente de design tokens em JSON ou style guides em PDF:
| Design Tokens (JSON) | Style Guide (Figma/PDF) | DESIGN.md | |
|---|---|---|---|
| LLM-native | ❌ precisa de parser | ❌ binário | ✅ Markdown puro |
| Peso | variável | pesado | ~2-5K tokens |
| Versionável | parcialmente | ❌ | ✅ Git-friendly |
| Autocontido | ❌ | ❌ | ✅ |
É o formato que permite dizer ao Claude, Cursor ou Kiro: “use o design system desse arquivo” — e ter um resultado consistente, sem ambiguidade.
759 arquivos e várias famílias de estilo
A biblioteca cresceu de 98 para 759 design systems documentados em Markdown. As categorias continuam, entre elas:
- Arte & Ilustração: estilos ilustrativos e expressivos
- Brasil: identidades visuais com referências nacionais
- Brutalismo: raw, direto, sem ornamentos
- Dados & Infográfico: dashboards, BI, visualização de informação
- Editorial & Tipografia: estilos guiados por tipografia
- Flat & Soft UI: flat design, neumorphism, claymorphism
- Futurista & Tech: cyberpunk, sci-fi, holográfico
- Minimalismo & Swiss: grid rigoroso, menos é mais
- Retro & Pop: Y2K, vaporwave, anos 80 e 90
- Temas & Verticais: SaaS, Fintech, E-commerce, Health
Agora há também a família Claude Artisan, com subcategorias como brutalismo e anti-design, flat/material, minimal/maximal, morphism, movimentos históricos, retrofuturismo, subculturas, textura/material e vidro & transparência. A lista de categorias ainda está em transição, então não vou fixar um número aqui.
Cada estilo inclui definição visual, paleta com swatches, especificações CSS, variáveis de design system, checklist de implementação, prompt completo para IA e screenshot de referência.
Real Brands
A seção Real Brands reúne 42 marcas reais. O CSS público de cada uma foi extraído e virou DESIGN.md. Dá para filtrar por setor (automotivo e mobilidade, comércio, devtools, dinheiro e pagamentos, telecom, saúde, governo) e por marcas brasileiras. 99, AbacatePay, Conta Azul, Atlassian e Clerk estão na lista.
Ela foi lançada com 22 marcas brasileiras. Hoje são 33 brasileiras entre as 42. Marca brasileira num formato que agente lê não é um conteúdo fácil de achar, e é por isso que essa seção existe.
Suporte bilíngue PT-BR / EN
Essa foi uma das decisões mais importantes do projeto. O designmd.app é nativamente bilíngue:
| Aspecto | PT-BR | EN |
|---|---|---|
| Rota | / (sem prefixo) | /en/ |
| Domínio produção | designmd.app.br | designmd.app |
| Prompt gerado | em PT-BR | em EN |
A configuração i18n é gerenciada via src/i18n/config.ts e src/i18n/translations.ts. Cada página tem sua versão traduzida, com hreflang alternates automáticos e redirect por domínio via JS client-side.
Note
O prompt para IA gerado em cada estilo é construído dinamicamente via buildAiPrompt(item, locale) — em PT-BR para usuários brasileiros, em EN para o domínio internacional. O mesmo estilo, duas audiências.
Isso não é só uma questão de alcance de mercado. É um posicionamento: design systems para IA precisam falar a língua do projeto. Um time brasileiro desenvolvendo com Claude em PT-BR merece um prompt que não force tradução mental no meio do workflow.
Prompt completo, pronto para colar
Cada estilo tem um prompt autocontido que você copia e cola direto no agente. Ele é montado com:
- Papel do agente e estrutura esperada
- Definição do estilo — nome, tipo, keywords, era, suporte light/dark
- Paleta de cores com hex codes
- Efeitos visuais — transições, blur, sombras
- CSS técnico — propriedades chave
- Variáveis CSS customizadas
- Checklist de implementação
- 11 regras de estrutura, responsividade e qualidade
O objetivo é zero ambiguidade. Você escolhe o estilo, copia o prompt, e o agente entende exatamente o que entregar.
Stack: Astro 6, SQLite, Tailwind v4
A arquitetura reflete as escolhas que fazem sentido para um site de conteúdo com islands de interatividade:
| Tecnologia | Papel |
|---|---|
| Astro 6 | SSG + islands architecture |
| Tailwind CSS v4 | Estilização utilitária |
| SQLite + better-sqlite3 | Dados em runtime (readonly, FTS5) |
| React | Apenas para o filtro da biblioteca |
| marked + shiki | Markdown rendering + syntax highlight |
O banco SQLite é efêmero — gerado a cada deploy via npm run seed a partir do library.json, a fonte de verdade do projeto. Simples, determinístico, sem surpresas.
Tip
React aparece em um único lugar: o componente de filtro da biblioteca. O resto é Astro puro — zero JavaScript desnecessário no cliente.
SEO e visibilidade para IA
O projeto foi construído com dois públicos em mente: humanos e agentes de IA.
Para humanos: Open Graph images geradas por rota (/og/*), Schema.org JSON-LD em todas as páginas, sitemap completo, feed RSS.
Para agentes: /llms.txt e /llms-full.txt com índice otimizado para crawlers de IA, prompt estruturado em cada estilo, API REST em /api/styles para consulta programática.
API REST
Endpoint paginado em /api/styles para quem quer integrar os estilos em suas próprias ferramentas. Suporta filtro por tipo e busca full-text via FTS5.
Útil para quem quer construir extensões, plugins ou pipelines que consumam os DESIGN.md de forma programática.
Meu Papel e Responsabilidades
- Evolução de produto — Identificar os limites do Vibe Styles e definir o escopo do designmd.app
- Arquitetura — Escolher e implementar a stack (Astro 6, SQLite, i18n nativo)
- Curadoria — Expandir de 98 para quase 800 estilos e montar a seção Real Brands, com 42 marcas reais
- i18n — Implementar suporte bilíngue PT-BR/EN com domínios separados
- Prompt engineering — Estruturar o builder de prompts para maximizar utilidade nos agentes
- SEO e LLM optimization — llms.txt, Schema.org, Open Graph por rota
Status Atual
O projeto está ao vivo em designmd.app (EN) e designmd.app.br (PT-BR).
✅ Entregue
- 759 arquivos documentados com DESIGN.md completo
- Real Brands: 42 marcas reais, 33 brasileiras
- Vídeo-resumo de 44s do percurso, do Vibe Styles ao designmd.app
- Guias de integração para 11 agentes: Aider, Claude Code, Cline, Codex, Continue.dev, Cursor, Devin, GitHub Copilot, Google Stitch, Kiro e Windsurf (PT e EN)
- Skill
design-md-validator, que faz lint do DESIGN.md, checa contraste WCAG AA e referências quebradas e exporta para Tailwind v4/DTCG - Prompt builder bilíngue (PT-BR / EN)
- API REST com FTS5
- i18n completo com dois domínios
- llms.txt para crawlers de IA
🔄 Em andamento
- Expansão contínua da biblioteca
- Páginas verticais otimizadas para SaaS, Fintech e E-commerce
Note
Escrevi um post no Substack detalhando como o projeto foi construído por dentro — pipeline de dados, decisões de arquitetura e o que aprendi sobre o formato DESIGN.md na prática: Como eu construí o designmd.app
