Website Style Images

Website Style Image Generator

根据目标网站的视觉风格（配色、字体、美学、情绪），生成匹配该风格的各类图片。

Setup

Set all 4 environment variables before use (all required):

export NANO_BANANA_ACCESS_KEY="your-access-key"
export NANO_BANANA_SECRET_KEY="your-secret-key"

Also set the API URL (required):

export NANO_BANANA_API_URL="https://your-api-server/task/v1/submit"
export NANO_BANANA_STATUS_URL="https://your-api-server/task/v1/status/{task_id}"

Overview

• API: NANO-BANANA (Gemini 3 Pro Image Preview) — async submit/poll/download
• 风格提取: 双通道（CSS/DOM 数据 + 截图视觉分析）
• 输出类型: 横幅、社交媒体、产品展示、博客头图、广告等 8 种
• 脚本: 所有脚本自包含在 scripts/ 目录中

Prerequisites

pip3 install -r requirements.txt

支持的图片类型

Workflow

Phase 0 — 用户需求

在任何提取之前，先和用户确认三个问题。

问题 1：你想设计什么？

问题 2：用在哪个平台？（根据问题 1 智能展示对应选项）

问题 3：风格从哪来？

收集完三个答案后，进入 Phase 1。

Phase 1 — 风格提取

根据 Phase 0 问题 3 的选择，执行对应的提取流程。

Step 1a: CSS/DOM 数据提取（仅有 URL 时执行）

使用 Chrome MCP navigate 打开目标网站，然后用 javascript_tool 注入以下脚本。

脚本使用元素面积加权颜色重要性，提取字体粗细、letter-spacing、line-height、渐变色值、阴影参数，并跳过不可见元素：

(function() {
    const els = document.querySelectorAll('*');
    const colorMap = {}, bgColorMap = {};
    const fonts = new Set(), headingFonts = new Set();
    const fontWeights = { heading: [], body: [] };
    const letterSpacings = [], lineHeights = [];
    let hasGradient = false, hasShadow = false;
    let shadowDetail = '';
    const radiusValues = [];
    const gradientColors = new Set();

    els.forEach(el => {
        const s = window.getComputedStyle(el);
        if (s.display === 'none' || s.visibility === 'hidden' || s.opacity === '0') return;

        // Area-weighted color collection
        const rect = el.getBoundingClientRect();
        const area = Math.max(1, rect.width * rect.height);
        const weight = Math.min(10, Math.ceil(area / 10000));

        const color = s.color;
        const bg = s.backgroundColor;
        if (color && color !== 'rgba(0, 0, 0, 0)') {
            colorMap[color] = (colorMap[color] || 0) + weight;
        }
        if (bg && bg !== 'rgba(0, 0, 0, 0)') {
            bgColorMap[bg] = (bgColorMap[bg] || 0) + weight;
        }

        // Font extraction with weight
        const fontName = s.fontFamily.split(',')[0].trim().replace(/['"]/g, '');
        if (fontName) fonts.add(fontName);

        const isHeading = ['H1','H2','H3','H4','H5','H6'].includes(el.tagName);
        if (isHeading) {
            headingFonts.add(fontName);
            fontWeights.heading.push(s.fontWeight);
        } else {
            fontWeights.body.push(s.fontWeight);
        }

        // Letter-spacing (px)
        const ls = parseFloat(s.letterSpacing);
        if (!isNaN(ls) && ls !== 0) letterSpacings.push(ls);

        // Line-height (ratio)
        const lh = parseFloat(s.lineHeight);
        const fs = parseFloat(s.fontSize);
        if (!isNaN(lh) && !isNaN(fs) && fs > 0) lineHeights.push(lh / fs);

        // Border radius
        const r = parseFloat(s.borderRadius);
        if (r > 0) radiusValues.push(r);

        // Gradient extraction with actual colors
        if (s.backgroundImage && s.backgroundImage.includes('gradient')) {
            hasGradient = true;
            const matches = s.backgroundImage.match(/rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}/g);
            if (matches) matches.forEach(c => gradientColors.add(c));
        }

        // Shadow detail extraction (first significant one)
        if (s.boxShadow && s.boxShadow !== 'none' && !shadowDetail) {
            hasShadow = true;
            shadowDetail = s.boxShadow.length > 100 ? s.boxShadow.substring(0, 100) : s.boxShadow;
        }
    });

    const sortByWeight = obj => Object.entries(obj).sort((a,b) => b[1]-a[1]).map(e => e[0]);
    const modeFn = arr => {
        if (!arr.length) return 'normal';
        const freq = {};
        arr.forEach(v => freq[v] = (freq[v]||0)+1);
        return Object.entries(freq).sort((a,b) => b[1]-a[1])[0][0];
    };

    return JSON.stringify({
        textColors: sortByWeight(colorMap).slice(0, 20),
        backgroundColors: sortByWeight(bgColorMap).slice(0, 20),
        bodyFonts: [...fonts].slice(0, 10),
        headingFonts: [...headingFonts].slice(0, 5),
        fontWeights: {
            heading: modeFn(fontWeights.heading),
            body: modeFn(fontWeights.body)
        },
        letterSpacings: letterSpacings.slice(0, 10),
        lineHeights: lineHeights.slice(0, 10),
        avgBorderRadius: radiusValues.length ?
            radiusValues.reduce((a,b) => a+b,0) / radiusValues.length : 0,
        hasGradient, hasShadow, shadowDetail,
        gradientColors: [...gradientColors].slice(0, 10)
    });
})()

保存返回的 JSON 为 css_data。

如果用户上传截图/图片而非 URL：css_data = {}，跳过本步骤，直接进入 Step 1b。

Step 1b: 截图与视觉分析

有 URL 时：使用 Chrome MCP computer 的 screenshot 动作截取页面，保存到 /tmp/website_style_screenshot.png。

用户上传截图/图片时：直接使用用户提供的图片文件。

使用 Read 工具读取图片，用 Claude Vision 分析以下内容：

将分析结果整理为 screenshot_analysis 字典。

Step 1c: 网站素材提取（仅有 URL 时执行）

使用 Chrome MCP javascript_tool 提取网站中的图片资源：

(function() {
    const assets = [];
    // Logo / Favicon
    const favicon = document.querySelector('link[rel*="icon"]');
    if (favicon) assets.push({type: 'logo', url: favicon.href});
    const ogImage = document.querySelector('meta[property="og:image"]');
    if (ogImage) assets.push({type: 'og_image', url: ogImage.content});
    // Hero 图和大图
    document.querySelectorAll('img').forEach(img => {
        if (img.naturalWidth > 200 && img.naturalHeight > 200) {
            assets.push({type: 'image', url: img.src, w: img.naturalWidth, h: img.naturalHeight});
        }
    });
    // 背景图
    document.querySelectorAll('*').forEach(el => {
        const bg = getComputedStyle(el).backgroundImage;
        if (bg && bg !== 'none' && bg.includes('url(')) {
            const url = bg.match(/url\(["']?([^"')]+)["']?\)/);
            if (url) assets.push({type: 'background', url: url[1]});
        }
    });
    return JSON.stringify(assets.slice(0, 15));
})()

素材选择优先级：Logo > Hero image > Brand photo > OG image

从返回的资源中按优先级选择 2-3 张，下载到 /tmp/style_assets/。这些素材可在 Phase 3 中作为 reference_image_url 传给 API 辅助风格匹配。

Step 1d: 构建风格档案

使用 style_extractor.py 合并数据：

import sys
sys.path.insert(0, "${CLAUDE_SKILL_DIR}/scripts")
from style_extractor import build_style_profile, save_style_profile

profile = build_style_profile(css_data, screenshot_analysis, url)
save_style_profile(profile, "/tmp/website_style_profile.json")

或者直接根据分析结果手动构建 JSON：

{
    "source_url": "https://example.com",
    "colors": {
        "primary": "#1A1A2E",
        "secondary": "#16213E",
        "accent": "#E94560",
        "background": "#FFFFFF",
        "text_primary": "#1A1A2E",
        "palette_mood": "cool, sophisticated"
    },
    "typography": {
        "heading_style": "SF Pro Display, 700, tight letter-spacing",
        "body_style": "SF Pro Text, 400, standard line-height",
        "overall_feel": "modern, clean"
    },
    "design_traits": {
        "aesthetic": "minimalist corporate",
        "border_radius": "rounded",
        "shadow_style": "0px 4px 12px rgba(0,0,0,0.08)",
        "spacing": "generous whitespace",
        "gradient_use": false,
        "layout_style": "grid-based, symmetric"
    },
    "imagery_style": {
        "photo_style": "high-contrast studio photography",
        "mood_keywords": ["professional", "premium", "trustworthy"]
    },
    "brand_personality": "sophisticated, authoritative, modern tech",
    "screenshot_path": "/tmp/website_style_screenshot.png"
}

Phase 2 — 风格确认

Step 2a: 展示风格概要（精简版）

向用户展示 top 3 颜色 + 2 字体 + 3 aesthetic 关键词：

网站风格分析: [source]

配色: #1A1A2E (深海军蓝) · #E94560 (活力珊瑚) · #FFFFFF (白)
字体: SF Pro Display (标题) · SF Pro Text (正文)
美学: minimalist · corporate · premium

完整风格档案可按需查看。

Step 2b: 风格到 Prompt 映射

不同的 aesthetic 关键词会翻译为不同的 prompt 指令：

这些映射在 Phase 3 构建 prompt 时自动注入 content_description。

Step 2c: 确认生成内容

图片类型和尺寸已在 Phase 0 中由用户选择的"设计什么 + 用在哪"自动确定。展示确认：

根据你的选择：
  设计类型: 社交媒体内容
  目标平台: Instagram
  → 自动选择: social_square (1080×1080)

内容描述: [需要用户补充，或根据网站内容自动生成]

如果用户未描述图片内容，追问：

风格偏好微调？

用户确认后进入 Phase 3。

Phase 3 — 生成图片

Step 3a: 相关素材搜索（可选）

当用户的内容需求涉及特定主题（如"科技产品"、"美食"、"旅行"）时，可选执行：

1. 从用户的设计需求中提取关键词
2. 使用 WebSearch 搜索相关免费素材（Unsplash/Pexels）
3. 选择与目标风格最匹配的 1-2 张素材
4. 下载到 /tmp/style_assets/
5. 在生成时作为参考图传入

展示已收集的素材给用户确认：

已提取/搜索到以下素材：
  1. [logo] apple-logo.png — 网站 Logo
  2. [hero] hero-banner.jpg — 网站首屏大图
  3. [search] tech-abstract.jpg — Unsplash 搜索: "technology abstract"

这些素材将用于辅助风格匹配。确认使用，还是需要调整？

此步骤为可选，不阻塞主流程。如果不需要额外素材，直接跳到 Step 3b。

Step 3b: 写入生成配置

根据用户确认的内容，构建配置 JSON：

cat > /tmp/styled_image_config.json << 'CONFIG_JSON'
{
    "style_profile": {
        "source_url": "https://example.com",
        "colors": { ... },
        "typography": { ... },
        "design_traits": { ... },
        "imagery_style": { ... },
        "brand_personality": "...",
        "screenshot_path": "/tmp/website_style_screenshot.png"
    },
    "requests": [
        {
            "image_type": "hero_banner",
            "content_description": "A modern tech company homepage banner showcasing cloud computing services with abstract geometric shapes and circuit-like patterns"
        }
    ]
}
CONFIG_JSON

content_description 构建规则：

• 结合用户选择的用途 + 用户提供的具体描述
• 自动注入 Phase 2b 中 aesthetic 关键词对应的 prompt 指令
• 如果用户只选了用途类型没给具体描述，根据网站内容和品牌个性自动生成
• 描述应具体、可视化（描述画面内容而非抽象概念）
• 包含具体的视觉元素（形状、物体、场景）而不仅仅是概念词

Step 3c: Dry run 预览

cd ${CLAUDE_SKILL_DIR} && python3 scripts/generate_styled.py --from-json /tmp/styled_image_config.json --dry-run

Dry-run checklist：

• 颜色 hex 值是否正确注入
• 风格关键词是否匹配网站 aesthetic
• aesthetic → prompt 映射是否已注入 content_description
• 内容描述是否具体可视化
• 尺寸信息是否包含在 prompt 中
• 截图文件大小 < 5MB（超过则自动压缩到 1920px 宽）
• reference_image_url 路径是否有效

Step 3d: 生成图片

# 所有请求的图片:
cd ${CLAUDE_SKILL_DIR} && python3 scripts/generate_styled.py --from-json /tmp/styled_image_config.json -v

# 指定类型:
cd ${CLAUDE_SKILL_DIR} && python3 scripts/generate_styled.py --from-json /tmp/styled_image_config.json --types hero_banner,social_square -v

# 复用已有风格档案:
cd ${CLAUDE_SKILL_DIR} && python3 scripts/generate_styled.py --load-profile /path/to/style_profile.json --requests '[{"image_type":"hero_banner","content_description":"New product launch"}]' -v

生成流程：

• 自动验证截图文件（大小 < 5MB，否则自动压缩）
• 并发提交 API 任务（ThreadPoolExecutor，最多 8 并行）
• 轮询等待完成（5s 间隔，指数退避至 15s，最长约 10min）
• 生成图片到 output/styled/<slug>/
• 后处理完成后自动清理中间文件（使用网站背景色填充）
• 自动保存 style_profile.json 和 manifest.json 到输出目录

Phase 4 — 审查与迭代

1. 读取每张生成的图片：使用 Read 工具查看 output/styled/<slug>/ 中的图片
2. 展示结果：列出每张图片的路径、尺寸、类型
3. 提供迭代选项：

对生成结果满意吗？

根据用户选择进行迭代：

• 重新生成：--types hero_banner 指定类型
• 跳过后处理：--skip-postprocess
• 调整风格：修改 /tmp/styled_image_config.json 中的 style_profile
• 新增类型：在 requests 中追加新的图片请求
• 复用风格：--load-profile output/styled/<slug>/style_profile.json

Error Handling

Notes

• 网站截图作为 reference_image_url 传给 NANO-BANANA API，是最强的视觉锚点
• 风格档案和 manifest 自动保存到 output/styled/<slug>/ 供复用
• 所有脚本（api_client.py、postprocess.py、utils.py）自包含在 scripts/ 中
• 支持 --load-profile 复用已保存的风格档案，跳过重新提取
• Prompt 使用安全的字符串替换（非 .format()），防止用户输入中的 {key} 导致崩溃
• 颜色聚类使用 HSL 排序确保确定性结果