Servicios Por qué nosotros Blog Noticias IA Glosario IA Herramientas IA Contacto
← Volver al blog
Herramientas

Mockups y diagramas en segundos: Excalidraw + Claude para alinear con el equipo

No necesitas Figma ni un diseñador. Con Excalidraw y Claude puedo pasar de una idea vaga a un mockup discutible en menos de 10 minutos — y el equipo llega a las reuniones con algo concreto sobre la mesa.

La mayoría de las reuniones de alineación fallan antes de que empiece la discusión. No porque el equipo no sea bueno, sino porque intentamos alinear algo que nadie puede ver. Un líder describe una pantalla con palabras. El desarrollador imagina una cosa. El de producto imagina otra. Al final de una hora de reunión, descubren que estaban hablando de dos flujos completamente distintos.

El problema no es la comunicación. Es la ausencia de un artefacto visual compartido. Y durante mucho tiempo, crear ese artefacto requería tiempo, un diseñador con acceso a Figma, o ambos. Ninguna de las dos opciones existe cuando estás a 20 minutos de una reunión importante.

Excalidraw más Claude resuelve exactamente eso. No a nivel de wireframes de producción, sino a nivel de "aquí está lo que tengo en la cabeza, discutamos esto." Es la diferencia entre una conversación abstracta y una conversación con un objeto concreto en el centro.

El principio que guía este flujo: Un boceto malo en 10 minutos vale más que una discusión abstracta de una hora. Claude no reemplaza al diseñador — te ayuda a llegar con algo concreto a la reunión con el diseñador.

Por qué Excalidraw y no otra herramienta

La elección de Excalidraw no es accidental. Hay tres propiedades que lo hacen ideal para este flujo:

El formato de archivo es texto plano. Excalidraw guarda todo como JSON. Eso significa que Claude puede leerlo, modificarlo y generarlo directamente. No hay que exportar, convertir ni usar APIs de terceros. Le das el JSON a Claude y te devuelve JSON modificado que puedes abrir inmediatamente.

El estilo "dibujado a mano" gestiona las expectativas correctas. Cuando alguien ve un mockup con líneas perfectas en Figma, la reacción instintiva es tratar los detalles visuales como decisiones tomadas. El aspecto de boceto de Excalidraw señala inequívocamente "esto es provisional, estamos discutiendo la estructura." Eso reduce la fricción para cambiar cosas en tiempo real.

La colaboración es instantánea. Un link de Excalidraw y todos pueden ver y editar el mismo diagrama en tiempo real, sin cuentas ni licencias. Para un equipo distribuido en varios países, eso vale mucho.

Cómo funciona el flujo con Claude

El flujo tiene cuatro variantes según el punto de partida. La más común es la que llamo "idea a boceto":

1
Describir la idea en lenguaje natural

Le explico a Claude lo que quiero visualizar como si se lo estuviera describiendo a un colega. Sin formatos especiales, sin terminología técnica obligatoria. "Necesito un diagrama de flujo para el proceso de aprobación de pagos: el usuario inicia, pasa por validación de fondos, luego por compliance, y si falla en cualquier punto, va a un estado de error con notificación."

2
Claude genera el JSON de Excalidraw

Le pido explícitamente que genere un archivo JSON compatible con Excalidraw. Claude conoce el formato — elementos, posiciones, colores, flechas, textos. El output es un bloque de JSON que puedo copiar directamente.

3
Abrir en Excalidraw y ajustar

Pego el JSON en excalidraw.com (opción "Open" → pegar texto) y el diagrama aparece en segundos. Desde ahí puedo mover elementos, ajustar textos, cambiar colores — las correcciones menores las hago yo directamente en el canvas.

4
Iterar con Claude para cambios estructurales

Para cambios más grandes — agregar un flujo alternativo completo, reorganizar la arquitectura — exporto el JSON actualizado desde Excalidraw y se lo paso de vuelta a Claude con las instrucciones del cambio. Claude devuelve el JSON modificado. El ciclo completo toma menos de 2 minutos.

Los casos de uso que más valor dan

Diagramas de arquitectura técnica

Cuando necesito explicar cómo interactúan tres o cuatro servicios — cuál llama a cuál, qué pasa cuando falla uno, dónde está el punto de integración — un diagrama lo resuelve en segundos lo que un párrafo no puede. Le doy a Claude el contexto técnico y le pido que genere el diagrama de componentes. En la reunión con el equipo de ingeniería, partimos del diagrama, no de la descripción.

Prompt para diagrama de arquitectura
Genera un diagrama de arquitectura en formato JSON de Excalidraw para este sistema:
- Servicio A (API Gateway) recibe requests del cliente
- Llama a Servicio B (Auth) para validar el token
- Si auth OK, llama a Servicio C (Business Logic)
- Servicio C consulta a DB PostgreSQL y a una caché Redis
- Si Redis tiene el dato, devuelve directo; si no, va a Postgres y actualiza Redis
- Logs van a todos los servicios vía un sidecar

Usa cajas para servicios, cilindros para bases de datos, flechas con etiquetas para los flujos. Fondo blanco, paleta en tonos azules y gris.

Mockups de UI para discusiones de producto

No para sustituir al diseñador — para llegar a la conversación con el diseñador con una estructura definida. "La pantalla tiene un header con dos acciones, un listado filtrable en el centro, y un panel lateral que se abre al hacer clic en un ítem." Claude genera el wireframe esquemático. El diseñador llega a una conversación de estructura, no a una hoja en blanco.

Mapas de proceso para operaciones

El equipo de operaciones tiene procesos en sus cabezas que nunca han quedado dibujados. En una reunión de 30 minutos, alguien describe el proceso en voz, yo lo voy pasando a Claude, y al final de la reunión tenemos el diagrama. No perfecto, pero suficiente para que todos confirmen que es lo que hacen y señalen las excepciones que se olvidaron mencionar.

Diagramas de secuencia para debugging

Cuando hay un incidente y el equipo necesita reconstruir la secuencia de eventos, Claude puede generar un diagrama de secuencia a partir de la descripción del timeline. "A las 14:32 el servicio X llamó al servicio Y, Y respondió timeout después de 30s, X reintenció tres veces, al tercer intento Y respondió 500..." — ese texto se convierte en un diagrama de secuencia que todos pueden ver mientras discuten la causa raíz.

El prompt que mejor funciona: Sé específico con la estructura pero no con la estética. Claude maneja bien "tres columnas, flujo de arriba a abajo, flechas bidireccionales entre columna 1 y 2" — no maneja bien "que quede bonito" porque ese criterio no existe en JSON.

Las limitaciones que hay que conocer

Claude no es un diseñador y Excalidraw no es Figma. Hay cosas que este flujo no resuelve bien:

Diagramas muy densos desde cero. Si el diagrama tiene 30 nodos con relaciones complejas, el JSON generado tiende a tener superposiciones y el layout queda desordenado. Para esos casos, es mejor pedirle a Claude que genere el diagrama en partes y ensamblar manualmente, o usar las herramientas de auto-layout de Excalidraw después.

Consistencia visual entre múltiples diagramas. Si necesitas que varios diagramas sigan el mismo estilo —mismos colores para los mismos tipos de componentes, mismas convenciones— hay que ser muy explícito en cada prompt o guardar un "diagrama de referencia" que incluyas como ejemplo. No hay memoria entre sesiones.

Mockups con datos reales o lógica de negocio compleja. Excalidraw es para estructuras y flujos, no para simular comportamientos. Si necesitas prototipos interactivos, Figma con Claude Design sigue siendo la herramienta correcta.

El cambio de hábito que realmente importa

La barrera técnica de este flujo es mínima. Excalidraw es gratis y no requiere cuenta. Claude lo conoce bien. El JSON se copia y pega en 10 segundos.

La barrera real es cultural: la tentación de llegar a una reunión sin el artefacto porque "no hubo tiempo para prepararlo." Ese hábito cuesta caro — en reuniones que se repiten porque no hubo claridad, en decisiones que se toman sobre supuestos no verificados, en código que se escribe contra una arquitectura que nadie dibujó.

Cuando el tiempo para preparar un diagrama pasa de dos horas a diez minutos, desaparece la excusa de no tenerlo. Eso es el cambio real que habilita este flujo — no la tecnología en sí, sino la eliminación de la fricción que impedía usarla.

La próxima vez que alguien en tu equipo diga "deberíamos diagramar esto antes de la reunión pero no hay tiempo" — hay tiempo. Diez minutos con Claude y Excalidraw y hay algo concreto sobre la mesa.


¿Quieres llevar este flujo a tu equipo?

En Saphia Labs entrenamos equipos para integrar herramientas de IA en su trabajo diario — desde mockups hasta automatizaciones. Agenda una llamada y vemos cómo aplicarlo en tu contexto.

Agendar llamada gratuita