beautiful-feishu-whiteboard

美しい Feishu ホワイトボード

デザインシステムのスキルです。35 種類のカラーパレットスタイルに加え、Feishu の SVG ホワイトボードの検証済み厳格なルールを備えているため、ブランドイメージに合った美しく、_編集可能な_ホワイトボードを作成できます。

これは自動レイアウトの図表ジェネレーターではありません。レイアウトは自分で構成します。テンプレートが提供するのはカラーパレットと雰囲気です。ホワイトボード形式の厳格な制限は RULES.md をご確認ください。作成されるボードはスクリーンショットではなく、ドキュメント内にある実際に編集可能な Feishu ホワイトボードです。

使用する場面

• 見栄えやブランドイメージ、特定の美的スタイルにこだわった Feishu／Lark ホワイトボード、インフォグラフィック、図表、ポスター、ビジュアル解説をユーザーが求めている場合。
• ユーザーがスタイルを指定する、またはテンプレートのいずれかを示している場合。
• ユーザーがコンテンツ（「X をホワイトボードで説明して」「これをボードにして」など）を提示し、Feishu 内で視覚的かつ編集可能な形にしたいと求めている場合。

ステップ 0：前提条件（作業を始める前に確認）

scripts/preflight.sh を実行するか、手動で次の項目を確認します。

• Node 20 以降。
• lark-cli（npm パッケージ @larksuite/cli）がインストールされ、認証済みであること。見つからない場合は、npm install -g @larksuite/cli を実行し、続けて lark-cli config init（QR コードをスキャン）、その後 lark-cli auth login を実行します。
• @larksuite/whiteboard-cli。npx 経由で使用し、自動でダウンロードされるため、インストールは不要です。
• Feishu／Lark アカウント。ボードはユーザー自身のテナントに書き込まれます。

lark-cli が見つからない、または認証されていない場合は、インストール方法と認証方法を正確にユーザーに伝え、その時点で終了してください。これがないとボードを書き込めません。

会話の進め方

1. ボードの内容を把握します。 ユーザーがボードに載せたいもの（内容、目的、対象読者）を確認します。不明な場合は、作成に取りかかる前に短い質問を1つします。
2. 雰囲気を確認します。 たとえば、遊び心のあるスタイルか、プロフェッショナルなスタイルか、希望する色や雰囲気、合わせたいブランドなど、希望するビジュアルスタイルをユーザーに尋ねます。特に希望がなければこちらで選べることを伝えます。すでにスタイルが指定されている場合は、次に進みます。
3. スタイルを選びます。 CATALOG.md を使って、内容の種類と希望する雰囲気・フォーマルさに合った35種類のスタイルから選びます。カタログには各スタイルの配色の特徴が記載されているため、カタログだけを見て選んでください。比較のために複数の design.md ファイルを開かないでください。選んだスタイルとその理由を、1行でユーザーに伝えます。
4. 作成します。 RULES.md と、選んだもののうち1つだけの templates/<slug>/design.md を読み、次の手順に従います。
   • 配色に沿って、論理的な空間で幅を約1600〜1700としたSVGを作成します。図形は標準の図形のみ（rect、角丸のrect、circle、ellipse、コネクター、text）を使います。最も読みやすいレイアウトにします。ラベルはすべて <text> にし、font-family は設定しないでください。
   • ボードに載せるのは内容だけです。背後にある指示は載せません。 ユーザーのプロンプト、範囲に関する注記、出典、選んだスタイル名、「概要…／来源…／风格…」のようなメタ情報の行をキャンバスに表示しないでください。宿題の表紙のように見えてしまいます。こうした文脈はチャットでの返信に記載します（RULES.md の「ユーザーの指示をそのまま載せない」ルールを参照）。
   • レンダリングして画像を確認し、問題を修正します。 テキストのはみ出し、余白やパディングの不足、端に触れる数字、意図しない重なり、クリッピングを修正します。レンダリング、確認、修正を、問題がなくなるまで繰り返します（コマンドと完全なチェックリストは RULES.md にあります）。修正時は、.svg ファイルをその場で小さく的を絞って編集します（ボックスを移動する、パネルを広げる、ラベルを折り返すなど）。各回でSVG全体を作り直さないでください。また、確認時に見つけた修正点は、1件ずつレンダリングするのではなく、まとめて1回の編集で反映してから再レンダリングします。
   • Feishu ドキュメントに編集可能なホワイトボードとして書き込み、ライブボードの画像も確認して、残っているレイアウトの問題を修正します。
5. 納品します。 ユーザーに両方を渡します。Feishu ドキュメントのリンクと、ドキュメントを開かなくても確認できるレンダリング済み画像です。さらに、いつでも別のスタイルに切り替えられ、新しい配色で同じ内容を再レンダリングできることを伝えます。

ファイル

• RULES.md：必須ルールと、作成、書き込み、検証に使う正確なコマンドです。必ず読みます。
• CATALOG.md：各スタイルの雰囲気、フォーマルさ、適した用途が記載されています。スタイル選びに使います。
• templates/<slug>/design.md：スタイルごとのファイルです。配色とその使い方が記載されています。
• scripts/preflight.sh：依存関係と認証の確認に使います。