OrRon/EpicInfographics

解決する課題

典型的なAI生成インフォグラフィックに見られる「AI製造」のルックを排除します。これは、汎用的なグリッド、ストックテンプレート、フラットなミニマリズムに依存することが多いですが、AIエージェントにプロフェッショナルなスタジオレベルの原則でデザインさせることで解決します。データが単にページ上に配置されるのではなく、シーンに視覚的に統合されることを保証し、チャートが数学的に正確で色覚多様性に対応していることを保証します。

仕組み

このプロジェクトは、AIエージェントがブリーフから最終画像に移行するために従う「スキル」（一連の指示と参照）を提供します。プロセスには以下が含まれます：

1. シーンベースのデザイン：ページの代わりに、エージェントはデータがシーン内に存在する「場所」（例：ブループリント、自然主義者のフォリオ、または暗い劇場）を作成します。
2. データ駆動のジオメトリ：視覚効果は目測ではなく、算術（例：ロケットの高さが特定のパーセンテージに対応）によって計算されます。
3. 技術パイプライン：エージェントが HTML/CSS を生成し、それがヘッドレス Chromium（Playwright 経由）と ffmpeg を使用して高解像度の PNG または MP4/GIF アニメーションにレンダリングされます。
4. 品質ゲート：必須のレンダリング・レビュー・修正ループがチェックリストを使用して、ダッシュボードテンプレートのように見えるデザインを不合格にします。プレフライトスクリプトはまた、テキストの衝突、クリッピング、読みやすさをチェックします。

対象者

標準的なAI出力の汎用的な美学を避け、高品質でプロフェッショナルグレードのインフォグラフィックとデータ可視化を必要とするAIエージェント（Claude Code、Codex、Factory Droid、Pi など）のユーザー。

ハイライト

• 多様なデザイン言語：ブループリント、ダークガラス、ナチュラリストプレート、アイソメトリックワールド、レトロプリントなどのスタイルの特定の仕様が含まれています。
• 決定論的アニメーション：ブラウザでフレームをスクラブすることにより、HTML/CSS アニメーションを動画に変換し、最終フレームが承認された静止画と一致することを保証します。
• 真実のジオメトリ：バーがゼロから始まり、面積が値に比例して正確にスケールすることを強制します。
• 自動化された検証：レイアウトエラーを防ぐための色覚多様性チェッカーとグリフジオメトリ測定が含まれています。