O que é
O Diagram Design é uma habilidade (skill) para agentes de inteligência artificial que gera diagramas editoriais em um único arquivo autossuficiente contendo HTML e SVG. O projeto disponibiliza 45 tipos de diagramas criados com um estilo visual limpo, sem sombras. Além de criar ilustrações do zero, a ferramenta consegue extrair a paleta de cores e as fontes de um site para adaptar os diagramas à identidade visual da marca.
Para quem serve
A solução foi desenvolvida para pessoas e equipes que utilizam assistentes de IA e ambientes com suporte a Agent Skills, tais como Claude Code, Cursor, Codex, GitHub Copilot, Qoder, Pi, Factory Droid, Gemini CLI e Windsurf. É útil para quem precisa gerar diagramas de arquitetura de aplicações, quadros de impacto versus esforço ou sequências de chamadas de API diretamente durante a interação com o agente.
Como começar
Para instalar em ambientes compatíveis através da linha de comando genérica de skills, execute:
npx skills add cathrynlavery/diagram-design
Se estiver utilizando o Claude Code, adicione a ferramenta com os comandos de plugin:
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
No Codex, utilize os comandos nativos de plugin:
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design
Após a instalação, peça ao seu agente em linguagem natural para gerar o diagrama desejado ou extrair o visual do seu site. O assistente definirá o plano de criação e gerará o arquivo .html pronto.
Instalação
npx skills add cathrynlavery/diagram-design
🔗 Repositório oficial: https://github.com/cathrynlavery/diagram-design
Veja em 1 minuto
📚 Mais conteúdos do canal: https://gist.github.com/VictorHugodaSilvaSousa/d1e955e97cd27fc662351821d0a3fdbe
Top comments (0)