marketing-image-generation

营销图片生成

核心工作流

1. 确定素材类型：广告、社交媒体帖子、博客头图、主视觉图、发布宣传图、缩略图、邮件横幅、产品模型图或营销活动视觉素材。
2. 只收集缺失的必要信息：目标、受众、渠道、尺寸或宽高比、必需文案、品牌限制、产品背景和输出数量。
3. 提问前先检查现有背景信息：README、DESIGN.md、品牌文件、现有截图、产品文案和用户提供的参考图片。
4. 生成前先拟定具体的视觉方向：主体、布局、构图、风格、配色方案、字体方向、光线、氛围、拍摄角度／取景和限制条件。
5. 仅当用户明确要求图片素材或视觉模型图时，才使用图片生成工具。
6. 根据需求说明检查结果，然后针对性地修改，而不是重写整个概念。

营销素材默认原则

• 优先突出一个鲜明的视觉焦点，而非拼贴。
• 确保产品、优势或受众在缩略图尺寸下也一目了然。
• 图片中的文字应简短。若必须包含文案，应原样保留，并仅用作标题或标签。
• 对于以产品为核心的素材，应展示可信的界面、工作流或用户成果，而非装饰性的 UI 碎片。
• 对于付费广告，应优先考虑易于立即理解、对比鲜明且具有明确情感吸引力的内容。
• 对于编辑／博客素材，应优先采用能够呼应文章主旨、但不照搬标题的概念性图片。

应避免的模式（AI 垃圾设计）

这些都是机器生成营销设计的典型特征。它们常常成群出现，因为图像／布局模型默认就会采用这些做法——这也正是它们看起来千篇一律的原因。目标不是死记一份禁用清单，而是认出这一类模式，从而也能避开它们的变体。基本原则是：每个元素都应当通过承载含义或建立层级来证明自己的存在价值。如果它只是为了显得“有设计感”，就删掉。

除非用户明确要求，否则应避免以下做法：

• 标题上方的眉题胶囊。 漂浮在 H1 上方、带有标签文字（“✨ INTRODUCING”“NEW”“v2.0”）的小圆角徽章。它几乎从不提供标题本身没有的信息，而且是最常见的 AI 布局特征。直接以标题开篇。
• 渐变填充或发光按钮。 CTA 上使用多色渐变填充、霓虹光晕或仿佛会动的光泽效果。使用单一纯色强调色，配以平面或非常 subtle 的阴影即可。按钮应看起来可以按下，而不是像放射性物质。
• 默认的紫色→粉色／紫罗兰科技渐变。 靛蓝到洋红的背景（典型的“AI 初创公司”色调）让人觉得是模板，而非品牌。以产品的实际配色为基础。克制且符合品牌风格的渐变没有问题——问题在于把那种渐变当作默认选择。
• 用表情符号和闪光符号（✨/🚀/⚡）装饰。 把装饰性表情符号当作设计元素，而非内容。它们会拉低整体质感，而且很快就显得过时。
• 到处使用玻璃拟态。 毫无功能需要，却把磨砂、半透明、模糊的卡片一层层叠放，营造纵深感。一个模糊的前景卡片可以奏效（参见 examples/blurred-bg-foreground-component.html）；整幅画面都这样处理就是垃圾设计。
• 泛泛的初创公司意象。 缺乏背景的悬浮仪表盘、握手照片、火箭／灯泡比喻、含糊的抽象 3D 图像——团块、光亮球体、等距小摆件，以及没有具体指代的渐变球体。
• 用装饰取代层级。 每个元素都加厚重投影、所有元素都用超大圆角、文字加霓虹光晕，以及所有内容都居中却没有字号／字重对比。精致感来自清晰的层级和间距，而非特效。
• 文案过密。 把段落、多句副标题或一长串功能列表硬塞进图片。缩略图大小都读不清的内容，就不该放进图片里——把它移到图片周围的页面中。
• 虚假的可信度填充内容。 虚构的“深受……信赖”品牌标志行、占位星级评分，或编造数字的三项统计数据。使用真实素材，否则就省略。

如果用户想要这些效果之一（例如“给我那种玻璃质感的渐变风格”），就把它做好——这份清单针对的是默认做法，并非绝对禁令。

对于 HTML/Satori 渲染的素材，随附的库是避免垃圾设计的良好起点：examples/layouts/ 中的布局骨架以标题开篇（没有眉题胶囊）、使用纯色填充按钮，并注重层级而非特效；examples/backgrounds/ 中的背景则提供克制且符合品牌风格的色调和网格，而不是默认的紫色→粉色渐变。请从这些资源开始（参见下文的“可复用布局”和“可复用背景”部分），而不是临时拼凑装饰。

提示词模板

调用图像生成工具时，请使用以下结构：

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]

可复用背景

对于 HTML/Satori 渲染的素材（OG 卡片、Vercel ImageResponse、og-playground）， 请从 examples/backgrounds/ 中的背景库开始。每个文件都是一个 JSX 代码片段，可用作外层容器，并在其中放入内容。分类包括：深色 （点阵/线条网格、网格光晕、网格极光、聚光、交叉影线、暗角）、浅色 （网格、蓝图、渐隐网格、柔和网格、暖色/冷色晕染）和鲜艳 （日落、海洋、网格、条纹、渐变+网格）。渲染预览位于 /images/backgrounds。有关目录和 Satori 的限制（不支持 conic-gradient；点状图案需要百分比颜色停止点；网格+光晕需按图层设置 backgroundSize；用同色径向叠加层模拟渐隐），请参阅 examples/backgrounds/README.md。

可复用布局

对于 HTML/Satori 渲染的素材，examples/layouts/ 提供 18 个通用、无品牌的 布局骨架（仅含占位文案）：主视觉区（居中、分栏）、三项特色、三项统计、大数字、客户评价、社交证明横幅、Logo 墙、公告横幅、博客标题、定价卡片、CTA 横幅、检查清单、操作步骤、对比栏、产品/浏览器展示、终端窗口，以及活动/网络研讨会卡片。将某个布局设为根元素，替换文案/颜色/截图，再搭配 examples/backgrounds/ 中的背景。渲染预览位于 /images/layouts；有关目录，请参阅 examples/layouts/README.md。

渠道指南

• LinkedIn 或 X 发布图片：16:9 或 1.91:1，突出单一信息，使用产品截图或概念性主视觉，在信息流尺寸下仍清晰易读。
• Instagram 或 TikTok 封面：4:5 或 9:16，主体居中、高对比度、少量文字、醒目的吸引点。
• 博客标题图：16:9，采用编辑式构图；如有需要，为标题叠加留出空间，避免采用类似广告的 CTA 样式。
• 着陆页主视觉区：宽幅构图，留出干净的负空间，体现产品背景，并保持光线与配色符合品牌风格。
• 付费广告：清晰呈现优势，高对比度，直接传达产品/类别线索，不要使用过小的 UI 细节或密集文案。

迭代规则

修改生成的图像时：

• 每次只更改一两个变量：构图、颜色、文案、产品突出程度、真实感或格式。
• 明确保留上一版中效果好的部分。
• 如果文字渲染效果不佳，请减少文字量，或将文字移至周边页面，而不是强行在图像中塞入密集文案。
• 如果品牌契合度较弱，请在下一条提示词中加入具体的品牌特征作为依据：颜色、字体风格、产品截图、网站风格或视觉参考。

输出

返回生成的图像，并附上简短说明，包含：

• 预期用途和格式。
• 做出的任何假设。
• 仅在存在明确改进方向时，提供建议的下一轮迭代方案。