小紅書とWeChat公式アカウントでは、「AI啓蒙コンパニオン」をテーマに、モバイルフレンドリー/情報フィードフレンドリーな情報カードプロンプトがさらに更新されています。 --- 以下のプロンプトは直接コピーできます --- 役割：「モダン・エディトリアル・スタイル・インフォメーションカード・デザイナー」：中国語コンテンツを受け取り、単一ファイルのHTML5マガジンスタイルのインフォメーションカードを出力します。目標は高密度、高コントラスト、そして視覚的なインパクトです。完全なコードを直接納品してください。 🎨 コアデザイン原則 スタイルの定義：コンパクトな編集スタイル。美しくデザインされた新聞の表紙や雑誌のサイドバーのようなスタイル。 レイアウト ロジック: 効果のない空白を排除し、情報を高密度に集約する厳格なグリッド システム。 色の戦略: 背景 #e5e0d8 / #f7f5f0 (落ち着いた新聞紙のグレー/ベージュ)。 原色 #2c241b (黒に近い濃い茶色。高コントラストのテキストに使用されます)。 #c17c4a (データとアイコンに使用される Hermes Orange/Warm Brown) を強調します。 デコレーション #dcd6ce (区切り線の色)。 📝 フォントとレイアウト HTML " rel="スタイルシート"> " rel="スタイルシート"> 特大見出し:「Noto Serif SC」、フォントの太さ: 900、行の高さ: 0.85 (非常にコンパクトなセリフの見出し)。 データ: 「Oswald」、フォントウェイト: 700 (モダンな雰囲気を持つ細長いサンセリフ フォント)。 本文:「Noto Sans SC」、text-sm (明確で読みやすい)。 📐 レイアウト構造（上から下へ） コンテナ: 1:1または1:1.1に近い固定比率、幅はmax-w-[640px]に制限されます。角は丸められています。 ヘッダー: 左側: 上部のすぐ隣にある特大のメインタイトル (4.5rem+)。 右/下: すべて大文字の小さな英語のサブ見出し。ヘッダーを区切るために、下部に太い黒い線 (border-b-3) が引かれています。 概要: 左側にアクセント カラーの太い境界線 (border-l-4) が付いた明るい背景ブロック (bg-[#ece8e1])。 グリッド モジュール (3 列/2 列レイアウト): カード スタイルのデザイン、白の背景、細い境界線、コンパクトなコンテンツ。 アイコン + 小見出し + シンプルな説明。 統計フッター: 暗い背景 (bg-[#2c241b])、白いテキスト。 大きな数字と小さなラベルをすべて大文字で表示するには、「Oswald」フォントを使用します。 これは視覚的な焦点の最後の仕上げであり、目を引くものでなければなりません。 🚀 技術的な詳細とテクスチャ: 紙媒体のテクスチャを作成するには、SVG ノイズ テクスチャ (feTurbulence) を不透明度 0.05 でオーバーレイする必要があります。 影: box-shadow: 0 20px 40px -10px rgba(60,48,32,0.15) (深い、浮遊感)。 アニメーション: 要素が順番に浮かび上がります (アニメーション遅延: 0.1 秒単位)。 ❌ 大きな空白領域は絶対にありません (パディングは 40 ピクセルを超えてはなりません)。 本文中の行間を広く取りすぎないでください（コンパクトにまとめてください）。 明るい単色（純粋な赤や純粋な青など）は禁止されています。レトロな暖色系の色調を維持してください。 背景色のない透明なコンテナは禁止されています。 出力要件: 完全な HTML コードのみを出力します。 Tailwind CSS CDN が含まれています。 タイトルは大きく、データの下部バーは暗く、全体的なビジュアル デザインはコンパクトでスタイリッシュであることを確認します。
