デザインツールを開くな：Mermaid記法とプロンプトだけで「映える図解」を自動生成する

TL;DR

• エンジニアはデザインツールの微調整に時間を使うべきではない
• Mermaid（論理図）と Nano Banana Pro（インフォグラフィック）の二段構えで自動化
• プロンプトをテンプレート化することで、誰でも 80 点の図解を量産できる

The Pain: エンジニアにはFigmaがつらい

「この記事、文字ばっかりで読みづらいから図解を入れて」 そう言われてFigmaやCanvaを開くものの、配置や配色の沼にハマり、気づけば30分。 私たちは「コード」は書けますが、「デザイン」は専門外です。

The Solution: Diagram as Code

コードで図を描くアプローチには2つの流派があります。

1. Logical Diagrams (Mermaid): フローチャートやシーケンス図など、論理構造を可視化する。

   graph TD
       A[Hard Problem] -->|Analysis| B(Solution)
       B --> C{Decision}
       C -->|Option 1| D[Result A]
       C -->|Option 2| E[Result B]
   

2. Infographics (Prompt -> Image): 要約や箇条書きを、一枚絵のグラフィックにする。

The Implementation: Nano Banana Pro Skill

本ブログでは後者（インフォグラフィック）の生成に、専用スキル nano-banana-pro を定義しています。

具体的なスキル定義

.agents/skills/nano-banana-pro/SKILL.md の中身です。

目的：X投稿用の図解を作る。
仕様：背景は白、余白広め、2〜3色、アイコンは最小限。
レイアウト：上にタイトル、中央に3つの箇条書きブロック、下に1行まとめ。

テンプレート:
タイトル：{タイトル}
要点：{主張}
根拠：{根拠1}/{根拠2}/{根拠3}
まとめ：{CTA}

このテンプレートを使うことで、エージェントは記事の内容から「図解すべきポイント」を自動抽出します。

ワークフロー例

1. エージェントが記事本文を解析。
2. 「3つの要点」を抽出。
3. 上記テンプレートに当てはめてプロンプトを出力。
4. 人間が画像生成AI（DALL-E 3やMidjourney、または社内ツール）に投げる。

近い将来、4番目のステップもMCP（Tool）経由で自動化されるでしょう。

The Takeaway: デザインの標準化

「センス」に頼ると品質がバラつきますが、「テンプレート（Prompt as Code）」に頼れば、誰がやっても80点の図解が量産できます。

次回は、さらに一歩進んで、Reactのコードから「動画」を生成する Remotion の世界へご案内します。

References

• マルチモーダル・ブログ戦略の全容
• ビデオ自動化：Remotion スキルの活用
• AIエージェントに「仕様書」を厳守させる SDD (Spec Driven Development)
• プロンプトを「スキル」として資産化する技術
• 図解自動化：nano-banana-pro スキルの構成詳細