Web Asset Generation 是 Agent Skills 体系中的一项技能,用于自动化生成现代 Web 应用所需的整套图像资源与配置文件。它从单一源图(SVG/PNG)或品牌配置出发,经过并行生成流程,产出全部尺寸与格式的变体。
主要能力 生成 favicon 集合(16x16、32x32,含可缩放 favicon.svg);生成 PWA 图标(192x192、512x512,以及 maskable 版本);生成 Open Graph 图片(1200x630)、Twitter 卡片图(1200x600);生成 Apple Touch 图标(180x180);并输出配套 HTML 的 link 与 meta 标签、PWA 的 manifest.json。
使用方式 提供源文件与输出目录、站点名称、URL、主题色、背景色、描述等配置,即可生成完整资源包,输出可直接复制使用(含资源与引用它们的 HTML)。实现示例基于 sharp 进行图像处理,并配套 generateIcons、generateOgImage、generateManifest、generateHtmlTags 等函数。
适用场景 新建 Web 项目的图标与 favicon 配置、为社交分享生成 OG 图片、为 PWA 配置图标尺寸、创建社交 meta 标签、品牌更新后重建整套资源。
限制与注意 资料未提供定价与平台支持声明;仅列出兼容平台(Cursor、VS Code、Windsurf、Claude Code、Cline 为 Full,aider 为 Partial)。建议用 SVG 源文件保证无损缩放,同时提供普通与 maskable 图标,OG 图严格使用 1200x630,品牌变更时全部重新生成。缺失信息暂未提供。