text-card

Text Card

When the task is to create a text card image, use this skill. Suitable for:

WeChat Official Account long-form article cover image
Xiaohongshu image-text cover image (also applicable to Xiaolvshu and WeChat Official Account image-text covers, with the same dimensions)

By default, prioritize copying and modifying existing templates or examples; do not generate from scratch.

Workflow

Confirm the cover platform: If the user has not clearly stated whether they are creating a "WeChat Official Account cover" or a "Xiaohongshu cover", you must first ask the user to choose; do not assume arbitrarily.
Collect the card copy and basic style information.
Select an appropriate template directory according to the scenario, and read the USAGE.md in the directory to understand the variables, copy constraints, and example styles.
Generate three options for selection: When creating, randomly select different templates or pair the same template with three different color schemes to generate three options, and let the user choose before outputting the final image. If the user has already explicitly specified the template and color, skip this step and generate directly.
If the user has no explicit requirements for other styles or structures, directly reuse the example HTML under references/ that is closest to the need, replace the copy, and make a small number of necessary fine adjustments; generate from scratch only when the example is clearly unsuitable.
Ensure the final HTML has a clear card container; 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 has not specified a style and the first version was generated based on an example template, proactively ask when delivering whether further adjustments are needed for colors, layout, font size, whitespace, or decorative details.

Important requirements

When references/ already contains a complete reusable example, and the user has not explicitly requested instructions such as "change to another style", "redesign", or "do not refer to the template", you must directly modify based on the reference example closest to the need; do not redo the layout yourself.
When modifying based on a reference example, by default make only these changes: replace the copy, fine-tune the font size, line spacing, and colors, and add or remove a very small number of decorations or emoji, so as to ensure the content can fit stably into the original layout.
Only in the following situations is it allowed not to directly reuse the reference example: the reference example cannot accommodate the target copy, the structure clearly does not match the task type, or the user explicitly requests a new visual style.
If you decide not to reuse the reference example, you must first clearly explain the reason.

Current templates

Directory	Applicable scenarios	Dimensions
`references/rednote/quote/`	Xiaohongshu/Xiaolvshu quotation-style golden quote cards, opinion cards, cover images	1080×1440 (3:4)
`references/wechat/editorial/`	WeChat Official Account article cover image (large-character newspaper style)	2680×800 (3.35:1)
`references/wechat/grid/`	WeChat Official Account article cover image (grid background + highlight color bar)	2680×800 (3.35:1)
`references/wechat/block/`	WeChat Official Account article cover image (color block collage + bubble label)	2680×800 (3.35:1)

Each template directory contains:template.html(variable placeholder version),example-*.html(color scheme examples),USAGE.md(variable descriptions, copy constraints, example styles, etc.). Before using a template, first read the corresponding USAGE.md。

Writing conventions

By default, output a single-card layout, with the core content placed in the #card container.
Use inline style or <style>, avoid relying on external stylesheet files.
Explicitly set background, font size, line height, and padding.
By default, prioritize solid-color backgrounds and clear typography; do not proactively add complex gradients, glows, or large decorative elements, and only add them when the user explicitly requests a stronger visual style.
If remote images, logos, or fonts are needed, reserve enough loading wait time for the underlying rendering.

Notes

For the rendering method, command parameters, and viewport settings, refer uniformly to html-to-image-render skill。
If the user does not specify where to save the image, by default save it to the current working directory's text-card-images/。
If text-card-images/ does not exist, create the directory before rendering.
The output image file extension should match --image-type .
If the underlying rendering reports that element_id does not exist, first check whether the HTML actually contains id="card"。