text-card

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

文字卡片

Text Card

当任务是制作文字卡片图片时，使用这个 skill。适合：

公众号长文推送封面图
小红书图文封面图（小绿书、公众号图文封面同样适用，尺寸一致）

默认优先基于现有模板或示例复制修改，不要从零生成。

Use this Skill when the task is to create text card images. Suitable for:

WeChat Official Account long article push cover images
Xiaohongshu graphic cover images (also applicable to Xiaolvshu and WeChat Official Account graphic covers, same size)

By default, priority is given to copying and modifying based on existing templates or examples, do not generate from scratch.

工作流

Workflow

确认封面平台：若用户未明确说明是制作「公众号封面」还是「小红书封面」，必须先反问用户选择，不得擅自假设。
收集卡片文案和基础样式信息。
根据场景选择合适的模板目录，阅读目录下的
```
USAGE.md
```
了解变量、文案约束和示例样式。
生成三种方案供选择：制作时，随机选取不同模板或为同一模板配上三套不同配色，生成三种方案，让用户挑选后再输出最终图片。若用户已明确指定模板和颜色，则跳过此步骤直接生成。
如果用户没有明确要求其他风格或结构，直接复用
```
references/
```
下最贴近需求的示例 HTML，替换文案并做少量必要微调；只有示例明显不适合时才从零生成。
确保最终 HTML 中有明确的卡片容器，推荐使用
```
id="card"
```
。
调用底层
```
html-to-image-render
```
skill 渲染图片，并检查输出结果。
如果用户没有指定风格，且首版是基于示例模板生成的，交付时主动问一句是否需要继续调整颜色、排版、字号、留白或装饰细节。

Confirm the cover platform: If the user does not explicitly specify whether to make a "WeChat Official Account cover" or "Xiaohongshu cover", you must first ask the user to choose, and do not make assumptions without permission.
Collect card copy and basic style information.
Select the appropriate template directory according to the scenario, read
```
USAGE.md
```
under the directory to understand variables, copy constraints and example styles.
Generate three options for selection: When making, randomly select different templates or match the same template with three different color schemes, generate three options, let the user choose before outputting the final image. If the user has clearly specified the template and color, skip this step and generate directly.
If the user does not explicitly require other styles or structures, directly reuse the example HTML closest to the requirements under
```
references/
```
, replace the copy and make a small number of necessary adjustments; only generate from scratch when the example is obviously not suitable.
Ensure that there is a clear card container in the final HTML, it is recommended to use
```
id="card"
```
.
Call the underlying
```
html-to-image-render
```
Skill to render the image, and check the output result.
If the user does not specify a style, and the first version is generated based on the example template, actively ask whether you need to continue to adjust the color, typography, font size, white space or decoration details when delivering.

重要要求

Important Requirements

当
```
references/
```
下已有可复用的完整示例，且用户没有明确要求"换一种风格""重新设计""不要参考模板"等指令时，必须直接基于最接近需求的参考示例修改，不要自行重做版式。
基于参考示例修改，默认只做这些改动：替换文案、微调字号、行距、颜色，增减极少量装饰或 emoji，以保证内容能稳定放入原版式。
只有在以下情况才允许不直接复用参考示例：参考示例无法容纳目标文案、结构与任务类型明显不匹配、或用户明确要求新的视觉风格。
如果决定不复用参考示例，必须先明确说明原因。

When there are reusable complete examples under
```
references/
```
, and the user does not explicitly require instructions such as "change a style", "redesign", "do not refer to templates", etc., you must directly modify based on the reference example closest to the requirements, and do not redo the layout by yourself.
Modify based on reference examples, only these changes are made by default: replace copy, fine-tune font size, line spacing, color, add or remove a very small number of decorations or emojis, to ensure that the content can be stably placed in the original layout.
It is allowed not to directly reuse the reference example only in the following cases: the reference example cannot accommodate the target copy, the structure is obviously mismatched with the task type, or the user explicitly requires a new visual style.
If you decide not to reuse the reference example, you must clearly explain the reason first.

当前模板

Current Templates

目录	适用场景	尺寸
`references/rednote/quote/`	小红书/小绿书引用式金句卡、观点卡、封面图	1080×1440 (3:4)
`references/wechat/editorial/`	公众号推送封面图（大字报刊风格）	2680×800 (3.35:1)
`references/wechat/grid/`	公众号推送封面图（网格背景 + 高亮色条）	2680×800 (3.35:1)
`references/wechat/block/`	公众号推送封面图（色块拼接 + 气泡标签）	2680×800 (3.35:1)

每个模板目录下包含：

template.html

（变量占位版）、

example-*.html

（配色示例）、

USAGE.md

（变量说明、文案约束、示例样式等）。使用模板前先阅读对应的

USAGE.md

。

Directory	Applicable Scenarios	Size
`references/rednote/quote/`	Xiaohongshu/Xiaolvshu quoted golden sentence card, opinion card, cover image	1080×1440 (3:4)
`references/wechat/editorial/`	WeChat Official Account push cover image (large character newspaper style)	2680×800 (3.35:1)
`references/wechat/grid/`	WeChat Official Account push cover image (grid background + highlight color bar)	2680×800 (3.35:1)
`references/wechat/block/`	WeChat Official Account push cover image (color block splicing + bubble label)	2680×800 (3.35:1)

Each template directory contains:

template.html

(variable placeholder version),

example-*.html

(color matching example),

USAGE.md

(variable description, copy constraints, example styles, etc.). Read the corresponding

USAGE.md

before using the template.

编写约定

Coding Conventions

默认输出单张卡片布局，核心内容放在
```
#card
```
容器中。
使用内联
```
style
```
或
```
<style>
```
，避免依赖外部样式文件。
明确设置背景、字体大小、行高和内边距。
默认优先保持纯色背景和清晰排版，不要主动加入复杂渐变、光晕或大面积装饰；只有在用户明确要求更强视觉风格时再加。
如果需要远程图片、Logo、字体，预留足够的加载等待时间给底层渲染。

Output a single card layout by default, and place the core content in the
```
#card
```
container.
Use inline
```
style
```
or
```
<style>
```
to avoid relying on external style files.
Clearly set background, font size, line height and padding.
By default, priority is given to maintaining a solid color background and clear typography, do not actively add complex gradients, halos or large-area decorations; only add them when the user explicitly requires a stronger visual style.
If remote images, Logos, fonts are required, reserve sufficient loading waiting time for the underlying rendering.

注意事项

Notes

渲染方式、命令参数和视口设置，统一参考
```
html-to-image-render
```
skill。
若用户未指定图片保存位置，默认保存到当前工作目录的
```
text-card-images/
```
。
若
```
text-card-images/
```
不存在，渲染前先创建该目录。
输出图片文件扩展名应与
```
--image-type
```
保持一致。
如果底层渲染报
```
element_id
```
不存在，先检查 HTML 中是否真的存在
```
id="card"
```
。

Rendering method, command parameters and viewport settings, uniformly refer to the
```
html-to-image-render
```
Skill.
If the user does not specify the image save location, save it to
```
text-card-images/
```
in the current working directory by default.
If
```
text-card-images/
```
does not exist, create this directory before rendering.
The output image file extension should be consistent with
```
--image-type
```
.
If the underlying rendering reports that
```
element_id
```
does not exist, first check whether
```
id="card"
```
actually exists in the HTML.