n8n 实操攻略 13：设计稿变身 T 台走秀视频

先看一下这个工作流的最终效果：

这是一张设计稿的图片：

![6460221315d1fb6655f203f3e4c7c3840d1130741217e-5DBXy7_fw658.webp](https://dl.playground.lazycat.cloud/guidelines/496/c76c986f-c17c-4812-86cd-9ef9398b7de7.webp "6460221315d1fb6655f203f3e4c7c3840d1130741217e-5DBXy7_fw658.webp")

最终经过工作流，会先生成下面的图，

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/6e7d8b23-ad43-4837-95cc-a6ba89317c51.png "image.png")
再生成下面的视频：

https://dl.playground.lazycat.cloud/guidelines/496/112ad76a-53e1-4c83-b079-40a8ae35dd78.mp4



https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.n8n


下面是具体搭建流程：

### 上传图片

新建一个 form 表单的触发器

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/92d1358d-d4e0-482e-91bb-1e8f2b2b9b80.png "image.png")

注意要把类型改成 File,打开必须上传的开关

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/b8b42d8d-d04c-4fe0-a463-a08aac43c4db.png "image.png")

执行一下，上传设计稿的图片

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/e6cbd792-9a74-44ab-9b68-4837f539a7dc.png "image.png")

执行成功，在右侧可以看到图片的信息

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/508202c5-5b00-4b7d-bfcc-1ecaa2178e0a.png "image.png")

### 上传图床
第 2 步，我们需要将图片上传到图床网站上，方便后续的流程操作。
添加一个 http request 节点

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/da3a1094-b91d-4873-9cc1-433cd77d9d42.png "image.png")

图床平台我用的[这个](https://api.imgbb.com/)，需要先获取 apikey
可以在这里看到

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/8c8c1363-b202-40de-8be7-f9b201579f62.png "image.png")

文档中这里可以看到使用示例

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/7e2bf404-29e4-4502-a8f2-78ebd2b23976.png "image.png")

在n8n 节点中填入 url，把 apikey 替换成自己的

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/c07dee8c-3f50-444c-9861-3be1b5a24505.png "image.png")

打开 send body 开关

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/17fe23a8-6823-410b-908b-51d7b17e89c2.png "image.png")

body 类型选 form，字节文件

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/da2dc06f-ed72-4a13-b276-893366fbac4b.png "image.png")

执行节点，可以看到结果，pin 一下

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/6882f4ff-e6ab-41e5-b6ac-869ebee6ce46.png "image.png")

### ai分析图片

这一步，是对图片进行分析，生成一个更完善的图片。

我用的gpt4o的模型，用的是第三方平台[V-API](https://api.v3.cm)的中转接口

先插入一个 http request 节点，重命名为 AI 分析设计稿

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/9f43277e-85ea-4f65-b302-cc2c934807f6.png "image.png")

在令牌管理里面，可以看到自己的 APIkey

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/82f9605a-4092-4615-a5d1-278d418b86a0.png "image.png")

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/4fe51e2f-3da0-41d8-b84c-13968daeacf6.png "image.png")
根据文档，n8n 里要用 header auth，新建凭证

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/0b5885d4-47c2-4263-90f3-48d5a18f346b.png "image.png")

这是个 post 请求，在 API 文档里复制 url 地址

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/cad071d5-1ab0-4c78-aff0-e989c575145c.png "image.png")


![image.png](https://dl.playground.lazycat.cloud/guidelines/496/174f59bf-7a8c-436d-801d-cbbb603e737b.png "image.png")

接着打开 send body 开关，选择 json

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/653ee24e-4ed6-4b72-8b71-aa5e92178a12.png "image.png")

这里的 json 输入框，可以参考 API 文档示例，复制过来

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/d4b98f8f-0229-4fb5-9085-a382b807ca70.png "image.png")

点击展开详情

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/719bc94f-e750-4790-91ea-e874e60ef092.png "image.png")

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/c1a24099-a64c-471c-9dad-f35a479b448a.png "image.png")

把 url 的内容删掉，把我们左侧的 url 拖过来

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/c7caf06c-0a7d-4086-9ca4-b66a72098d67.png "image.png")

text 改成：这是一张服装设计稿，请你详细描述一下这张线稿上服装的细节，重点要判断一下衣服的材质和款式，一定要一比一还原衣服细节，除了这段描述不用输出其他任何东西。

把"max_tokens": 300 删掉就行，最后效果如图

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/20e15d78-705b-4326-b230-8ce9796e77cf.png "image.png")

执行一下，可以看到效果了

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/49614914-1600-49cf-b0de-dc3ff59164d5.png "image.png")

### ai agent

这一步，我们根据上面的输出，生成一套高质量的提示词

新加一个 ai agent 节点,提示词我们用自定义的 define blow

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/c83a9bdf-9e4c-40fb-a3ce-1d8627153b05.png "image.png")

参考我的：

```
# 角色与目标 (Role & Goal) 你是一位顶级的数字时尚技术总监，专精于将2D服装设计稿（线稿/草图）通过AI（Flux, Midjourney等）转化为超高保真度的3D模特效果图。你的首要任务是确保最终图像对原始设计稿的绝对忠诚，其次才是艺术性的提升。你必须像读取一份工程蓝图一样解读用户输入，并生成一份包含了技术控制参数和创意视觉描述的终极指令。
# 工作流程 (Workflow) 你将严格遵循以下经过优化的6个步骤，将用户的  {{ $json.choices[0].message.content }} 和潜在的 [设计线稿] 转化为最终提示词。
步骤1：确立技术基石 (Establish the Technical Foundation)
* 识别输入类型： 判断用户是否提到了“设计稿”或“线稿”。如果提及，你的首要指令将是基于图生图 (Image-to-Image)。
* 设定控制参数： 明确指示AI应参考[设计线稿]进行渲染，并建议一个合适的控制权重，以确保结构和轮廓的高度一致性。
步骤2：解构设计蓝图 (Deconstruct the Blueprint)
* 分析 [服装设计描述]： 将描述中的所有元素拆解。
* 区分“非卖品”与“可变品”：
    * 非卖品 (Non-Negotiables): 所有关于服装本身的核心细节（廓形、结构、颜色、面料、特征）。这些是必须100%还原的硬性指令。
    * 可变品 (Variables): 模特、场景、光线、氛围等。这些是用于衬托服装的软性指令，可以在不违背核心风格的前提下进行创意发挥。
步骤3：生成硬性指令 - 服装技术规格 (Generate Hard Directives - The Garment Tech Pack)
* 这是任务的核心。将所有“非卖品”信息转化为精确、无歧义的描述。
* 廓形与结构 (Silhouette & Structure): A-line silhouette, sharp shoulder pads, asymmetrical hemline...
* 关键特征 (Key Features): a precise triangular cutout on the left waist, a single-button closure on the cuff...
* 面料物理性 (Fabric Physics): heavyweight matte velvet that absorbs light, liquid-like silk charmeuse with a high-gloss sheen...
* 颜色/图案 (Precise Color/Pattern): solid jet-black (RAL 9005), no patterns, vertical pinstripes, 1cm apart...
步骤4：生成软性指令 - 视觉故事 (Generate Soft Directives - The Visual Story)
* 基于服装风格，构思最能凸显其特质的“可变品”元素。
* 模特 (Muse): (形象、姿态、情绪)
* 场景 (Scene): (背景、道具)
* 光线 (Lighting): (光源、质感、阴影)
* 将以上所有元素，按照全新的、高度结构化的格式组合起来，清晰地划分出控制部分和描述部分。
# 最终会生成纯英文版本的提示词，记住是纯英文题的，且除了提示词的内容之外，输出不要有其他任何的无用的内容，不需要负向提示词，最终的输出要在300个单词以内。
# 不要带有任何会导致破坏json结构的符号。
# 如果描述中没有提到衣服的颜色，则不需要描述
# 仅选取画面描述中跟服装有关系的部分，其他部分一概不要


# 最终输出格式 

A hyper-realistic, ultra-detailed 8K fashion editorial photograph in the style of [Overall artistic style and quality keywords]. The image features a [model description] holding a [pose description]. She is wearing a [Precise silhouette and fit description] meticulously crafted from [Physical properties and texture of the fabric] in a [Exact color and pattern information]. Key non-negotiable specifications include its [Key structural and tailoring details] and [All must-have design features]. The model is set in a [background description], illuminated by [lighting type and mood] to create a clean, professional aesthetic. This [Shot composition and angle] is captured to look as if shot on a [Camera and lens effect].
```
展开看一下，如果是绿色的就是正常的。如果是红色的，就把对应节点拖过来

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/f134a511-88ff-4e6f-9b7c-4393eef54143.png "image.png")

点击执行节点，可以看到效果了

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/939c99ca-8e65-4a45-b3d0-d7131064c7d6.png "image.png")

### ai生图

这一步，我们根据上面生成的提示词，生成高质量的图片。

添加一个 http request 节点，生图还是用刚才的 V-API，配置和上面一样的

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/fe1721a8-e9f8-4a95-91d9-946aebdf9adc.png "image.png")

我们用 FLUX 模型，[官方文档是这个](https://api-gpt-ge.apifox.cn/227858580e0)


![image.png](https://dl.playground.lazycat.cloud/guidelines/496/4ffe340e-bcc6-4154-b211-9fbc3fed8835.png "image.png")

send body还是选using json，参考代码

```
{
    "model": "flux-kontext-pro",
    "prompt": "{{ $('上传图片').item.json.data.image.url }} 让图片参考该提示词最终达到将2D服装设计稿转化为超高保真度的3D模特效果图，尽量多参考图片，注意服装设计稿上面服装的细节要保持1:1还原，输出的图片一定要是模特全身照：{{ $json.output }}",
    "seed": 0,
    "aspect_ratio": "16:9",
    "output_format": "jpeg",
    "webhook_url": "null",
    "webhook_secret": "null",
    "prompt_upsampling": false,
    "safety_tolerance": 2
}
```
展开之后发现是红的报错，把它删掉，把左侧的图片 url 拖过来

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/8a9f8093-0cf3-48bd-b8cf-304af4e1ef1f.png "image.png")

效果如图


![image.png](https://dl.playground.lazycat.cloud/guidelines/496/71a53f9b-99d3-425d-b8f3-3ac86290fc65.png "image.png")

执行一下，可以看到效果了

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/e630a415-ef82-4862-b9e7-8c7b85801e98.png "image.png")

### googel sheet

这一步我们先把之前的步骤，一些关键信息先保存的 Google sheet 里，如果你之前看过我的攻略，相信很快就能配好。

在 Google drive 里新建个表格
列名可以参考

```
设计稿 url	设计稿描述	prompt	摄影图 url	视频
```

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/dd087aa7-9986-431f-b413-4d1c6e94701e.png "image.png")

新建个 Google sheet 节点

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/7d79e040-f8da-48a5-b3f2-032544be0661.png "image.png")

将对应的字段都拖过来，执行一下，可以看到数据写入进去了

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/19d273e9-c27d-4a30-b6d2-e043e042bd44.png "image.png")

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/bcf524f2-79f1-4e34-a3ba-9b468a10610e.png "image.png")

### 生成视频

这一步，和之前的攻略 [AI 生成解压视频](https://lazycat.cloud/playground/guideline/1302)的操作是一样的，就是根据图片生成视频。还是用 kie.ai 的平台。

添加一个 http request 节点，

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/f13e4ba5-c1f4-4b18-b2de-dba9b3a07ef6.png "image.png")

根据文档，传入 prompt：根据图片生成流程的模特 T 台走秀视频
imageUrls 选摄影图 url
model 还是选便宜的veo3_fast

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/c03ea85f-6b98-42ae-9d3e-d2872d9bbdae.png "image.png")

执行一下可以看到提交成功了

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/bcebe7d3-a7a4-4a89-86cd-ccfae61b0a6c.png "image.png")

下一步，添加一个 wait 节点，每隔 10s 查询下结果

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/657d8fd1-c52f-4744-9a78-0c933ed1ec29.png "image.png")

添加查询结果的 http request节点
文档看这里

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/6daa9809-7f9d-43de-b6b9-9a8fe33c6809.png "image.png")

执行一下，可以看到返回成功了

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/12928a25-85e2-47e3-8f9a-331771d8cc6a.png "image.png")

添加个 if 节点

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/f2269350-37c5-4a51-a001-4b0b70f2a43e.png "image.png")

添加个更新 Google sheet 视频链接的节点

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/a424774b-3eaa-4488-82aa-3f928ce1a76c.png "image.png")

当摄影图 url 一致的时候，就更新视频字段

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/e8d3981a-a011-4feb-b42c-6fcf4e4e5203.png "image.png")

执行一下，可以看到成功了

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/5c8c9c15-8df8-4afe-a0ac-18d626b81f20.png "image.png")

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/ffc44a41-77f8-474d-9395-57e91f13eb7c.png "image.png")

生成的视频如下

https://dl.playground.lazycat.cloud/guidelines/496/e200ee14-2488-4ba2-975d-c17da5da0706.mp4

因为我跑了几遍，所以生成了好几个视频，和开头的那个人脸不一样。

呼呼～～～码字不易啊，这个工作流我搞了一下午，终于跑通了。

看到这里的大佬们，小弟要个赞不过分吧？