infocard

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Infocard Generator

信息卡生成器

Quick Start: Analyze content (density × structure × mood) → Auto-sense tone for color palette → Pick a layout skeleton → Embed HTML directly in Markdown with

<style scoped>

快速入门： 分析内容（密度 × 结构 × 基调）→ 自动识别色调匹配配色方案 → 选择布局框架 → 使用

<style scoped>

将HTML直接嵌入Markdown。

Critical Rules

关键规则

Rule 1: Direct HTML Embedding

规则1：直接嵌入HTML

IMPORTANT: Write info cards as direct HTML in Markdown. NEVER use code blocks (

```html

). The HTML should be embedded directly in the document without any fencing.

重要提示： 信息卡需以直接编写HTML的方式嵌入Markdown，绝对不要使用代码块（

```html

）包裹，HTML需直接嵌入文档，无需任何围栏标记。

Rule 2: No Empty Lines in HTML Structure

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

CRITICAL: Do NOT add any empty lines within the HTML info card structure. Keep the entire HTML block continuous to prevent parsing errors.

核心要求： 不要在HTML信息卡结构内部添加任何空行，保持整个HTML块连续，避免出现解析错误。

Rule 3: Content Analysis Before Layout

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

REQUIRED: Analyze content along three dimensions before designing:

Density (determines breathing rhythm):

Density	Content Volume	Visual Treatment
Low	≤ 50 words core	"Big-character" composition. One oversized element dominates. Generous whitespace.
Medium	50–200 words	Hero + supporting panels. 2–3 main blocks with clear hierarchy.
High	200+ words	Asymmetric multi-column grids. Primary/secondary/supporting blocks. Never equal-weight tiles.

Structure (determines layout geometry):

Structure	Signal	Layout Pattern
Single point	One core concept	One anchor element dominates, rest recedes
Contrast	A vs B, old vs new	Split panel, two poles
Hierarchy	Layers build on each other	Stacked modules, pyramid
Flow	Sequential steps	Vertical cascade, numbered items
Radial	Core + derivatives	Hub with surrounding panels
Parallel	Multiple equal concepts	Asymmetric grid (never equal columns)

Mood (determines color temperature):

Mood	Visual Feel
Reflective	More whitespace, serif-heavy, lower contrast
Sharp	Strong contrast, bold type, vivid accent
Warm	Earth tones, rounded feel, gentle rhythm
Technical	Monospace accents, grid-like density

必填要求： 设计前需从三个维度分析内容：

密度（决定留白节奏）：

密度	内容体量	视觉处理方式
低	核心内容 ≤ 50字	"大字报"式构图，单个超大尺寸元素为主，留白充足
中	50–200字	核心模块+辅助面板，2-3个层级清晰的主区块
高	200字以上	不对称多列网格，区分主/次/辅助区块，避免使用权重相同的平铺卡片

结构（决定布局形态）：

结构	特征	布局模式
单点型	单个核心概念	单个锚点元素为主，其余元素弱化
对比型	A vs B、新vs旧	拆分面板，两极布局
层级型	逐层递进关系	堆叠模块，金字塔结构
流程型	连续步骤	纵向层叠，带编号条目
放射型	核心+衍生内容	中心枢纽搭配周围面板
并列型	多个同等地位的概念	不对称网格（禁止使用等宽列）

基调（决定色温）：

基调	视觉感受
沉思型	更多留白、以衬线字体为主、低对比度
锐利型	强对比度、粗体、鲜艳的强调色
温暖型	大地色系、圆角设计、柔和节奏
技术型	等宽字体点缀、网格式密度

Rule 4: Tone Sensing

规则4：色调识别

REQUIRED: Auto-select color palette based on content topic. Scan content keywords and match the closest tone:

Content Tone	Background	Accent	Trigger Keywords
Philosophical	`#FAF8F4`	`#7C6853`	cognition, thinking, meaning, philosophy, essence
Technical	`#F5F7FA`	`#3D5A80`	architecture, algorithm, system, API, code
Literary	`#FBF9F1`	`#6B4E3D`	story, narrative, writing, poetry, character
Scientific	`#F4F8F6`	`#2D6A4F`	experiment, data, research, paper, discovery
Business	`#F4F3F0`	`#2D6A4F`	market, strategy, growth, finance, investment
Creative	`#F6F3F2`	`#B8432F`	design, art, aesthetics, inspiration, creation
Default	`#FAFAF8`	`#4A4A4A`	When no clear match — prefer default over wrong match

When a style template is explicitly chosen, its colors take precedence over tone sensing. Use tone sensing as the default when no style is specified.

必填要求： 根据内容主题自动选择配色方案，扫描内容关键词匹配最接近的色调：

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

如果用户明确选择了样式模板，模板配色优先级高于色调识别结果；未指定样式时默认使用色调识别功能。

Rule 5: Title Protection

规则5：标题保护

If the user provides a title explicitly, use it as-is for the main headline. Put editorial interpretation into subtitle, summary, or side modules. Do not silently rewrite the user's title.

如果用户明确提供了标题，请原样用作主标题，编辑解读内容可放在副标题、摘要或侧边模块中，不得私自改写用户提供的标题。

Rule 6: Typography Hierarchy

规则6：排版层级

Maintain a clear type scale and use it consistently:

Hero title:
```
32px–48px
```
, weight 700–900, tight letter-spacing (
```
-0.02em
```
)
Subtitle / summary:
```
16px–20px
```
, weight 400–500
Body text:
```
14px–16px
```
, weight 400, line-height
```
1.6–1.7
```
Meta / tags / captions:
```
11px–13px
```
, weight 500–700, uppercase with letter-spacing
Body text color: never pure black — use
```
#1a1a1a
```
,
```
#333
```
, or
```
#4a4a4a
```

保持清晰的字体缩放比例并统一使用：

主标题：
```
32px–48px
```
，字重700–900，紧缩字距 (
```
-0.02em
```
)
副标题/摘要：
```
16px–20px
```
，字重400–500
正文：
```
14px–16px
```
，字重400，行高
```
1.6–1.7
```
元信息/标签/图注：
```
11px–13px
```
，字重500–700，大写加字距
正文字色：禁止使用纯黑色，使用
```
#1a1a1a
```
、
```
#333
```
或
```
#4a4a4a
```

Rule 7: Visual Weight Distribution

规则7：视觉权重分布

At least one module should feel visually heavier than the others. Avoid making every panel use the exact same treatment. Differentiate through scale, background tone, typographic weight, or accent rules.

至少有一个模块的视觉重量要高于其他模块，避免所有面板使用完全相同的样式，可通过尺寸、背景色调、排版字重或强调线进行区分。

Rule 8: Taste Rules (Anti-AI Checklist)

规则8：审美规则（反AI检查清单）

Before finalizing any card, check against these common AI-generated visual patterns:

Layout:

No centered hero — Do not default-center titles. Prefer left-aligned or asymmetric
No equal-width tiles — Three equal columns side by side is the #1 AI signature. Use
```
2fr 1fr
```
, asymmetric grids, or staggered layouts
No uniform panels — At least one panel must differ in scale, weight, or treatment

Typography:

No pure black
```
#000000
```
— Use off-black (
```
#1a1a1a
```
,
```
#2d2a26
```
) or warm/cool dark
No oversized-only hierarchy — Build hierarchy with weight and color, not just font-size scaling

Color:

Max 1 accent color, saturation < 80%
No neon gradients — No purple-blue AI glow, no gradient-filled headlines
Consistent temperature — Do not mix warm gray and cool gray in one card

Content:

No filler data — Avoid
```
99.99%
```
,
```
50%
```
,
```
1234567
```
. Use organic numbers (
```
47.2%
```
,
```
3.8M
```
)
No AI phrasing — Avoid "empower", "seamless", "unleash", "next-generation"

Spacing:

Padding and margins must be mathematically precise, no awkward gaps
Adjacent elements must be visually aligned

最终确定任何卡片前，对照以下常见AI生成视觉模式自查：

布局：

禁止居中主视觉 不要默认将标题居中，优先使用左对齐或不对称布局
禁止等宽平铺卡片 三个等宽并列列是最典型的AI生成特征，使用
```
2fr 1fr
```
、不对称网格或错落布局
禁止样式统一的面板 至少有一个面板在尺寸、权重或样式上存在差异

排版：

禁止使用纯黑色
```
#000000
```
，使用偏黑的深灰色（
```
#1a1a1a
```
、
```
#2d2a26
```
）或冷暖调深色
禁止仅靠字号区分层级 结合字重和颜色搭建层级，不要只缩放字体大小

颜色：

最多1种强调色，饱和度 < 80%
禁止霓虹渐变 不要使用紫蓝色AI发光效果，不要使用渐变填充的标题
色温统一 同一卡片中不要混用暖灰和冷灰

内容：

禁止填充假数据 避免使用
```
99.99%
```
、
```
50%
```
、
```
1234567
```
这类假数字，使用真实感的数字（
```
47.2%
```
、
```
3.8M
```
）
禁止AI套话 避免使用“赋能”、“无缝”、“释放”、“下一代”这类空泛表述

间距：

内边距和外边距需数值精确，避免出现突兀的空隙
相邻元素需视觉对齐

Style Examples

样式示例

Choose a visual style that matches the content's tone. Each example contains a complete, copy-ready HTML template.

#	Style	File	Suitable For
1	Editorial Warm	styles/editorial-warm.md	Knowledge summaries, book notes, essays, analytical reports
2	Clean Modern	styles/clean-modern.md	Product launches, tech announcements, startup pitches
3	Bold Contrast	styles/bold-contrast.md	Data highlights, KPI dashboards, event announcements
4	Soft Neutral	styles/soft-neutral.md	Lifestyle content, wellness, education, gentle branding
5	Slate Chalk	styles/slate-chalk.md	Teaching content, lessons, concept explanations, workshop notes
6	Paper Minimal	styles/paper-minimal.md	Product notes, task summaries, meeting notes, clean documentation
7	Retro Vintage	styles/retro-vintage.md	Brand stories, historical summaries, cultural content, heritage topics
8	Tech Blueprint	styles/tech-blueprint.md	Technical specs, system design docs, architecture summaries, engineering plans
9	Deep Night	styles/deep-night.md	Entertainment, creative showcases, product reveals, gaming content
10	Wash Pastel	styles/wash-pastel.md	Lifestyle content, creative workshops, wellness topics, artistic portfolios
11	Lab Journal	styles/lab-journal.md	Research summaries, scientific explanations, medical content, academic papers
12	Navy Formal	styles/navy-formal.md	Investor decks, executive briefs, quarterly reports, corporate proposals

选择与内容基调匹配的视觉样式，每个示例都包含完整的可直接复制的HTML模板。

#	样式	文件	适用场景
1	温暖编辑风	styles/editorial-warm.md	知识总结、读书笔记、随笔、分析报告
2	简洁现代风	styles/clean-modern.md	产品发布、技术公告、创业项目推介
3	高对比醒目风	styles/bold-contrast.md	数据亮点、KPI看板、活动公告
4	柔和中性风	styles/soft-neutral.md	生活方式内容、健康养生、教育、温和品牌宣传
5	石板粉笔风	styles/slate-chalk.md	教学内容、课程讲义、概念讲解、 workshop 笔记
6	极简纸张风	styles/paper-minimal.md	产品说明、任务总结、会议纪要、简洁文档
7	复古怀旧风	styles/retro-vintage.md	品牌故事、历史总结、文化内容、 heritage 主题
8	技术蓝图风	styles/tech-blueprint.md	技术规格、系统设计文档、架构总结、工程方案
9	深夜暗色调	styles/deep-night.md	娱乐内容、创意展示、产品揭秘、游戏内容
10	浅柔马卡龙风	styles/wash-pastel.md	生活方式内容、创意 workshop、健康主题、艺术作品集
11	实验日志风	styles/lab-journal.md	研究总结、科学说明、医疗内容、学术论文
12	海军蓝正式风	styles/navy-formal.md	投资者 Deck、高管简报、季度报告、企业提案

Layout Skeletons

布局框架

Choose a layout that fits your content structure. Layouts are style-agnostic wireframes.

#	Layout	File	Best For
1	Hero Card	layouts/hero-card.md	Single topic with title + summary + one supporting panel
2	Split Panel	layouts/split-panel.md	Two-column layouts: main content + sidebar or left-right comparison
3	Stacked Modules	layouts/stacked-modules.md	Multi-section vertical flow with mixed-weight blocks
4	Data Highlight	layouts/data-highlight.md	Numbers-first cards with oversized metrics and supporting context
5	Versus Split	layouts/versus-split.md	A vs B side-by-side comparison with central divider
6	Timeline Flow	layouts/timeline-flow.md	Sequential steps, milestones, process stages with vertical timeline
7	Bento Grid	layouts/bento-grid.md	Multi-topic overviews, feature showcases, mixed-size grid cells
8	Quote Card	layouts/quote-card.md	Pull-quotes, mission statements, keynote quotes with attribution
9	Radial Hub	layouts/radial-hub.md	Ecosystem overviews, core-plus-features, hub-and-spoke relationships
10	Funnel Stack	layouts/funnel-stack.md	Sales funnels, conversion flows, recruitment pipelines, decision narrowing
11	Badge Grid	layouts/badge-grid.md	Feature lists, capability catalogs, skill inventories, benefit showcases
12	Metric Board	layouts/metric-board.md	Performance dashboards, quarterly reviews, health checks, KPI summaries

选择匹配内容结构的布局，布局是与样式无关的线框图。

#	布局	文件	最佳适用场景
1	主打卡片	layouts/hero-card.md	单主题内容，包含标题+摘要+1个辅助面板
2	分栏面板	layouts/split-panel.md	双栏布局：主内容+侧边栏，或左右对比内容
3	堆叠模块	layouts/stacked-modules.md	多章节纵向流程，包含不同权重的混合区块
4	数据亮点	layouts/data-highlight.md	以数字为核心的卡片，包含超大尺寸指标和辅助说明
5	对比拆分	layouts/versus-split.md	A vs B 左右对比，中间带分割线
6	时间线流程	layouts/timeline-flow.md	连续步骤、里程碑、流程阶段，带纵向时间线
7	便当盒网格	layouts/bento-grid.md	多主题概览、功能展示、混合尺寸的网格单元
8	引语卡片	layouts/quote-card.md	引语摘录、使命宣言、 keynote 引语，带来源标注
9	放射中心	layouts/radial-hub.md	生态概览、核心+周边功能、中心辐射型关系
10	漏斗堆叠	layouts/funnel-stack.md	销售漏斗、转化流程、招聘 pipeline、决策筛选流程
11	徽章网格	layouts/badge-grid.md	功能列表、能力目录、技能清单、权益展示
12	指标看板	layouts/metric-board.md	性能看板、季度复盘、健康检查、KPI 总结

Design Principles

设计原则

Space and Breathing Room

空间与留白

Card padding:
```
32px–48px
```
from edges
Module gaps:
```
16px–24px
```
Title area must have generous line-height (
```
1.1–1.3
```
) and clear separation from body
Never crowd content against card edges

卡片内边距：距离边缘
```
32px–48px
```
模块间距：
```
16px–24px
```
标题区域需有充足的行高（
```
1.1–1.3
```
），和正文有清晰的分隔
不要让内容紧贴卡片边缘

Visual Accents

视觉强调

Use
```
4px–6px
```
thick rules as section dividers or accent borders
Use subtle tinted backgrounds (
```
rgba(0,0,0,0.03)
```
or style-specific tints) for secondary panels
Accent colors should be restrained: one highlight color used for rules, tags, or key numbers
Optional:
```
4%
```
noise overlay for paper texture (see style templates)

使用
```
4px–6px
```
粗线作为区域分隔线或强调边框
辅助面板使用浅色调背景（
```
rgba(0,0,0,0.03)
```
或对应风格的浅色调）
强调色需克制：仅用1种高亮色作为分隔线、标签或关键数字的颜色
可选：添加
```
4%
```
的噪点叠加模拟纸张纹理（参考样式模板）

Content Rhythm

内容节奏

High-density cards: group into overview → core judgment → supporting modules → conclusion
Ranking content: asymmetric hero + structured list (avoid equal tiles)
Tutorial/analysis content: overview → core insight → detail blocks → boundary/caveats → summary

高密度卡片：按照概览 → 核心判断 → 辅助模块 → 结论的结构组织
排名类内容：不对称主视觉 + 结构化列表（避免等宽平铺卡片）
教程/分析类内容：按照概览 → 核心洞察 → 细节区块 → 边界/注意事项 → 总结的结构组织

Styling Reference

样式参考

Common Classes (shared across all styles)

公共类（所有样式通用）

```
.card-frame
```
— outer container with max-width and padding
```
.card
```
— main card surface with background, padding, and optional noise overlay
```
.card-meta
```
— meta line (category, date, version) in small uppercase
```
.card-title
```
— main headline
```
.card-subtitle
```
— secondary headline or summary
```
.card-bar
```
— thick accent rule divider
```
.card-body
```
— body text paragraph
```
.card-body.dropcap
```
— first paragraph with drop cap initial letter (editorial opening)
```
.card-highlight
```
— standalone short sentence (< 25 chars) with left accent border for key insights
```
.card-grid
```
— grid container;
```
.card-grid-2
```
for two columns
```
.card-panel
```
— content panel with border-top accent
```
.card-panel.heavy
```
— heavier panel with more padding
```
.card-panel.light
```
— lighter panel with thinner border
```
.card-panel-title
```
— panel heading in small uppercase
```
.card-panel-text
```
— panel body text
```
.card-item
```
— titled content block (label + description pair)
```
.card-item-label
```
— item title/label
```
.card-tag
```
— inline tag/badge
```
.card-stat
```
— oversized number/metric display
```
.card-stat-label
```
— label beneath a stat
```
.card-divider
```
— thin horizontal rule between sections
```
.card-footer
```
— bottom strip for source, attribution, or notes
```
.card-endmark
```
— end-of-content mark (∎) for editorial closure

```
.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
```
— 内容结束标记（∎），用于编辑风格收尾

Rich Text Elements

富文本元素

Drop cap (first paragraph only — creates editorial opening ceremony):

html

<p class="card-body dropcap">First paragraph text...</p>

Highlight quote (standalone insight, < 25 chars, with accent left border):

html

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

Titled item (label + description pairs, for structured lists):

html

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

Section divider:

html

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

End mark (editorial closure, placed at content end):

html

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

首字下沉（仅首段使用，营造编辑风格开篇仪式感）：

html

<p class="card-body dropcap">First paragraph text...</p>

高亮引语（独立洞察，<25字，左侧带强调边框）：

html

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

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

html

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

章节分隔线：

html

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

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

html

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

Best Practices

最佳实践

Content Guidelines

内容指南

Direct embedding only — Always embed HTML directly in Markdown, never use
```
```html
```
code blocks
No empty lines in structure — Keep the entire HTML block continuous
Judge density first — Decide low/medium/high before picking layout
Protect user titles — Never silently rewrite a user-provided headline
Balance visual weight — At least one heavy block, one medium, one light
Use type scale consistently — Follow the size hierarchy defined above
Accent with restraint — One accent color, used sparingly for rules and highlights
Fill space intentionally — If a section looks empty, restructure hierarchy before adding filler content

仅支持直接嵌入 始终将HTML直接嵌入Markdown，不要使用
```
```html
```
代码块
结构中无空行 保持整个HTML块连续
优先判断密度 选择布局前先确定内容是低/中/高密度
保护用户标题 永远不要私自改写用户提供的标题
平衡视觉权重 至少包含1个高权重块、1个中权重块、1个轻量块
统一使用字体缩放规则 遵循上文定义的字号层级
克制使用强调色 仅用1种强调色，少量用于分隔线和高亮内容
有意识地填充空间 如果某个区域看起来空旷，先调整层级结构，不要添加填充内容凑数