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

支持的图片类型

ID	名称	默认尺寸	适用场景
`hero_banner`	网站横幅	1920×600	网站首屏/头部横幅
`social_square`	社交方图	1080×1080	Instagram、微信朋友圈
`social_story`	社交竖图	1080×1920	Instagram/抖音 Story
`social_landscape`	社交横图	1200×628	Facebook/LinkedIn 分享
`product_display`	产品展示	1200×1200	产品展示图
`blog_header`	博客头图	1200×630	博客文章头图
`ad_banner`	广告横幅	1200×628	数字广告
`custom`	自定义	用户指定	其他用途

Workflow

Phase 0 — 用户需求

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

问题 1：你想设计什么？

选项	说明
品牌宣传图	展示品牌形象、slogan、价值主张
产品推广图	突出产品、功能、卖点
社交媒体内容	日常帖子、活动预告、节日营销
广告素材	信息流广告、展示广告
内容配图	博客、文章、教程配图
UI/界面设计	App 启动页、功能介绍、引导页
电商图	产品主图、详情页、促销 banner
线下物料	传单、展架、包装、周边

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

设计类型	平台选项 → 自动尺寸
社交媒体	Instagram(1080×1080) / 小红书(1080×1440) / 朋友圈(1080×1080) / Facebook(1200×628) / LinkedIn(1200×628) / TikTok(1080×1920)
广告素材	Google Ads(1200×628) / Facebook Ads(1080×1080) / 抖音信息流(1080×1920)
电商图	淘宝主图(800×800) / Amazon(2000×2000) / Shopify(2048×2048)
UI设计	iOS(1242×2688) / Android(1440×3120) / Web(1920×1080)
线下物料	A4传单(2480×3508) / 展架(2362×5315) / 名片(1050×600)
内容配图	博客头图(1200×630) / 微信公众号(900×383)
品牌/产品	Hero Banner(1920×600) / 产品展示(1200×1200)

问题 3：风格从哪来？

选项	说明	后续流程
提供网站 URL (Recommended)	从网站提取配色、字体、设计语言	→ Phase 1 完整提取
上传截图/图片	App 截图、品牌手册、竞品图片、任何参考图	→ Phase 1（仅视觉分析，`css_data = {}`）
多个竞品对比	提供 2-3 个 URL，分析后选最佳	→ Phase 1 逐个提取后合并
直接描述风格	不需要参考，直接告诉我想要的风格	→ Phase 1（手动构建 style profile）

收集完三个答案后，进入 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 分析以下内容：

字段	描述	示例值
`aesthetic`	整体美学风格	minimalist, bold, playful, corporate, luxury, tech, organic
`palette_mood`	色彩情绪	warm, cool, monochromatic, vibrant, muted, earthy
`spacing`	布局间距	generous whitespace, tight, balanced, airy
`photo_style`	图像风格	studio photography, flat illustrations, 3D renders, abstract
`icon_style`	图标风格	线性图标, 填充图标, 3D 图标, 无图标
`illustration_style`	插画风格	扁平插画, 等距插画, 手绘, 无插画
`photography_treatment`	摄影处理	高对比度, 去饱和, 暖调滤镜, 自然
`pattern_style`	图案/纹理	几何图案, 有机纹理, 噪点, 无
`density`	信息密度	极简, 适中, 密集
`mood_keywords`	3-5个情绪关键词	["professional", "premium", "trustworthy"]
`brand_personality`	品牌个性	"sophisticated, authoritative, modern tech"
`typography_feel`	字体整体感觉	"modern, clean", "classic, elegant"
`layout_style`	布局结构	"grid-based", "asymmetric", "centered single-column"

将分析结果整理为 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 指令：

Aesthetic 关键词	Prompt 指令映射
minimalist	"clean composition, ample negative space, simple geometric forms, restrained color palette"
bold	"high contrast, saturated colors, strong typography, impactful visual weight"
playful	"rounded shapes, bright accent colors, whimsical elements, casual arrangement"
corporate	"structured grid layout, professional photography, muted tones, formal composition"
luxury	"rich textures, gold/dark accents, elegant serif typography, dramatic lighting"
tech	"gradient overlays, geometric patterns, neon accents on dark background, futuristic elements"
organic	"natural textures, earth tones, flowing shapes, warm photography, handcrafted feel"
vibrant	"saturated multi-color palette, dynamic composition, energetic visual rhythm"

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

Step 2c: 确认生成内容

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

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

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

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

选项	说明
品牌宣传	展示品牌形象、价值观
产品推广	突出特定产品或服务
活动促销	促销、打折、限时活动
内容营销	博客、文章、教程配图
其他	用户自定义描述

风格偏好微调？

选项	说明
完全匹配网站风格 (Recommended)	严格复现网站的视觉语言
稍作变化	保留核心配色，允许创意发挥
仅用配色方案	只使用颜色，其他自由发挥
需要手动调整风格参数	让我修改具体的颜色、字体等

用户确认后进入 Phase 3。

Phase 3 — 生成图片

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

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

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

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

已提取/搜索到以下素材：
  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 — 审查与迭代

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

对生成结果满意吗？

选项	说明
满意，全部保留	完成任务
重新生成部分图片	选择要重新生成的图片
调整内容描述后重新生成	修改画面内容要求
调整风格参数后重新生成	微调颜色、美学等风格参数
增加新的图片类型	额外生成其他类型的图片

根据用户选择进行迭代：

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

Error Handling

问题	解决方案
网站无法访问 / JS 提取失败	用截图 + 视觉分析替代（`css_data = {}`），或使用 WebFetch 作为备选
JS 提取返回空数据	检查页面是否完全加载，可能需要等待或滚动触发懒加载
API 提交失败	检查 `config/api.yaml` 中的 headers
Task FAILED	简化 prompt，移除冲突指令，减少风格约束
Task TIMEOUT	重试失败的图片类型 `--types xxx`
生成的风格不匹配	增强 content_description 的具体性，或传入更好的截图参考
颜色提取不准	手动调整风格档案中的颜色值，重新 dry-run 验证
截图太大 (>5MB)	自动压缩到 1920px 宽，或手动缩小后重试
后处理出错	使用 `--skip-postprocess` 保留原始图
用户上传截图而非 URL	`css_data = {}`，仅依赖视觉分析构建风格档案
素材搜索无结果	跳过素材搜索，直接用截图/风格档案生成

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 排序确保确定性结果

website-style-images

Website Style Image Generator

Setup