Diagramas con diseño profesional, hechos por tu IA
Se llama Diagram Design y es gratis. Le enseña a Claude a hacer organigramas, líneas de tiempo, embudos de venta y 40 tipos de diagramas con diseño de revista y con tus colores, sin abrir Figma. Acá te explico cómo instalarla con un mensaje y te dejo mensajes listos para usar.
Qué es
Cuando le pides un diagrama a una IA, casi siempre te devuelve cajas redondeadas genéricas que no combinan con nada de lo tuyo. Esta skill le da a Claude un sistema de diseño: elige el tipo de diagrama que conviene, usa un solo color fuerte para lo que tienes que mirar primero y deja aire alrededor.
El resultado es una página con tu diagrama, que abres en el navegador. Viene en versión clara, oscura y una más completa con textos de apoyo, y si lo necesitas para una presentación, te lo guarda como imagen.
Una skill es como el manual que le pasas a un trabajador nuevo: en vez de improvisar, Claude trabaja con un método. En la galería de la autora puedes ver cómo quedan todos los tipos.
Para qué te sirve
Algunos de los que más le sirven a un negocio.
Organigrama
Quién está a cargo de qué en tu equipo y a quién se le pregunta cada cosa.
Etapas de un proyecto
Una línea de tiempo con cada etapa y cuánto dura, lista para mostrársela a un cliente.
Embudo de ventas
Cuántas personas te visitan, cuántas preguntan y cuántas terminan comprando.
Cómo trabaja tu equipo
Un proceso paso a paso, como atender un pedido, separando lo que hace cada persona.
El viaje de tu cliente
Qué hace y qué siente tu cliente en cada etapa, desde que te conoce hasta que te compra.
Gráficos y comparaciones
Barras, líneas o un cuadro de cuatro partes para comparar ideas por impacto y esfuerzo.
Y si ya tienes un diagrama hecho en draw.io, Mermaid o Excalidraw, se lo pasas y lo redibuja con este diseño.
Cómo se instala
No tienes que hacer nada a mano. Abre Claude Code, Codex o el programa de IA que uses para crear, copia este mensaje, pégalo y la IA hace el resto. Si todavía no tienes Claude Code, en esta guía te explico cómo instalarlo.
Instala Diagram Design en mi computador: https://github.com/cathrynlavery/diagram-design Sigue las instrucciones del propio repositorio para el programa que estoy usando y déjalo instalado para todos mis proyectos. Hazlo tú de principio a fin, yo no sé de programación. Si hay algo que tenga que escribir yo, dime exactamente qué y dónde. Cuando termines, avísame si tengo que cerrar y volver a abrir el programa.
Si te pide permiso para hacer algo en tu computador, dile que sí. En Claude Code puede que te pida escribir tú un par de comandos que empiezan con /plugin: son los que instalan la skill, cópialos tal cual.
Primero, que use tus colores
Sin configurar nada, los diagramas salen en negro y naranjo. Pero si le pasas tu página web, en un minuto saca tus colores y tu tipografía y los usa en todos los diagramas. La primera vez que le pidas uno en un proyecto te lo va a preguntar solo.
Configura Diagram Design con los colores y la tipografía de mi página: [la dirección de tu página]. Muéstrame qué colores va a usar antes de guardarlos.
Puedes guardar los colores de cada uno con su nombre y pedirle después: «usa los colores de [cliente]». Así los diagramas de un cliente no salen con los colores de otro.
Úsala con estos mensajes
Copia uno de estos y cambia lo que está marcado en color por lo tuyo. Mientras más datos le des, menos inventa.
Usa Diagram Design para hacer un organigrama de mi equipo. Estas son las personas, su cargo y a quién le reportan: [nombre, cargo y jefe de cada uno].
Usa Diagram Design para hacer una línea de tiempo con las etapas de [tu proyecto] y cuánto dura cada una: [etapas y fechas]. Es para mostrársela a un cliente, así que usa palabras simples.
Usa Diagram Design para hacer un embudo de ventas con estos números del mes: [visitas, consultas, cotizaciones y ventas]. Destaca la etapa donde más gente se pierde.
Usa Diagram Design para dibujar cómo atendemos un pedido, desde que el cliente escribe hasta que recibe lo que compró, separando lo que hace cada persona. Así lo hacemos hoy: [cuéntale el proceso].
Guarda este diagrama como imagen PNG para ponerlo en una presentación.
La IA dibuja con los datos que le das. Antes de mandarle el diagrama a un cliente, revisa que los nombres, las fechas y los números estén bien. Y la primera vez que le pidas una imagen PNG puede necesitar instalar un programa extra: dile que sí.
¿En qué IA se puede usar?
Funciona completo
Claude Code, Codex, GitHub Copilot, Kiro, OpenCode y otros programas compatibles con skills. Con el mensaje de arriba queda andando en el que uses.
ChatGPT, no
No está entre los programas compatibles y no hay forma de instalarla en el chat de ChatGPT. Si usas OpenAI, el camino es Codex, su programa para crear con IA.
Gratis
La skill no cuesta nada. Lo que sí necesitas es el programa de IA: Claude Code viene en los planes pagados de Claude.
De quién es
Esta skill no la hice yo: es de Cathryn Lavery, que dirige BestSelf.co y la armó porque se cansó de pelear con Figma cada vez que necesitaba un diagrama. Tiene licencia MIT y más de 42 mil estrellas en GitHub. Ver el repositorio ↗
Si te sirvió esto, en recursos tengo más cosas del mismo estilo, todas gratis y explicadas para gente que no programa.