Any2card

信息卡设计技能

把内容转成一张可读、可传、可保存的 HTML 信息卡。核心目标不是“做得花”，而是让图片本身就能完成信息传达：读者不点原文，也能抓住结论、数据和结构。

设计目标

• 让内容在手机上先可读，再好看。
• 让不同主题不仅换色，还真正换构图、节奏和气质。
• 让输出看起来像独立设计系统，不像模板拼接。
• 让所有视觉选择都能解释：为什么这么排、为什么这么密、为什么用这个主题。

先问再做

先分析内容，再给用户 1 个主推荐 + 2 个备选风格建议，不要一上来就生成 HTML。

问题收集优先级

当结果会明显受用户偏好影响时，先问清楚再生成。优先收集这些信息：

• 视觉倾向：更克制，还是更有张力
• 使用场景：阅读型、传播型，还是品牌型
• 平台偏好：微信、小红书、X，还是桌面展示
• 输出比例：竖版、正方形、横版，还是自动决定
• 约束条件：是否要保留品牌气质、是否有禁用风格、是否需要多栏

触发问答的规则

• 只要存在明显不确定性，就先问，不要猜。
• 只要用户偏好会改变主题、构图或节奏，就先问。
• 只要输入信息不足以稳定选主推荐，就先问。
• 只要问答能减少返工，就先问。
• 不要把问答理解成阻塞，而要理解成降低试错成本。

默认交互顺序

1. 先判断内容类型、情绪强度、信息密度和传播场景。 2. 先判断画布比例：portrait、square、landscape 或 auto。 3. 先给出 1 个主推荐 + 2 个备选风格，并说明每个候选为什么适合。 3. 再询问 1-3 个会改变结果的关键问题，例如：

• 想要更克制还是更有张力
• 想要阅读型还是传播型
• 想要更适合手机连续阅读，还是更适合一屏看完
• 是否要保留某种品牌气质
• 是否有平台偏好，如微信、小红书、X

4. 用户确认后，再进入 HTML 生成。 5. 如果用户不回复、明确说“按你判断”、或场景已经足够明确，就按主推荐和默认比例直接生成。

什么时候可以直接生成

• 用户明确说“按你判断最好”
• 内容和目标平台已经非常明确
• 主题候选不会显著改变最终策略

风格建议格式

每次先给用户一个简短的推荐清单，至少包含：

• 画布比例建议
• 主推荐
• 备选一
• 备选二
• 适用理由
• 风险或取舍
• 默认分支：如果用户不选，则按主推荐继续

提问原则

• 问题要少，最多 3 个。
• 问题要短，避免让用户做复杂决策。
• 先问会改变结果的事，不问无关信息。
• 如果用户已经给出充分约束，就不要重复追问。
• 如果可以用用户输入直接决定主推荐，就不要为了“流程完整”额外发问。

Ask User Question Tool

• 在支持问答工具的运行环境里，优先用 ask user question tool 收集关键偏好，而不是在正文里写成长串追问。
• 这个工具只用于会影响最终结果的关键问题，不用于无关寒暄。
• 如果不需要追问，直接进入主推荐和默认直出。

默认直出规则

• 不要为了追求“多问显得专业”而增加问题。
• 不要在用户已经明确时重复推荐。
• 不要让确认步骤成为阻塞。
• 只要主推荐足够稳，就允许默认直出。
• 只要比例判断足够稳，就允许默认直出。

Canvas Strategy

画布比例不是装饰选项，而是和主题同级的决策变量。它的目标是减少无意义滚动，提高单屏信息效率。

支持 4 种模式：

• auto：系统根据内容密度、场景和传播目标自动决定
• portrait：纵版，适合高密度、阅读型、手机连续阅读
• square：正方形，适合中低密度、传播型、一屏更完整
• landscape：横版，适合低密度、结论型、演示型摘要

不要把设备尺寸当成正式产品语言。iPad Pro、iPad mini 这类词只可作为内部参考，不作为正式交互选项。

比例决策表

主题决策表

先把内容归类，再结合比例选主题。默认按下面的稳定映射走：

决策收敛规则

• 内容类型清楚时，优先遵循主题决策表，不临场重想。
• 只有当内容和场景冲突时，才询问关键确认点。
• 如果用户给的是模糊请求，默认用更克制、更可读的主推荐。
• 如果用户明确说“发出去最好看”，偏向传播型主题。
• 如果用户明确说“先读懂”，偏向编辑型或精准型主题。
• 如果用户强调一屏看完或少滚动，优先考虑 square 或 landscape。
• 如果用户强调手机连续阅读或内容复杂，优先考虑 portrait。

默认原则

1. 先忠实内容，再做视觉组织。 2. 先抓核心结论，再决定是否加图。 3. 先选主题家族，再落主题参数。 4. 先保证可读性，再追求审美张力。 5. 先把候选风格讲清楚，再进入生成。 6. 先做原创系统，再允许风格变化。

输入判断

如果用户给的是 URL

先抓内容，再整理。按下面顺序处理：

如果用户给的是纯文本

直接进入提炼阶段，不再抓取。

内容提炼规则

只保留“删掉就会损失信息”的内容

• 找文章的核心判断，而不是表面描述。
• 找具体数字、倍率、年份、金额、对比关系。
• 找因果链：A 导致 B，B 导致 C。
• 找反转点：最意外、最反直觉、最能转述的一句话。
• 控制在 4-6 个要点，超过就压缩。

标题规则

• 标题必须是结论，不是背景介绍。
• 标题优先用动词、数字、冲突、反差。
• 标题应该让人产生“为什么”的追问。
• 避免日记式、主题式、名词堆砌式标题。

金句规则

• 金句必须来自原文事实或原文句子。
• 不允许为了排版好看而捏造。
• 如果原文没有现成金句，可以重组表达，但不能改事实。

数据规则

• 所有数字必须忠实原文。
• 不混淆 ARR、月收入、估值、样本数等不同量纲。
• 不确定表述要保留“不确定”的语气，不要擅自绝对化。

主题选择

不要把风格理解成“换皮”，要把它理解成“信息组织方式的不同”。默认按下面逻辑选主题：

内容类型 → 情绪强度 → 信息密度 → 传播平台 → 主题家族 → 具体主题

主题家族

主题矩阵

主题切换规则

• 不是用户指定“好看一点”就切主题。
• 优先根据内容密度和传播场景切主题。
• 同一内容在不同主题下，应明显改变构图，而不只是改颜色。
• 如果主题之间没有明显差异，说明主题设计失败。

布局判断

先看内容密度，再决定比例，然后选模板：

生成流程

Step 1：提炼

输出以下内容：

• 主标题
• 副标题
• 4-6 个要点
• 1 句金句
• 来源信息
• 是否值得加图

Step 2：定主题

根据内容选择主题家族和具体主题。

Step 3：组织结构

确定使用哪种布局模板，以及是否要加 Mermaid 或内联 SVG。

Step 4：生成 HTML

生成完整 HTML 文件，确保：

• 字体加载正确
• 页面可直接打开
• 卡片内的内容符合主题参数
• 底部带保存按钮

Step 5：打开预览

生成后直接打开 HTML，让用户在浏览器中预览和保存。

图表规则

只有当图比纯文本能多传递信息时才加图。

图表必须放在标题之后、要点之前，作为结构总览，不要抢正文。

输出要求

• 文字必须忠实原文，不得虚构。
• 页面必须以手机阅读为先。
• 输出比例必须服务于内容密度，不得为了视觉新鲜感牺牲可读性。
• 卡片底部必须有一键保存 PNG 按钮。
• 高密度内容默认优先单栏列表，而不是挤成多栏。
• 主题之间必须真正正交，不能只是色板变化。

文件输出

HTML 保存位置

默认保存到：

/tmp/info-card-[关键词].html

打开方式

open /tmp/info-card-[关键词].html

导出目录

如果需要整理到下载目录，按这个结构：

~/Downloads/info-cards/[YYYYMMDD]-[来源]-[主题关键词]/

质量门槛

任何输出在提交前都要过这 6 个检查：

1. 内容是否忠实原文。 2. 标题是否真的是结论。 3. 主题是否真的改变了构图。 4. 手机上是否可读。 5. 是否过度装饰。 6. 是否仍然像一个原创系统，而不是 fork。

默认判断

如果内容不明确，默认选择更克制、更可读的主题。 如果内容很强，优先让标题和结构承接张力，而不是用装饰去制造张力。 如果用户强调“传播”，优先考虑 Social Slice、杂志封面或 Data Poster。 如果用户强调“读起来舒服”，优先考虑纸感书页或文化档案。

any2card

把任意文本、文章链接或线程内容，转成一张可以直接发布的 HTML 信息卡。 它的目标不是“做漂亮图片”，而是让卡片本身完成信息传达：先可读，再有审美，再适合传播。

安装

通过 npx 安装或同步最新 skill：

npx skills add https://github.com/geekjourneyx/any2card

快速开始

1. 准备一段文本或一个 URL。 2. 先看 skill 给出的主推荐、备选和取舍，再确认偏好。 3. 让 skill 提炼核心观点、数字和结构。 4. 选择合适主题家族与模板。 5. 打开生成的 HTML，在浏览器中保存为 PNG。

这能做什么

• 抓取网页、论文、社交线程或纯文本内容。
• 提炼主标题、副标题、要点、金句和来源。
• 根据内容密度自动选择合适布局。
• 生成可直接在浏览器打开的 HTML 卡片。
• 内置一键保存 PNG 按钮，方便导出分享图。

设计目标

这个 skill 不是单纯的排版工具，而是一套原创主题系统。 它的目标是让同一份内容在不同主题下呈现出不同的构图、节奏和气质，而不是只换颜色。

目标线

主题家族

使用流程

1. 输入 URL 或纯文本。 2. 系统先给出画布比例建议，再给出 1 个主推荐 + 2 个备选，并说明取舍。 3. 用户确认特殊要求，例如克制 / 张力 / 传播 / 阅读。 4. 系统提炼核心观点、数字和因果链。 5. 自动判断是否值得加图。 6. 选择合适主题家族和模板。 7. 生成 HTML。 8. 在浏览器打开并保存为 PNG。

输入示例

把这篇文章做成信息卡
https://x.com/...
把这段内容整理成适合小红书的卡片

内容提炼原则

• 标题必须是结论，不是背景说明。
• 只保留会影响理解的内容。
• 4-6 个要点通常是上限。
• 数字必须忠实原文，不能改量纲。
• 金句必须来自原文或基于原文重组，不得虚构。

布局判断

什么时候加图

只在图比纯文本多传递信息时加图：

• 因果链清晰时，用 Mermaid 流程图。
• 有步骤流程时，用 Mermaid 流程图。
• 概念关系清晰时，用 Mermaid 关系图。
• 抽象但适合视觉表达时，用内联 SVG。
• 纯观点、纯列表、纯金句时，不加图。

输出规范

• 默认输出 HTML 到 /tmp/info-card-[关键词].html
• 页面必须内置保存 PNG 按钮
• 默认以手机阅读为先
• 默认支持 auto、portrait、square、landscape 四种画布比例
• 高密度内容优先单栏，不为了桌面感牺牲可读性
• 所有主题必须真正改变构图，不只是改颜色

文档结构

• SKILL.md：生成规则与主题决策
• references/design-spec.md：视觉规范与模板库
• assets/：本地字体资源

阅读顺序

如果你只想快速上手，按这个顺序看：

1. 安装 2. 快速开始 3. 主题家族 4. 使用流程 5. 内容提炼原则 6. 输出规范

设计原则

这个项目吸收了几类成熟设计逻辑：

• 像 Claude 一样重视纸感、阅读节奏和温暖的内容气质。
• 像 Vercel 一样重视精确、留白和边界。
• 像 Notion 一样重视内容优先和结构清晰。
• 像 BMW、Ferrari 一样重视场景感、对比和张力。
• 像 taste-skill 一样严格拒绝 AI 常见的平庸模板。

对齐标准

这些仓库是本项目的设计参照：

• qiaomu-info-card-designer：致谢原始灵感来源，项目在其信息卡输出思路基础上重写了主题系统、文档结构与设计规范。
• awesome-design-md：提供品牌级设计语言样本，重点吸收气质、留白、层级与边界感。
• taste-skill：提供设计工程约束，重点吸收反 slop、字体纪律、布局变体和动效边界。

落点对应关系：

• 纸感与阅读节奏 → Claude / Notion
• 精确边界与 shadow-as-border → Vercel
• 场景感与戏剧性 → BMW / Ferrari
• 反泛化与强约束 → taste-skill

约束

• 不允许虚构内容。
• 不允许只改颜色不改结构。
• 不允许主题之间没有明显差异。
• 不允许让手机阅读变差来换视觉效果。
• 不允许文档像 fork 的二次转述。

进一步说明

如果你要改主题、补模板或校准规范，优先改：

1. references/design-spec.md 2. SKILL.md 3. README.md

这三个文件必须互相一致，不能各说各话。

信息卡设计规范

这份文档是信息卡生成的唯一视觉真相源。它的职责不是解释“为什么好看”，而是定义“怎样才算合格、怎样才算原创、怎样才算可读”。

1. 设计总则

设计目标

• 先把内容说清楚，再让它更有审美。
• 让卡片在手机上直接成立，不依赖用户二次解释。
• 让不同主题真正正交，而不是换色皮肤。
• 让最终输出看起来像独立设计系统，而不是模板集合。

交互前置

• 先分析内容，再给出 1 个主推荐 + 2 个备选。
• 先判断画布比例：auto、portrait、square、landscape。
• 风格建议必须说明适用场景、核心气质和取舍。
• 先让用户确认特殊要求，再进入 HTML 生成。
• 当内容和场景足够明确时，可以直接推荐默认最优主题，但仍要先说明理由。
• 提问只问会改变结果的事，最多 3 个问题。

决策映射

画布比例规则

• portrait：高密度、阅读型、复杂结构优先。
• square：中低密度、传播型、一屏更完整优先。
• landscape：低密度、单一结论、摘要展示优先。
• auto：根据内容密度、平台和阅读目标自动决定。
• 不要把 iPad Pro、iPad mini 这类设备名作为正式产品语言。
• 比例选择目标是减少滚动债务，而不是增加尺寸玩具。

不可变规则

1. 内容必须忠实原文，不得编造。 2. 任何视觉装饰都不能损害可读性。 3. 卡片必须能被浏览器直接打开。 4. 卡片必须内置保存 PNG 按钮。 5. 高密度内容默认优先单栏，避免挤压。 6. 主题之间必须改变结构、节奏和气质，不能只改颜色。

2. 字体系统

本项目只使用本地字体文件，避免远程字体在截图时失效。

字体来源

• TsangerJinKai02-W04.ttf
• NotoSerifSC-Regular.ttf

字体分工

字体加载写法

<style>
@font-face {
  font-family: 'TsangerJinKai';
  src: url('file://<skill-install-dir>/assets/TsangerJinKai02-W04.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'NotoSerifSC';
  src: url('file://<skill-install-dir>/assets/NotoSerifSC-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
</style>

3. 基础排版

字号标准（600px 基础宽度）

排版原则

• 标题要有结论感，不要像文章目录。
• 正文字数越多，结构越单栏、越克制。
• 标签只负责标识，不负责装饰。
• 数字要单独被识别出来，尤其是统计、对比、等级和时间。
• 行高优先服务阅读，不优先服务“松弛感”。
• 比例越宽，信息量越要克制，避免横版里塞进长文。

4. 基础色板

中性底板

文字色

主题色建议

配色原则

• 一个主题只保留一个主 accent。
• accent 的作用是建立秩序和焦点，不是到处撒。
• 不要用高饱和霓虹色做默认方案。
• 深色卡片必须提前校准对比度，不能靠 opacity 混过去。
• 同一张卡中不要混太多冷暖灰。

5. 主题家族

家族一：编辑型

关键词：阅读、温度、秩序、纸感。

适合：

• 长文摘要
• 观点文章
• 方法论拆解
• 复盘和思考

审美特征：

• 留白多
• 结构轻
• 标题像书页标题
• 辅助装饰少

家族二：精准型

关键词：工具、结构、数字、效率。

适合：

• 流程
• 对比
• 数据简报
• 规范和清单

审美特征：

• 结构严谨
• 数字明显
• 版式紧凑但不拥挤
• 信息层次非常明确

家族三：电影型

关键词：张力、场景、对比、戏剧性。

适合：

• 强观点
• 品牌表达
• 争议话题
• 叙事型内容

审美特征：

• 明暗对比强
• 大留白或大压迫感
• 视觉焦点明确
• 更像海报而不是文稿

家族四：表达型

关键词：传播、拼贴、节奏、社交感。

适合：

• 小红书 / X / 朋友圈转发
• 话题拆解
• 多观点集合
• 事件速览

审美特征：

• Hook 强
• 模块分明
• 节奏变化明显
• 允许更活泼，但不能乱

6. 主题矩阵

主题参数表

每个主题都必须明确这些参数，不能只给名字：

主题切换规则

• 不允许主题只变 accent。
• 不允许主题只变背景。
• 不允许不同主题共享同一种骨架再假装有差异。
• 如果同一内容在两个主题里看起来只是“同模板不同皮肤”，则主题设计不合格。

7. 卡片密度与模板

密度判断

模板 A：大字符主义

适用于单一观点、金句、极少要点。

结构：

• 顶部可选标签
• 中央大标题
• 底部补充说明
• 最后是来源

特征：

• 标题占据视觉主导
• 正文尽量少
• 非常适合短结论

模板 B：标准单栏

适用于 2-4 个要点的摘要内容。

结构：

• 标题
• 一条分隔线或短 accent
• 要点段落
• 引用块
• 页脚

特征：

• 更像精修过的摘要页
• 信息层次清晰
• 适合公众号、笔记和文章摘要

模板 C：多栏网格

只在桌面展示或用户明确要求时使用。

结构：

• 左右分区或二栏/三栏网格
• 每栏负责一个局部主题

特征：

• 适合复杂信息
• 不适合手机默认展示
• 必须谨慎控制每栏字数

模板 D：单栏列表

高密度内容的默认模板。

结构：

• 标题
• 分隔线
• 单列要点列表
• 可选引用块
• 页脚

特征：

• 手机最稳
• 适合 5+ 要点
• 依靠留白和分组，而不是多栏挤压

8. 视觉组件

标题

• 标题必须结论化。
• 不能只是背景陈述。
• 不能空泛。

分隔线

• 分隔线要少而准。
• 优先使用短 accent 或全宽分隔，不要线条泛滥。

引用块

• 引用块用来承接金句，不是装饰。
• 视觉上必须弱于主标题，强于普通正文。

编号和标签

• 编号用来建立序列感。
• 标签用来建立分类感。
• 不要让标签抢主信息。

数字

• 数据型主题中，数字必须成为视觉锚点。
• 数字比文字更大、更稳、更直观。

9. 图表规则

什么时候加图

图表位置

• 放在标题和副标题下方。
• 放在要点列表上方。
• 图的职责是概览，不是抢戏。

Mermaid 约束

• 只用固定 hex。
• 不用 CSS 变量直接喂给 Mermaid。
• 节点文字要短。
• 深色卡片和浅色卡片要分别校准配色。

10. 响应式规则

600px 默认宽度

这是默认手机优先方案。适合大多数社交平台和聊天窗口截图。

800px 桌面方案

当用户明确说桌面、博客、PPT、iPad、宽一点时，切到 800px。

移动端底线

• 正文不低于 18px。
• 标签不低于 14px。
• 不要为了紧凑把正文压得太小。
• 多栏布局必须在移动端折叠为单栏。

11. 保存按钮与导出

每张卡都必须内置保存 PNG 按钮，按钮放在卡片外部，不要被截图进去。

一键保存按钮

<div id="save-bar" style="position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 999;">
  <button id="save-btn" onclick="saveCard()" style="
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 15px;
    letter-spacing: 0.06em;
    cursor: pointer;
  ">保存为 PNG</button>
</div>

保存逻辑

• 使用 html2canvas。
• 截图前隐藏保存按钮。
• 保存完成后恢复按钮。
• 文件名要与内容关键词相关。

12. 代码结构建议

生成 HTML 时建议保持以下结构：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=600">
  <style>
    /* 字体、变量、基础卡片、主题色 */
  </style>
</head>
<body>
  <div class="card">
    <!-- 主题内容 -->
  </div>
  <!-- 保存按钮 -->
</body>
</html>

13. 质量检查

生成前检查

• 内容是否忠实原文。
• 标题是否是结论。
• 是否已经判断密度。
• 是否应该加图。
• 是否需要切换到更适合的主题家族。

生成后检查

• 手机上是否可读。
• 主题之间是否真的不同。
• 卡片是否像独立设计系统。
• 是否还有 fork 痕迹。
• 是否有过度装饰。

14. 设计判断优先级

当规则冲突时，按这个顺序决策：

1. 内容忠实 2. 可读性 3. 结构清晰 4. 主题辨识度 5. 审美完成度 6. 装饰细节

如果一项视觉选择会伤害前四项中的任意一项，就不要做。