Back to Details

marketing-image-generation

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Marketing Image Generation

营销图片生成

Core Workflow

核心工作流程

  1. Identify the asset type: ad, social post, blog header, hero image, launch graphic, thumbnail, email banner, product mockup, or campaign visual.
  2. Gather only missing essentials: goal, audience, channel, dimensions or aspect ratio, required copy, brand constraints, product context, and output count.
  3. Check available context before asking: README, 
    DESIGN.md
    , brand files, existing screenshots, product copy, and any user-provided reference images.
  4. Draft a concrete visual direction before generating: subject, layout, composition, style, color palette, typography direction, lighting, mood, camera/framing, and constraints.
  5. Use the image generation tool only when the user has explicitly asked for an image asset or visual mockup.
  6. Review the result against the brief, then iterate with targeted changes instead of rewriting the whole concept.
  1. 确定资产类型：广告、社交帖子、博客头图、主视觉图、发布海报、缩略图、邮件横幅、product mockups或营销活动视觉素材。
  2. 仅收集缺失的关键信息：目标、受众、渠道、尺寸或宽高比、必填文案、品牌约束、产品背景以及输出数量。
  3. 提问前先检查现有上下文：README、
    DESIGN.md
    、品牌文件、现有截图、产品文案以及用户提供的任何参考图片。
  4. 生成前先拟定具体的视觉方向：主体、布局、构图、风格、调色板、排版方向、光线、氛围、镜头/取景方式以及约束条件。
  5. 仅当用户明确要求生成图片资产或视觉样机时，才使用图片生成工具。
  6. 根据需求 brief 审核结果，然后针对性调整进行迭代，而非全盘重写概念。

Marketing Defaults

营销默认规则

  • Prefer one strong focal point over collages.
  • Make the product, benefit, or audience instantly legible at thumbnail size.
  • Use short text in images. If copy is required, preserve it exactly and keep it to a headline or label.
  • For product-led assets, show a plausible interface, workflow, or user outcome rather than decorative UI fragments.
  • For paid ads, optimize for immediate comprehension, contrast, and a clear emotional hook.
  • For editorial/blog assets, prefer a concept-driven image that supports the article thesis without repeating the title literally.
  • 优先选择单一清晰焦点，而非拼贴布局。
  • 确保产品、核心优势或受众在缩略图尺寸下即可快速识别。
  • 图片中使用简短文案。若需要添加文案，需完全保留原文内容，且仅使用标题或标签类文本。
  • 对于产品导向的资产，展示合理的界面、工作流程或用户成果，而非装饰性UI片段。
  • 对于付费广告，优化内容以实现快速理解、高对比度和清晰的情感钩子。
  • 对于编辑/博客类资产，优先选择支持文章核心论点的概念驱动型图片，而非字面重复标题内容。

Patterns to Avoid (AI Slop)

需避免的模式（AI劣质设计）

These are the tells of machine-generated marketing design. They cluster because they're what an image/layout model reaches for by default — which is exactly why they read as generic. The goal isn't to memorize a blocklist; it's to recognize the family so you avoid the next variant too. The underlying principle: every element should earn its place by carrying meaning or hierarchy. If it's there only to look "designed," cut it.
Avoid these unless the user explicitly asks for one:
  • Eyebrow pills above the headline. The little rounded badge with label text ("✨ INTRODUCING", "NEW", "v2.0") floating above the H1. It almost never adds information the headline doesn't already carry, and it's the single most common AI-layout tell. Lead with the headline itself.
  • Gradient-filled or glowing buttons. Multi-color gradient fills, neon glow, or animated-looking sheen on CTAs. Use a single solid accent color with a flat or very subtle shadow. A button should look pressable, not radioactive.
  • The default purple→pink/violet tech gradient. Indigo-to-magenta backgrounds (the generic "AI startup" wash) signal template, not brand. Anchor color in the product's actual palette. A gradient is fine when it's restrained and on-brand — the problem is reaching for that gradient as a default.
  • Emoji and sparkle (✨/🚀/⚡) ornament. Decorative emoji used as design elements rather than content. They cheapen the composition and date instantly.
  • Glassmorphism everywhere. Frosted, semi-transparent blurred cards stacked in depth for no functional reason. One blurred foreground card can work (see 
    examples/blurred-bg-foreground-component.html
    ); a whole scene of them is slop.
  • Generic startup imagery. Floating dashboards without context, handshake photos, rocket/lightbulb metaphors, vague abstract 3D — blobs, glossy spheres, isometric doodads, gradient orbs that don't represent anything.
  • Decoration over hierarchy. Heavy drop shadows on every element, oversized border-radius on everything, neon glow text, and centered-everything with no size/weight contrast. Polish comes from clear hierarchy and spacing, not effects.
  • Dense copy. Paragraphs, multi-sentence subheads, or stacked feature lists crammed into an image. If it can't be read at thumbnail size, it doesn't belong in the image — move it to the surrounding page.
  • Fake credibility filler. Invented "Trusted by" logo rows, placeholder star ratings, or stat trios with made-up numbers. Use real assets or omit them.
If the user wants one of these (e.g. "give me that glassy gradient look"), do it well — this list is about defaults, not absolute prohibition.
For HTML/Satori-rendered assets, the bundled libraries are the slop-free starting point: the layout skeletons in 
examples/layouts/
lead with the headline (no eyebrow pills), use solid-fill buttons, and rely on hierarchy over effects; the backgrounds in 
examples/backgrounds/
give you restrained, on-brand washes and grids instead of the default purple→pink gradient. Start from those (see the Reusable Layouts and Reusable Backgrounds sections below) rather than improvising decoration.
这些是AI生成营销设计的典型特征。它们集中出现是因为图像/布局模型会默认使用这些元素——这正是它们看起来千篇一律的原因。目标不是记住一份黑名单，而是识别这类设计的共性，从而避免后续出现类似变体。核心原则：每个元素都应通过传递信息或构建层级来证明其存在的合理性。如果只是为了看起来“有设计感”，就删掉它。
除非用户明确要求，否则避免以下元素：
  • 标题上方的眉形标签：H1标题上方悬浮的圆形小徽章（如“✨ INTRODUCING”、“NEW”、“v2.0”）。它几乎不会提供标题未涵盖的信息，是AI布局最常见的特征。直接以标题开头即可。
  • 渐变填充或发光按钮：CTA按钮使用多色渐变填充、霓虹发光或类似动画的光泽效果。应使用单一纯色填充，搭配扁平或极淡的阴影。按钮应看起来可点击，而非像放射性元素。
  • 默认的紫→粉/紫罗兰色科技渐变：靛蓝到洋红色的背景（通用的“AI初创公司”底色）是模板化的标志，而非品牌特色。应基于产品实际调色板确定颜色。如果渐变风格克制且符合品牌调性，使用渐变是可行的——问题在于默认使用这类渐变。
  • 表情符号和闪光装饰（✨/🚀/⚡）：将装饰性表情符号用作设计元素而非内容。它们会降低构图质感，且很快会过时。
  • 过度使用玻璃态设计（Glassmorphism）：无功能需求地堆叠多层磨砂半透明模糊卡片。单个模糊前景卡片是可行的（参见
    examples/blurred-bg-foreground-component.html
    ）；但整个场景都使用这种设计就是劣质设计。
  • 通用初创公司意象：无背景的悬浮仪表盘、握手照片、火箭/灯泡隐喻、模糊的抽象3D元素——如 blob、光泽球体、等距小物件、无实际意义的渐变球体。
  • 装饰优先于层级：所有元素都添加厚重投影、所有内容都使用超大圆角、霓虹发光文本、所有内容居中且无尺寸/权重对比。精致感来自清晰的层级和间距，而非特效。
  • 密集文案：将段落、多句子副标题或堆叠的功能列表塞进图片中。如果在缩略图尺寸下无法阅读，就不应放在图片中——应移至页面其他位置。
  • 虚假可信度填充内容：虚构的“值得信赖的合作伙伴”标志栏、占位星级评分或带有编造数字的统计 trio。使用真实资产或直接省略。
如果用户确实想要其中某类设计（例如“给我那种玻璃质感渐变风格”），则高质量完成——此列表针对的是默认设计，而非绝对禁止。
对于HTML/Satori渲染的资产，捆绑的库是避免劣质设计的起点：
examples/layouts/
中的布局骨架以标题开头（无眉形标签），使用纯色填充按钮，依靠层级而非特效；
examples/backgrounds/
中的背景提供克制且符合品牌调性的底色和网格，而非默认的紫→粉渐变。应从这些模板开始（参见下文的可复用布局和可复用背景部分），而非随意添加装饰。

Prompt Template

提示词模板

Use this structure when calling the image generation tool:
text
Create a [asset type] for [product/company/campaign].

Goal: [conversion goal or message]
Audience: [specific audience]
Format: [dimensions/aspect ratio/channel]
Composition: [primary subject, layout, focal point, depth, framing]
Style: [visual style, medium, brand feel]
Color and lighting: [palette, contrast, mood]
Text: [exact text, or "no text"]
Brand constraints: [logo usage, typography direction, do/don't]
Avoid: [specific visual cliches, clutter, wrong objects, unsafe claims]
调用图片生成工具时使用以下结构：
text
Create a [asset type] for [product/company/campaign].

Goal: [conversion goal or message]
Audience: [specific audience]
Format: [dimensions/aspect ratio/channel]
Composition: [primary subject, layout, focal point, depth, framing]
Style: [visual style, medium, brand feel]
Color and lighting: [palette, contrast, mood]
Text: [exact text, or "no text"]
Brand constraints: [logo usage, typography direction, do/don't]
Avoid: [specific visual cliches, clutter, wrong objects, unsafe claims]

Reusable Backgrounds

可复用背景

For HTML/Satori-rendered assets (OG cards, Vercel 
ImageResponse
, og-playground), start from the background library in 
examples/backgrounds/
. Each file is a single JSX snippet you make the outer container and drop content inside. Categories: dark (dot/line grids, grid-glow, mesh aurora, spotlight, crosshatch, vignette), light (grids, blueprint, grid-fade, pastel mesh, warm/cool washes), and vibrant (sunset, ocean, mesh, stripes, gradient+grid). Rendered previews are in 
/images/backgrounds
. See 
examples/backgrounds/README.md
for the catalog and the Satori constraints (no 
conic-gradient
; dotted patterns need percentage color stops; per-layer 
backgroundSize
for grid + glow; fake fades with a same-color radial overlay).
对于HTML/Satori渲染的资产（OG卡片、Vercel 
ImageResponse
、og-playground），从
examples/backgrounds/
中的背景库开始。每个文件都是一段单独的JSX代码片段，可作为外部容器并在其中添加内容。分类：深色（点/线网格、网格发光、网格极光、聚光灯、交叉影线、暗角）、浅色（网格、蓝图、网格渐变、淡彩网格、冷暖底色）和亮色（日落、海洋、网格、条纹、渐变+网格）。渲染预览图位于
/images/backgrounds
。查看
examples/backgrounds/README.md
获取目录及Satori约束（不支持
conic-gradient
；点状图案需要百分比颜色停止点；网格+发光效果需每层设置
backgroundSize
；使用同色径向叠加实现假渐变）。

Reusable Layouts

可复用布局

For HTML/Satori-rendered assets, 
examples/layouts/
has 18 generic, brand-free layout skeletons (placeholder copy only): heroes (centered, split), feature trio, stat trio, big number, testimonial, social-proof bar, logo cloud, announcement banner, blog header, pricing card, CTA banner, checklist, how-it-works steps, comparison columns, product/browser showcase, terminal window, and event/webinar card. Make a layout the root element, swap copy/colors/screenshots, and pair it with a background from 
examples/backgrounds/
. Rendered previews are in 
/images/layouts
; see 
examples/layouts/README.md
for the catalog.
对于HTML/Satori渲染的资产，
examples/layouts/
包含18个通用、无品牌的布局骨架（仅含占位文案）：主视觉图（居中、分栏）、功能 trio、统计 trio、大数字、客户证言、社交证明栏、标志云、公告横幅、博客头图、定价卡片、CTA横幅、清单、工作流程步骤、对比栏、产品/浏览器展示、终端窗口、活动/网络研讨会卡片。将布局设为根元素，替换文案/颜色/截图，并搭配
examples/backgrounds/
中的背景。渲染预览图位于
/images/layouts
；查看
examples/layouts/README.md
获取目录。

Channel Guidance

渠道指南

  • LinkedIn or X launch image: 16:9 or 1.91:1, bold single message, product screenshot or conceptual hero, readable at feed size.
  • Instagram or TikTok cover: 4:5 or 9:16, centered subject, high contrast, minimal text, strong hook.
  • Blog header: 16:9, editorial composition, room for title overlay if needed, avoid ad-like CTA styling.
  • Landing page hero: wide composition, clean negative space, product context, brand-consistent lighting and palette.
  • Paid ad: clear benefit, high contrast, direct product/category cues, no tiny UI details, no dense copy.
  • LinkedIn或X（原Twitter）发布图片：16:9或1.91:1比例，清晰单一信息，产品截图或概念主视觉，在信息流尺寸下可读。
  • Instagram或TikTok封面：4:5或9:16比例，主体居中，高对比度，极简文案，强烈钩子。
  • 博客头图：16:9比例，编辑类构图，如需预留标题叠加空间，避免类似广告的CTA样式。
  • 着陆页主视觉：宽幅构图，干净留白，产品背景，符合品牌调性的光线和调色板。
  • 付费广告：清晰展示核心优势，高对比度，直接的产品/类别线索，无微小UI细节，无密集文案。

Iteration Rules

迭代规则

When revising a generated image:
  • Change one or two variables at a time: composition, color, copy, product prominence, realism, or format.
  • Preserve what worked from the previous result explicitly.
  • If text rendering is poor, reduce the amount of text or move text into the surrounding page instead of forcing dense copy into the image.
  • If brand fit is weak, anchor the next prompt in concrete brand traits: colors, typography feel, product screenshots, website style, or visual references.
修改生成的图片时：
  • 每次更改一到两个变量：构图、颜色、文案、产品突出度、真实感或格式。
  • 明确保留上一版中有效的部分。
  • 如果文本渲染效果不佳，减少文本量或将文本移至页面其他位置，而非强行将密集文案塞进图片。
  • 如果品牌契合度低，在下一个提示词中明确锚定具体品牌特征：颜色、排版风格、产品截图、网站风格或视觉参考。

Output

输出内容

Return the generated image and a brief note with:
  • The intended use case and format.
  • Any assumptions made.
  • Suggested next iteration only when there is a clear improvement path.
返回生成的图片及简短说明，包含：
  • 预期用例和格式。
  • 所有做出的假设。
  • 仅当存在明确改进方向时，才建议下一步迭代。