Text Card

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

Workflow

1. 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.
2. Collect card copy and basic style information.
3. Select the appropriate template directory according to the scenario, read

   USAGE.md

   under the directory to understand variables, copy constraints and example styles.
4. 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.
5. 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.
6. Ensure that there is a clear card container in the final HTML, it is recommended to use

   id="card"

   .
7. Call the underlying

   html-to-image-render

   Skill to render the image, and check the output result.
8. 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

• 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/

references/wechat/editorial/

references/wechat/grid/

references/wechat/block/

template.html

example-*.html

USAGE.md

USAGE.md

Coding Conventions

• 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

• 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.