hand-drawn-diagrams — скилл для Claude Code: что делает и как ставить
Скилл генерирует скетч-диаграммы Excalidraw по текстовому запросу. Он создаёт анимированный SVG, ссылку для редактирования и выгрузку в PNG.
npx skills add nexu-io/open-design --skill hand-drawn-diagrams -a claude-codeЧто делает hand-drawn-diagrams
Скилл передаёт агенту инструкции для создания диаграмм в стиле Excalidraw. На выходе инструмент готовит анимированный SVG и отдаёт ссылку на редактор. Экспорт в PNG тоже поддерживается. Агент активирует логику по фразам sketch diagram или whiteboard diagram.
В каталоге open-design этот компонент размещён в режиме prototype. Он нужен агенту для обнаружения во время планирования. Но здесь есть ограничение: для доступа к оригинальным скриптам и ассетам придётся ставить бандл из исходного репозитория muthuishere/hand-drawn-diagrams. Без внешних файлов цепочка будет неполной.
Интеграция работает со стандартными путями навыков. Скилл подключается к Claude Code и Codex одной командой через утилиту skills.
Какие задачи решает
- сгенерировать схему Excalidraw по текстовому описанию
- подготовить анимированный SVG для проектной документации
- получить ссылку на редактирование доски Excalidraw
- выгрузить архитектурный набросок в PNG
Примеры запросов агенту
- Нарисуй sketch diagram с архитектурой микросервисов
- Сделай whiteboard diagram для структуры базы данных через Excalidraw
- Запусти hand-drawn-diagrams и подготовь схему авторизации
Как установить hand-drawn-diagrams
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill hand-drawn-diagrams -a claude-code2Вручную: положить файлы
~/.claude/skills/hand-drawn-diagrams/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/hand-drawn-diagrams/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill hand-drawn-diagrams -a codex2Вручную: положить файлы
.agents/skills/hand-drawn-diagrams/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill hand-drawn-diagrams -a cursor2Вручную: положить файлы
.cursor/skills/hand-drawn-diagrams/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install nexu-io/open-design hand-drawn-diagrams2Вручную: положить файлы
.github/skills/hand-drawn-diagrams/SKILL.md1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill hand-drawn-diagrams -a gemini-cli2Командой платформы
gemini skills install https://github.com/nexu-io/open-design --path skills/hand-drawn-diagramsВручную: положить файлы
.devin/skills/hand-drawn-diagrams/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill hand-drawn-diagrams -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора39
Весь набор →Похожие
Вопросы о hand-drawn-diagrams
Как установить hand-drawn-diagrams в Claude Code?
Выполните в терминале команду npx skills add nexu-io/open-design --skill hand-drawn-diagrams -a claude-code. Файл навыка сохранится по пути ~/.claude/skills/hand-drawn-diagrams/SKILL.md.
Что делает hand-drawn-diagrams?
Скилл генерирует диаграммы Excalidraw из текстового описания. На выходе создаются анимированный SVG, файл PNG и ссылка для редактирования схемы в браузере.
Зачем нужен апстрим-репозиторий muthuishere/hand-drawn-diagrams?
В open-design скилл помечен как прототип для обнаружения агентом при планировании. Чтобы запустить полный рабочий процесс с оригинальными скриптами и ассетами, нужно установить файлы из апстрима.
Исходный текст
SKILL.md · Apache-2.0
--- name: hand-drawn-diagrams description: | Generate hand-drawn Excalidraw diagrams from a prompt — animated SVG, hosted edit link, and PNG export. Works with Claude Code, Codex, Gemini CLI, and any agent supporting standard skill paths. triggers: - "excalidraw" - "hand drawn diagram" - "sketch diagram" - "whiteboard diagram" od: mode: prototype category: diagrams upstream: "https://github.com/muthuishere/hand-drawn-diagrams" --- # hand-drawn-diagrams > Curated from @muthuishere. ## What it does Generate hand-drawn Excalidraw diagrams from a prompt — animated SVG, hosted edit link, and PNG export. Works with Claude Code, Codex, Gemini CLI, and any agent supporting standard skill paths. ## Source - Upstream: https://github.com/muthuishere/hand-drawn-diagrams - Category: `diagrams` ## How to use This catalogue entry advertises the skill in OpenDesign so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory: ```bash # Inspect the upstream README for exact paths open https://github.com/muthuishere/hand-drawn-diagrams ``` Then ask the agent to invoke this skill by name (`hand-drawn-diagrams`) or with one of the trigger phrases listed in this skill's frontmatter.
© nexu-io · Apache-2.0 · nexu-io/open-design