social-carousel

社交轮播图技能

在一个深色舞台上制作一组 3 张的社交轮播图。每张都是 1080×1080 的电影感静帧——彼此组成系列，但单独来看也清晰易读。

工作流

1. 阅读当前的 DESIGN.md（已在上方注入）。为标题组合选择最醒目的衬线字体 token，为印章／计数器选择一个等宽字体 token。
2. 从需求简报中挑选主题和 3 条说明文字。将它们堆叠起来时，必须读作一个句子：（“继续前行。” → “奔向下一个目标。” → “展望未来。”，或“输入。” → “迭代。” → “发布。”）。
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 等宽字体印章。
   • 底部横条说明文字：描述想象中的画面的小号全大写等宽字体文字（“男人，向前行走——近景。”、“女人，迈步入镜。”、“女人，俯瞰城市。”）。
5. 编写单个 HTML 文档：
   • 从 <!doctype html> 到 </html>，CSS 内联。
   • 卡片通过 width: clamp(280px, 30vw, 380px) 设置尺寸，以便在大多数桌面屏幕上舒适地横向排下 3 张，并在宽度 < 1100px 时堆叠。
   • 在舞台、每张卡片和每个标题上添加 data-od-id。
6. 自检：
   • 三个标题组合起来应构成一个句子，并富有电影感。
   • 等宽字体仅用于字标索引、循环印章和底部说明文字。标题保持衬线字体。
   • 每个面板的配色各不相同——不能有两张以同一种色调为主。

输出约定

在 <artifact> 标签之间输出：

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

在作品前输出一个句子，之后不输出任何内容。