infocard

信息卡片生成器

快速开始： 分析内容（密度 × 结构 × 氛围）→ 自动感知语气并选择配色方案 → 选择布局骨架 → 使用 <style scoped> 将 HTML 直接嵌入 Markdown。

关键规则

规则 1：直接嵌入 HTML

重要： 将信息卡片编写为直接嵌入 Markdown 的 HTML。切勿使用代码块（```html）。HTML 应直接嵌入文档，不要添加任何代码围栏。

规则 2：HTML 结构中不得有空行

关键： HTML 信息卡片结构中不得添加空行。保持整个 HTML 块连续，以避免解析错误。

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

必须： 设计前从以下三个维度分析内容：

密度（决定留白节奏）：

密度	内容量	视觉处理
低	≤ 50 个核心词	“大字”构图。一个超大元素占据主导。留出充足空白。
中	50–200 个词	主视觉 + 辅助面板。设置 2–3 个主要区块，并明确层级。
高	200 个词以上	不对称多列网格。设置主要、次要和辅助区块。切勿让所有卡片权重相同。

结构（决定布局几何形态）：

结构	特征	布局模式
单点	一个核心概念	一个锚点元素占据主导，其余内容退居次要
对比	A 与 B、新与旧	分栏面板，呈现两个极点
层级	层层递进	堆叠模块、金字塔
流程	按顺序排列的步骤	纵向级联、编号条目
放射	核心 + 衍生内容	中心节点搭配周围面板
并列	多个同等概念	不对称网格（切勿使用等宽列）

氛围（决定色彩冷暖）：

氛围	视觉感受
沉思	更多留白、衬线字体占比更高、对比度较低
锐利	强烈对比、粗体字、鲜明强调色
温暖	大地色调、圆润感、柔和节奏
技术感	等宽字体点缀、网格般的密度

规则 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	医疗保健摘要、医疗笔记、患者教育、临床概览

商业、金融与信任

适用于卡片需要呈现运营、管理层或商业可信度的场景。

风格	文件	适用场景
Corporate Clean	styles/corporate-clean.md	产品发布、B2B 简报、高管摘要、正式报告、面向投资者的材料
Pitch Deck VC	styles/pitch-deck-vc.md	筹资卡片、市场机会概览、初创公司业绩摘要
Sales Room	styles/sales-room.md	销售管线评审、客户概览、交易策略笔记、收入简报
Trust Center	styles/trust-center.md	安全说明、合规摘要、审计更新、面向信任的报告
Partner Channel	styles/partner-channel.md	合作伙伴简报、联盟动态、渠道推进、联合销售摘要

技术与运营

适用于需要突出精确性、系统术语或实施细节的场景。

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

广播、声明与高对比度

适用于卡片需要发布消息、传达紧迫感或产生强烈视觉冲击的场景。

风格	文件	适用场景
Bold Contrast	styles/bold-contrast.md	数据亮点、KPI 仪表板、活动公告
News Broadcast	styles/news-broadcast.md	快讯、报告重点、媒体简报、公开公告
Incident Desk	styles/incident-desk.md	事件评审、服务中断说明、事后复盘、可靠性更新
Neo Brutalism	styles/neo-brutalism.md	大胆的宣传活动卡片、宣言式摘要、初创公司发布、简洁有力的声明
Swiss Grid	styles/swiss-grid.md	结构化编辑版式、注重设计的报告、排版声明

标志性视觉风格

适用于视觉形象本身就是信息组成部分的场景。

风格	文件	适用场景
Deep Night	styles/deep-night.md	娱乐、创意展示、产品揭晓、游戏内容
Glassmorphism	styles/glassmorphism.md	高端产品揭晓、功能亮点、活动邀请、面向未来的展示

布局骨架

先选择内容结构类型，再选择具体线框。布局不依赖风格。

布局类型

核心单主题卡片

适用于需要突出一个核心论点，并将辅助内容置于次要位置的场景。

布局	文件	最适合
Hero Card	layouts/hero-card.md	单一主题，包含标题、摘要和一个辅助面板
Quote Card	layouts/quote-card.md	引述、使命宣言、带出处的主题演讲引言
Split Panel	layouts/split-panel.md	双栏布局：主要内容加侧边栏，或左右对比
Stacked Modules	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	NOW / NEXT / LATER 规划、战略排序、分阶段推出
阶梯式进展	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">First paragraph text...</p>

强调引语（独立的见解，< 25 个字符，左侧带强调边框）：

<p class="card-highlight">Key insight phrase</p>

带标题的条目（标签 + 描述组合，用于结构化列表）：

<div class="card-item">
  <p class="card-item-label">Item Title</p>
  <p class="card-panel-text">Item description text.</p>
</div>

分区分隔线：

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

结束标记（编辑式收尾，置于内容末尾）：

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

最佳实践

内容指南

1. 仅直接嵌入 — 始终将 HTML 直接嵌入 Markdown，切勿使用 ```html 代码块
2. 结构中不要留空行 — 保持整个 HTML 块连续
3. 先判断密度 — 选择布局前先确定内容属于低、中还是高密度
4. 保护用户标题 — 切勿擅自改写用户提供的标题
5. 平衡视觉分量 — 至少包含一个厚重模块、一个中等模块和一个轻量模块
6. 保持字号层级一致 — 遵循上文定义的字号层级
7. 克制使用强调色 — 只使用一种强调色，并少量用于线条和高亮
8. 有意填充空间 — 如果某个部分显得空旷，应先调整层级结构，再添加填充内容