跳转到主要内容

博客封面规范 v1(参考 OpenRouter)

定义 AIHubMix 博客封面图的统一风格与内容规范,保证整列封面风格一致。参考 OpenRouter blog 封面体系。

核心原则:分层

封面 = 两层,职责分开
放什么在哪里
插画层(封面图本体)本篇主题的图标饰带,单色品牌蓝,无文字、无 logoimages/blogs/<slug>.webp
文字/品牌层标题、AIHubMix logo、分类标签页面布局自动渲染(Mintlify 标题 H1 + 博客卡片),不烧进图
「图中的内容」用图标隐喻主题,不写字;品牌标识与标题活在图之外的页面层。这是 OpenRouter 的做法,也是整列保持一致的关键。

画布 / 格式

  • 成品 1200×630,导出 .webp;AI 源图可出 1536×864 再裁。
  • 文件名 images/blogs/<post-slug>.webp,与文章 slug 同名。
  • frontmatter image: 指向该文件(同一文件兼作 og:image 与正文 hero)。

调色板(单色蓝)

  • 底色:近白 #F4F6FB,上下大留白。
  • 图标/色块:品牌蓝同色多明度 #2563EB / #7298FF / #A9C2FF / #D6E2FF
  • 单一色相,不加第二色相——这是高级感来源(OpenRouter 用单色紫)。

构图(固定风格 + 自由场景)

只锁风格与配色,构图随每篇核心内容自由发挥——别千篇一律「色块装图标」。能表达文章核心的图形都行:场景插画、概念隐喻、中心主体 hero 图、双栏桥接等皆可,只要风格/色调一致。
  • 上下大留白,主体居中。
  • 扁平矢量 + 轻微层叠投影 / 轻景深。

场景思路(按主题发挥,非硬性图标)

主题场景隐喻(示例)
月度汇总(合集)扁平「色块 + 多图标」拼贴(合集性质,保留扁平拼贴风作区分);或众多模型球汇聚
单模型 / 推理中心脑球 + 同心可调环 + 控制旋钮(可调推理深度)
协议 / 兼容左右两套系统 + 中间适配器桥 + 流动数据
网络 / 加速地球 + 边缘节点 + 环绕光轨
免费 / 开放开启的门廊 + 涌出的模型球 + 开锁
其它任何能表达核心、且单色蓝扁平的图形
6 月汇总封面刻意保留扁平图标拼贴风(合集),单篇用场景插画,两类有意区分但同色调。

风格红线(防 AI slop)

扁平矢量、单色蓝、克制、留白多。 禁止:文字、字母、数字、logo、人脸、手、3D、照片写实、霓虹堆叠、彩虹色、深色背景。

生产方式(脚本一条龙:API 出图 + 处理)

scripts/gen_cover.py,key 走全局环境变量(绝不写进脚本/提交):
export AIHUBMIX_API_KEY=sk-xxxx     # 放 ~/.zshrc 或全局 env
python3 scripts/gen_cover.py <slug> "<scene 描述>"
# -> 调 gpt-image-2 出 1536×864 → 抠边界/居中留白/羽化 → images/blogs/<slug>.webp
  • 固定风格块(只锁风格+配色,内置在脚本里,逐字复用):
  • scene 一行:每篇自由描述能表达核心的画面,锁同一 seed。
  • 标题 / logo / 分类由页面布局渲染,不进图。

Fixed style block(脚本内置,逐字复用)

Flat vector illustration for a blog cover, light theme. Off-white background
(#F4F6FB) with generous clean negative space. SINGLE-HUE monochrome blue
palette only (#2563EB, #7298FF, #A9C2FF, #D6E2FF) - tints and shades of one
brand blue, no other hues. Soft subtle layered shadows, sticker-like depth,
smooth rounded shapes. Minimal, premium, modern SaaS aesthetic. No text, no
words, no letters, no numbers, no logos. Clean and uncluttered. 1.91:1 wide
horizontal banner. Composition centered with breathing room. Subject: <scene>

Negative prompt(出图工具支持时附加)

text, words, letters, typography, numbers, logo, watermark, signature,
people, faces, hands, photorealistic, stock photo, cluttered, busy, noisy,
multiple colors, rainbow, neon, dark background

各篇 scene(已用,可参考)

global-acceleration  -> a stylized globe wrapped with glowing network edge nodes, fast curved light trails arcing around it (fast worldwide acceleration network)
claude-opus-4-7      -> a glowing reasoning core orb surrounded by concentric tunable rings and a control dial (adjustable reasoning depth)
openai-upgrade-claude-> two system panels bridged by a central adapter with flowing data streams (protocol compatibility bridging two AI systems)
free-ai-models       -> an open glowing gateway releasing a cluster of model spheres, an open unlocked padlock (free open access to many models)
2026-06-recap        -> 保留扁平「色块+图标」拼贴(合集,区别于单篇场景图)

样板

  • 2026-06 月度汇总:cn/blogs/aihubmix-2026-06-recap.mdx / en/blogs/aihubmix-2026-06-recap.mdx