excalidraw-visuals

前提条件

このスキルを使用する前に、以下を用意してください。

1. fal.ai の API キー（https://fal.ai で登録）を .env の FAL_KEY として追加します
2. Node.js をインストールします
3. 生成スクリプト scripts/excalidraw-visuals/generate-visual.js
4. スタイル参照画像 brand-assets/excalidraw-style-reference.png（任意 — プロンプトの一貫性を保つため）

---

プロンプトを作成する前に、ビジュアル仕様をすべて確認してください。

• style-guide.md（このスキルのフォルダー内）— カラーシステム、フォント仕様、図形のルール、アイコンの語彙、レイアウトテンプレート、テキスト最小化のルール

---

スタイルプレフィックス（固定）

このテキストをそのまま、すべてのプロンプトの先頭に付けます。リクエストごとに変更しないでください。

Excalidraw-style hand-drawn diagram on a clean white background. All text uses neat, consistent architect-style handwriting -- legible, slightly rounded letters with medium stroke weight. Letter sizes are uniform within each label. Titles are bold and larger. Body labels are smaller but equally neat. This is NOT sloppy handwriting -- it looks like a designer wrote it carefully with a thick marker.

Shapes are rounded rectangles with a 2-3px dark gray (#495057) hand-drawn outline and soft pastel fills. Lines and arrows are slightly wobbly and hand-drawn, not ruler-straight. Arrowheads are simple triangles. Nothing is pixel-perfect -- everything has a natural, sketched feel with visible stroke texture.

Color palette: soft blue (#a5d8ff), warm yellow (#ffec99), soft green (#b2f2bb), coral (#ffa8a8), light purple (#d0bfff). All text is dark charcoal (#343a40). All lines and arrows are dark gray (#495057). Background is always clean white.

People are simple stick figures with round heads, no facial features. AI agents/robots have a round head with two dot eyes and a small antenna. Documents have a folded corner. Gears represent automation. All icons are simple line drawings, not detailed or cartoonish.

Layout is clean and spacious with generous whitespace. Visual hierarchy is clear -- title is largest, labels are short (max 3 words each). The overall feel is educational, friendly, and slightly more polished than basic Excalidraw -- colored fills, intentional spacing, consistent sizing, and meaningful color coding elevate it.

Do NOT include: realistic photos, gradients, drop shadows, 3D effects, corporate clip art, stock imagery, dark backgrounds, heavy borders.

---

ステップ 1：入力を集める

ユーザーから以下の情報を取得します。

• どの概念やプロセスを視覚化するか
• 含める特定の要素、ステップ、ラベル
• アスペクト比の希望（デフォルト：16:9）

リクエストが曖昧な場合は、表示する具体的な視点やフローについて、確認の質問を 1 つしてください。

ステップ 2：レイアウトテンプレートを選ぶ

スタイルガイドから最適なレイアウトを選びます。

テンプレート	最適な用途
左から右へのフロー	プロセス、順序、変換
ハブ＆スポーク	中心概念を取り巻く機能、特徴
上から下への階層	レベル、層、段階的な深さ
横並びの比較	使用前後、新旧、選択肢 A と B
番号付きステップリスト	フレームワーク、チェックリスト、順序付きの手順
サイクル／ループ	フィードバックループ、反復プロセス

ステップ 3：テキストを計画する（最小限にする）

プロンプトを書く前に、画像に表示するすべてのテキストを計画します。

1. タイトル： 最大 5 語。3 語を推奨します。
2. ボックスラベル： それぞれ最大 3 語。1～2 語を推奨します。
3. 注釈： それぞれ最大 4 語。
4. 総語数： 30 語未満を目標にします。絶対上限は 50 語です。

スペルミス対策：

• 8 文字を超える単語をすべて確認し、短くします
• 可能な場合は単語の代わりにアイコンを使います
• 略語を使います（API、AI、DB、CLI）
• 冠詞や前置詞を削除します

ステップ 4：プロンプトを作成する

次の構成を厳守してプロンプトを作成します。

[STYLE PREFIX]

STYLE REFERENCE: Match the visual style of the reference image exactly -- same font, same shapes, same colors, same level of polish.

Diagram concept: [TITLE -- max 5 words]

Layout: [TEMPLATE NAME] -- [brief spatial description]

Elements (left to right / top to bottom):
1. [Element name] -- [color] fill, [icon if any], label: "[EXACT TEXT]"
2. [Element name] -- [color] fill, [icon if any], label: "[EXACT TEXT]"
3. ...

Connections:
- Arrow from [1] to [2], label: "[TEXT or none]"
- Arrow from [2] to [3]
...

Title at top center, bold and large: "[EXACT TITLE TEXT]"

ルール：

• 空間上の位置を明示します（「左側」「上部中央」「右下」）
• 塗りつぶす要素すべてに、パレットから特定の色を割り当てます
• すべての要素と、その正確なラベルテキストを明記します
• 接続や矢印の方向を説明します

ステップ 5：意味に応じて色を割り当てる

• フロー： 青（入力）→ 黄色（処理）→ 緑（出力）
• 比較： コーラル（旧／悪い／遅い）対 緑（新／良い／速い）
• ハブ＆スポーク： 中心は青、スポークには複数の色を使用
• 階層： 青（上）→ 黄色（中）→ 緑（下）
• リスト／グリッド： 行ごとに色を交互に使います

色の選択をモデルに任せないでください。必ず指定します。

ステップ 6：画像を生成する

必ずスタイル参照画像を含めてください。 視覚的な一貫性を保つために必須です。

node scripts/excalidraw-visuals/generate-visual.js "<FULL_PROMPT>" "projects/excalidraw-visuals/[YYYY-MM-DD]-[slug].png" "[ASPECT_RATIO]"

--input を使って参照画像の URL を渡せます。

node scripts/excalidraw-visuals/generate-visual.js "<FULL_PROMPT>" "projects/excalidraw-visuals/[YYYY-MM-DD]-[slug].png" "[ASPECT_RATIO]" --input "https://example.com/reference.png"

アスペクト比：16:9（デフォルト）、1:1、4:5

注： fal.ai の Flux Schnell モデル（無料枠）を使用します。プロンプトのスタイルプレフィックスにより、参照画像がなくても一貫した Excalidraw の美しさを実現できます。

ステップ 7：結果を提示する

• プレビュー用のファイルパスを示します
• ビジュアルの内容を 1 行で要約します
• 調整が必要かどうか尋ねます

調整が必要な場合は、図に固有の部分のみ変更します。スタイルプレフィックスは変更しないでください。

---

ファイルの場所

項目	パス
スタイルガイド	.claude/skills/excalidraw-visuals/style-guide.md
スクリプト	scripts/excalidraw-visuals/generate-visual.js
出力先	projects/excalidraw-visuals/
API キー	.env (FAL_KEY)

注意事項

• fal.ai Flux Schnell モデルを使用します（無料プランでは画像1枚あたり約5秒）。
• スタイルのプレフィックスは固定です。リクエストごとに変更されるのは図の説明だけです。
• プロンプト内のスタイルのプレフィックスにより、一貫した Excalidraw の美しさが保たれます。
• 生成に失敗する場合は、.env の FAL_KEY を確認してください。
• 迷ったときは、言葉を減らしてアイコンを増やしてください。
• 代替手段として、Python ベースの生成には Social-Media-Agent-1.0/Videos/scripts/generate_fal.py を使用してください。