ノート

CSSインフォグラフィック・レンダラー・プロンプト

フリーのプロンプト百科事典 Wikiprompt より

Gadgetify

2026年8月24日

CSSインフォグラフィック・レンダラー・プロンプト CSS駆動のプロンプトで、AIに任意のトピックについてフラットデザインのインフォグラフィックポスターを生成するよう指示し、AIが推測したデータとイラストを用いたグリッドレイアウトを使用します。

関連メディア

プロンプト内容保存

🌐
16:9、AIが驚くべきトピックを選定: /* SYSTEM: WEB-UIインフォグラフィックレンダラー */ /* TARGET_TOPIC: "[TOPIC]" */ .treemap-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; gap: 0px; /* フラッシュレイアウト */ border: 3px solid black; } .data-card { border: 2px solid black; padding: 20px; box-shadow: none; /* 厳密にフラット */ } /* AI推論エンジン:グリッドを埋める */ .data-card-1 { grid-column: span 2; grid-row: span 2; background-color: <color hex="FF6B6B"/>; /* コーラル */ content: "AI_INFER(巨大な40%テキスト + [TOPIC]の最大セクターの大規模フラットイラスト)"; } .data-card-2 { background-color: <color hex="4ECDC4"/>; /* ブルー */ content: "AI_INFER(中サイズ20%テキスト + フラットイラスト)"; } /* レンダリング実行:このCSSグリッドを完成したインフォグラフィックポスターとして視覚的にレンダリングする。残りのグリッドを、[TOPIC]に関するAI推論データとクリップアートを含む、より小さな異なる色のボックスで埋める。厳格な直線、フラットカラー、太字のセリフフォントを維持する。 */

ログインして完全なプロンプトを表示

次で続行:

ログインすると、次に同意したことになります: 利用規約 と プライバシーポリシー

使い方

このプロンプトは creative 向けに設計されています。上の内容をコピーして、お好みの AI ツールに貼り付けてください。

最良の結果を得るには、プレースホルダー(角括弧や大文字で示された部分)を具体的な要件に置き換えてください。

参考資料

カテゴリ:creative| twitter| infographic| css-prompt

ノート