social-carousel

ソーシャルカルーセルスキル

1 つの暗いステージ上に、3 パネルのソーシャルカルーセルを制作します。各パネルは 1080×1080 のシネマティックな静止画です。シリーズとしてつながりながらも、各パネル単体でも内容が伝わるようにします。

ワークフロー

1. アクティブな DESIGN.md を読みます（上に挿入されています）。見出しのロックアップには最も存在感のあるセリフ体トークンを、スタンプ／カウンターにはモノスペースのトークンを選びます。
2. ブリーフからテーマと 3 つのキャプションを選びます。 キャプションを続けて並べると、1 つの文として読める必要があります（「onwards.」→「to the next one.」→「looking ahead.」または「input.」→「iterate.」→「ship.」）。
3. ステージ — 全面を覆う暗いページ。上部のヘッダーストリップ：
   • 左：セリフ体のイタリック体ディスプレイ「Three posts. One beat.」
   • タイトルのすぐ下：控えめなモノスペースの 1 行説明（「1080×1080 · シネマティックなビデオループ · ミニマルなタイポグラフィ。Instagram、LinkedIn、 または X にそのまま投稿できます。各投稿は単独でも、3 部構成のシリーズとしても成立します。」）。
   • 右：小さなモノスペースのバッジ「SERIES · 01 → 03」。
4. カード — 横一列に並ぶ 3 つの正方形（狭いビューポートでは折り返して縦に並びます）。各カードは aspect-ratio: 1 / 1、角丸 12px、控えめな 1px の境界線、柔らかなドロップシャドウを適用します。
   • 背景：シネマティックな写真を想起させる、レイヤー状のグラデーション。例：パネル 1 = 暖かな夜明けの草原（緑の重なりにシアンの空の色合い）；パネル 2 = 森の夕暮れ（暖かなオレンジから深いティールへと移り変わる色）；パネル 3 = ピンク色の山稜（薄暗いバイオレットの空を背景にしたバラ色の頂）。radial-gradient と linear-gradient のみを使い、画像は使用しません。
   • 左上のチップ：セリフ体のイタリック体のブランドワードマーク（「Jerrod Lew」）と小さなアクセントドット。
   • チップの下、左上：極小のモノスペースインデックス「AI · 01 / 03」（同様に 02、03）。
   • 左下：白いセリフ体ディスプレイによる見出しのロックアップ。1 語をイタリック体のアクセントにします。
   • 右下隅：細い境界線の中にモノスペースのスタンプ 1× LOOP。
   • 下部のストリップキャプション：想定するフレームを説明する小さな大文字のモノスペーステキスト（「男が前へ歩く — クローズアップ。」「女性がフレームに踏み込む。」「女性が街を見渡す。」）。
5. 作成 — 単一の HTML ドキュメントを記述します：
   • <!doctype html> から </html> まで。CSS はインラインにします。
   • カードのサイズは width: clamp(280px, 30vw, 380px) で指定します。ほとんどのデスクトップでは 3 枚が無理なく横に並び、1100px 未満では縦に並びます。
   • ステージ、各カード、各見出しに data-od-id を指定します。
6. セルフチェック：
   • 3 つの見出しを続けると 1 つの文になり、シネマティックな印象になっていること。
   • モノスペースを使うのは、ワードマークのインデックス、ループスタンプ、下部のキャプションのみです。見出しにはセリフ体を使います。
   • 各パネルの配色はそれぞれ異なり、支配的な色相が重複していないこと。

出力仕様

<artifact> タグの間に出力します：

<artifact identifier="carousel-slug" type="text/html" title="Carousel — Title">
<!doctype html>
<html>...</html>
</artifact>

アーティファクトの前に 1 文だけ記述し、その後には何も記述しません。