editorial-card-screenshot

编辑卡片截图

概述

将源文本转换为紧凑、高对比度的 HTML 信息卡片，遵循用户的编辑提示词，然后按一种受支持的宽高比渲染截图。 目标不只是信息密集，还要具备编辑品质：层级清晰、视觉锚点突出，并且截图渲染稳定，不会意外裁切或留下空白区域。

除非用户明确要求跳过某个阶段，否则始终保留以下三个输出阶段：

1. 用一句话判断信息密度为高、中或低。
2. 输出完整的嵌入 CSS 的 HTML。
3. 自查正文在移动设备上是否仍然清晰易读。

工作流

1. 分析内容密度

阅读 references/content-fit.md。梳理语义单元，估算密度，并根据密度和宽高比选择布局策略：

• 内容稀疏，且一个短语、数字或引子足以支撑页面时，采用「大字」构图。
• 内容密集且需要更强的层级时，采用两栏或三栏编辑网格。
• 使用超大数字、粗重分隔线、着色区块和引文式大字，避免留下空白区域。
• 不要把密集内容硬塞进权重均等的卡片中。应构建主要区块、次要区块和较轻量的辅助区块。
• 根据内容类型匹配结构：
  • 排名／推荐类内容：允许采用非对称的主视觉区块 + 结构化列表。
  • 教程／分析／解读类内容：按概述、核心判断、解读、边界和结论分组。
• 在最终 HTML 之前，先编写简短的空间分配计划。为主视觉区块、主要模块、辅助区域和页脚分配大致面积。
• 不要因为起始模板当前的布局方式，就认为它适合作为结构骨架。

压缩内容前，先调整布局骨架。

• 改变宽高比时，主要应调整阅读路径、层级和模块排列。
• 不要默认把改变宽高比当作删除内容的理由。
• 只有在调整布局后，当前宽高比仍无法清晰容纳内容时，才进行压缩、归组或总结。

2. 应用已存储的编辑规则

除非用户另有要求，否则使用以下默认设置：

• 导入 Google Fonts：

  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700;900&family=Noto+Sans+SC:wght@400;500;700&family=Oswald:wght@500;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
  

• 在宽度为 900px 的版面中，将正文设置为 18px 到 20px。
• 元信息／标签文字至少为 13px。
• 使用紧凑间距：容器内边距为 40px 到 50px，组件间距为 30px 到 40px，行高为 1.5 到 1.6。
• 使用 4px 到 6px 的强调线、柔和的灰色块面和 4% 的噪点叠加来增加视觉分量。
• 优先使用 #f5f3ed 或类似的暖纸色背景，除非用户提供了其他配色。
• 保留呼吸空间。不要过度缩小外边距，以免卡片失去从容感。
• 对标题区域，优先采用更大的行高，并与副标题／摘要区块拉开更清晰的间距。
• 对右侧内容密集的模块，稍微降低字重，让页面保持清晰而不显得厚重。
• 在区块内部强化结构：使用小标题、项目符号、编号行、对比行或次级标签。
• 卡片内容密集时，避免所有框的视觉权重都相同。至少让一个模块明显比其他模块更突出。
• 避免所有模块都使用完全相同的视觉语言。通过色调、尺度、背景处理或字重，区分至少一两个区域。
• 默认采用平静的编辑风格，选择性地突出重点。如果用户要求更强烈的表现力，可向以下方向调整：
  • Bold：更具封面感，强化视觉锚点，放大弱背景文字，加重强调元素。
  • Refined：降低对比度，弱化强调元素，营造更克制的纸感氛围。
  • Hybrid：未指定风格时的推荐默认选项；整体精致克制，同时设置少量醒目的视觉锚点。
• 保留 Google Fonts 导入，同时始终提供本地后备字体栈，以便远程字体加载失败时，渲染出的 PNG 仍能保持稳定的结构。
• 如果用户明确提供了标题，默认将该标题原样用作主标题。只有在用户要求，或经过版面调整后该比例无法清晰容纳标题时，才对其进行压缩或重新诠释。
• 将解读、摘要和背景说明放入副标题／导语／摘要字段，不要悄悄改写主标题。
• 除非用户明确要求添加品牌标识，否则不要在可复用卡片中写死个人署名、创作者头像或账号名称。

3. 选择合适的布局骨架

在撰写最终文案前，先选择符合比例的结构。

4:3

• 最适合完整的分析版面或排名列表。
• 优先采用：主视觉区 + 摘要栏 + 密集的双栏列表 + 更醒目的页脚。
• 在列表前设置一个主要判断区块，避免页面变成 10 个同等内容项组成的单调墙面。
• 推荐的可复用骨架：
  • 左侧设置较重的主要模块，用于呈现主流程／顺序／框架
  • 右侧设置较窄的堆叠模块，用于呈现要点、易错之处或判断
  • 底部设置轻量但明确的来源／核心判断栏
• 避免让 4:3 版面从上到下都变成对称的双栏报纸式布局。

3:4

• 保持同等的信息承载量，但调整阅读路径。
• 优先采用：标题栏 + 洞察行 + 大小混合的正文模块。
• 混合不同尺度：一个较重的主要区块、一个或两个中等区块，以及较小的辅助区块。
• 不要让整张竖版卡片变成一条冗长的单栏。
• 推荐的可复用骨架：
  • 有力的封面式标题区
  • 紧凑的数据栏或洞察栏
  • 一个大型主要模块
  • 一个中型判断模块
  • 底部设置两个较小模块，用于呈现要点／易错之处／示例
• 避免下半部分变成两个巨大的空框，里面却只有几行文案。

1:1

• 最适合展示能力图谱、分组对比或均衡的编辑性概览。
• 建议采用：醒目的主视觉 + 一个较重的象限 + 三个辅助象限 + 密集的页脚条。
• 正方形布局应呈现居中、模块化的感觉，而非均匀平铺。
• 不要将 1:1 视为每张卡片的默认骨架。仅当输出比例确实为正方形时才选择它。
• 推荐使用可复用的骨架：
  • 顶部横跨版面的醒目标题 / 副标题主视觉
  • 一个紧凑的数据条
  • 左侧一个较重的模块，用于展示主要框架或流程
  • 右上方一个判断模块
  • 右下方一个拆分区域，用于展示要点 / 易错点或对比内容
  • 底部一条细窄的来源 / 核心判断栏
• 避免四个大小相同的象限，也避免将过小的文字分散在过多方框中。

宽幅封面（3:1、5:2、2.35:1）

• 大幅缩短段落。
• 使用更少但更大的内容区块、更醒目的标题和简短的辅助说明。

16:9

• 建议采用横向主视觉，并搭配一个结构化的辅助区域。
• 内容量以约两到五个主要要点为宜。

9:16

• 采用分阶段的纵向阅读路径，包含紧凑的主视觉、一个占主导地位的中间模块，以及分组排列的下方辅助内容。
• 避免在整个画布中重复排列高度相同的模块。

4. 构建用于渲染的 HTML

如果 HTML 将被截图，请将页面设计为固定尺寸的画布，而不是响应式网页：

• 与 references/ratios.md 中选定比例预设的精确像素尺寸一致。
• 将卡片视为具有明确 width 和 height 的设计画板，而不是流式的 100vw / 100vh 布局。
• 使用 html, body { margin: 0; } 移除浏览器默认边距。
• 让卡片本身精确填满截图视口。
• 避免使用交互功能、粘性页眉或需要长距离滚动的区块。
• 使用固定像素尺寸的容器，例如：

  .frame {
    width: 2000px;
    height: 1500px;
  }
  
  .card {
    width: 100%;
    height: 100%;
    padding: 48px;
    background: #f5f3ed;
  }
  

不要在截图输出中依赖 100vw、100vh 或响应式容器宽度作为主要设计尺寸。

如果用户只要求 HTML，也要确保布局适合截图。

同时，保留基本的浏览器预览体验：

• 在截图模式下，html、body 和外框的尺寸应与目标画布完全一致。
• 在移动设备／窄屏预览模式下，添加媒体查询回退，让页面恢复正常文档流，以便在截图工作流之外也能正常阅读 HTML。

编排卡片时，请遵循以下结构启发：

• 有意识地填充画布。根据宽高比重新平衡布局，而不是缩放同一个静态模板。
• 对于 4:3 横向画布，非对称的左右布局通常更适合内容密集的分析信息。
• 对于 3:4 纵向画布，使用适合纵向画布的混合网格，而不是单一窄列。
• 将标题、副标题、摘要和模块放在明确的行或带区中，避免彼此碰撞。
• 如果用户提供了标题，应将其作为优先级最高的视觉锚点。在考虑缩短或改写标题之前，先围绕它扩展布局。
• 如果使用编号模块，应弱化数字的视觉效果，避免其与标题碰撞。
• 如果某个区块显得单调，可通过调整层级来增强对比，而不是堆砌装饰元素。
• 较大的模块可以承载更丰富的文案。不要让每个区块的文字量都一样。
• 不要使用可能在页脚附近造成大片意外留白、或将重要内容推到画布边缘的 1fr 行或列。
• 不要将着色面板或深色面板拉伸到填满剩余高度。在有色面板内留出空白会显得模块尚未完成，而不是留白得当。
• 如果下半部分显得空旷，应先重新平衡模块层级，或添加更醒目的底部带区，再考虑缩小文字或拉伸容器。
• 对于信息密集的卡片，最后一个模块与页脚之间不要留出大片纯白空隙。请重新组织模块，或添加精简的结论带区。
• 如果下方模块占用的视觉面积较大，应为其添加足够的内部结构或辅助判断语句，使其内容与占用面积相称。

5. 捕获截图

用户需要 PNG 输出时，请使用随附的 shell 脚本：

./scripts/capture_card.sh input.html output.png 3:4

支持的比例和渲染尺寸见 references/ratios.md。

渲染辅助工具需要本地 Chrome 或 Chromium 二进制文件。 如果设置了 CHROME_BIN，它会优先使用该变量指定的路径；否则会依次尝试常见的二进制文件名和 macOS Chrome 应用路径。

运行脚本前：

• 将生成的 HTML 保存到本地文件。
• 确保页面除字体外均为自包含。
• 如果保留默认字体导入设置，渲染时会通过网络请求 Google Fonts。
• 确保 HTML 使用与所选比例预设相符的固定尺寸设计画布。
• 确保视口构图已符合请求的比例。
• 确保声明了回退字体，这样即使无头渲染期间字体下载失败，布局也能保持稳定。

运行脚本后：

• 打开并检查 PNG。
• 按照 references/content-fit.md 中的要求，完成所有渲染检查。
• 先调整内容骨架，再考虑修改排版或缩短文案。
• 如果首轮渲染存在无法解释的空白区域、模块拥挤或内容裁切，不要交付。

如果布局已改进，但截图底部仍有空白：

• 保留默认比例的截图作为主要输出。
• 仅当用户明确接受轻微偏离宽高比时，才在渲染后运行可选的裁切辅助脚本。
• 将裁切视为后期修复，而非默认渲染行为。

6. 比例策略

仅接受以下比例预设：

• 3:4
• 4:3
• 1:1
• 16:9
• 9:16
• 2.35:1
• 3:1
• 5:2

如果用户提供的比例不在此范围内，请让他们选择最接近的受支持预设，而不要自行新增比例。

输出规范

响应卡片生成请求时：

• 先用一句话说明信息密度，且只能有这一句话。
• 然后在一个代码块中输出完整 HTML。
• 如果用户还要求图片，请在 HTML 后说明所用比例和截图命令。
• 说明文字保持简短；HTML 才是交付内容。

资源

references/ratios.md

需要准确的预设名称或截图尺寸时，请查阅此文件。

references/editorial-card-prompt.md

用户需要最新且经过验证的编辑卡片行为规范时，请将此文件作为标准提示词规范。

references/recommended-skeletons.md

需要针对特定比例的可复用骨架，而非一次性的构图方案时，请查阅此文件。

references/content-fit.md

选择骨架前及渲染后请查阅此文件。它定义了语义单元密度、比例容量、空间分配，以及空白或拥挤卡片的拒绝检查标准。

scripts/capture_card.sh

使用受支持的比例预设，从本地 HTML 文件捕获 PNG 时运行此脚本。 它需要本地 Chrome 或 Chromium 二进制文件，或显式设置 CHROME_BIN。

scripts/trim_card_bottom.sh

仅当用户接受最终图片略短，以去除底部空白时，才将此脚本用作可选的后期处理。

assets/card-template.html

需要一个简洁且适配比例的 HTML 画布，再填入实际内容时，请以此模板为起点。 捕获期间，模板会将画布尺寸与当前视口同步；在较窄的浏览器宽度下，则会回退为易读的常规文档流。

失败检查

在定稿 HTML 或 PNG 之前，如果出现以下任一情况，请明确拒绝该结果：

• 即使通过更好的布局可以让标题适应画布比例，用户提供的标题仍被悄然改写。
• 标题与摘要／正文内容重叠、产生视觉冲突或遮挡内容。
• 有更多水平空间可用时，标题却变成狭窄的竖条。
• 密集卡片被拆分成过多权重相同的方框。
• 大块区域文案过少，看起来像空容器。
• 画布上存在大片空白，而这些区域本可以通过更鲜明的层级、更丰富的区块内容或更醒目的主模块来填充。
• PNG 明显比 HTML 布局意图更空。
• 远程字体加载失败且未提供本地备用字体栈，导致渲染后的 PNG 与 HTML 的阅读节奏不同。
• 页脚或底部区域被裁切，或因网格尺寸设置导致内容偏离底边，出现大片底部留白。
• 最底部的有效内容结束位置高于画布高度的 80%，且不是刻意采用的低密度封面构图。
• 存在一块未作说明的空白区域，面积约超过画布的 20%。
• 所选比例超出承载能力，且卡片未进行分组、摘要或拆分。