SAIスキル大辞典Agent Skills Dictionary
⌕
文字
トップ›Skill›hand-drawn-diagrams
UI/UX

hand-drawn-diagrams

hand-drawn-diagrams

自然言語から、編集可能な手描き風Excalidraw図、フロー、ワイヤーフレーム、説明図を作成します。

AIスキル大辞典による日本語要約
品質評価92/100評価確度：十分
人気度（GitHub Star） 63発掘スコア 80
01

このSkillでできること

  • ✓手描き風のExcalidraw図、フロー、マインドマップ、構成図を作成する
  • ✓UXフロー、ワイヤーフレーム、ページモックアップを作成する
  • ✓図を検証し、ホストされた編集URLを提供する
  • ✓要望に応じてアニメーションSVGやPNGを出力する
02

使い方

01
STEP 1

作りたい図の種類と内容を自然言語で指定する

02
STEP 2

用途に応じて、教材、UX、技術説明、ページモックアップなどの目的を伝える

03
STEP 3

標準ではモノクロのスケッチ形式で作成する

04
STEP 4

必要に応じてExcalidraw、アニメーションSVG、PNGでの保存を指定する

03

Skillのインストール

初心者におすすめ

AIにこのSkillを追加してもらう

GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。

このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。

Repository:
https://github.com/muthuishere/hand-drawn-diagrams
04

このSkillを使うプロンプト例

Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。

APIリクエストの認証フローを、手描き風のモノクロExcalidraw図で作成してください。クライアント、API、認証サービス、データベースを含め、処理の流れを矢印で示してください。
出力例を見る
編集可能なExcalidraw図、ホストされた編集URL、要望に応じたアニメーションSVGまたはPNG。
05

安全性チェック

自動解析による参考情報です。Skillの安全性を保証するものではありません。

外部API通信検出あり
Shellコマンド実行検出あり
ファイル読み取り明確な記述なし
ファイル書き込み明確な記述なし
ネットワークアクセス検出あり
認証情報明確な記述なし
検出根拠を見る
  • shell: default — your workspace stays clean. ## Quick start ```bash npx skills add muthuishere/hand-drawn-diagrams ``` Works for Claude Code, Codex, OpenCod
  • network: back to Playwright. # hand-drawn-diagrams [![Discord](https://img.shields.io/badge/AgentNexus-join%20the%20community-5865F2?logo=discord&logoColor=white
  • network: 0the%20community-5865F2?logo=discord&logoColor=white)](https://discord.gg/V9C2kvHC8D) AI skill for turning ideas, notes, systems, and flows into hand-dr
06

関連Skill