infocard

Infocard Generator

快速开始： 分析内容（密度 × 结构 × 情绪）→ 自动感知色调以选择配色方案 → 挑选布局骨架 → 在 Markdown 中直接嵌入 HTML，使用 <style scoped>。

关键规则

规则 1：直接嵌入 HTML

重要：在 Markdown 中直接编写信息卡片 HTML。切勿使用代码块（```html）。HTML 应直接嵌入文档中，无需任何围栏。

规则 2：HTML 结构中无空行

关键：不要在 HTML 信息卡片结构内添加任何空行。保持整个 HTML 块连续，以防止解析错误。

规则 3：布局前的内容分析

必需：在设计前从三个维度分析内容：

密度（决定呼吸节奏）：

密度	内容量	视觉处理
低	≤ 50 个核心词	"大字"构图。一个超大元素主导。大量留白。
中	50–200 词	主元素 + 辅助面板。2–3 个主要块，层次清晰。
高	200+ 词	不对称多列网格。主/次/辅助块。避免等重平铺。

结构（决定布局几何）：

结构	信号	布局模式
单点	一个核心概念	一个锚点元素主导，其余退后
对比	A vs B，旧 vs 新	分割面板，两极
层次	层层递进	堆叠模块，金字塔
流程	顺序步骤	垂直级联，编号项
辐射	核心 + 衍生	中心枢纽加周围面板
并行	多个同等概念	不对称网格（绝不等列）

情绪（决定色温）：

情绪	视觉感受
沉思	更多留白，衬线为主，低对比度
锐利	强对比，粗体，鲜艳强调色
温暖	大地色系，圆润感，柔和节奏
技术	等宽强调，网格状密度

规则 4：色调感知

必需：根据内容主题自动选择配色方案。扫描内容关键词并匹配最接近的色调：

内容色调	背景色	强调色	触发关键词
哲学	#FAF8F4	#7C6853	认知，思考，意义，哲学，本质
技术	#F5F7FA	#3D5A80	架构，算法，系统，API，代码
文学	#FBF9F1	#6B4E3D	故事，叙事，写作，诗歌，角色
科学	#F4F8F6	#2D6A4F	实验，数据，研究，论文，发现
商业	#F4F3F0	#2D6A4F	市场，战略，增长，金融，投资
创意	#F6F3F2	#B8432F	设计，艺术，美学，灵感，创作
默认	#FAFAF8	#4A4A4A	无明确匹配时——优先使用默认而非错误匹配

当明确选择了样式模板时，其颜色优先于色调感知。未指定样式时，默认使用色调感知。

规则 5：标题保护

如果用户明确提供了标题，则直接将其用作主标题。将编辑性解读放入副标题、摘要或侧边模块。不要静默重写用户的标题。

规则 6：排版层次

保持清晰的字体比例并一致使用：

• 主标题：32px–48px，字重 700–900，紧凑字间距（-0.02em）
• 副标题/摘要：16px–20px，字重 400–500
• 正文：14px–16px，字重 400，行高 1.6–1.7
• 元信息/标签/说明：11px–13px，字重 500–700，大写并带字间距
• 正文颜色：绝不用纯黑——使用 #1a1a1a、#333 或 #4a4a4a

规则 7：视觉重量分布

至少有一个模块在视觉上应比其他模块更重。避免每个面板使用完全相同的处理方式。通过比例、背景色调、排版重量或强调规则来区分。

规则 8：品味规则（反 AI 检查清单）

在最终确定任何卡片之前，对照这些常见的 AI 生成视觉模式进行检查：

布局：

• 无居中主元素——不要默认居中标题。优先左对齐或不对称
• 无等宽平铺——三个等宽并排列是 AI 的头号标志。使用 2fr 1fr、不对称网格或交错布局
• 无统一面板——至少一个面板在比例、重量或处理方式上有所不同

排版：

• 无纯黑 #000000——使用近黑（#1a1a1a、#2d2a26）或暖/冷深色
• 无仅靠字号放大的层次——通过字重和颜色构建层次，而不仅仅是字号缩放

颜色：

• 最多 1 种强调色，饱和度 < 80%
• 无霓虹渐变——无紫蓝 AI 光晕，无渐变填充标题
• 色温一致——不要在同一卡片中混合暖灰和冷灰

内容：

• 无填充数据——避免 99.99%、50%、1234567。使用自然数字（47.2%、3.8M）
• 无 AI 措辞——避免“赋能”、“无缝”、“释放”、“下一代”

间距：

• 内边距和外边距必须数学精确，无尴尬间隙
• 相邻元素必须视觉对齐

样式示例

首先选择一个视觉家族，然后在该家族内选择具体模板。这使库保持广泛，而无需每次扫描 29 种样式。

样式家族

温暖编辑与叙事

当卡片应呈现沉思、人性化、叙事或文化质感时使用。

样式	文件	适用场景
编辑温暖	styles/editorial-warm.md	知识摘要、读书笔记、散文、分析报告
客户聚焦	styles/customer-spotlight.md	客户故事、案例研究、成功回顾、品牌叙事、采用故事
日落温暖	styles/sunset-warm.md	社区回顾、活动笔记、生活方式摘要、积极叙事
世纪中期	styles/midcentury.md	品牌故事、复古现代活动、文化笔记、设计叙事

柔和生活方式与教学

当卡片应呈现平静、亲切、低压时使用。

样式	文件	适用场景
柔和中性	styles/soft-neutral.md	生活方式内容、健康、教育、温和品牌、创意工作坊
石板粉笔	styles/slate-chalk.md	教学内容、课程、概念解释、工作坊笔记
教育工作室	styles/education-studio.md	教学笔记、课程模块、学习摘要、工作坊指南

论文、研究与治理

当卡片应像备忘录、报告、简报或证据摘要时使用。

样式	文件	适用场景
论文极简	styles/paper-minimal.md	产品笔记、任务摘要、会议记录、简洁文档
实验室日志	styles/lab-journal.md	研究摘要、科学解释、医学内容、学术论文
学术论文	styles/academic-paper.md	研究摘要、论文摘要、文献综述、证据密集型解释
政策文件	styles/policy-paper.md	治理笔记、政策解释、法律相关摘要、内部规则
海军蓝正式	styles/navy-formal.md	投资者演示、高管简报、季度报告、企业提案
日式极简	styles/japanese-minimal.md	品牌叙事、文化笔记、安静的产品散文、反思性公告
临床简报	styles/clinical-brief.md	医疗摘要、医学笔记、患者教育、临床快照

商业、金融与信任

当卡片应呈现运营、高管或商业可信度时使用。

样式	文件	适用场景
企业清洁	styles/corporate-clean.md	产品发布、B2B 简报、高管摘要、正式报告、面向投资者的材料
Pitch Deck VC	styles/pitch-deck-vc.md	融资卡片、市场机会快照、初创公司进展摘要
销售室	styles/sales-room.md	管道审查、账户快照、交易策略笔记、收入简报
信任中心	styles/trust-center.md	安全笔记、合规摘要、审计更新、面向信任的报告
合作伙伴渠道	styles/partner-channel.md	合作伙伴简报、联盟更新、渠道活动、联合销售摘要

技术与运营

当精确性、系统语言或实现细节需要主导时使用。

样式	文件	适用场景
技术蓝图	styles/tech-blueprint.md	技术规格、系统设计文档、架构摘要、工程计划
工程白图	styles/engineering-whiteprint.md	架构笔记、API 简报、实施计划、技术白皮书
终端绿	styles/terminal-green.md	基础设施状态卡片、CLI 指南、事件笔记、复古计算主题

广播、声明与高对比度

当卡片应宣布、发出紧急信号或产生强烈视觉冲击时使用。

样式	文件	适用场景
粗体对比	styles/bold-contrast.md	数据亮点、KPI 仪表盘、活动公告
新闻广播	styles/news-broadcast.md	快讯更新、报告标注、媒体简报、公开声明
事件台	styles/incident-desk.md	事件审查、中断笔记、事后分析、可靠性更新
新粗野主义	styles/neo-brutalism.md	大胆活动卡片、宣言式摘要、初创公司发布、有力声明
瑞士网格	styles/swiss-grid.md	结构化编辑布局、设计前卫报告、排版声明

标志性视觉身份

当视觉身份本身是信息的一部分时使用。

样式	文件	适用场景
深夜	styles/deep-night.md	娱乐、创意展示、产品发布、游戏内容
玻璃态	styles/glassmorphism.md	高端产品展示、功能亮点、活动邀请、面向未来的展示

布局骨架

首先选择内容结构家族，然后选择具体线框。布局保持样式无关。

布局家族

核心单主题卡片

当一个论点应主导且辅助内容保持次要时使用。

布局	文件	最佳用途
主卡片	layouts/hero-card.md	单主题，包含标题 + 摘要 + 一个辅助面板
引用卡片	layouts/quote-card.md	拉引、使命宣言、带归属的主题演讲引用
分割面板	layouts/split-panel.md	两列布局：主要内容 + 侧边栏或左右对比
堆叠模块	layouts/stacked-modules.md	多节垂直流，混合重量块

指标与运营读数

当数字、状态或运营信号需要快速扫描时使用。

布局	文件	最佳用途
指标板	layouts/metric-board.md	KPI 卡片、性能仪表盘、季度审查、健康检查、指标驱动公告
财务快照	layouts/financial-snapshot.md	收入摘要、现金视图、性能快照、单位经济
销售简报	layouts/sales-brief.md	管道审查、交易策略、区域销售更新、收入运营
终端窗口	layouts/terminal-window.md	状态快照、命令演练、事件更新、运营摘要

序列、路线图与进展

当读者需要阶段、步骤或方向性移动时使用。

布局	文件	最佳用途
时间线流程	layouts/timeline-flow.md	顺序步骤、里程碑、带垂直时间线的流程阶段
站点工作流	layouts/station-workflow.md	详细工作流分解，每个步骤带有结构化属性（输入/处理/输出/门控/持续时间）
路线图板	layouts/roadmap-board.md	现在/下一步/稍后规划、战略排序、分阶段发布
阶梯进展	layouts/staircase-progression.md	成熟度曲线、分阶段范围积累、阶梯式构建故事
漏斗堆叠	layouts/funnel-stack.md	销售漏斗、转化流程、招聘管道、决策缩小
事件审查	layouts/incident-review.md	事后分析、中断审查、可靠性事件、补救快照

比较与决策

当卡片需要明确的权衡、优先级排序或并排框架时使用。

布局	文件	最佳用途
优缺点	layouts/pros-cons.md	权衡分析、决策框架、风险与收益、平衡评估
象限矩阵	layouts/quadrant-matrix.md	优先级映射、风险收益框架、投资组合视图、2x2 分类
矩阵表	layouts/matrix-table.md	MxN 分类网格，具有两个有意义的轴和带原型标签的单元格
比较	layouts/comparison.md	并排对比、选项框架、前后或 A/B 比较
原则网格	layouts/principle-grid.md	编号原则，每张卡片配以反模式和应用程序对比

网格与清单

当卡片需要重复模块、混合大小平铺或可扫描清单时使用。

布局	文件	最佳用途
Bento 网格	layouts/bento-grid.md	多主题概述、功能展示、混合大小网格单元格
徽章网格	layouts/badge-grid.md	功能列表、能力目录、技能清单、利益展示
检查表板	layouts/checklist-board.md	执行跟踪、发布就绪、QA 门控、运营检查表

系统与关系映射

当结构、邻近性或网络关系比顺序更重要时使用。

布局	文件	最佳用途
架构图	layouts/architecture-map.md	分层系统、平台概述、服务边界、技术蓝图
分层侧边栏图	layouts/layered-sidebar-map.md	分层堆栈，两侧带有上下文轨道，承载交叉线程、KPI 或价值链锚点
辐射中心	layouts/radial-hub.md	生态系统概述、核心加功能、中心辐射关系

文档与备忘录逻辑

当卡片应像结构化简报一样阅读，带有明确章节时使用。

布局	文件	最佳用途
研究摘要	layouts/research-abstract.md	摘要卡片、研究发现、证据综合、论文快照
董事会备忘录	layouts/board-memo.md	高管更新、决策备忘录、季度董事会笔记、领导力摘要
政策备忘录	layouts/policy-memo.md	内部政策变更、治理决策、流程规则、指导说明
教育模块	layouts/education-module.md	课程摘要、学习路径、工作坊模块、教学卡片
医疗摘要	layouts/healthcare-summary.md	临床概述、患者摘要、护理快照、健康教育

治理、风险与审计

当所有权、控制状态和缓解细节必须明确时使用。

布局	文件	最佳用途
风险登记册	layouts/risk-register.md	风险跟踪、缓解规划、合规审查、项目治理
合规审计	layouts/compliance-audit.md	审计摘要、控制审查、安全态势检查、合规跟踪

叙事与利益相关者更新

当内容涉及人员、团队、客户或合作伙伴动态时使用。

原始说明：org-update、customer-story 和 partner-brief 现在共享一个轻量级的 card-brief-* 外部节奏。除非结构实际上涉及关系或利益相关者动态而非标题节奏，否则将 news-bulletin 保持独立。

布局	文件	最佳用途
新闻公告	layouts/news-bulletin.md	突发更新、摘要卡片、状态公告、新闻式回顾
组织更新	layouts/org-update.md	团队变更、招聘更新、所有权变更、领导层沟通
客户故事	layouts/customer-story.md	案例研究、前后结果、客户成功、采用故事
合作伙伴简报	layouts/partner-brief.md	联盟更新、联合销售笔记、合作伙伴摘要、渠道审查

家族对齐说明

• 在发明新类名之前，优先使用现有家族原语。当前对齐的布局家族包括 card-doc-*、card-kpi-*、card-sequence-*、card-tile-*、card-map-*、card-compare-*、card-review-*、card-topic-* 和 card-brief-*。
• 当新布局明显属于这些家族之一时，首先改变几何形状和修饰符。不要为同一角色创建平行的原语词汇。
• 明确的特殊情况保持独立：quote-card、terminal-window、news-bulletin 以及最强的身份驱动样式主题，如 deep-night 和 glassmorphism。
• 如果布局或样式仅共享情绪而非结构，则用文字记录家族关系，而不是强制额外的原语收敛。

设计原则

空间与呼吸感

• 卡片内边距：距边缘 32px–48px
• 模块间距：16px–24px
• 标题区域必须有充足的行高（1.1–1.3）并与正文清晰分离
• 切勿将内容挤到卡片边缘

视觉强调

• 使用 4px–6px 粗的线条作为章节分隔线或强调边框
• 对辅助面板使用微妙的着色背景（rgba(0,0,0,0.03) 或样式特定色调）
• 强调色应克制：一种高亮色用于线条、标签或关键数字
• 可选：4% 噪点叠加用于纸张纹理（参见样式模板）

内容节奏

• 高密度卡片：分组为概述 → 核心判断 → 辅助模块 → 结论
• 排名内容：不对称主元素 + 结构化列表（避免等宽平铺）
• 教程/分析内容：概述 → 核心见解 → 详细块 → 边界/注意事项 → 总结

样式参考

通用类（所有样式共享）

• .card-frame — 外部容器，带最大宽度和内边距
• .card — 主卡片表面，带背景、内边距和可选噪点叠加
• .card-meta — 元信息行（类别、日期、版本），小号大写
• .card-title — 主标题
• .card-subtitle — 副标题或摘要
• .card-bar — 粗强调线分隔符
• .card-body — 正文段落
• .card-body.dropcap — 首段带首字下沉（编辑开场）
• .card-highlight — 独立短句（< 25 字符），带左侧强调边框，用于关键见解
• .card-grid — 网格容器；.card-grid-2 用于两列
• .card-panel — 内容面板，带顶部边框强调
• .card-panel.heavy — 更重的面板，更多内边距
• .card-panel.light — 更轻的面板，更细的边框
• .card-panel-title — 面板标题，小号大写
• .card-panel-text — 面板正文
• .card-item — 带标题的内容块（标签 + 描述对）
• .card-item-label — 项目标题/标签
• .card-tag — 内联标签/徽章
• .card-stat — 超大数字/指标显示
• .card-stat-label — 指标下方的标签
• .card-divider — 章节之间的细水平线
• .card-footer — 底部条，用于来源、归属或注释
• .card-endmark — 内容结束标记（∎），用于编辑结尾

富文本元素

首字下沉（仅首段——创建编辑开场仪式）：

<p class="card-body dropcap">首段文字...</p>

高亮引用（独立见解，< 25 字符，带强调左侧边框）：

<p class="card-highlight">关键见解短语</p>

带标题项（标签 + 描述对，用于结构化列表）：

<div class="card-item">
  <p class="card-item-label">项目标题</p>
  <p class="card-panel-text">项目描述文字。</p>
</div>

章节分隔线：

<div class="card-divider"></div>

结束标记（编辑结尾，放置在内容末尾）：

<span class="card-endmark">∎</span>

最佳实践

内容指南

1. 仅直接嵌入——始终在 Markdown 中直接嵌入 HTML，切勿使用 ```html 代码块
2. 结构中无空行——保持整个 HTML 块连续
3. 先判断密度——在选择布局前决定低/中/高
4. 保护用户标题——切勿静默重写用户提供的标题
5. 平衡视觉重量——至少一个重块、一个中块、一个轻块
6. 一致使用字体比例——遵循上述大小层次
7. 克制使用强调色——一种强调色，仅用于线条和高亮
8. 有意填充空间——如果某部分看起来空，先重构层次，再添加填充内容