SkillProof tested Claude skills

Hand-Drawn Diagrams

Genera diagramas, wireframes y mockups de Excalidraw validados con estilo de dibujo a mano

Por muthuishere · muthuishere/hand-drawn-diagrams

Probado · Funciona ★ 9.6/10

Hand-Drawn Diagrams — Genera diagramas, wireframes y mockups de Excalidraw validados con estilo de dibujo a mano

Qué hace

Genera diagramas de Excalidraw con estilo de dibujo a mano - diagramas de flujo, explicaciones, wireframes y mockups de página - como JSON .excalidraw válido, luego verifica la salida con un validador Python incluido antes de entregar una URL de edición alojada. Se activa cuando se solicita dibujar o diagramar un flujo, arquitectura o UI con un aspecto de dibujo a mano. Por defecto, utiliza un estilo de boceto monocromático, con exportación opcional a PNG y SVG animado auto-dibujado a través de Chrome DevTools MCP o Playwright.

Informe de la prueba

El validador incluido es real y pure-Python, así que lo ejecuté en vivo en dos diagramas de flujo de registro. Mi JSON de Excalidraw sin habilidad resultó INVÁLIDO - un enlace de flecha colgante a un id inexistente, un diseño apilado y seis advertencias de estilo que habían eliminado el aspecto de dibujo a mano - mientras que la versión guiada por esquema pasó con 0 errores. La referencia json-schema más validate_excalidraw.py detectan roturas estructurales antes de la renderización, una ventaja medible sobre la generación ad-hoc. La exportación a PNG y SVG animado necesita uv+Playwright o chrome-devtools-mcp, pero el entregable principal (un archivo .excalidraw válido y dibujado a mano más una URL de edición alojada) funciona sin ellos. Los pasos de instalación y la documentación son exhaustivos y honestos sobre la lentitud del fallback de Playwright.

Probado el: 2026-07-25 · Claude Code 2.x (agent harness)

Instalación

git clone https://github.com/muthuishere/hand-drawn-diagrams
mkdir -p ~/.claude/skills
cd hand-drawn-diagrams && cp -r . ~/.claude/skills/hand-drawn-diagrams

Comandos y prompts de ejemplo

  • /hand-drawn-diagramsGenera diagramas, wireframes y mockups de Excalidraw validados con estilo de dibujo a mano

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

  • Sketch a hand-drawn flowchart of our signup flow in Excalidraw
  • Draw a wireframe mockup for the onboarding screen, sketch style
  • Make a hand-drawn architecture diagram for this system

Informe completo →