website-style-images

name website-style-images description Generate images matching a website's visual style. Use this skill when the user wants to: create images in the style of a website, match a website's aesthetic, generate branded images from a URL, create banners/social posts/hero images matching a site's design, extract a website's visual identity and produce images in that style, or replicate a website's look and feel in new images. Also trigger when the user mentions 网站风格图片, 匹配网站风格, 品牌风格图片, 网站设计风格生成, 根据网站生成图片, or 仿站风格. emoji 🌐 metadata {"openclaw":{"requires":{"bins":"[Truncated]"},"primaryEnv":"NANO_BANANA_ACCESS_KEY","install":["[Truncated]","[Truncated]","[Truncated]"]}} 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 支持的图片类型 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" ,