我们选定的产品——专注计时器,被命名为 Minagi。现在我们要为它打造一个着陆页:mi-nagi.com。该网站不会是一个网店,而是我们稍后启动的 Kickstarter 众筹活动的展示橱窗:一个双语页面,包含一个电子邮件输入框,供用户注册以参与 Kickstarter。Minagi 没有屏幕、没有应用程序、也没有通知功能。网站应当恰如其分地展现这种“缺失”,这带来了一种有趣的挑战:如何在保持宁静的同时避免枯燥乏味。
网站设计采用 Claude Design
我们使用 Claude Design 构建网站的“设计系统”,包括颜色、字体和界面(UI)元素。它将固定风格规范(颜色、字体、间距)、可复用组件以及专为 Kickstarter 页面设计的独立模块整合为一个包。这避免了仅凭一张氛围图让程序员自行解读的随意做法。颜色、排版、圆角、阴影等都以代码形式直接嵌入。该设计系统构成了我们所有数字输出的基础,确保一致性。

Claude Design 为 minagi 网站设计系统的部分展示
在 Claude Code 中构建网站
Claude Code 将代码包转换为实际网站。静态结构仅需三个核心组件:内容(index.html)、样式(样式表)和行为(JavaScript)。一个快速轻量级的网站无需更多。这符合需要多年稳定运行而无需日常维护的活动页面需求。网站的双语实现通过间接方式完成:英语作为基础语言,并在 JavaScript 不可用时作为回退选项(对 Google 搜索至关重要)。一个脚本自动将英文文本翻译为荷兰文版本,使单一源文件支持两种语言。只需更新一个版本,两个语言站点即可同步更新。
最巧妙的技巧在于声音。我们希望访客能听到音阶中的音调。网站上的这个音调并非音频文件,而是通过 Web Audio 技术实时生成,频率约为 456 Hz,呈现温暖音色,模拟 minagi 计时器结束时的提示音。无需下载、无 MP3 文件、无加载时间。
真正的工作:图像制作
目前我们尚未使用摄影棚进行产品拍摄,因为产品仍以数字原型形式存在。图像来自 GPT-images-2.0 API。我们创建了七个场景,每次都是相同的胡桃木立方体(minagi),但置于不同桌面或桌面上:设计师、学生、居家工作者或冥想者。理论上只需七条提示词,但在实践中这是迄今为止最复杂的流程。
每次尝试生成的立方体都有细微差异,令人困扰。有时黄铜圆盘上有四条凹槽,有时是六条;木纹旋转四分之一圈;音阶色调偏向金色。对于单张图片而言,这些差异无关紧要;但对于七张并排显示在网站轮播图中的图片,每个差异都格外显眼。立方体看起来像是一组有变体的家族成员,而实际上产品只有一个统一形象。
图像:由 ChatGPT 生成的同一产品的不同图像
一个产品,七次尝试:为何 AI 视觉表现缺乏一致性
生成式 AI 可在数秒内生成产品图像。但若围绕单一可识别产品打造品牌,很快会发现产品在每张图像中略有不同。解决方案不在于优化提示词,而在于采用合成而非生成策略:不让 AI 绘制产品,而是将真实产品图像置入 AI 生成的环境中。
七位堂兄弟的家族肖像
假设:你正在开发一款尚不存在的实体消费产品。因此,传统摄影工作室已不再适用。你需要调用图像模型(如 GPT Images、Midjourney 或 Flux),生成七张包含完全相同产品的场景图。这原本是任务要求。乍看之下,结果颇具说服力。但当你将这些图像并排对比时,问题便暴露无遗:这并非偶然现象,而是该技术的根本特性。在此,生成式 AI 与传统产品摄影及 3D 设计展现出本质差异。图像模型并未重建固定物体;它并不具备关于你特定产品外观的内部记忆。它仅根据文本描述和噪声,在每次生成时预测出一个看似合理的新版本。
诸如“带黄铜旋钮的胡桃木计时器”这样的提示词,描述的是一类产品,而非特定对象。恰恰是那些微小却具标识性的细节——雕刻、标志、刻度线、接缝等——在统计意义上对模型而言属于噪声,因此在每张图像中会被以不同方式填充。若从三个不同角度询问同一产品,你实际上会得到三种不同的解读:模型并无 3D 表示能力,它只是在预测像素。
视觉一致性即产品数据
这使得一致性远不止是一个表面细节。零售商也不会接受同一款椅子在不同照片中呈现不同椅腿的产品页面。因此,对于生成式图像,需要一种新的质量控制形式:不仅评估图像是否美观,还要检查产品是否在每一帧中都保持完全一致。
解决方案:采用合成而非生成
我们改变策略:从重新生成转向合成。核心思路是:使用一张完美的 3D 产品图像(产品渲染图)作为固定参考基准,随后 AI 仅负责构建环境。在实际操作中,该流程如下:单一事实来源。产品的 3D 模型是确保视觉一致性的唯一可靠基础。我们在 Blender 或 KeyShot 中基于此模型生成产品图像,固定材质与光照条件。如需多个相机角度,则在单次会话中从同一 3D 模型生成。绝不再向 AI 请求“同一产品,但从左侧拍摄”。
截图:Belnder.org
截图:Keyshot.com
AI 构建的是上下文与环境,而非产品本身。通过遮罩技术,将 3D 图像(渲染图)嵌入场景并进行屏蔽;模型仅生成周围的环境。产品保持像素级完全一致。另一种替代方案是后期图像合成:AI 生成空白场景,再将渲染图合成其中。虽需更多手工操作,但可实现完全控制,重点在于处理光影效果。
明确的审核层
视觉“源代码”成为一份真正的检查清单:盘面上的褶皱数量、木纹方向、标志位置、颜色数值及比例。每份输出在发布前均需经过该清单核对。甚至可通过图像识别模型实现自动化,自动检测相对于参考 3D 产品图像的偏差。
从创作者到守护者
这种综合方法听起来不如完全由AI生成那样引人注目。但品牌因此变得更加强大。事实表明,AI以前所未有的速度加速了设计、编码和生产,这是小团队此前无法企及的。视觉语言的一致性需要最多的关注。AI时代的专业人士不再生产零散的组件,而是更多地管理它们之间的连接。一个品牌声音。一个产品规格。一个产品,七次完全相同。
要点
- 首先确定哪些元素保持不变。在AI生成图像之前,将材料、颜色、形状、标志和比例定义为严格的产品规则。
- 使用单一的视觉来源。使用经过批准的3D产品图像(渲染图)作为活动、渠道和新场景的固定参考。
- 分离创作与控制。让AI生成变体,并明确赋予人类对品牌和一致性的所有权。
- 选择混合模式而非纯生成式。产品本身是固定的,即一张像素级完全相同的3D渲染图或照片,不涉及AI。环境可以由AI生成;背景、设置、光线和氛围可以因图像而异。

