拿 CalDigit TS4 做个例子：AI 产品图怎么用进 Shopify 独立站

假设你在做一个面向办公人群的科技品牌free-standing station，准备卖一款桌面扩展坞。手里已经有清楚的白底产品图，但首页还缺一张能让人理解使用环境的场景图。

这时直接让 AI 生成“高级办公桌、扩展坞、笔记本电脑”，很容易得到一张漂亮的图。问题是，图里的扩展坞可能已经换了外形，接口和你的产品对不上；即使单独看着不错，放进首页后，手机上又可能被裁掉一半。

我们换一种做法：先按整站页面需要规划图片，再让 AI 参与其中一部分制作。这次拿 CalDigit TS4 的官方商品图做素材演示，实际生成一张场景候选，看看从原图到页面交付，中间要做哪些判断。

这是资料与制作方法演示，不是 CalDigit 委托 WESWOO 完成的项目，也不评价它的实际性能。原始图片与接口资料来自 CalDigit 官方商品页。

先看原图：哪些东西能改，哪些必须留下？

图 1｜本次输入素材：CalDigit TS4 官方商品图，原图未修改。来源。

选这款产品，是因为它的识别特征很明确：银色机身、侧面的散热纹理、正面卡槽、接口与印字，都能用原图对照。它不适合被当成一个任意替换外形的“科技小盒子”。

在动手之前，先把两类内容分清楚：背景、桌面材质和构图可以探索；产品外形、接口、标志和材质表达必须对照原素材检查。

这里也要分清常被一起叫作“渲染”的三种工作：

• 保留产品图，生成或替换背景：适合已有清晰照片，希望补充场景的情况。这是本文主要讨论的路线。
• 让模型重新生成包含产品的整张图：自由度更高，但产品细节也可能被重画，不能因为上传了参考图就认为主体不会变。
• 基于准确三维模型做渲染：适合需要控制产品角度、结构和材质的工作；需要相应模型、贴图与渲染流程，和输入几句话生成一张场景图不是同一项交付。

如果客户需要一张背面接口图，手里却只有正面照片，应该先补背面素材。提示词不能代替缺失的产品资料。

先把首页、分类页和商品页的任务分开

做整站定制时，图片需求要跟页面一起确定。同一张图在三个位置承担的任务不同，制作方法也应跟着变。

例如，这次首页准备把标题放在左侧，就要在生成时给左边留下相对安静的空间。如果先生成了一张正中间放产品的图，设计师后来再把标题压在产品上，往往会把两边都弄得难看。

设计参考｜Matthew Fisher，设计 CUSP；图源：Awwwards 案例。这是原网站展示，不是 AI 生成案例。

看这张真实网站案例，可以观察到：产品占据页面中间的主要视觉区域，名称、价格和尺寸信息各有位置，背景没有塞满道具。换到科技产品上，可以借鉴这种信息层级，但接口和兼容条件还需要更直接的说明，不能照搬家具或艺术品的展示方式。

这就是图片策划和整站设计需要一起做的原因：先决定画面负责什么、文字负责什么，再确定怎么拍或怎么生成。

实际做一张：先固定产品角度，只探索场景

这次通过对话里的 AI 图片编辑工具完成：先上传图 1，说明要编辑这件产品的场景，再附上构图与保留细节的要求，提交生成。保存原图和结果后，放大并排对照。后文的 Shopify 接入与验收是实施方法，本次没有在真实店铺完成上线测试。

我们给这张图的制作要求很具体：

1. 保持原图的竖放姿态和正面透视角度，不要求 AI 凭空转出背面。
2. 产品放在画面右侧，给首页左侧的标题与按钮留空间。
3. 用暖灰色桌面、柔和侧光和少量背景元素，避免场景比产品更抢眼。
4. 不加线缆。源图看不到背面接线口，强行表现连接容易增加错误。
5. 不在图片里生成标题、参数或标识文案，网页文字留给页面组件处理。

下面这段中文可以作为同类任务的起点，实际使用时附上对应产品图：

以这张 CalDigit TS4 官方商品图为产品参考，保持竖放姿态、正面透视角度、银色机身和可见接口布局。把产品放在暖灰色桌面的右侧，柔和自然光从左侧照入，左边留出干净的网页标题区域。背景只保留轻微虚化的办公环境，不接线、不增加配件，不生成任何网页文字。请尽量保持原图的产品标志、卡槽、接口和印字；如果不能准确保留，不要自行补画新的细节。

这段话表达的是制作约束，不是模型的准确性保证。它也不保证所有工具会产生同样结果。本次实际提交的英文提示词（完整原文见下文）也附在文中，方便对照制作要求和结果。

本次实际提交的英文提示词（桌面版）：

Create a photographic scene-edit candidate for a tutorial using this exact CalDigit TS4 product photograph as the source. Preserve its vertical orientation, three-quarter front view, silver ribbed body, actual CalDigit wordmark, white LED, visible card slots and port layout as closely as possible. Do not add ports, move symbols or invent any new visible product surface. Put the product in the right half of a wide 3:2 composition, standing naturally on a quiet warm gray desk; a very softly blurred dark monitor edge in the far background, restrained neutral architectural workspace, soft daylight from the left, grounded short contact shadow. Leave the left third uncluttered for a website heading that will be HTML; DO NOT put any text, labels, UI, diagrams or frames into the image. No cables attached to product because rear connector is not visible; no accessory claims. Understated premium editorial commercial photography, not futuristic, not a rendered plastic object. This is an AI scene experiment for editorial teaching, not an official CalDigit campaign or endorsement.

图 2｜本次实际生成的桌面场景候选。原始产品图见图 1；这里的环境为 AI 生成。查看实际提交的英文提示词（完整原文见下文）。

做出来以后，先判断它能承担哪一种用途

先看整体：产品有没有自然地放在桌面上，阴影是否衔接，背景有没有抢走注意力，左侧是否真的能容纳标题。再看细节：Logo、LED、卡槽、USB 接口、印字和散热纹理是否和原图一致。

这次候选基本实现了产品偏右、桌面有接触阴影、左侧留出空间的构图要求。可见的接口类别也可以逐个找出来，方便做第一轮核对。但机身反光和细节已经被重画，细小印字与图标不能仅凭这张缩略图认定为准确复现。因此，这张图只能作为布局与氛围探索候选，尚不能认定为可直接商用的成品。首页展示同样要通过产品真实性核对；商品详情中的正反面原图也继续保留。左上方的窗框还形成明暗变化，标题应在实际页面里试排，不能把“左侧有空”直接当作“任何位置都能放字”。

一张场景图即使整体通过了，也不应自动替代商品图库里的接口图。顾客放大商品图时，想确认的是自己实际会收到的东西，而不是画面氛围。

图 3｜背面接口继续使用官方原图。来源。

这张背面图里，可以直接看到标注的 DisplayPort 1.4 以及不同连接口。假如生成图把这个位置画成了 HDMI，或在另一面多画出一个接口，就已经改变了商品信息；不能靠文案里的“仅供参考”把错误合理化。接口判断以官方资料为准，不根据模型输出反推规格。

实际制作中，如果场景合适、产品局部却有问题，可以尝试局部修正后重新对照；还不能通过，就退回保留原始主体的合成方式，或使用实拍。需要从一个全新角度展示产品时，补拍或使用准确三维模型，比反复要求模型猜背面更直接。

把横图放到手机上，问题可能才出现

首页设计稿里，产品在右侧、标题在左侧，看起来很舒服。换到手机上，若组件仍然用整幅横图铺满窄屏，裁切就可能只剩一块机身；如果把整张图缩进去，产品又可能小到看不清。

这里需要设计和开发一起选一种合适的处理方式：

• 移动端上下排列：标题放在图片上方或下方，图片保留完整构图。适合不需要文字叠图的页面。
• 为手机准备另一版构图：仍然以同一产品和风格为基础，让产品在竖幅里有足够大小；新生成的那张也要重新审核细节。
• 调整现有图片的展示焦点：只在裁切后仍能保留重要内容时使用；它不能补回原图根本没有的空间。

图 4｜本次实际生成的竖幅候选：用官方产品图约束主体，用图 2 参考场景与光线。实际提示词（完整原文见下文）。它也需要独立核对产品细节。

本次实际提交的英文提示词（移动版）：

Create ONE vertical 2:3 mobile composition candidate for an editorial tutorial. Image 1 is the authoritative CalDigit TS4 product identity photograph. Image 2 is ONLY the environment and light reference; do not use it to correct product details. Preserve Image 1’s upright three-quarter front pose, silver ribbed metal housing, CalDigit logo, LED and visible front port/card slot arrangement as closely as possible, with no imagined extra product surface, connectors or cables. Same restrained warm gray desk and soft daylight from the left as Image 2. Product centered horizontally, its complete top and base visible in lower two thirds with margin; the upper third quiet softly blurred pale gray environment to accommodate actual webpage HTML heading OUTSIDE this image. Avoid a huge window frame or high contrast detail in that upper area. No type, no lettering except the real existing product wordmark/markings, no diagram or UI. Realistic grounded commercial photography. This is a new composition experiment, not a literal crop, and is not an official campaign.

本例的移动端设计选择是标题、说明和按钮独立排在图片上方，下方使用这张竖幅候选。这样不必把产品和标题都挤进一个窄横幅里，也不会为了铺满屏幕裁掉顶部或底座。竖版里主体位置和背景已经与横图不同，不能把它当成同一张图简单导出的尺寸版本，仍要重新审核。

这些都属于页面方案的选择，不是 Shopify 所有主题都有同一组开关。先检查当前主题区块是否支持移动端图片、内容位置或焦点设置；已有能力够用就直接配置，确实不满足设计时，再做相应的定制组件。

同时把标题和按钮作为真实网页元素接入。这样手机端能重新排版、不同语言能替换文字，后续改文案也不必重做整张产品图。AI 负责探索画面，页面组件负责让画面在不同场景下可用。

一套图怎么交给开发，才不容易用错？

到这里，设计交付不应只有一个叫作“最终版”的文件夹。至少要把每张图的用途、对应商品和展示要求说清楚。

以本例为模板，可以整理成下面这样的交接记录。文件名是建议的命名方式，不表示已经在店铺部署：

• ts4-home-desktop：首页场景候选，产品偏右；桌面版标题在左，手机端需要另定排列方式。
• ts4-product-front：正面真实商品图，用于商品图库；保留原文件，避免被后续场景编辑覆盖。
• ts4-product-rear：背面真实接口图，与接口说明相邻，不能误换成正面场景图。
• ts4-lifestyle：商品页环境展示；页面说明与图片合起来交代场景，配件范围仍以商品资料为准。

再加上文件版本、来源、实际尺寸，以及这张图属于哪个商品或变体，维护人员就知道改哪里。对于另一个有多颜色、多型号的店铺，还要把每组图片与相应选项的对应关系列清楚；不能把 TS4 本例没有的颜色或版本编出来演示。

设计参考｜BD Barcelona Design，设计 Miguel Trias Works；图源：Awwwards 页面。用于观察列表图片的一致性，不代表该案例使用了 AI。

分类页放在一起看时，产品大小、背景明度和取景距离的差异会很明显。批量生成前，先拿两三款商品放进设计稿比较，定下统一规则，再处理更多图片。Photoroom 的商品目录编辑器可以批量更换背景，并提供 Batch consistency 来减少变化，但它不保证每张背景完全一致；处理后仍需要整组检查。Photoroom 官方说明

接回 Shopify，再走一次客户会走的路径

对于普通商品图库，可以在后台进入 Products → 对应商品 → Media 添加图片、调整顺序。若用 Shopify 文件编辑器试场景，可打开媒体缩略图，在 Generate 输入描述后生成，并选择 Save as new 保留原图。功能可用性和输出条件以当前店铺界面为准。Shopify 媒体编辑说明

首页场景图则要接到首页对应区块，而不是只上传进商品图库就结束。商品页的环境展示、参数说明和真实图库也可能处在不同模块中，实施时要对应到实际主题结构。

上线前，用桌面和手机分别检查三件事：

看得清不清。 首页文字有没有压住产品，分类缩略图里是否还能认出外形，商品图库放大后关键细节是否清楚。

信息对不对。 点击或切换商品选项后，图片是否仍对应当前商品；前后接口图与说明是否一致，场景中出现的道具是否让人误解随盒内容。

维护和加载是否正常。 对比换图前后的实际加载情况，检查大图是否拖慢首屏；再让后台维护人员试着替换一张素材，确认他们能找到正确位置，页面也没有被改乱。具体压缩与尺寸应依据显示位置和实际清晰度调整，不能只靠一个固定文件大小判断。

从 WESWOO 整站定制的角度，工作就落在这些衔接里：设计先决定每个页面需要什么画面，制作按这个要求交图，开发把图片、文字、商品数据和设备布局接起来，再共同验收。客户最后得到的，才是一套既能表达品牌、又方便选购和维护的网站。

AI 缩短了部分图片制作的过程，但它不会自动决定一张图该放在哪里。把产品事实、画面用途和页面体验一起考虑，生成出来的图片才更容易真正派上用场。

资料与图片来源

• CalDigit TS4 官方商品页：原图与接口资料
• Shopify：文件编辑器中的媒体生成
• Shopify：添加及编辑商品媒体
• Photoroom：商品目录背景编辑
• Awwwards 的两张网站案例图已在对应图注标明设计者与来源，用于页面设计分析。