yofine/blueprinter

O que blueprinter faz?

Gere diagramas técnicos usando HTML/CSS no estilo Flat Engineering Blueprint. Use quando o usuário quiser criar diagramas de arquitetura, diagramas de sistema, fluxogramas ou folhas de especificação técnica com aparência de plantas de engenharia. Ativa em solicitações de diagramas planos, visualizações estilo blueprint ou desenhos técnicos.

Visão Geral

Este skill gera diagramas técnicos com aparência profissional de blueprint (planta baixa) usando HTML e CSS puros. Os diagramas são renderizados como código que pode ser visualizado em qualquer navegador moderno, proporcionando uma maneira elegante e limpa de representar arquiteturas de software, fluxos de trabalho e sistemas complexos.

Quando Usar

• Diagramas de Arquitetura: Representar a estrutura de sistemas de software, microserviços, ou infraestrutura de nuvem.
• Fluxogramas: Visualizar processos, fluxos de dados ou pipelines de CI/CD.
• Diagramas de Rede: Mostrar conexões entre servidores, bancos de dados e serviços.
• Especificações Técnicas: Criar folhas de especificação ou documentação visual de componentes.
• Prototipação Rápida: Esboçar ideias de design de sistema de forma visual.

Como Funciona

O skill utiliza HTML semântico com CSS inline ou embutido para desenhar formas geométricas, setas e texto estilizado. O estilo "Flat Engineering Blueprint" usa um fundo azul escuro (similar ao azul das plantas de engenharia) com linhas, bordas e texto em branco ou cinza claro, criando um contraste forte e profissional.

Exemplo de Saída

<div style="background:#1a3a5c; color:#e0e0e0; padding:20px; font-family: 'Courier New', monospace;">
  <h1 style="border-bottom:2px solid #7fb3df; padding-bottom:10px;">Diagrama de Arquitetura</h1>
  <div style="display:flex; gap:20px; margin-top:20px;">
    <div style="border:2px solid #7fb3df; padding:15px; flex:1;">
      <strong>Frontend</strong>
      <p>React App</p>
    </div>
    <div style="border:2px solid #7fb3df; padding:15px; flex:1;">
      <strong>API</strong>
      <p>Node.js</p>
    </div>
    <div style="border:2px solid #7fb3df; padding:15px; flex:1;">
      <strong>Banco</strong>
      <p>PostgreSQL</p>
    </div>
  </div>
  <div style="text-align:center; margin-top:10px;">
    <span style="color:#7fb3df;">⬇️</span>
  </div>
</div>

Plataformas Suportadas

• Claude Code: Pode ser invocado diretamente em solicitações de diagramas.
• Cursor: Integra-se ao fluxo de trabalho de desenvolvimento.
• Codex: Suporta geração de código HTML/CSS para diagramas.

Como Usar

Simplesmente descreva o diagrama que você precisa em linguagem natural. Por exemplo:

• "Crie um diagrama de arquitetura para um sistema de e-commerce com frontend, API e banco de dados."
• "Gere um fluxograma estilo blueprint mostrando o fluxo de login do usuário."
• "Desenhe um diagrama de rede com servidores web, load balancer e banco de dados."

O skill gerará o código HTML/CSS correspondente no estilo Flat Engineering Blueprint, pronto para ser visualizado ou incorporado em documentação.

Personalização

É possível personalizar:

• Cores: O esquema de cores padrão é azul escuro com branco, mas pode ser ajustado.
• Formas: Retângulos, círculos, setas, linhas conectadas.
• Texto: Títulos, legendas, rótulos em estilo monoespaçado.
• Layout: Posicionamento flexível dos elementos usando CSS Grid ou Flexbox.

Contribuindo

Contribuições são bem-vindas! Sinta-se à vontade para abrir issues ou pull requests no repositório original: yofine/blueprinter.