Social Carousel 技能指南

技能概述

Social Carousel 產生一個 3 面板社交輪播，放置在單一深色舞台上。每個面板係一個 1080×1080 嘅電影靜幀 —— 作為系列連接，但每個都可以獨立閱讀。

適用於簡報要求「carousel post」、「social carousel」、「Instagram carousel」、「LinkedIn series」、「X thread cards」或「三連發」嘅場景。

觸發關鍵字

• social carousel、carousel post、instagram carousel、linkedin carousel
• x thread cards、social series、三連發、轮播图

什麼時候用

• 需要社交媒體輪播帖子
• Instagram / LinkedIn / X 嘅系列內容
• 用戶要求「做一個三連發 carousel」、「Instagram carousel post」

使用方法

自然語言觸發

做一個 social carousel
三連發 Instagram 帖子
carousel post for LinkedIn

設計規則

舞台： 全屏深色頁面。頂部標題帶：

• 左側：serif italic 展示字「Three posts. One beat.」
• 下方：一行 muted mono 描述
• 右側：小 mono 徽章「SERIES · 01 → 03」

卡片： 3 個正方形水平排列（窄視口時堆疊）。每張卡片 aspect-ratio: 1 / 1，圓角 12px，微妙 1px 邊框 + 柔和陰影。

背景： 分層梯度暗示電影照片 —— 每張卡片有不同嘅色彩故事（暖黎明 / 森林黃昏 / 粉紅山脊）。僅用 radial-gradient + linear-gradient，無圖像。

卡片元素：

• 左上角：品牌 serif italic 字標 + 強調點
• 左上角下方：micro mono 索引「AI · 01 / 03」
• 左下角：白色 serif 展示標題，一個詞用 italic 強調
• 右下角：1× LOOP mono 印章
• 底部條：small caps mono 描述想像嘅幀

標題連接

三張卡片嘅標題連接成一個句子。例如：

• 「onwards.」 → 「to the next one.」 → 「looking ahead.」
• 「input.」 → 「iterate.」 → 「ship.」

自檢

• 三個標題連接成一個句子，有電影感
• Mono 僅用於字標索引、loop 印章同底部標題
• 每張卡片色彩故事不同 —— 無兩張共享主色調

輸出格式

單一 HTML 文檔，CSS inline。卡片 width: clamp(280px, 30vw, 380px)，桌面 3 個舒適排列，< 1100px 堆疊。data-od-id 標記舞台、每張卡片、每個標題。

實際例子

用戶：「Design a 3-card cinematic social carousel — 'onwards.', 'to the next one.', 'looking ahead.'. 1080×1080 squares, drop-into-Instagram ready.」

生成結果：

• Panel 1：暖黎明草地（綠色疊加 + 青色天空洗滌），標題「onwards.」
• Panel 2：森林黃昏（暖橙色漸變為深青色），標題「to the next one.」
• Panel 3：粉紅山脊（玫瑰色山峰對暗淡紫羅蘭色天空），標題「looking ahead.」

相關技能

• Social Media Dashboard
• Social Media Matrix Tracker