lanshu-animated-architecture-diagram

Lanshu アニメーション建築図

黒背景の洗練された手描き風技術図を作成します。次のものを含めてください。

• 編集可能な .excalidraw ソース
• 静止画の .png プレビュー
• 光る点が動き、モジュールのハイライトが脈動するアニメーション .gif

決定論的な出力には、同梱のレンダラーを使用してください。ユーザーが監査済みのアセットを明示的に提供した場合を除き、外部のアイコンライブラリは使用しないでください。

ワークフロー

1. 図の内容を抽出します。

   • 記事や長文の投稿の場合は、中核となるアーキテクチャ、関係者、段階、データフロー、意思決定、最終出力を特定します。
   • 参考画像の場合は、タイトル構成、パネル、矢印、情報密度、署名の配置など、視覚的な文法を維持します。

2. 仕様 JSON を作成します。

   • assets/default-spec.json をベースにします。
   • ラベルは短くしてください。フィールドの詳細や文言の長さに関する指針が必要な場合は、references/spec-format.md を読んでください。
   • 参考スタイルで英語のタイトルが明確に求められる場合を除き、説明ラベルにはユーザーの言語を使用します。

3. 出力をレンダリングします。

python /path/to/skill/scripts/render_animated_diagram.py \
  --spec /path/to/spec.json \
  --outdir /path/to/output-dir \
  --basename descriptive-name \
  --verify \
  --check

4. 納品前に検証します。

   • ffprobe で GIF の寸法、FPS、フレーム数、再生時間を確認します。
   • --verify の出力または --check を使い、GIF が静止画ではないことを確認します。
   • .excalidraw の JSON で ID が重複していないこと、テキストの fontFamily が 5 であること、files が空であることを確認します。--check はこれらの出力要件を自動的に検証します。
   • PNG プレビューを開いて目視で確認し、要素の重なり、窮屈なテキスト、階層の弱さがあれば修正します。

5. 3 つのファイルを納品します。

   • インターフェースがローカル画像に対応している場合は、GIF プレビューを表示します。
   • PNG と .excalidraw ソースへのリンクを掲載します。

スタイルルール

• 暗いキャンバスに、細い角丸の外枠を使用します。
• 強調するタイトルのフレーズを 1 つ、緑のカプセルに入れます。
• ユーザーから別の指示がない限り、作成者の署名は右上のブランド用スロットに配置します。
• メインの矢印には、すっきりとした白色を使用します。色付きの動きは GIF のオーバーレイだけに使用します。
• 静止図は控えめにします。ごちゃつかせず、アニメーションで動きを加えます。
• テキストは短くします。フレーズが収まらない場合は、読めなくなるまで縮小せず、書き換えてください。
• 組み込みのシンプルなアイコン folder、file、scan、shield、db、hash、package を使用します。

仕様作成のヒント

一般的なコンテンツを固定レイアウトに割り当てます。

• inputs：ソースシステム、トリガー、ドキュメント、ツール、ユーザー操作
• core.cards：プロセスの主な 3 つの段階
• decision：品質ゲートまたは準備状況の確認
• left_panel：メモリ／コンテキスト／ソース資料
• center_panel：内部レイヤー、安全策、アーカイブストア、パイプライン内部
• right_panel：パッケージ化された出力、再利用可能なアセット、生成レポート、エージェント向け成果物

段階が 3 つを超える場合は、隣接する手順を 3 つの中核カードにまとめ、詳細を下部パネルに移します。

検証コマンド

レンダリング後に、次のチェックを実行します。

ffprobe -v error -select_streams v:0 -count_frames \
  -show_entries stream=width,height,r_frame_rate,avg_frame_rate,nb_read_frames \
  -show_entries format=duration \
  -of default=noprint_wrappers=1 output.gif

python /path/to/skill/scripts/render_animated_diagram.py \
  --spec spec.json \
  --outdir outputs \
  --basename diagram \
  --verify \
  --check

--verify レポートでは、サンプリングした GIF フレーム間で、変化したピクセル数がゼロでないことを確認してください。 --check レポートは "ok": true を返す必要があります。要件に違反すると、ゼロ以外の終了コードを返します。