op7418/归藏社交卡片技能

归藏社交卡片技能 は何をしますか？

为小红书/Rednote、微信公众号、文章封面和平台缩略图创建精美的社交卡片包。

此技能是独立的。它借鉴了归藏PPT风格系统的视觉原则，但不得编辑原始PPT技能、其模板或其引用。如果原始PPT技能可用，你可以仅作为参考阅读。

生成的工作必须放在任务文件夹内，而不是技能根目录。默认使用此仓库内的 local-tests/<slug>/ 路径，或使用用户指定的显式输出文件夹。不要在根级别创建诸如 social-card-*、livephoto-*、wechat-*、output/ 的文件夹，也不要在 SKILL.md 旁边放置松散的渲染资源。

要生成的内容

使用此技能来生成：

• 社交卡片/轮播图片集：封面加内容页，特别是小红书/Rednote的3:4比例。
• 短实况照片动感卡片：当用户要求“Live Photo/实况照片”并提供视频证据或屏幕录制时。
• 以素材为先的实况照片拼图布局：当用户拥有高质量视频素材，并希望制作单视频、二宫格、三宫格或四宫格动感卡片，且几乎没有或没有额外文字时。
• 三联实况拼图：当用户有三个短视频、三个结果、三个视角，或一个信息量高的对比，应保持在一个图片卡片单元内时。
• 长视频输入处理：诊断是否需要修剪、加速、拆分为三联拼图，或在渲染前询问用户具体时间范围。
• 微信公众号封面对：一个 21:9 主封面加一个 1:1 方形封面，组合在同一个HTML中以供视觉检查。
• 以截图为主的产品帖、文章封面、教程轮播、户外/生活方式笔记、AI/产品更新说明。
• 需要归藏风格瑞士或编辑杂志布局的社交图片。

不要使用此技能来生成：

• 完整的幻灯片或水平PPT网站。请使用PPT技能。
• 长视频生成。请使用视频技能。此技能仅支持受布局限制的短实况照片卡片，这些卡片将静态图片位置替换为视频。
• 无布局或文章提取要求的纯图像编辑。

小红书类别能力（能力圈）

11个最常见的小红书类别分为三个桶。请参阅 references/category-cookbook.md 以了解按配方路由的详细信息。

强端到端（文本、结构和图片故事均在范围内）：

• 旅行、职场、推荐（指定子类型后）。

文本和结构强；图片需用户提供或来自素材库：

• 游戏、影视、美食（食谱方向）、彩妆（教程方向）、健身、家居、穿搭（精选方向）。

超出范围——诚实地推回，而不是承诺无法实现的结果：

• 美食（菜品大片摆盘）。
• 穿搭（日常 OOTD 全身照；我们无法生成或模拟）。
• 情感（梦核/氛围感装饰风——与编辑和瑞士风格均冲突）。
• Y2K / 千禧辣妹 / 哥特萝莉 / kawaii 装饰美学。
• 纯摄影展示帖子，其中图片是唯一的交付物。

当请求落入第三个桶时，在接收时明确指出我们无法做到什么——不要默默使用一个不符合用户意图的布局。

核心原则

表达优先。目标不是将文本挤进海报，而是将来源内容转化为清晰的视觉论证。

对于每一页，决定：

• 观众一眼应理解什么？
• 哪个证据、截图或图片来支持它？
• 哪些字必须大，哪些可以变成标题或元数据？
• 哪些可以移除，因为它属于帖子正文，而不是图片？

必需参考文件

根据需要阅读以下文件：

• references/platform-specs.md：确切的比例、输出尺寸和命名规范。
• references/style-system.md：归藏编辑和瑞士视觉规则。
• references/theme-presets.md：选择电子杂志调色板或瑞士强调色调色板时使用。
• references/layout-recipes.md：选择轮播图/社交卡片/微信公众号页面结构时使用。
• references/components.md：共享组件规范：字体堆叠、字号比例、最小可读尺寸、中文字符串长度区间、瑞士卡片填充互斥规则、图片容器比例类、间距令牌和 Lucide 图标规则。
• references/background-systems.md：构建电子杂志 WebGL/墨水/纸张背景时使用。
• references/portrait-fill.md：将布局适配到3:4，避免垂直空间填充不足时使用。
• references/content-planning.md：封面钩子、页面分解和文案压缩。
• references/production-workflow.md：HTML/CSS 渲染和图片处理。
• references/live-photo-production.md：当用户要求 Live Photo / 实况照片 / 三联实况拼图，为社交卡片提供视频素材，或希望小红/微信动感卡片交付时使用。涵盖信息预算、单vs三联实况照片、长视频输入处理和平台发布提醒。
• references/image-overlay.md：只要文本覆盖在照片上时使用：照片资格判断、局部色调后备、通过多模态主体映射避免人脸/主体。
• references/screenshot-treatment.md：当用户提供应用/网页/代码/仪表板截图时使用——选择 .frame-shot 而非 .frame-img，设置圆角/阴影/背景/内边距，决定 .device-browser 或 .device-phone chrome。
• references/map-component.md：当内容具有空间关系（旅行路线、店铺位置、徒步旅行）时使用——实际路线默认使用 Mapbox 静态或 OSM 静态瓦片；仅概念性/说明性地图使用示意 SVG。大头针为 HTML 叠加层；切勿使用实时 JS 地图。
• references/title-shortener.md：当任务是微信公众号 21:9+1:1 封面对，或任何跨平台复用时使用——从长标题推导短标题（5步提取、4种模式、反模式、在 .poster.square 上的尺寸调整）。
• references/category-cookbook.md：将用户指定的小红书类别（旅行/职场/游戏/影视/彩妆/美食/穿搭/家居/健身/情感/推荐）路由到可应用的配方，并确认范围。
• references/qa-checklist.md：在交付最终图片前使用。

工作流程

1. 信息收集

仅收集缺失且会改变输出的信息：

• 目标平台和比例。

• 来源文本、字幕、文章或标题。

• 小红书类别——如果用户指定了11个常见类型之一（旅行/职场/游戏/影视/美食/彩妆/穿搭/家居/健身/情感/推荐），通过 references/category-cookbook.md 路由，找到正确的配方，并确认请求在能力圈内（参见上方“小红书类别能力”）。如果请求落在超出范围的桶中，在设计前向用户说明，不要默默使用不合适的布局。

• 提供的图片/截图及其应出现的位置。对于新闻/教程/数据/评论内容，主动提示用户提供截图或照片——它们是证据层。一张没有真实素材的海报往往会显得像填充内容。

• 如果用户要求 Live Photo，则提供视频素材。将用户提供的视频视为正常路径；网络来源的免费视频仅用于演示/推广案例或用户明确要求使用素材时。确认目标平台，因为持续时间不同：小红书支持 5s；微信公众号 Live Photo 应保持在 3s 且必须通过 iPhone 上传。在裁剪前，阅读 references/live-photo-production.md，并将请求分类为单Live Photo、三联拼图或长视频输入。如果来源太长或包含多个可用时刻，先进行低成本诊断，然后一次性询问是修剪、加速、拆分为多个部分，还是使用用户指定的时间范围。如果来源短于目标持续时间，询问是提供更长的片段、接受更短的Live Photo，还是明确允许暂停/减速。如果重要焦点模糊，提出可能的裁剪/放大选项，但在执行前让用户决定。

• 如果用户仅提供文本（完全没有图片），在设计前询问一次：

  这篇我需要 1-2 张图。三种走法：
  A. 你自己有照片 / 截图，传给我（推荐——最不“AI 感”）
  B. 我去 Pexels / Unsplash / Flickr 帮你找
  C. 用 AI 生成
  

  在一行中推荐选项A——你自己的照片是让海报看起来不像AI生成的关键。接受用户选择的任何选项（包括“都行你看着办”），然后继续。之后不要再次提示，不要在多次交互中反复推动选项A。 此问题只需问一次。

• 如果指定了首选风格：瑞士风格、杂志/编辑、科技、户外等。

• 硬性约束：标题文本、1:1封面上无图片、必须包含硬件照片、保持截图可读性等。

如果用户已经提供了足够的上下文，则进行合理假设。

如果内容涉及当前产品发布、政策、价格、声明或新闻，请通过浏览验证不稳定的信息，并在最终回复中注明来源。

2. 提取故事

在设计前将来源内容转化为页面计划。

对于小红书：

• 第1页是封面钩子。
• 第2页到第N页每页只传达一个想法。
• 大多数帖子使用5-9页。当底部区域变空时，压缩或合并页面。
• 将细微之处留在帖子正文中；图片应携带钩子、比较、清单和尖锐的要点。

对于微信：

• 始终生成配对系统：21:9 主封面和 1:1 方形封面。
• 在同一个HTML文件中构建两个封面，并添加组合预览部分，以便一起检查它们的视觉关系。
• 21:9 保留完整或接近完整的标题、副标题和一个强的视觉关系。
• 1:1 使用从长标题推导出的简化短标题：大号居中排版，默认无图片，不添加拥挤的副标题。

3. 选择风格模式

每个包选择一种模式。两种系统不绑定到特定内容类型——改变的是视觉立场，而不是你可以讨论的主题。职场文章可以是编辑风格；旅行账本可以是瑞士风格。根据你想要的感受来选择，而不是通过类别查找。

编辑杂志×电子墨水带来：

• 衬线/宋体显示字体+安静的无衬线正文字体，纸+墨色调色板。
• 在暖色纸张基底上的氛围层（纸张纹理/墨水渍/WebGL画布）。
• 账本行、旁注、拉引引用、大照片区域——杂志专题感。
• 最适合想让你感觉页面缓慢、经过深思熟虑、手工排版的时候。

瑞士国际风格带来：

• Inter/Helvetica 感觉，大尺寸时非常轻的显示字体，小尺寸时单色标签。
• 严格的左对齐网格、细线规则、一个高饱和度强调色。
• 卡片填充矩阵、KPI塔、水平条形图、编号陈述——系统/数据感。
• 最适合想让你感觉页面被工程化、量化、果断的时候。

如果两种风格对同一内容看起来都可行，问题在于编辑意图：“这是一个专题故事还是发布说明？”这决定了模式，而不是主题本身。

不要在同一图片集中混合两种视觉系统，除非用户明确要求混合。

然后选择一个主题：

• 编辑杂志×电子墨水使用6种杂志调色板之一：墨经典、靛蓝瓷器、森林墨水、牛皮纸、沙丘或午夜墨水（唯一的深色变体；保留用于游戏关键艺术/夜间摄影/电影封面）。
• 瑞士国际风格使用4种强调色调色板之一：IKB蓝、柠檬黄、柠檬绿或安全橙。

阅读 references/theme-presets.md 获取确切的CSS令牌。除非用户有严格的品牌要求，否则不要发明任意颜色。

4. 规划页面

创建一个简洁的内部计划：

第01页 / 封面 / 钩子 / 图片来源 / 布局意图
第02页 / 观点 / 关键文案 / 视觉证据 / 布局意图
...

当用户要求批准时，在渲染前显示此计划。否则，内部使用并继续。

使用 references/layout-recipes.md 选择页面结构。避免每页都是重复的标题加卡片布局。

对于3:4图片，在编码前查看 references/portrait-fill.md。短表格或账本必须扩展为完整的竖版构图，包含引用列、图片证据、旁注、更大的行或背景英雄区域。

面向受众的文案必须描述用户的实际场景，而不是制作方法。诸如 3s、5s、Live Photo、triple collage、information budget、long-video intake、speed-up、highlight detection、one action point 或 layout template 等内部术语可以指导规划、文件名、QA注释和交付摘要，但除非用户明确在制作关于这些概念的教学帖子，否则它们不得成为H1、钩子或正文章案。 在渲染前，像真实观众一样阅读每个可见标题一次：如果它听起来像一个任务要求，用场景特定的文案替换它。

不要仅仅为了满足自动化密度警告而添加非模板装饰。额外的标尺、侧边栏、伪时间轴、装饰标签或虚构的徽章必须来自现有的布局配方或用户请求。如果出现密度警告，通过选择更好的配方、调整真实内容的大小，或接受带有视觉理由的建议性警告来修复；不要在卡片上放置无意义的UI。

对于Live Photo卡片，先像普通社交卡片一样规划，然后决定动态角色：一个动作点、一个小过程、一个前后变化、三个平行结果，或氛围/证据。唯一的结构变化是一个或多个图片区域变为视频区域。保持相同的比例、裁剪、安全区域、排版和风格模式规则；将静态图片裁剪逻辑应用于视频流。第一帧必须通过与静态图片相同的检查：没有过度裁剪、关键UI/内容保持可读，且卡片仍遵循所选的布局配方。在渲染前阅读 references/live-photo-production.md。

对于以素材为先的Live Photo拼图卡片，让视频素材主导。使用很少或没有文案：从视频中提取一个关键帧作为封面，并让动感本身传达信息。在规划阶段，明确每个动态卡片传达一个主要动作或对比。避免设置多个并行动作，因为这会让卡片显得杂乱。确保视频内容本身在关键帧中突出，而不是依赖文本。

5. 渲染

所有渲染通过 references/production-workflow.md 完成。

• 在一个HTML文件中构建所有页面（封面+内容）。
• 对于微信群，在同一个HTML文件中构建21:9和1:1版本，并添加组合预览。
• 使用 <style> 标签。不使用外部CSS或JS。不使用npm。
• 图片和视频元素使用 <img> 和 <video> 标签，src 属性引用用户提供的相对路径。
• 字体：使用Google Fonts或系统字体。对于中文文本，优先使用Noto Sans SC/Noto Serif SC。
• 文件名：Page-01.png、Page-02.png等，或使用带有有意义序列的后缀。
• 输出格式：PNG用于静态卡片，MOV/MP4用于Live Photo，GIF用于预览。

6. 交付

在最终交付前运行 references/qa-checklist.md。

• 验证比例和尺寸。
• 检查排版是否有冲突（过小/过密）。
• 确保证据（截图、照片）清晰且相关。
• 对于Live Photo，检查第一帧和动态是否满足信息预算。
• 将文件放置在正确的任务文件夹中。
• 提供简短的摘要，描述所采取的风格/布局决策。

额外的输入路线

来自用户消息

正常的输入是用户描述请求。使用上述工作流程。

来自文件

如果用户附加包含文本或指令的文件，请阅读并提取相关内容。

来自URL

如果用户提供URL（文章链接、新闻页面、产品页面），请抓取内容并提取可用的文本、标题和图片。

限制和边界

• 无水平布局： 社交卡片为竖版（3:4、9:16）或方形（1:1）设计。不要生成16:9或更大的水平幻灯片。
• 无长视频： Live Photo输出限制为短片段（小红书最多5秒，微信最多3秒）。不要尝试将完整长视频制作为Live Photo。
• 无AI生成的人脸/身体： 如果用户要求照片，优先使用用户提供的、素材库的或生成的图片。不要生成带有人脸或身体姿势的图片，除非用户明确要求。
• 无品牌违规： 除非用户属，否则不要使用徽标或商标。
• 无平台模仿： 不要复制Instagram或TikTok的UI。保持归藏风格的原生性。