# Text Card > 当需要制作文字卡片图片时使用，包括生成卡片 HTML，并调用底层 HTML 转图片能力输出最终图片。适用于公众号长文封面、小红书/小绿书图文封面等场景。 - Skill: `hanfangyuan4396/text-card` (Agent Skill, multi-file: 14 files) - Install (CLI): `npx skillmds@latest add hanfangyuan4396/text-card` - Raw SKILL.md: https://api.skillmd.com/api/skills/hanfangyuan4396/text-card/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: hanfangyuan4396 (https://skillmd.com/u/hanfangyuan4396) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/hanfangyuan4396/text-card --- # 文字卡片当任务是制作文字卡片图片时，使用这个 skill。适合： - 公众号长文推送封面图 - 小红书图文封面图（小绿书、公众号图文封面同样适用，尺寸一致）默认优先基于现有模板或示例复制修改，不要从零生成。 ## 工作流 1. **确认封面平台**：若用户未明确说明是制作「公众号封面」还是「小红书封面」，必须先反问用户选择，不得擅自假设。 2. 收集卡片文案和基础样式信息。 3. 根据场景选择合适的模板目录，阅读目录下的 `USAGE.md` 了解变量、文案约束和示例样式。 4. **生成三种方案供选择**：制作时，随机选取不同模板或为同一模板配上三套不同配色，生成三种方案，让用户挑选后再输出最终图片。若用户已明确指定模板和颜色，则跳过此步骤直接生成。 5. 如果用户没有明确要求其他风格或结构，直接复用 `references/` 下最贴近需求的示例 HTML，替换文案并做少量必要微调；只有示例明显不适合时才从零生成。 6. 确保最终 HTML 中有明确的卡片容器，推荐使用 `id="card"`。 7. 调用底层 `html-to-image-render` skill 渲染图片，并检查输出结果。 8. 如果用户没有指定风格，且首版是基于示例模板生成的，交付时主动问一句是否需要继续调整颜色、排版、字号、留白或装饰细节。 ## 重要要求 - 当 `references/` 下已有可复用的完整示例，且用户没有明确要求"换一种风格""重新设计""不要参考模板"等指令时，必须直接基于最接近需求的参考示例修改，不要自行重做版式。 - 基于参考示例修改，默认只做这些改动：替换文案、微调字号、行距、颜色，增减极少量装饰或 emoji，以保证内容能稳定放入原版式。 - 只有在以下情况才允许不直接复用参考示例：参考示例无法容纳目标文案、结构与任务类型明显不匹配、或用户明确要求新的视觉风格。 - 如果决定不复用参考示例，必须先明确说明原因。 ## 当前模板 | 目录 | 适用场景 | 尺寸 | |------|---------|------| | `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`。 ## 编写约定 - 默认输出单张卡片布局，核心内容放在 `#card` 容器中。 - 使用内联 `style` 或 `