designmd.app — 423 Design Systems para Ag…

Do Vibe Styles ao designmd.app

O Vibe Styles foi o ponto de partida: 98 estilos de UI/UX com prompts copiáveis para IA generativa, cada um com uma demonstração ao vivo. O projeto validou uma tese central — que estilos de design descritos em linguagem estruturada são ferramentas poderosas para agentes de IA.

A tese foi longe o suficiente para exigir uma evolução real.

O designmd.app não é uma atualização do Vibe Styles. É uma reimaginação completa do que aquele projeto deveria ter sido desde o início: uma referência aberta de arquivos DESIGN.md, o formato de design system criado especificamente para agentes de IA.

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.

423 estilos, 11 categorias

A biblioteca cresceu de 98 para 423 design systems documentados, organizados em 11 categorias:

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 — menos é mais, grid rigoroso
Retro & Pop — Y2K, vaporwave, anos 80 e 90
Temas & Verticais — SaaS, Fintech, E-commerce, Health
General — estilos de uso amplo que não se encaixam em uma vertical

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.

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 423 estilos com qualidade consistente
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

423 estilos documentados com DESIGN.md completo
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
Guias de integração com Claude Code, Cursor, Kiro, Windsurf e Google Stitch
Páginas verticais otimizadas para SaaS, Fintech e E-commerce