web-asset-generation

Web 资源生成

Agent Skills™ 项目的一部分，由 googleadsagent.ai™ 提供

描述

Web 资源生成可根据单张源图像或品牌规范，自动创建 favicon、PWA 图标、Open Graph 图像、社交媒体元标签和 Apple 触控图标。Agent 会为现代 Web 应用生成所需的完整资源集，涵盖所有平台、尺寸和格式，并提供正确的 HTML 元标签和 Web 清单配置。

专业的 Web 形象需要数十种图像变体：16x16 和 32x32 favicon、180x180 Apple 触控图标、192x192 和 512x512 的常规及可遮罩 PWA 图标、1200x630 Open Graph 图像、1200x600 Twitter 卡片，以及特定平台的启动屏幕。手动生成这些资源既繁琐又容易出错；漏掉任何一种变体，都可能导致某个平台上的预览无法正常显示。本技能可自动完成整个流程。

除图标生成外，本技能还会生成相关配置：用于文档头部的 HTML <link> 和 <meta> 标签、用于支持 PWA 的 manifest.json，以及适用于 Twitter Cards、Facebook Open Graph 和 LinkedIn 的平台专用元标签。生成结果可直接复制粘贴，其中包含完整的资源集和引用这些资源所需的 HTML。

适用场景

• 为新的 Web 项目设置 favicon 和图标资源
• 为社交媒体分享生成 Open Graph 图像
• 配置包含正确图标尺寸的 PWA 清单
• 创建社交媒体元标签（Twitter Cards、OG 标签）
• 品牌更新或重新设计后重新生成资源
• 用户要求生成“favicon”“OG image”“PWA icons”或“social meta tags”时

工作原理

graph TD
    A[Source: SVG / PNG / Brand Config] --> B[Parse Source Asset]
    B --> C[Generate Favicon Set]
    B --> D[Generate PWA Icons]
    B --> E[Generate OG Images]
    B --> F[Generate Apple Touch Icons]
    C --> G[favicon.ico: 16x16, 32x32]
    C --> H[favicon.svg: Scalable]
    D --> I[icon-192.png + icon-512.png]
    D --> J[maskable-192.png + maskable-512.png]
    E --> K[og-image-1200x630.png]
    E --> L[twitter-card-1200x600.png]
    F --> M[apple-touch-icon-180x180.png]
    G --> N[Generate HTML Meta Tags]
    H --> N
    I --> N
    J --> N
    K --> N
    L --> N
    M --> N
    N --> O[Generate manifest.json]
    O --> P[Complete Asset Package]

单个源资源会进入多个并行生成流程，生成所有所需尺寸和格式的变体。最后一步会生成 HTML 和清单配置，将所有内容整合起来。

实现

import sharp from "sharp";
import { writeFileSync, mkdirSync } from "fs";

interface AssetConfig {
  source: string;
  outputDir: string;
  siteName: string;
  siteUrl: string;
  themeColor: string;
  backgroundColor: string;
  description: string;
}

const ICON_SIZES = {
  "favicon-16x16.png": { width: 16, height: 16 },
  "favicon-32x32.png": { width: 32, height: 32 },
  "apple-touch-icon.png": { width: 180, height: 180 },
  "icon-192x192.png": { width: 192, height: 192 },
  "icon-512x512.png": { width: 512, height: 512 },
  "maskable-192x192.png": { width: 192, height: 192, maskable: true },
  "maskable-512x512.png": { width: 512, height: 512, maskable: true },
};

async function generateIcons(config: AssetConfig): Promise<void> {
  mkdirSync(config.outputDir, { recursive: true });
  const source = sharp(config.source);

  for (const [filename, size] of Object.entries(ICON_SIZES)) {
    let pipeline = source.clone().resize(size.width, size.height, { fit: "contain" });

    if ((size as { maskable?: boolean }).maskable) {
      const padding = Math.round(size.width * 0.1);
      pipeline = source.clone().resize(size.width - padding * 2, size.height - padding * 2, { fit: "contain" })
        .extend({ top: padding, bottom: padding, left: padding, right: padding, background: config.backgroundColor });
    }

    await pipeline.png().toFile(`${config.outputDir}/${filename}`);
  }
}

async function generateOgImage(config: AssetConfig): Promise<void> {
  const width = 1200, height = 630;
  const svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
    <rect width="${width}" height="${height}" fill="${config.themeColor}"/>
    <text x="50%" y="45%" text-anchor="middle" font-size="64" font-weight="bold" fill="white" font-family="system-ui">${config.siteName}</text>
    <text x="50%" y="60%" text-anchor="middle" font-size="28" fill="rgba(255,255,255,0.8)" font-family="system-ui">${config.description}</text>
  </svg>`;

  await sharp(Buffer.from(svg)).png().toFile(`${config.outputDir}/og-image.png`);
}

function generateManifest(config: AssetConfig): object {
  return {
    name: config.siteName,
    short_name: config.siteName,
    start_url: "/",
    display: "standalone",
    theme_color: config.themeColor,
    background_color: config.backgroundColor,
    icons: [
      { src: "/icon-192x192.png", sizes: "192x192", type: "image/png" },
      { src: "/icon-512x512.png", sizes: "512x512", type: "image/png" },
      { src: "/maskable-192x192.png", sizes: "192x192", type: "image/png", purpose: "maskable" },
      { src: "/maskable-512x512.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
    ],
  };
}

function generateHtmlTags(config: AssetConfig): string {
  return `
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="${config.themeColor}">


<meta property="og:type" content="website">
<meta property="og:title" content="${config.siteName}">
<meta property="og:description" content="${config.description}">
<meta property="og:image" content="${config.siteUrl}/og-image.png">
<meta property="og:url" content="${config.siteUrl}">


<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="${config.siteName}">
<meta name="twitter:description" content="${config.description}">
<meta name="twitter:image" content="${config.siteUrl}/og-image.png">`;
}

最佳实践

• 从 SVG 源文件开始，以便无损缩放到所有图标尺寸
• 同时包含常规和可遮罩的 PWA 图标——Android 自适应图标会进行大幅裁切
• 将 Open Graph 图像尺寸精确设置为 1200x630，以便在社交媒体上获得最佳显示效果
• 添加 <meta name="theme-color">，为移动浏览器界面设置颜色
• 使用平台调试工具测试 OG 图像（Facebook Sharing Debugger、Twitter Card Validator）
• 品牌形象变更时重新生成所有资源——只更新部分资源会导致不一致

平台兼容性

平台	支持情况	备注
Cursor	完全支持	Sharp + 文件生成
VS Code	完全支持	图像预览 + 配置
Windsurf	完全支持	支持资源处理流程
Claude Code	完全支持	脚本生成
Cline	完全支持	构建流程设置
aider	部分支持	配置文件生成

相关技能

• 程序化视频
• ML 模型集成
• Web 设计指南
• 低代码生成

关键词

favicon pwa-icons open-graph og-image twitter-card web-manifest social-meta-tags asset-pipeline

---

© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License