Back to Details

social-carousel

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Social Carousel Skill

Social Carousel Skill

Produce a 3-panel social carousel on a single dark stage. Each panel is a 1080×1080 cinematic still — connected as a series, but each readable on its own.
在深色背景上制作一个包含3个面板的社交媒体轮播图。每个面板都是1080×1080的电影风格静态画面——既作为系列内容相互关联，又能独立阅读。

Workflow

工作流程

  1. Read the active DESIGN.md (injected above). Pick the loudest serif token for the headline lockups and a mono token for stamps / counters.
  2. Pick the theme + 3 captions from the brief. The captions must read as one sentence when stacked: ("onwards." → "to the next one." → "looking ahead." or "input." → "iterate." → "ship.").
  3. Stage — full-bleed dark page. Top header strip:
    • Left: serif italic display "Three posts. One beat."
    • Just below the title: a one-line description in muted mono ("1080×1080 · cinematic video loops · minimal type. Drop into Instagram, LinkedIn, or X — each post stands on its own or runs as a three-part series.").
    • Right: small mono badge "SERIES · 01 → 03".
  4. Cards — 3 squares in a horizontal row (wraps to stack on narrow viewports). Each card is 
    aspect-ratio: 1 / 1
    with rounded 12px corners and a subtle 1px border, plus a soft drop shadow.
    • Background: a layered gradient that suggests a cinematic photo — for example, panel 1 = warm dawn meadow (stacked greens with a cyan sky wash); panel 2 = forest dusk (warm oranges fading into deep teals); panel 3 = pink-mountain ridge (rosy peaks against a dim violet sky). Use 
      radial-gradient
      + 
      linear-gradient
      only — no images.
    • Top-left chip: brand wordmark in serif italic ("Jerrod Lew") with a small accent dot.
    • Top-left below chip: micro mono index "AI · 01 / 03" (and 02, 03).
    • Bottom-left: the headline lockup in white serif display, italic accent on one word.
    • Bottom-right corner: a 
      1× LOOP
      mono stamp inside a thin border.
    • Bottom strip caption: small caps mono describing the imagined frame ("Man, walking forward — close.", "Woman, stepping into frame.", "Woman, overlooking the city.").
  5. Write a single HTML document: 
    • <!doctype html>
      through 
      </html>
      , CSS inline.
    • Cards are sized via 
      width: clamp(280px, 30vw, 380px)
      so 3 fit comfortably across most desktops and stack at < 1100px.
    • data-od-id
      on stage, each card, each headline.
  6. Self-check:
    • The three headlines together form one sentence and feel cinematic.
    • Mono is used only for the wordmark index, the loop stamp, and the bottom captions. The headlines stay serif.
    • Each panel's color story is distinct — no two share a dominant hue.
  1. 读取当前的DESIGN.md（已注入上方）。为标题排版选择最醒目的衬线字体标识，为印章/计数器选择等宽字体标识。
  2. 从需求中选择主题和3条说明文字。这些说明文字堆叠起来应能组成一个完整句子：（"onwards." → "to the next one." → "looking ahead." 或 "input." → "iterate." → "ship."）。
  3. 背景舞台——全屏深色页面。顶部标题栏：
    • 左侧：斜体衬线字体显示"Three posts. One beat."
    • 标题下方：一行低饱和度等宽字体的说明文字（"1080×1080 · cinematic video loops · minimal type. Drop into Instagram, LinkedIn, or X — each post stands on its own or runs as a three-part series."）。
    • 右侧：小型等宽字体徽章"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× LOOP
      等宽字体印章。
    • 底部栏说明文字：小型大写等宽字体，描述想象中的画面（"Man, walking forward — close.", "Woman, stepping into frame.", "Woman, overlooking the city."）。
  5. 编写单个HTML文档：
    • 包含
      <!doctype html>
      到
      </html>
      的完整结构，CSS内联。
    • 卡片通过
      width: clamp(280px, 30vw, 380px)
      设置尺寸，确保3张卡片在大多数桌面设备上能舒适排列，在宽度小于1100px时自动堆叠。
    • 在舞台、每张卡片、每个标题上添加
      data-od-id
      属性。
  6. 自我检查：
    • 三个标题组合起来构成一个完整句子，且具有电影质感。
    • 等宽字体仅用于品牌标识索引、循环印章和底部说明文字。标题始终使用衬线字体。
    • 每个面板的色彩风格独特——没有两个面板共享主导色调。

Output contract

输出约定

Emit between 
<artifact>
tags:
<artifact identifier="carousel-slug" type="text/html" title="Carousel — Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
将内容放在
<artifact>
标签内：
<artifact identifier="carousel-slug" type="text/html" title="Carousel — Title">
<!doctype html>
<html>...</html>
</artifact>
在artifact前写一句话，之后不添加任何内容。