SkillProof tested Claude skills

Hand-Drawn Diagrams

Genera diagrammi, wireframe e mockup Excalidraw disegnati a mano e validati

di muthuishere · muthuishere/hand-drawn-diagrams

Promosso ★ 9.6/10

Hand-Drawn Diagrams — Genera diagrammi, wireframe e mockup Excalidraw disegnati a mano e validati

Cosa fa

Genera diagrammi Excalidraw in stile disegnato a mano - flowchart, spiegazioni, wireframe e mockup di pagine - come JSON .excalidraw valido, quindi controlla l'output con un validatore Python incluso prima di fornire un URL di modifica ospitato. Si attiva quando si chiede di disegnare, schizzare o diagrammare un flusso, un'architettura o un'interfaccia utente con un aspetto disegnato a mano. Predefinito per uno stile schizzo monocromatico, con esportazione opzionale PNG e SVG animato auto-disegnante tramite Chrome DevTools MCP o Playwright.

Rapporto di test

Il validatore incluso è reale e puro Python, quindi l'ho eseguito dal vivo su due diagrammi di flusso di registrazione. Il mio JSON Excalidraw senza skill è risultato INVALIDO - una freccia pendente che si legava a un id inesistente, un layout impilato e sei avvisi di stile che avevano perso l'aspetto disegnato a mano - mentre la versione guidata dallo schema è passata con 0 errori. Il riferimento json-schema più validate_excalidraw.py catturano rotture strutturali prima del rendering, un vantaggio misurabile rispetto alla generazione ad hoc. L'esportazione PNG e SVG animato richiede uv+Playwright o chrome-devtools-mcp, ma il deliverable principale (un file .excalidraw valido e disegnato a mano più un URL di modifica ospitato) funziona senza di essi. I passaggi di installazione e la documentazione sono approfonditi e onesti riguardo alla lentezza del fallback di Playwright.

Testato il: 2026-07-25 · Claude Code 2.x (agent harness)

Installazione

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

Comandi e prompt di esempio

  • /hand-drawn-diagramsGenera diagrammi, wireframe e mockup Excalidraw disegnati a mano e validati

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

  • 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

Rapporto completo →