生成专业的中文视觉笔记卡片（视觉笔记卡片/信息图），以单页 HTML 信息图形式输出，并支持自动导出 PNG。当用户提出相关需求时，请使用此能力……
视觉笔记本卡生成器 : 创建专业,信息密集的视觉笔记本卡(QQ/QQ)作为自成一体的HTML文件,通过 Playwright 自动导出 PNG. 输出是一个结构
功能概述
视觉笔记本卡生成器 : 创建专业,信息密集的视觉笔记本卡(QQ/QQ)作为自成一体的HTML文件,通过 Playwright 自动导出 PNG. 输出是一个结构是一项面向实际任务的技能。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
核心要点
- 使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。
- 该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。
- 从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
使用与执行
实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。
结果检查与注意事项
执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。
视觉笔记卡片生成器
创建专业、信息密度高的视觉笔记卡片（视觉笔记 / 信息图），输出为自包含的 HTML 文件，并通过 Playwright 自动导出 PNG 图像。最终成果为结构清晰、海报式排版的信息图，采用模块化卡片布局，适用于社交媒体分享或打印输出。
设计系统
在编写任何代码前，请先阅读参考模板 assets/template.html，了解标准的 HTML/CSS 结构。随后根据用户提供的主题适配内容。
核心视觉识别
设计遵循编辑型知识卡片美学风格——高信息密度配合清晰的视觉层级，灵感源自高端杂志排版与结构化笔记方法。
配色方案（CSS 变量）：
--primary：深青绿色#1a7a6d—— 用于标题、徽章、强调元素--primary-dark：#145f54—— 底部高亮条背景色--primary-deep：#0d3d36—— 深度强调色--accent：橙色#e8713a—— 用于强调、次级徽章、重要标签--bg：暖灰#f0ebe4—— 页面背景色--bg-light：#f5f1ec—— 浅色面板背景--bg-card：#e8e3dc—— 卡片框架背景色--black：#1a1a1a—— 深色面板、正文主文字色--white：#ffffff
用户可请求替换配色方案。若如此，请保持相同的结构对比度：一个暖调中性背景色、一个强主色、一个强调色，以及用于深色面板的黑色。
字体设置：
- 英文标题：
Playfair Display（衬线体，字重 700 / 900）—— 主标题使用 - 中文正文：
Noto Sans SC（字重 400 / 500 / 700 / 900）—— 所有中文文本统一使用 - 等宽字体：
JetBrains Mono（字重 500 / 700）—— 标签、URL、标签类文本 - 通过 Google Fonts 在