AI 技能媒体生成【免费下载链接】guizang-social-card-skill Claude Code / Codex skill — generate Xiaohongshu carousels WeChat 21:91:1 cover pairs. Editorial × Swiss visual systems, 28 layouts, 10 themes, single-file HTML → PNG. 小红书图文 公众号封面对项目地址https://gitcode.com/gh_mirrors/gu/guizang-social-card-skill点击查看免费下载本文是 guizang-social-card-skill 项目中references/image-overlay.md的完整技术解读与实践扩展。它适用于所有文字压在图片上的社交卡场景——全出血full-bleed封面、大图窗 标题栏、或 AI 生成图上叠字包括小红书 3:4 图文卡与微信公众号 21:9 1:1 封面组。读完本文你将掌握一套可落地的判定流程先用选片测试安静区测试 光线测试替掉蒙版思维再以局部、取色于图片的柔和着色作为兜底最后通过主体测绘subject map与object-position裁剪纪律确保文字永不压脸。为什么要有这两条规则构图能过 HTML 校验不代表可读一条关键前提贯穿全文一份排版可以通过 HTML linting仍然可能不可读。文本叠图的可读性问题属于视觉校验域而非代码校验域——CSS 语法全对、没有溢出不代表标题在小红书首页的缩略图尺寸下还能被一眼读清。因此references/image-overlay.md定义了必须在交付前全部通过的两条规则Rule 1 — 选片优先仅在选片失败时才加局部着色mask管理文字与图片的对比度Rule 2 — 文字远离主体 / 面部区域管理文字与图片内容的冲突。两者独立成立任何一张文字触图的海报都必须同时满足。仓库的交付检查references/qa-checklist.md 第 70-76 行也专门为文字触图类海报单列了一组检查项图片面积 ≥60% 画布时必须通过安静区 光线测试、先试无蒙版构图、任何着色都必须局部且取色于图片以及最终的 360px 缩略图测试。SKILL.md的 Text-On-Image Composition 一节SKILL.md 第 211-220 行在每次渲染流程中强制引用本指南并点名 Editorial 深色封面如游戏日志叠 key art与 Swiss 带 hero 照片的封面都必须执行这些检查——跳过它们是已知失败模式对应 references/style-system.md 中的 Anti-Pattern D底部单条蒙版 object-position: center top把脸推到顶部标题直接横切面部。Rule 1选片优先遮罩只在选片失败后兜底默认的编辑部杂志式editorial-magazine答案是不加蒙版。真实杂志封面Kinfolk、Cereal、Apartamento、Monocle 一类几乎不会在 hero 照片上铺一层均匀的黑色渐变它们靠选片 构图让文字自然落在安静区。如果找不到这样的照片答案是换照片而不是用一块 70% 黑度的遮罩去填缝。按顺序执行以下步骤停在第一个通过的那一步。Step 1 — 选片主杠杆在考虑蒙版之前先验证照片是否具备全出血full-bleed资格。两个测试必须同时通过安静区测试quiet-zone test照片中至少存在一条 ≥30% 画布的带状区域满宽 × ≥30% 高或满高 × ≥30% 宽且该区域为低细节 / 低对比 / 均匀。典型例虚焦背景、深阴影、雾、平静水面、纯色天空、模糊的草地。这块区域就是标题的落点。光线测试light test照片带有氛围感 / 克制的光线——阴天、晨雾、黄金时刻、林下光线、胶片柔和度、黄昏剪影。拒绝高饱和的正午直射、机顶闪光灯、游客打卡式自拍、通用图库式明快。只要有一个测试不过这张照片就不适合 M16。回退方案改用 M01分栏封面照片装进画框或重新拍摄 / 重新找图。不要用蒙版修。references/layout-recipes.md 第 344-351 行的 Photo qualification (gate before choosing M16) 与本文档完全一致两个测试都过才允许 M16全出血 hero 封面只过一个就试 M01一个都不过就向用户要另一张图或用 M01 配更小的.frame-img槽位。Step 2 — 先无蒙版构图把标题放进已合格的安静区内跑 Step 4 的缩略图对比度检查。如果读起来干净直接交付。大多数选片合格的 Editorial 照片在这一步就通过了。无蒙版封面传递的是工艺感重蒙版封面传递的是我们没找到合适的照片。每次都要先试 Step 2再伸手拿 Step 3。Step 3 — 局部、取色于图片的柔和着色仅兜底只有当 Step 2 的对比度检查失败时才启用。三条铁律局部不是整幅。只着色标题区域。用以标题块为圆心的radial-gradient或单侧linear-gradient并在标题之后渐隐到完全透明。永远不要用inset: 0配合统一 alpha 曲线盖满整张图。取色于图片不是黑色。从照片里取样一个深色作为着色颜色。森林 → 深苔藓#1a2818黄昏 → 玫瑰茶色#4a2638雪景 → 冷灰蓝#2a3438。纯黑#000读起来像批注图层而不是氛围纵深。柔和不是不透明。标题区域的峰值 alpha 0.15–0.30向外衰减到 0。如果透明度要超过 0.40 才能读清说明照片在 Step 1 就没过——回去重选。官方示例标题在左下角、取色于图片的柔和着色/* Example: title in lower-left, image-toned soft tint */ .hero-bleed::after { content: ; position: absolute; inset: 0; background: radial-gradient( 60% 45% at 25% 80%, /* centered on title block */ rgba(26, 40, 24, 0.28) 0%, /* forest moss tone, soft peak */ rgba(26, 40, 24, 0.0) 100%); pointer-events: none; }注意pointer-events: none是必须的——着色层只负责视觉绝不能拦截下方图片的交互。着色层推荐用伪元素::after挂在.hero-bleed上与图片容器解耦便于单独调整。Step 4 — 缩略图对比度检查每次必做无论是否加了着色渲染出 PNG在预览 / 浏览器标签中缩放到360px 宽直接看标题笔画必须不放大也能辨认如果标题看起来在跟照片打架→ 换照片或把标题移到另一个安静区而不是加强蒙版如果照片在均匀深色下发灰发死 → 蒙版太重或盖错了区域从 Step 1 重新开始。这一步与 references/qa-checklist.md 第 17 行的封面标题在手机缩略图尺寸下可读和第 76 行的360px 缩略图测试是同一条规则的两个落点。Banned这条 skill 明确禁止的做法整幅画布均匀纵向衰减早期版本 skill 用过的rgba(0,0,0,.55) → .10 → .10 → .80模式。那是游戏 key-art 的处理方式不是 Editorial。纯黑蒙版色。必须是取色于图片的颜色森林、黄昏、雪、墨蓝、棕褐。文字后面垫一块纯黑 / 纯白矩形——读起来像截图批注。用mix-blend-mode: difference提高可读性——毁肤色打印时也会出错。img { opacity: .6 }——直接杀死照片的层次而层次正是 full-bleed 的全部意义。还没认真试过 Step 1换更好的照片就直奔 Step 3。Rule 2把文字放在远离主体 / 面部区域的位置旅行 / 游戏 / 影视 / 穿搭 / 美食类海报经常用真实照片作 hero。照片里有主体——一张脸、一只手、一件商品、一座山峰。文字盖住主体读起来是涂鸦不是杂志。主体区域发现多模态优先在 hero 照片上设计标题位置之前先看这张图用 Read 工具打开用自然语言观察并记录主要主体的脸 / 焦点特征在哪里例如登山者的脸位于右上三分之一约 70% x / 30% y主体剪影的边缘在哪里例如左侧边缘结束于约 40% x再往左是天空最大的开阔 / 低细节区域在哪里例如左下象限是均匀的雾把答案以 HTML 注释的形式记录在 hero 块旁边!-- subject map (Wukong cover hero): face/skull centerpiece: 50% x 45% y, occupies ~30% of frame left-side staff weapons: 15-40% x, full height safe text zone: top band (0-15% y) and bottom band (65-100% y) --这就是版面使用的输入。它是确定性的、可复查的——每次生成都执行、以注释形式落盘、任何人包括后续的 Agent都能回溯验证。SKILL.md第 216 行也把主体测绘列为强制项放标题之前必须用 Read 工具读图、用自然语言描述主体位置、把 subject map 以注释写进 hero 块旁边。安全区放置规则拿到主体地图后按以下优先级放文字主体上方 下方顶部 kicker、底部标题。90% 的全出血封面都应该这么做。单侧——主体占据一个竖向列例如右侧竖幅人像文字填满对侧列。仅在需要时配合 Rule 1 Step 3 的侧向着色。对角角落——仅当主体位于一个角落、对角确实空旷时才用。很少见。永远不要让展示级标题横切面部。一个 90px 的中文标题穿过人的眼睛即使有蒙版也是破坏性的。构图纪律Editorial 观感这四条是把编辑感海报与普通图文区分开来的关键非对称放置。标题偏到一侧 / 一角比死板的居中更有自信。这是 Kinfolk / Cereal 的习惯。慷慨的留白。标题应只占画布≤40%。设计工作由照片和空旷安静区完成。标题只占一个安静区且只占一个。把标题拆到两个区顶部 底部可以接受拆成三个区或绕着主体环绕就会显乱。标题永远不与主体剪影重叠。如果唯一的安全放置必须横穿主体边缘就切换版面模式改为画框、双联图diptych、或把标题移出图片——不要放大蒙版。裁剪护栏Crop guards用object-position配合面部避让避脸规则也应该驱动object-position。如果主体在上三分之一就不要用object-position: center top——那会把脸推进标题带。原图中主体位置3:4 裁剪推荐object-position脸 / 焦点在上三分之一center 25%把脸抬高给底部留标题空间脸 / 焦点在中三分之一center center默认文字放顶部 底部脸 / 焦点在下三分之一center 70%把脸压低给顶部留标题空间宽幅风景、无单一主体center 35%轻微向上偏保留地平线竖幅人像、全身center top仓库源码可以佐证这条纪律的紧迫性assets/template-editorial-card.html 第 357-363 行的.frame-img img默认是object-fit: cover; object-position: center 50%seed 模板注释明确写着这是 fallback 而非推荐。references/components.md 第 158-169 行进一步给出了通用取值区间顶部 25-35%、居中 50%、中段 55-65%、低位 70-80%并警告默认center 50%会在高比画框r-3x4、r-21x9上静默裁掉主体交付包里的每一张照片都需要明确的object-position——哪怕结论是这里 50% 就够了。SKILL.md第 217 行也要求在每张img上内联写object-position例如中段主体center 62%、天多地平线主体center 30%、前景装备center 70%。r-21x9正是微信公众号主封面的比例微信头图缩略场景下主体被裁出画框的代价尤其大。当照片容不下文字时如果跑完主体地图发现没有宽度超过海报约 30% 的安全区主体填满画框例如紧凑人像不要硬改。选项把照片放进更小的画框使用版面中的.frame-img.r-3x4或.r-1x1——给照片一个明确槽位用留白和文字包围它双联图diptych一张紧凑主体 一张负空间图标题压在负空间图那侧把文字完全移出图片——标题在上、照片在下。亚丁Yading封面已经在这么做。一张需要占满画布的照片不是文字该跟它打架的信号而是文字应该坐在别处的信号。仓库中的配套实现M16 全出血封面的四种落位模式references/image-overlay.md的规则在 references/layout-recipes.md 的M16 Image-Led CoverFull-Bleed Hero配方第 336-487 行中被完整实例化可直接对照使用。M16 明确要求 Rule 1 的 Step 1-4 全部通过第一道门选片最难大多数照片会挂在它上面。它按 subject map 给出四种标题落位模式模式主体位置标题位置着色仅 Step 4 对比失败时A · 顶压底沉主体在中三分之一脸、峰、hero 物体顶部 底部开阔顶部kicker 0-12% y。底部1-2 行标题 72-92% y先试无着色。需要时仅底部 radial、取色于图片、标题块峰值 α ≤ 0.30B · 侧栏立柱主体占据一条干净的纵向列对侧安全区宽度 ≥40%。主体剪影不规则如树冠横向溢出时跳过 B改用 A 或 D对侧列约 36-40% 宽纵向堆叠kicker → 标题 → 副标题先试无着色。需要时单侧水平衰减radial-gradient(45% 60% at 18% 50%, …)、取色于图片C · 角落徽章主体几乎填满画面仅一个角落真正空旷空角落内的小块≤35% 宽 × ≤25% 高kicker / 短标题 / meta仅该角落轻微 vignette——绝不压暗整张图D · 下沉条带宽幅风景 / 氛围场景 / 无单一主体底部留白充足底部条带 78-92% y标题 meta 条左对齐或右对齐不居中先试无着色。需要时仅底部 radial、取色于图片、峰值 α 0.20-0.30M16 在 1080×1440Editorial × E-ink上的排版规范同样克制标题用 Noto Serif SC400-500 字重不是 700-900字号 88-108px中文标题字距 0.10-0.18em文本色用纸奶油色#f5f1e8不是纯白#fff细线用rgba(245, 241, 232, 0.35)。标题长度预算模式 A 最多 12-14 字 2 行、B 14 字 2 行、C 8 字 1 行、D 10 字 1 行——超了就删文案绝不把字号缩到 84px 以下。1:1 方封面只用模式 A 或 DB 的列挤压、C 的角落都太挤标题缩到 6-10 字21:9 宽封面优先 DA 的底部标题会和微信标题条竞争。配方里还直接给出了两条可复制的 HTML 骨架模式 A3:4、无蒙版把 hero 用background-image挂进绝对定位的.hero-bleed层subject map 写在 section 顶部注释里标题用 96px serif 500 字重沉底模式 D21:9 微信主封面用justify-content: flex-end把 108px 单行标题压到center 40%背景图的下方条带。两条骨架都坚持无蒙版默认并在注释中写明只有在 Step 4 失败后才加局部着色。交付前检查清单对每一张文字触图的海报执行对应 references/qa-checklist.md 第 70-76 行的text-on-photo专项与 references/image-overlay.md 末尾清单照片通过安静区测试≥30% 画布低细节条带且光线测试氛围光非高饱和正午。先尝试了无蒙版构图。只有在 Step 4 缩略图对比检查失败后才加着色。如果加了着色局部radial-gradient或单侧渐变、取色于图片非纯黑、峰值 alpha ≤ 0.30。不存在整幅画布纵向衰减linear-gradient(180deg, rgba(0,0,0,.X) → …)盖在inset:0上。subject map 已作为注释记录在 hero 块旁边。没有展示级标题≥72px压在脸 / 手 / 关键产品特征 / 主体剪影上。标题占画布 ≤40%优先非对称放置而非居中。object-position按上表选择人像照未停留在默认center top。缩略图测试通过缩到 360px 宽标题仍可无压力辨认。标题后面没有纯黑 / 纯白文字底板。任何一项失败都在导出最终 PNG 之前修复。不要先交付再说以后调整——社交卡的 QA 窗口就是上传的那一瞬间。与整个生产工作流的衔接这条规则不是孤立的美学偏好而是被写进了 skill 的强制工作流SKILL.md在选片阶段第 89 行起就主动引导用户提供照片/截图作为证据层并明确你自己有照片 / 截图是首选路径最不AI 感在第 6 步 Text-On-Image Composition 中把本指南的三条核心动作——选片优先、主体测绘强制、object-position内联 缩略图测试——逐条落实最后在交付前由 references/qa-checklist.md 兜底并可通过node validate-social-deck.mjs task-dir做自动校验溢出、页脚碰撞、最小字号等见 SKILL.md 第 196 行。整体闭环是选片 → 无蒙版构图 → 局部取色着色兜底 → 主体测绘 → 裁剪护栏 → 缩略图检查 → 交付前清单。任何一环失败就回退到上一步重做而不是用更重的蒙版硬撑。赞分享AI 技能媒体生成【免费下载链接】guizang-social-card-skill Claude Code / Codex skill — generate Xiaohongshu carousels WeChat 21:91:1 cover pairs. Editorial × Swiss visual systems, 28 layouts, 10 themes, single-file HTML → PNG. 小红书图文 公众号封面对项目地址https://gitcode.com/gh_mirrors/gu/guizang-social-card-skill点击查看免费下载相关推荐HTML Anything 小红书图文卡片模板card-xiaohongshu全解析SKILL.md 设计规范与生成实战HTML Anything 小红书图文卡片模板card xiaohongshu全解析SKILL.md 设计规范与生成实战 本篇技术指南围绕 HTML AnAI 应用人工智能AI AgentAI 写作媒体生成baoyu-xhs-images 小红书图片卡片的 fresh 清新自然风格元素组合、配色体系与布局搭配实战指南baoyu xhs images 小红书图片卡片的 fresh 清新自然风格元素组合、配色体系与布局搭配实战指南 清新自然的视觉风格在健康养生、极简生活、自我AI 技能AI 插件飞书文档微信公众号体裁规范lark-doc Skill 的 platform.wechat Genre Contract 全解析飞书文档微信公众号体裁规范lark doc Skill 的 platform.wechat Genre Contract 全解析 导读 本文讲解 lark cCLIAI 技能上一篇在 QMK Firmware 中构建 CannonKeys DB60 J-02硬件支持、布局定义与编译刷写指南下一篇bilibili-downloader 指南用本人 Cookie 下载 B站大会员 4K 视频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
