SuperAPI AI 工具集

article-cover

设计与创作

查看项目

更新于 10-15 20:05

技能介绍

用途:把文章主题转成干净、可复用的 SVG 封面素材,用于博客或文档页眉图、OG/社交预览图、出版物缩略图或文章主视觉。不适用于完整插画、位图编辑与照片合成、幻灯片主题或多页样式、流程图、技术图表与白板草图。

输入:必填文章标题、主题或文章文件路径;可选副标题、输出路径、宽高比、色彩氛围、出版物或品牌背景。

工作流:先检查 $ARGUMENTS,若没有可用主题或文件路径,先向用户询问文章标题或主题再生成。确定输出目标:用户给出明确文件名则使用;给出文章文件路径则保存到其旁边或邻近 assets/ 目录,命名为 {article-slug}-cover.svg;否则保存到当前工作目录下的 {article-slug}-cover.svg。选择形状、颜色与构图前先阅读 $SKILL_DIR/references/DESIGN_SYSTEM.md。将主题提炼为主标题、可选副标题或引题、一个主导视觉隐喻,以及一种布局模式:Comparison、Flow、Centered Concept 或 Typography-First。按设计系统规则处理层级、对比度与间距,优先一个清晰焦点而非装饰堆砌。生成文件需包含 SVG 要点:根节点 xmlns="http://www.w3.org/2000/svg"、有效 viewBox、可行的无障碍 <title> 与 <desc>、文本元素显式 font-family。写入解析后的路径,并在完成前校验:标签正确闭合、标题在缩略图尺寸下可读、文本不溢出画布、与背景对比足够。

输出契约:返回最终 SVG 文件路径、所选布局模式、一句话视觉方向说明;除非用户明确要求内联代码,否则不要把完整 SVG 粘贴到对话中。

排错:主题过宽时请用户收窄角度,而非生成通用封面;文本渲染异常时使用 font-family="Arial, sans-serif" 以兼容跨平台与中日韩字符;对比度低时简化配色并对照设计系统复查;浏览器中显示空白时检查根命名空间、viewBox 及可见元素是否在画布范围内;若用户实际想要场景插画或位图作品,转交图像生成技能而非强行使用 SVG。

最终检查:输出路径明确、布局选择契合文章角度、SVG 有效且可在浏览器查看、标题在社交预览尺寸下清晰可读。