·7 分钟阅读

Stitch 图像升级：Nano Banana 2.1 配图与 Logo

Nano Banana 2.1 接入 Stitch 后的图像素材指南：Hero 配图与矢量 Logo 的 Prompt 模板、多屏一致性用法、与外部 Gemini API 的价格档位对比及已知限制。

S
Stitch Prompt Team
Content Team
StitchAIUI Design

过去在 Stitch 里生成界面，图像素材（头图、插画、Logo）往往要导出到外部工具单独处理，再贴回项目里。

2026 年 10 月 6 日，Nano Banana 2.1 正式发布，Stitch 当天宣布接入，并明确了两个使用场景：Hero 配图（hero graphics）与矢量风格 Logo（vector-style logos）。这意味着配图和 Logo 可以在 Stitch 工作流内部完成，不需要再来回切换工具。

本文聚焦一个具体问题：在 Stitch 工作流里，这两类素材应该怎么生成、怎么保持多屏一致、有哪些坑需要提前避开。

说明：模型能力与价格来自公开资料；Stitch 内的具体入口与按钮位置请以你账号内的实际界面为准。

一、10 月 6 日，Stitch 的图像引擎换代了

Nano Banana 2.1 基于 Gemini 3.6 Flash，在三个方向上做了提升：

三大提升

  • 视觉设计质量：生成素材的整体构图与完成度更高。
  • 蒙版局部编辑：可以只改画面的指定区域，而不是整张重画。
  • 主体一致性：同一个视觉主体可以在多张图里保持稳定。

对界面工作来说，"主体一致性"是最有价值的一项：同一个产品的插画角色、吉祥物或产品图形，可以在多个页面的配图里保持一致，而不是每张图换一个样。

二、Stitch 里怎么用：Hero 配图生成实操

Hero 配图是首屏的门面，提示词要交代清楚三件事：画什么、什么风格、文字放哪里。

可以直接套用的模板：

Generate a hero illustration for this landing page: abstract geometric shapes
in [brand colors], flat vector style, wide 16:9 crop, leaving negative space
on the left for headline text.

要点拆解：

  • [brand colors] 替换为你的品牌色，和 DESIGN.md 里的色板保持一致。
  • 16:9 告诉模型裁切比例，避免生成后再裁剪掉主体。
  • negative space for headline text 预留标题区，配图和文案不再打架。

三、矢量风格 Logo 生成实操与尺寸适配

Logo 生成和配图的关键差异在于"工程约束"：它要能在 24px 的导航栏里看得清，也要在放大后不糊。

模板：

Vector-style logo mark for a fintech app called [Name]: minimalist,
single-weight strokes, works at 24px, transparent-background friendly.

要点拆解：

  • single-weight strokes 强调等宽线条，这是矢量风格的核心特征。
  • works at 24px 明确小尺寸可用性，避免生成一个"远看很酷、缩小就糊"的图形。
  • transparent-background friendly 提醒模型给纯色背景，方便后期抠图。

四、多屏一致性：14 张参考图与 4 角色保真的用法

Nano Banana 2.1 支持最多 14 张参考图融合，其中包含 4 个角色一致性与 10 个物体保真的额度。翻译成界面工作的用法：

  • 把主视觉的插画角色作为参考图，后续每屏配图都引用它。
  • 同一产品套件里，让 3D 或矢量素材保持一致的光源和材质。
  • 需要局部修改时，用蒙版编辑而不是重新生成整张图。

五、与外部用 Gemini API 生成的对比

如果你有批量或程序化需求，也可以走 Gemini API 直接调用。关键参数对比：

维度说明
模型 IDgemini-nano-banana-2.1
分辨率1K / 2K / 4K，默认 1K
参考图最多 14 张（4 角色一致性 + 10 物体保真）
Thinking 档位minimal / medium / high 可配置
价格1K 约 $0.0336/张，相比上一代约减半

选择建议：在 Stitch 里就选 Stitch（素材直接进项目）；要批量、要脚本化就选 API。两者用的是同一代模型能力。

六、已知限制与规避方法

  • 1K 下文字可能模糊：不要在图片里排重要文字，标题文字用 HTML/CSS 实现。
  • 没有 512px 小档：最小 1K，需要更小尺寸时自行缩放并检查清晰度。
  • 不支持 alpha 透明输出：Logo 需要透明背景时，先生成纯色背景版本，再做抠图处理。
  • 品牌一致性靠规范：把品牌色写进 Prompt 之前，先确保 DESIGN.md 里的色板是最终版。

七、常见问题（FAQ）

Q1：Stitch 里使用 Nano Banana 2.1 需要额外付费吗？

素材生成跟随 Stitch 账号的额度体系，具体计费与额度以官方为准。

Q2：生成的 Logo 可以直接商用吗？

建议先人工调整并做商标检索。生成结果可以作为设计起点，但版权与商标合规需要自行确认。

Q3：为什么生成的图片里文字总是模糊？

图像模型在小分辨率下渲染文字的能力有限。界面里的文字请用真实的 HTML/CSS 排版，图片只承载图形与插画。

八、总结

Nano Banana 2.1 把"配图与 Logo"接进了 Stitch 的工作流内部：Hero 配图解决首屏氛围，矢量 Logo 解决品牌符号，多屏一致性解决素材的统一。把它们与 DESIGN.md 的色板、CLI 的工作流串起来，素材这一环就不再是断点。

继续阅读：

← ← 返回博客