信息卡设计技能
把内容转成一张可读、可传、可保存的 HTML 信息卡。核心目标不是“做得花”，而是让图片本身就能完成信息传达：读者不点原文，也能抓住结论、数据和结构。
设计目标
- 让内容在手机上先可读，再好看。
- 让不同主题不仅换色，还真正换构图、节奏和气质。
- 让输出看起来像独立设计系统，不像模板拼接。
- 让所有视觉选择都能解释：为什么这么排、为什么这么密、为什么用这个主题。
先问再做
先分析内容，再给用户 1 个主推荐 + 2 个备选风格建议，不要一上来就生成 HTML。
问题收集优先级
当结果会明显受用户偏好影响时，先问清楚再生成。优先收集这些信息：
- 视觉倾向：更克制，还是更有张力
- 使用场景：阅读型、传播型，还是品牌型
- 平台偏好：微信、小红书、X，还是桌面展示
- 输出比例：竖版、正方形、横版，还是自动决定
- 约束条件：是否要保留品牌气质、是否有禁用风格、是否需要多栏
触发问答的规则
- 只要存在明显不确定性，就先问，不要猜。
- 只要用户偏好会改变主题、构图或节奏，就先问。
- 只要输入信息不足以稳定选主推荐，就先问。
- 只要问答能减少返工，就先问。
- 不要把问答理解成阻塞，而要理解成降低试错成本。
默认交互顺序
- 先判断内容类型、情绪强度、信息密度和传播场景。
- 先判断画布比例：
portrait、square、landscape或auto。 - 先给出 1 个主推荐 + 2 个备选风格，并说明每个候选为什么适合。
- 再询问 1-3 个会改变结果的关键问题，例如：
- 想要更克制还是更有张力 - 想要阅读型还是传播型 - 想要更适合手机连续阅读，还是更适合一屏看完 - 是否要保留某种品牌气质 - 是否有平台偏好，如微信、小红书、X
- 用户确认后，再进入 HTML 生成。
- 如果用户不回复、明确说“按你判断”、或场景已经足够明确，就按主推荐和默认比例直接生成。
什么时候可以直接生成
- 用户明确说“按你判断最好”
- 内容和目标平台已经非常明确
- 主题候选不会显著改变最终策略
风格建议格式
每次先给用户一个简短的推荐清单，至少包含：
- 画布比例建议
- 主推荐
- 备选一
- 备选二
- 适用理由
- 风险或取舍
- 默认分支：如果用户不选，则按主推荐继续
提问原则
- 问题要少，最多 3 个。
- 问题要短，避免让用户做复杂决策。
- 先问会改变结果的事，不问无关信息。
- 如果用户已经给出充分约束，就不要重复追问。
- 如果可以用用户输入直接决定主推荐，就不要为了“流程完整”额外发问。
Ask User Question Tool
- 在支持问答工具的运行环境里，优先用 ask user question tool 收集关键偏好，而不是在正文里写成长串追问。
- 这个工具只用于会影响最终结果的关键问题，不用于无关寒暄。
- 如果不需要追问，直接进入主推荐和默认直出。
默认直出规则
- 不要为了追求“多问显得专业”而增加问题。
- 不要在用户已经明确时重复推荐。
- 不要让确认步骤成为阻塞。
- 只要主推荐足够稳，就允许默认直出。
- 只要比例判断足够稳，就允许默认直出。
Canvas Strategy
画布比例不是装饰选项，而是和主题同级的决策变量。它的目标是减少无意义滚动，提高单屏信息效率。
支持 4 种模式：
auto：系统根据内容密度、场景和传播目标自动决定portrait：纵版，适合高密度、阅读型、手机连续阅读square：正方形，适合中低密度、传播型、一屏更完整landscape：横版，适合低密度、结论型、演示型摘要
不要把设备尺寸当成正式产品语言。iPad Pro、iPad mini 这类词只可作为内部参考，不作为正式交互选项。
比例决策表
| 内容条件 | 默认比例 | 何时切换 |
|---|---|---|
| 1 个核心观点 / 极少要点 | landscape | 如果平台明显偏社交封面，则切 square |
| 2-4 个要点 / 中低密度 | square | 如果更偏连续阅读，则切 portrait |
| 5+ 个要点 / 高密度 | portrait | 只有在用户明确要求时才考虑其他比例 |
| 多图表 / 多引用块 / 复杂结构 | portrait | 必要时分页，不优先压成横版 |
| 不明确 / 混合内容 | auto | 先看阅读目标，再决定 |
主题决策表
先把内容归类，再结合比例选主题。默认按下面的稳定映射走：
| 内容类型 | 默认比例 | 主推荐 | 备选一 | 备选二 | 关键确认点 |
|---|---|---|---|---|---|
| 长文摘要 / 观点复盘 | portrait | 纸感书页 | 文化档案 | 杂志封面 | 想要更耐读还是更传播 |
| 数据简报 / 对比分析 | portrait | 技术简报 | 档案卡片 | 文档扫描 | 更偏结论还是更偏清单 |
| 流程规范 / 操作说明 | portrait | 文档扫描 | 技术简报 | 档案卡片 | 需要多严谨、多像文档 |
| 强观点 / 品牌表达 | square | Noir Poster | Luxury Studio | 杂志封面 | 要更克制还是更有张力 |
| 社交传播 / 热点拆解 | square | Social Slice | Data Poster | Collage Board | 目标平台和传播强度 |
| 多观点集合 / 拼贴灵感 | square | Collage Board | Social Slice | 文化档案 | 要结构感还是要活跃感 |
| 不明确 / 混合内容 | auto | 纸感书页 | Social Slice | 文档扫描 | 用户更想读，还是更想发 |
决策收敛规则
- 内容类型清楚时，优先遵循主题决策表，不临场重想。
- 只有当内容和场景冲突时，才询问关键确认点。
- 如果用户给的是模糊请求，默认用更克制、更可读的主推荐。
- 如果用户明确说“发出去最好看”，偏向传播型主题。
- 如果用户明确说“先读懂”，偏向编辑型或精准型主题。
- 如果用户强调一屏看完或少滚动，优先考虑
square或landscape。 - 如果用户强调手机连续阅读或内容复杂，优先考虑
portrait。
默认原则
- 先忠实内容，再做视觉组织。
- 先抓核心结论，再决定是否加图。
- 先选主题家族，再落主题参数。
- 先保证可读性，再追求审美张力。
- 先把候选风格讲清楚，再进入生成。
- 先做原创系统，再允许风格变化。
输入判断
如果用户给的是 URL
先抓内容，再整理。按下面顺序处理：
| 来源 | 处理方式 |
|---|---|
arxiv.org/abs/ | 先尝试 HTML 版全文，再回退到 PDF |
x.com / twitter.com | 用 r.jina.ai 抓取 |
mp.weixin.qq.com | 如本地存在微信抓取脚本则优先使用 |
| 其他网页 | 先用 r.jina.ai，失败后再回退到 defuddle.md |
如果用户给的是纯文本
直接进入提炼阶段，不再抓取。
内容提炼规则
只保留“删掉就会损失信息”的内容
- 找文章的核心判断，而不是表面描述。
- 找具体数字、倍率、年份、金额、对比关系。
- 找因果链：A 导致 B，B 导致 C。
- 找反转点：最意外、最反直觉、最能转述的一句话。
- 控制在 4-6 个要点，超过就压缩。
标题规则
- 标题必须是结论，不是背景介绍。
- 标题优先用动词、数字、冲突、反差。
- 标题应该让人产生“为什么”的追问。
- 避免日记式、主题式、名词堆砌式标题。
金句规则
- 金句必须来自原文事实或原文句子。
- 不允许为了排版好看而捏造。
- 如果原文没有现成金句，可以重组表达，但不能改事实。
数据规则
- 所有数字必须忠实原文。
- 不混淆 ARR、月收入、估值、样本数等不同量纲。
- 不确定表述要保留“不确定”的语气，不要擅自绝对化。
主题选择
不要把风格理解成“换皮”，要把它理解成“信息组织方式的不同”。默认按下面逻辑选主题：
内容类型 → 情绪强度 → 信息密度 → 传播平台 → 主题家族 → 具体主题
主题家族
| 家族 | 设计目标 | 适合内容 |
|---|---|---|
| 编辑型 | 像一篇排版良好的文章 | 长文、观点、方法论、复盘 |
| 精准型 | 像一份清晰的工作文档 | 流程、清单、规范、对比、数据 |
| 电影型 | 像一张有场景感的海报 | 争议观点、强结论、品牌表达、情绪内容 |
| 表达型 | 像一张适合传播的社交卡 | 短观点、合集、拼贴、热点拆解 |
主题矩阵
| 主题 | 家族 | 核心气质 | 构图特征 | 推荐侧重点 |
|---|---|---|---|---|
| 纸感书页 | 编辑型 | 温和、安静、耐读 | 单栏、强留白、少装饰 | 强调耐读、节奏、纸感。 |
| 杂志封面 | 编辑型 | 精致、克制、适合传播 | 大标题、摘录、页脚编号 | 强调阅读与传播兼顾。 |
| 文化档案 | 编辑型 | 稳重、学术、结构清楚 | 分块、注释、引用层次 | 强调知识整理感。 |
| 文档扫描 | 精准型 | 可靠、工具化、可执行 | 标题层级 + 列表 + 注释 | 强调清晰、严谨、像文档。 |
| 技术简报 | 精准型 | 高效、理性、结论先行 | 数字主导、左右分区 | 强调结论速度和数据感。 |
| 档案卡片 | 精准型 | 事实感、可追溯 | 编号、条目、证据感 | 强调事实、来源、可追溯。 |
| Noir Poster | 电影型 | 冷、强、戏剧化 | 暗底、强对比、大留白 | 强调张力、戏剧感、压迫感。 |
| Luxury Studio | 电影型 | 高级、沉稳、场景感 | 大图、少字、空间压迫感 | 强调品牌感、克制、高级。 |
| 工业镜框 | 电影型 | 精密、技术、边界明确 | 框线、结构化网格、层次分明 | 强调技术感、结构感、边界。 |
| Social Slice | 表达型 | 快、准、适合转发 | Hook 强、信息钉少而准 | 强调传播效率和快速浏览。 |
| Collage Board | 表达型 | 活跃、碎片化、年轻 | 拼贴、多模块、节奏变化 | 强调拼贴感和内容活力。 |
| Data Poster | 表达型 | 数字驱动、传播力强 | 结论先行、数字大、辅助图形 | 强调数据视觉冲击。 |
主题切换规则
- 不是用户指定“好看一点”就切主题。
- 优先根据内容密度和传播场景切主题。
- 同一内容在不同主题下，应明显改变构图，而不只是改颜色。
- 如果主题之间没有明显差异，说明主题设计失败。
布局判断
先看内容密度，再决定比例，然后选模板：
| 密度 | 内容量 | 推荐比例 | 推荐模板 |
|---|---|---|---|
| 低密度 | 1 个核心观点 | landscape / square | 大字符主义 |
| 中密度 | 2-4 个要点 | square / portrait | 标准单栏 |
| 高密度 | 5+ 个要点 | portrait | 单栏列表 |
| 高密度且桌面展示 | 5+ 个要点 | portrait | 多栏网格，仅在明确需要时使用 |
生成流程
Step 1：提炼
输出以下内容：
- 主标题
- 副标题
- 4-6 个要点
- 1 句金句
- 来源信息
- 是否值得加图
Step 2：定主题
根据内容选择主题家族和具体主题。
Step 3：组织结构
确定使用哪种布局模板，以及是否要加 Mermaid 或内联 SVG。
Step 4：生成 HTML
生成完整 HTML 文件，确保：
- 字体加载正确
- 页面可直接打开
- 卡片内的内容符合主题参数
- 底部带保存按钮
Step 5：打开预览
生成后直接打开 HTML，让用户在浏览器中预览和保存。
图表规则
只有当图比纯文本能多传递信息时才加图。
| 内容特征 | 建议图形 |
|---|---|
| 因果链 | Mermaid 流程图 |
| 步骤流程 | Mermaid 流程图 |
| 概念关系 | Mermaid 关系图 |
| 视觉化更强的概念 | 内联 SVG |
| 纯观点或纯列表 | 不加图 |
图表必须放在标题之后、要点之前，作为结构总览，不要抢正文。
输出要求
- 文字必须忠实原文，不得虚构。
- 页面必须以手机阅读为先。
- 输出比例必须服务于内容密度，不得为了视觉新鲜感牺牲可读性。
- 卡片底部必须有一键保存 PNG 按钮。
- 高密度内容默认优先单栏列表，而不是挤成多栏。
- 主题之间必须真正正交，不能只是色板变化。
文件输出
HTML 保存位置
默认保存到：
/tmp/info-card-[关键词].html打开方式
open /tmp/info-card-[关键词].html导出目录
如果需要整理到下载目录，按这个结构：
~/Downloads/info-cards/[YYYYMMDD]-[来源]-[主题关键词]/质量门槛
任何输出在提交前都要过这 6 个检查：
- 内容是否忠实原文。
- 标题是否真的是结论。
- 主题是否真的改变了构图。
- 手机上是否可读。
- 是否过度装饰。
- 是否仍然像一个原创系统，而不是 fork。
默认判断
如果内容不明确，默认选择更克制、更可读的主题。 如果内容很强，优先让标题和结构承接张力，而不是用装饰去制造张力。 如果用户强调“传播”，优先考虑 Social Slice、杂志封面或 Data Poster。 如果用户强调“读起来舒服”，优先考虑纸感书页或文化档案。