SkillProof tested Claude skills

Hand-Drawn Diagrams

Generuj walidowane, ręcznie rysowane diagramy Excalidraw, wireframe'y i makiety

Autor: muthuishere · muthuishere/hand-drawn-diagrams

Testowano · Działa ★ 9.6/10

Hand-Drawn Diagrams — Generuj walidowane, ręcznie rysowane diagramy Excalidraw, wireframe'y i makiety

Co robi ten skill

Generuje diagramy Excalidraw w stylu ręcznie rysowanym — schematy blokowe, objaśnienia, wireframe'y i makiety stron — jako prawidłowy .excalidraw JSON, a następnie sprawdza wynik za pomocą dołączonego walidatora Python przed dostarczeniem hostowanego adresu URL do edycji. Uruchamia się, gdy prosisz o naszkicowanie, narysowanie lub diagram przepływu, architektury lub interfejsu użytkownika w stylu ręcznie rysowanym. Domyślnie używa monochromatycznego stylu szkicu, z opcjonalnym eksportem PNG i animowanego SVG z autorysowaniem za pomocą Chrome DevTools MCP lub Playwright.

Raport z testu

Dołączony walidator jest prawdziwy i czysto napisany w Pythonie, więc uruchomiłem go na żywo na dwóch diagramach przepływu rejestracji. Mój Excalidraw JSON bez umiejętności okazał się INVALID — zwisająca strzałka wiążąca się z nieistniejącym id, ułożony warstwowo układ i sześć ostrzeżeń o stylu, które zepsuły wygląd ręcznie rysowany — podczas gdy wersja kierowana schematem przeszła z 0 błędów. Odwołanie do json-schema plus validate_excalidraw.py wyłapują strukturalne uszkodzenia przed renderowaniem, co jest mierzalną przewagą nad generowaniem ad hoc. Eksport PNG i animowanego SVG wymaga uv+Playwright lub chrome-devtools-mcp, ale podstawowy wynik (prawidłowy, ręcznie rysowany plik .excalidraw plus hostowany URL do edycji) działa bez nich. Kroki instalacji i dokumentacja są dokładne i uczciwe co do tego, że Playwright jako rozwiązanie awaryjne jest wolny.

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

Instalacja

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

Komendy i przykładowe prompty

  • /hand-drawn-diagramsGeneruj walidowane, ręcznie rysowane diagramy Excalidraw, wireframe'y i makiety

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

  • 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

Pełny raport →