[信息卡完整提示词] 现代杂志排版的设计提示词规范

- 三月 23, 2026

现代杂志排版的信息卡设计提示词规范

来源：meng shao (@shao__meng) · 将复杂信息转化为具有现代杂志质感的 HTML 信息卡——一套完整的设计提示词规范

在 X 和其他平台的内容分享中，越来越多的作者会附加一张信息卡（Infographic Card），帮助读者快速抓住核心信息。但如何让信息卡既好看又专业？这篇分享了一套可直接复制使用的提示词规范，涵盖字体系统、空间逻辑、视觉装饰、布局策略等关键维度。作为开源 Skill，支持 16:9、4:3、1:1、3:4、9:16 等常见信息卡比例，以及 2.35:1、3:1 等封面比例的适配设计。输入需要生成的内容和比例要求（默认 4:3），AI Agent 即可使用该 Skill 生成 HTML 并截图输出 PNG。

角色定位

专业社论视觉设计师，擅长将复杂信息转化为具有现代杂志质感的 HTML 信息卡。

一、核心设计原则

字号提升

正文 18-20px，确保清晰可读

紧凑排版

优化留白，增强视觉张力

强化密度

用粗线条、大字号填补空余空间

二、字体系统

引入 Google Fonts 字体库（Noto Serif SC 用于标题，Inter + Noto Sans SC 用于正文），建立层次分明的字号规范：

层级	字号	属性	用途
超大标题	72-84px	weight: 900, letter-spacing: -0.04em	核心视觉钩子
大标题	56px	weight: 700	主要章节标题
中标题	32px	line-height: 1.2	次级标题
正文	18-20px	line-height: 1.6	主要内容
辅助信息	15-16px	color: #555	说明文字
元数据/标签	13px	letter-spacing: 0.15em, uppercase	分类标签

三、空间逻辑

外边距 (Container Padding)：40-50px
段落间距：≤ 1.5em
组件间距：30-40px
行高 (Line Height)：1.5-1.6

四、视觉装饰

噪点纹理

4% 透明度，增加纸质质感

重型分割线

4-6px 粗实线（Accent色），强化分量感

背景色块

浅灰色 (rgba(0,0,0,0.03))，界定空间

五、布局策略

内容少 — "大字符主义"

标题字号撑满屏幕
核心数据放大至 120px+
文字本身作为背景视觉元素

内容多 — "多栏网格"

参考报纸排版，内容分为 2-3 栏
垂直分割线增强结构感

六、支持比例

该 Skill 针对不同比例的信息卡和封面进行了专门的布局适配设计：

类型	比例	典型场景	说明
信息卡	16:9	横屏分享、YouTube 缩略图	宽幅布局，适合多栏内容
	4:3 默认	X/Twitter 信息卡、通用分享	最常用比例，布局最为平衡
	1:1	Instagram、微信朋友圈	正方形，居中对称构图
	3:4	小红书、Pinterest	竖版信息卡，纵向分层
	9:16	抖音、Reels、Stories	全屏竖版，紧凑垂直流
封面	2.35:1	电影感封面、宽幅 Banner	超宽幅，文字少而精
封面	3:1	文章头图、横幅广告	极限宽幅，标题 + 一句话

使用方式：输入需要生成的内容和比例要求（默认 4:3），AI Agent 使用 infocard Skill 生成 HTML，并截图输出 PNG 文件。不同比例下，字号、间距、布局策略会自动适配，无需手动调整。

七、核心样式参考

.card {
  width: 900px;
  background: #fafafa;
  padding: 50px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.main-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 80px;
  font-weight: 900;
  line-height: 1.0;
  margin: 0;
  color: #1a1a1a;
}

.content-body {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 19px;
  line-height: 1.6;
  color: #333;
}

.accent-bar {
  height: 6px;
  background: var(--color-accent);
  width: 100px;
  margin: 10px 0;
}

八、输出流程

分析

用 1 句话分析内容的信息密度（高 / 中 / 低）

代码

输出完整的 HTML（含 CSS）

自检

确保正文文字在手机屏幕上也能一眼看清

设计哲学

结合瑞士国际主义的严谨结构与现代杂志的视觉冲击力，在保持美感的同时，确保信息的可读性与视觉张力。提示词会根据内容的密度微调信息卡的布局，不同模型对提示词和设计风格的理解有所不同，可以根据自己常用的模型，让模型自己理解和优化微调，固定一个最适合自己的版本。

相关资源：

原文出处：@shao__meng on X

信息卡 Skill 开源仓库：github.com/shaom/infocard-skills

Agent Skill 最佳实践参考：https://github.com/mgechev/skills-best-practices (by @mgechev)

搜索此博客

Free