editorial-card-screenshot

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Editorial Card Screenshot

编辑类卡片截图

Overview

概述

Turn source text into a compact, high-contrast HTML information card that follows the user's editorial prompt, then render a screenshot in one of the supported aspect ratios.

Always preserve three output stages unless the user explicitly asks to skip one:

Write one sentence judging the information density as high, medium, or low.
Output the complete HTML with embedded CSS.
Self-check that body text remains readable on mobile.

将源文本转换为符合用户编辑规范的紧凑、高对比度HTML信息卡片，然后以支持的宽高比之一渲染截图。

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

用一句话判断信息密度为高、中或低。
输出包含内嵌CSS的完整HTML代码。
自行检查正文文本在移动端是否保持可读。

Workflow

工作流程

1. Analyze Content Density

1. 分析内容密度

Choose layout strategy from the content itself:

Use "big-character" composition when content is sparse and a single phrase, number, or hook can carry the page.
Use a two-column or three-column editorial grid when content is dense and needs stronger hierarchy.
Use oversized numbers, heavy rules, tinted blocks, and pull-quote scale to avoid dead space.
Do not force dense content into evenly weighted tiles. Build primary blocks, secondary blocks, and lighter supporting blocks.
Match structure to content type:
- Ranking / recommendation content: allow asymmetric hero + structured list.
- Tutorial / analysis / interpretation content: group into overview, core judgment, interpretation, boundary, and conclusion.

根据内容本身选择布局策略：

当内容稀疏，单个短语、数字或钩子元素即可支撑页面时，采用“大字型”排版。
当内容密集且需要更强的层级结构时，采用双栏或三栏编辑网格。
使用超大数字、粗线条、色块和引用文本缩放来避免空白区域。
不要强行将密集内容放入权重均匀的区块中。应构建主区块、次区块和轻量化的辅助区块。
根据内容类型匹配结构：
- 排名/推荐类内容：采用非对称主视觉+结构化列表的形式。
- 教程/分析/解读类内容：分为概述、核心判断、解读、边界说明和结论几个部分。

2. Apply the Stored Editorial Rules

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

Use these defaults unless the user overrides them:

Import Google Fonts:

html

<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">

Keep body text at
```
18px
```
to
```
20px
```
on a 900px-wide composition.
Keep meta/tag text at
```
13px
```
minimum.
Use compact spacing: container padding
```
40px
```
to
```
50px
```
, component gaps
```
30px
```
to
```
40px
```
, line-height
```
1.5
```
to
```
1.6
```
.
Add visual weight with
```
4px
```
to
```
6px
```
accent rules, subtle gray planes, and
```
4%
```
noise overlays.
Favor
```
#f5f3ed
```
or similar warm-paper backgrounds unless the user supplies another palette.
Preserve breathing room. Do not shrink outer margins so much that the card loses composure.
For title zones, prefer larger line-height and clearer separation from subtitle / summary blocks.
In dense right-side modules, reduce font weight slightly so the page stays clear without feeling heavy.

除非用户另行指定，否则使用以下默认设置：

引入Google Fonts：

html

<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
```
或类似的暖纸色背景，除非用户提供其他配色方案。
保留留白空间。不要过度缩小外间距，以免卡片失去整体协调性。
对于标题区域，优先使用更大的行高，并与副标题/摘要区块保持清晰分隔。
在右侧密集模块中，略微降低字体权重，使页面保持清晰而不显厚重。

3. Build HTML for Rendering

3. 构建用于渲染的HTML

When HTML will be screenshotted, design the page as a canvas instead of a scrolling article:

Make the outer page match the target ratio.
Remove browser-default margins with
```
html, body { margin: 0; }
```
.
Center the card within the viewport and let it fill most of the frame.
Avoid interactions, sticky headers, or long scrolling sections.

Use fixed aspect ratio wrappers when needed:

css

.frame {
  width: 100vw;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #e9e2d4;
}

If the user asks only for HTML, still make the layout screenshot-ready.

Use these structural heuristics when composing the card:

Fill the proportion intentionally. Rebalance layout according to width / height instead of scaling one static template.
In
```
4:3
```
landscape, asymmetric left-right layouts often work best for dense analytical content.
In
```
3:4
```
portrait, compress the number of concurrent columns and let the title / summary stack vertically.
Keep title, subtitle, and closing summary in a vertical conversation so they do not leave dead space between them.
If using numbered modules, keep numbers visually weak enough that they never collide with titles.
If a section becomes visually monotonous, introduce contrast through hierarchy changes rather than decorative clutter.

当HTML需要被截图时，将页面设计为画布而非可滚动文章：

使外层页面匹配目标宽高比。
通过
```
html, body { margin: 0; }
```
移除浏览器默认边距。
将卡片在视口中居中，并使其填充大部分框架。
避免交互元素、粘性页眉或长滚动区域。

必要时使用固定宽高比的容器：

css

.frame {
  width: 100vw;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #e9e2d4;
}

如果用户仅要求HTML，仍需确保布局具备截图就绪的状态。

构建卡片时遵循以下结构原则：

有意填充比例空间。根据宽度/高度重新平衡布局，而非缩放单个静态模板。
在
```
4:3
```
横向布局中，非对称左右布局通常最适合密集的分析类内容。
在
```
3:4
```
纵向布局中，减少并列列数，让标题/摘要垂直堆叠。
保持标题、副标题和结尾摘要的垂直连贯性，避免它们之间出现空白区域。
如果使用编号模块，确保编号的视觉权重足够低，不会与标题冲突。
如果某个部分视觉上过于单调，通过层级变化引入对比，而非添加装饰性元素。

4. Capture the Screenshot

4. 捕获截图

Use the bundled shell script when the user wants a PNG output:

bash

./skills/editorial-card-screenshot/scripts/capture_card.sh input.html output.png 3:4

Supported ratios and render sizes live in references/ratios.md.

The script uses local headless Chrome at

/Applications/Google Chrome.app/Contents/MacOS/Google Chrome

Before running the script:

Save the generated HTML to a local file.
Ensure the page is self-contained except for fonts.
Ensure the viewport composition already matches the requested ratio.

当用户需要PNG输出时，使用捆绑的shell脚本：

bash

./skills/editorial-card-screenshot/scripts/capture_card.sh input.html output.png 3:4

支持的宽高比和渲染尺寸可查看references/ratios.md。

该脚本使用本地无头Chrome，路径为

/Applications/Google Chrome.app/Contents/MacOS/Google Chrome

。

运行脚本前：

将生成的HTML保存到本地文件。
确保页面是自包含的，仅依赖外部字体。
确保视口布局已匹配请求的宽高比。

5. Ratio Policy

5. 宽高比规则

Accept only these ratio presets:

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

If the user gives a ratio outside this set, ask them to map it to the nearest supported preset rather than inventing a new one.

仅接受以下预设宽高比：

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

如果用户提供的宽高比不在此范围内，请让他们将其映射到最接近的支持预设，而非创建新的预设。

Output Contract

输出约定

When responding to a card-generation request:

Start with exactly one sentence describing information density.
Then output complete HTML in one code block.
If the user also requested an image, state the ratio used and the screenshot command after the HTML.
Keep prose short; the HTML is the deliverable.

响应卡片生成请求时：

以恰好一句话描述信息密度开头。
然后在一个代码块中输出完整的HTML。
如果用户还请求了图片，在HTML之后说明使用的宽高比和截图命令。
保持 prose 简短；HTML是交付成果。

Resources

资源

references/ratios.md

references/ratios.md

Open this when you need the exact preset names or capture dimensions.

当你需要确切的预设名称或捕获尺寸时打开此文件。

references/editorial-card-prompt.md

references/editorial-card-prompt.md

Use this as the canonical prompt spec when the user wants the latest validated editorial-card behavior.

当用户需要最新的验证过的编辑类卡片行为时，将此作为规范的参考文档。

scripts/capture_card.sh

scripts/capture_card.sh

Run this to capture a PNG from a local HTML file using a supported ratio preset.

运行此脚本，可从本地HTML文件中使用支持的宽高比预设捕获PNG图片。

assets/card-template.html

assets/card-template.html

Use this as a starting shell when you want a minimal ratio-ready HTML canvas before filling in real content.

当你需要一个最小化的、支持宽高比的HTML画布作为基础框架，再填充真实内容时，可使用此模板。