image-text-cardslisted

# 图文卡片设计 > ⚠️ **2026-08 已归档**:图文发布管线(`scripts/xiaohongshu/`、`image-text/`、yxer 发布)已删除。本 skill 仅保留卡片**设计规范**(卡片/正文分工、信息分层、对比驱动、去术语化、视觉规范),不再配套预览页/截图/发布脚本。需要实际出图时,用手工 HTML + 浏览器截图导出,图片放 `static/img/xhs-cards/`。 ## 何时用 - 把博客长文转成小红书/抖音图文笔记（多张卡片 + 正文）时 - 卡片可读性差、信息堆砌、术语太多，要重做时 - 新建 `image-text/<slug>/preview.html` 预览页时 ## 核心原则：卡片与正文职责不同，不能混 | | 卡片（图） | 正文（description） | |---|---|---| | **职责** | 秒级抓眼球，让人停下手指 | 深度展开，让人产生行动 | | **信息量** | 一张卡片**一个核心观点** | 完整说明、互动引导 | | **阅读方式** | 扫视（1-2 秒）| 精读 | | **文字占比** | 知识类文字占页面 **≥70%** | 不限 | | **字号层次** | 3-4 种字号，关键词最大 | emoji 分段 + 列表 | > 反模式：一张卡片塞 3 个观点（信息平铺，读者抓不住重点）；或正文写太短（没承接卡片的钩子）。 ## 卡片信息结构（四层，信息分层） 每张内容卡片按这个骨架组织（CSS 类名对应 `preview.html`）： 1. **核心观点 `.core`**（23-26px 加粗）：一句话讲清这步的核心。用 `<span class="strike">划掉错误做法</span>` + `<span class="accent">蓝色强调正确</span>` 强化对比。 2. **开场白 `.lead`**（13.5px）：用大白话讲清楚「这步在解决什么生活化的问题」。关键短语 `<b>` 加粗，具体例子用 `<span class="ex">` 灰底标。**这是承载「多展示信息」的关键层。** 3. **主体载体**（二选一）： - **对比块 `.compare`**：❌ 错误做法（红底）vs ✅ 正确做法（绿底），左右/上下排列 - **清单 `.details`**：编号列表，每条一句 + 大白话注解 4. **补充细节 `.details`**（13px 灰底 `·` 列表）：2-3 条额外信息（场景判断、降级方案、局限）。 ## 高传播手法（技术内容特有） ### 对比驱动 每个工程问题做成 `❌ 常见错误 vs ✅ 正确做法`。技术读者一眼懂且印象深刻——比抽象描述强 10 倍。 - ❌ 块讲「大家常踩的坑 + 后果」 - ✅ 块讲「正确做法 + 关键技术名」 ### 翻转卡（误解 vs 真相） 全文最高价值的认知翻转点（如「response_model=Pydantic 不是提示词约束」），单独做一张翻转卡： - 上半红底 `.flip-side.myth`：常见误解 - 下半蓝底 `.flip-side.truth`：实际情况 - 中间箭头连接 ### 代码片段当视觉锚点 状态机骨架那张配真实代码块（5 行核心 + 中文注释），Monokai 着色（`.k` 红 / `.n` 绿 / `.s` 黄 / `.c` 灰）。比箭头图直观，且证明「我有真实代码」提升可信度。