cover-art-studio

name	cover-art-studio
description	Use when: 生成博客封面、课程头图、知识库分享头图、900x363 宽屏图、HTML/SVG 封面设计。负责把文章主题转成原创、可截图、适配社交媒体裁剪的视觉封面。
argument-hint	<文章 frontmatter/标题/摘要>
user-invocable	true
metadata	{"author":"chao"}

Cover Art Studio

cover-art-studio 是知识库封面图工作室。它用 HTML/SVG/CSS 生成高质感头图，让文章在知识库、公众号和社交媒体里都有统一视觉识别。

适用场景

• 为文章、课程、专题生成封面图。
• 用户要求“生成头图”“做封面”“900x363 图片”。
• 需要一个可被浏览器截图的 HTML 封面。
• 需要兼顾宽屏展示和 1:1 社交媒体裁剪。

设计规格

• 默认尺寸：900 × 363。
• 中央安全区：约 383 × 383，核心文字和图形必须落在安全区内。
• 输出形式：自包含 HTML，优先使用 CSS 与 SVG，不依赖外部图片。
• 风格：干净、专业、有科技感，但不过度装饰。

设计流程

1. 提炼主题：从标题、摘要、标签中提取核心意象。
2. 确定视觉隐喻：例如“图谱、流水线、引擎、层级、网络、坐标系”。
3. 设计版式：先保证安全区，再做背景延展。
4. 生成 HTML：输出完整可预览页面。
5. 截图建议：用浏览器打开 HTML，按 900 × 363 截图。

质量标准

• 一眼能看出主题，不只是好看。
• 文字不拥挤、不截断。
• 色彩统一，避免廉价渐变和过度光效。
• 缩成小图后仍能识别标题和核心意象。

配套资源

• 示例结构：./example.html