grafisify/carouso

carouso 是做什么的？

目的

分两个阶段制作轮播帖子。第一阶段与用户锁定设计系统：品牌令牌加布局模式库。第二阶段根据这些模式组成每个轮播：为每张幻灯片挑选模式、撰写文案、放置图片，通过质量门进行渲染。

锁定令牌。释放组合。这就是让每个轮播保持品牌风格而不显模板化的方法。

使用模板（默认路径）

templates/ 目录中预装了六个现成模板。每个模板都有锁定的外观（颜色、字体、明暗令牌）加上幻灯片骨架，因此无需上手过程。预览画廊在 README.md 中。

触发词：“模板 3”、“模板 no 3”、“pakai template 3”、“使用模板 2 来做...”，或者模板名称（“晨间咖啡”）。根据编号或名称匹配 templates/NN-slug/template.json 文件。

每个模板的文件：tokens.css（外观）、template.json（名称、字体、尺寸、带有模式和模式的幻灯片序列）、sample.html（用于复制的完成示例轮播）。

1. 解析模板。 读取 templates/NN-slug/template.json。如果用户没有指定编号也没有自定义系统存在，则从 template.json 文件中列出每个模板（编号、名称、风格）并询问选择哪个。未知编号也同样列出列表。
2. 收集简报。 一次性在一个消息中询问所有缺失的内容：主题和角度（必填）、品牌名称和 handle（用户拒绝时使用模板占位符）、幻灯片数量（默认为序列长度，允许 5 到 10 张）、带有放置映射的图片（可选，见第 6 步）。轮播的语言跟随简报的语言。同时翻译标记中的所有固定字符串：“Myth”、“Fact”、“Save this”以及 NN / TT 页脚保持不变，单词变化。
3. 根据序列进行规划。 从模板 sequence 开始。保持封面第一张、结论最后一张，以及所列的每张幻灯片的模式。如需不同幻灯片数量，则按序列顺序删除或重复中间幻灯片，保持模式交替，且相邻两张幻灯片不使用相同图案。当内容更适合其他图案时，可交换中间图案（数字用stat-band或big-number，步骤用process-steps，单行用quote），并保持该幻灯片的模式。仅在提供了经过验证的封面图片时使用 cover-split。放置的图片应在幻灯片上作为一个 .photo 槽（见下文），或者当图片是重点时放在 image-hero 幻灯片上。在构建之前，以列表形式写出计划（幻灯片编号、图案、模式、一行内容）。
4. 根据以下文案标准撰写文案。 替换每一行样本。不允许保留任何样本主题内容。
5. 构建 HTML。 通过复制所选模板的 sample.html 创建 carousels/<slug>/index.html。仅将 tokens.css 链接更改为 ../../templates/NN-slug/tokens.css。fonts.css 和 system.css 链接已从该深度解析。根据计划保留或删除 <section> 块，从 design-system/patterns.html 复制添加的幻灯片图案块，根据计划应用 mode-dark 类，填写品牌、handle 和 NN / TT 计数器。
6. 图片 必须通过第二阶段第 4 步的严格关卡。将本地副本放入 carousels/<slug>/images/，并在 carousels/<slug>/provenance.log 中记录来源。
7. 使用模板的尺寸和字体 从 template.json 进行渲染：

python3 scripts/render_carousel.py --html carousels/<slug>/index.html --out carousels/<slug>/ \
    --width 1080 --height 1440 --slides <N> --check-fonts "<fonts from template.json, comma separated>"

修复 HTML 直到每个关卡都通过。绝不手动豁免任何关卡。 8. 最终视觉检查 同第二阶段第 7 步，然后交付 slide_01.jpg 到 slide_NN.jpg。模板不需要 last-used.json，因为模式来自模板。

字体已捆绑在 fonts/ 目录中，因此除了 Playwright 外无需安装任何东西。

需要自己的外观而不是六个模板的人可以使用下面的自定义路径。

自定义设计系统（可选路径）

仅当用户想要自己的外观，或发送了参考截图或 HTML 而不是选择模板时，才使用此路径。当没有选择模板且没有锁定的设计系统时，首先提供模板，并且仅当用户想要自定义时才运行以下上手流程。此路径运行时，不要开始设计。首先打开上手对话框。每次按此顺序只问一个问题，每个问题附带所列选项。随时接受自定义答案。七个问题，然后设计。如果用户发送截图或 HTML 参考而不是回答问题，则跳过对话框并进入第一阶段，选项 B。

1. 风格。 “轮播应该有什么氛围？”选项：俏皮友好 / 简洁极简 / 大胆抢眼 / 温暖优雅 / 暗黑高级。
2. 颜色。 “选择一种颜色情绪。”选项：温暖大地（棕色、奶油色、橙色）/ 清新自然（绿色、奶油色）/ 海洋宁静（蓝色、白色）/ 大胆对比（黑色、白色、一种强烈强调色）/ 柔和粉彩。
3. 字体。 “选择一种字体感觉。无需命名具体的字体。”选项：圆润俏皮 / 优雅衬线 / 大胆现代 / 干净简洁。内部映射，从不显示字体名称：圆润俏皮对应 Baloo 2 + Quicksand；优雅衬线对应 Playfair Display + Plus Jakarta Sans；大胆现代对应 Albert Sans + Plus Jakarta Sans；干净简洁对应 Plus Jakarta Sans + Quicksand。所有五个字体系列都捆绑在 fonts/ 中：从轮播 HTML 链接 fonts/fonts.css。
4. 品牌。 “水印的品牌名称和 handle？”自由文本，一个消息。示例：“晨间咖啡 / @morningcup”。
5. 主题。 “轮播通常关于什么？”自由文本，一行。这设定了文案语气和示例内容。
6. 语言。 “印尼语还是英语？”两个选项。这设定了所有固定字符串：引导行、CTA、页脚。
7. 系统名称。 “我们应该怎么称呼这个设计系统？”自由文本，一个消息。根据品牌和风格建议一个默认名称，例如“morningcup-playful”。名称很重要，因为用户可能保留多个系统并在每个轮播中选择一个。

在第七个答案之后，在一个简短的消息中总结锁定的选择，然后进入第一阶段。

第一阶段：锁定设计系统

有两种方式进入。选择一种。

A. 根据上手答案生成。 在 design-system/system.css 中设置 :root 令牌为品牌（颜色、字体、圆角）。用这些令牌渲染三个示例图案（一张封面、一张正文、一张结尾）并展示给用户。迭代直到获得批准。

B. 根据参考进行调整。 用户发送他们喜欢的轮播截图或 HTML 文件。研究它：颜色角色、字体缩放、间距节奏、重复元素。将所学内容编码为 :root 令牌，然后渲染示例图案。迭代直到获得批准。

批准关卡。 只有用户批准渲染的示例后，系统才能进入生产。以其系统名称保存（例如 design-systems/morningcup-playful/，包含 system.css、patterns.html 和 last-used.json）。要稍后构建另一个系统，再次从问题 1 开始运行上手对话框。

第二阶段：组合轮播

1. 收集简报

开始前确保这清楚。询问任何缺失的内容。不要猜测。

• 主题和角度，作为一个钩子句。
• 设计系统：使用哪个锁定的系统。默认为最近批准的。如果存在多个则询问。（在模板路径上，模板就是设计系统。）
• 幻灯片数量（默认 6-10）和尺寸（默认 1080x1440，system.css 渲染的尺寸；不同的高度需要相应的 .slide 高度覆盖）。
• 图片。对于每张图片：来源（上传文件路径、直接 URL 或文章 URL）、目标幻灯片以及角色（主图、分割或内联）。如果没有明确的放置映射，则不使用任何图片。

2. 规划构图

读取系统的 last-used.json 和 design-system/PATTERNS.md 中的图案目录。为每张幻灯片分配一个图案：

• 以封面图案开始，以结尾图案结束。
• 相邻的两张幻灯片不能共享同一图案。
• 同一品牌的上一个轮播的封面图案不能重复使用。
• 将图案与内容匹配：数字用 stat-band 或 big-number，序列用 process-steps，单行用 quote。不要强行将内容放入不合适的图案中。
• 在幻灯片之间交替两种模式：为幻灯片分配 mode-dark 或保持浅色，使得相邻两张幻灯片不共享同一模式。以上一个轮播第一张幻灯片的相反模式开始（读取 last-used.json）。一个轮播可能以浅色开头，下一个以暗色开头。让内容指导哪些幻灯片应该使用暗色：对比对（神话 vs 事实，问题 vs 解决方案）是自然的暗色幻灯片。 在构建任何东西之前，将计划写成一个简单的列表（幻灯片编号、图案名称、模式、一行内容）。

3. 撰写文案

每张幻灯片一个想法。标题保持在 8 个单词以下。正文每张幻灯片保持在 25 个单词以下。遵循以下文案标准。

4. 导入并验证图片（严格关卡）

1. 将每张图片下载或复制到本地 images/ 文件夹中。渲染期间绝不使用热链接。
2. 使用前查看每张图片。当内容与幻灯片主题不匹配、带有水印或外部标志、模糊，或用于大尺寸使用时最短边小于 900px，则拒绝。
3. 在 provenance.log 中记录来源（来源 URL 或上传文件名）。
4. 绝不使用生成式 AI 图像。此技能不生成任何图像，没有例外。

照片槽。 要向任何正文图案添加图片，将 <figure class="photo"><img src="images/<file>.jpg" alt="..."></figure> 放置为该幻灯片 .content 的最后一个子元素。它会按 16:10 缩放到内容宽度，并使用模板的圆角和颜色。在密集幻灯片（如 myth-fact 或 big-number）上使用 class="photo wide"（5:2）或 class="photo band"（3:1），使用 style="--focus:50% 40%" 设置裁剪点，如果需要带遮罩的说明文字，则添加 <figcaption>。对于两张照片，使用包含两个 <figure class="photo"> 的 <div class="photos">（正方形，并排，与 two-cards 相同的间距），或者在密集幻灯片上使用 class="photos short"（4:3）。对于主图样式幻灯片，将图片在顶部边缘到边缘放置：在 <section> 类中添加 photo-top，在其上添加 style="--bleed-h:600px"，并将 <figure class="photo-bleed"><img ...></figure> 作为第一个子元素。顶部栏在遮罩上变为白色，内容从图片下方开始。在密集幻灯片（myth-fact、big-number）上使用大约 --bleed-h:440px。选择一张顶部边缘平静的图片，因为顶部栏会覆盖在上面。检查幻灯片是否仍能通过溢出关卡，并在内容上下至少保留 40px 的空间。

5. 构建 HTML

从锁定的 system.css 开始（复制 <style> 内容或链接文件），并从 patterns.html 复制所选的 <section> 块。填充文案和图片槽。图片通过相对于 HTML 的本地路径引用。不要为每个轮播发明新的布局。当简报需要一种图案未涵盖的结构时，那属于第一阶段讨论，而不是第二阶段的即兴发挥。

6. 使用质量门进行渲染

运行 scripts/render_carousel.py：

python3 scripts/render_carousel.py --html <file.html> --out <dir-output> \
    --width 1080 --height 1440 --slides 6 \
    --check-fonts "Plus Jakarta Sans"

（根据简报和系统令牌调整宽度、高度、幻灯片数量和字体。） 当 .slide 数量与请求不符、内容溢出其区域、幻灯片边界框与请求尺寸不同、文本小于 20px，或检查的字体加载失败时，脚本将以退出码 1 退出。修复 HTML 并重新渲染直到通过。绝不手动豁免关卡。

7. 最终视觉检查并记录

打开幻灯片 1、一张中间幻灯片和最后一张幻灯片。确认显示字体已渲染、没有文本被裁剪、元素没有重叠、图片未变形且主题完整、品牌、handle 和 CTA 保持一致。然后更新系统的 last-used.json，包含此轮播的封面图案、完整图案序列以及每张幻灯片的模式（例如 {"cover": "cover-big-type", "sequence": ["cover-big-type", "two-cards", "takeaway"], "modes": ["light", "dark", "light"]}）。

设计思维

在每一步应用这种推理。这是让输出不至于读起来像 AI 套路的关键。

撰写文案前

• 用一句话命名幻灯片的单一想法。如果做不到，说明幻灯片还不存在。
• 先写标题，然后在不丢失含义的情况下削减到 8 个单词以下。
• 优先使用具体的名词和有力的动词，而不是形容词。说出时间、温度、数量。
• 回头读每一行。如果它可能属于任何品牌，那么为这个品牌重写。

放置元素前

• 首先决定阅读顺序：先看到什么，然后什么，再然后什么。尺寸和权重必须强制执行这个顺序。
• 每个元素的位置都需要一个理由。对齐到网格，或者有目的地打破它（仅限封面）。
• 将空白视为设计元素。当幻灯片感觉拥挤时，减少内容。绝不小字体低于最小值。

文案标准（反套路）

• 简短陈述句。每句一个想法。
• 没有破折号。没有“不仅是 X，还有 Y”的句式。没有强行三连。
• 没有填充式开头和 AI 词汇：“深入探讨”、“解锁”、“提升”、“织锦”、“颠覆者”、“在今天快节奏的世界里”。
• 主动语态。用简单的词：“使用”，而不是“利用”。
• 钩子使用三种模式之一：好奇心缺口、具体数字或直接称呼。
• 副标题做出承诺，而不是总结。它说出读者滑动后会得到什么。
• 标题中不要使用装饰性表情符号。不要使用标题大写。

布局基础

• 层级：标题是最大、最粗的元素。每个标题一个强调色单词或短语，不多于一个。
• 对比：照片上的文字应放在遮罩或半固体卡片上。绝不直接放在杂乱的图片上。
• 对齐：整个页面保持一致的内边距。默认左对齐；封面可以有意识地居中对齐。
• 排版：最多使用两种字体系列。每种字体都必须加载；渲染关卡会拒绝未加载的字体；用斜体或 @font-face 来源。
• 网格：关闭所有内容以实现对齐。3 栏网格用于多卡片幻灯片；4 栏用于密集数据。弹性行用于列表。连续对齐。
• 卡片：.card 区域必须倒圆角并填充，内边距统一。深色卡片反转颜色。多卡片布局保持相同的间距和高度。内部完全填充。
• 间距：小元素为 16px，卡片为 24px，部分之间为 32px。最后一张幻灯片除外，其底部外间距始终为 32px。