5 min read
ComfyUI应用之多流程结合打造网页Hero主视觉
【AI辅助设计】ComfyUI应用之-多流程结合打造网页Hero主视觉
前言
在之前的文章中，我们已经探索过很多 AI 辅助设计的可能性，尤其是做了很多工作流，试图提升设计师的效率。
然而，工作流做多之后，如何真正作为生产力工具？其实还是一个问题。或许，大厂已经在做整合这些 AI 工作流了，如 Adobe 等，当然往往与国内无缘！😂。也有一些新型的 AI 应用，看起来无所不能，但是，因为没有跟设计工具结合，图片导来导去的，其实挺影响效率的。
今天，我尝试去从个人设计师角度，以设计工具 Figma 为例，去找找解决方案，大师们也看看，使用此方案，会不会对工作效率提升有帮助😎。
应用方案
再一次”黄婆卖瓜”😂，这次的演示还是需要使用我的 Figma 插件，进行大一统 ComfyUI 和 Figma。
之前的文章没有介绍这个插件的统一原理，我这里说一下：
核心的思想是：通过 Deploy 平台规范化的管理和 Figma 插件的连接，把分散、不统一、不兼容的 ComfyUI 工作流，组合成一套设计生产力工具。
当然，如果不介意图片导来导去，其实 Figma 插件也不是必须的🥱。
目标
我们假定一个设计效果目标：需要设计一个网站的 Hero，框架已经搭好了，现在需要找素材填充，设计意图如下：
按照传统的方法，一般去一些素材网站进行搜索，费时费力！那么用 ComfyUI 工作流，可以生成合适的素材，从而提升设计效率！
先把看看效果，最后用 Framer 快速做了一下加载动效。
工作流原理
如果要用作生产力，一个 ComfyUI 工作流是不能解决问题，需要多工作流配合才能完成任务。在本案例中，我们用到了如下工作流：
- 草图到图片工作流。用于根据设计意图，生成对应的图片效果
- 放大和加细节。主要是去 AI 化，增加图片的质感。
- 移除背景。最常用的流程，在日常设计中，透明背景的素材用途非常广。
- 其他非必要流程。如融图、重绘，则不在本案例展示。
搭建工作流
熟悉 ComfyUI 的朋友，应该都会觉得这几个流程比较简单了。但作为一个解决方案，我们就是要把看起来简单的功能，串联起来，形成合力。
草图到图片工作流
基础模型使用 FLUX，通过 controlnet 控制，实现草图到效果图。
提示语处理
使用 DeepSeek R1 帮我处理提示语，这样我只需要用中文说出我的意图，DeepSeek 就帮我完善提示语了，
对于主体人物的提示词：
一个时尚的女模特，穿着浅棕色的超大运动夹克，右手抬起，头发扎在后面，佩戴着时尚的褐色太阳眼镜，耳戴时尚大耳环。这张照片是从下方、侧面拍摄的，聚焦在人的侧面。模特注视着镜头，酷的感觉；灯光温暖，照片风格现代时尚，时尚广告、杂志封面。
后面背景图的提示词：
巴黎街头，建筑，街景，长焦拍摄。灯光温暖，照片风格现代时尚，时尚广告、杂志封面。
Controlnet 控制
使用了 Shakker 的统一控制网络模型。
因为是草图模型，所以强度不需要开得很高，数值小一点没关系。
第一次采样
使用 FLUX FP 8 模型：
第二次采样
使用同样的模型，进行重采样，这样出图更稳一些。
放大加细节流程
这个流程，我在以前的文章有详细介绍，大家请移步：【 AI辅助设计】号称Maginfic的开源替代又来一个！这次好像真的能打了！
移除背景
这个流程非常简单，只用了一个节点，用 RMBG 2 模型，效果很好！
使用工作流
人物处理
先用画图工具，如 Figma，随便画一下主体人物：
输入提示语，并进行草图到图片工作流。
经过抽卡后，得到满意的图：
进行放大处理：
放大图片看看图片细节：
作为素材，人物结构合理，细节清晰，是一个优秀的素材了！
基于放大的素材，进行抠图。
至此，人物主体素材已完成，后面加以调色即可。
背景处理
用统一的草图到图片工作流，可以生成背景，过程抽了几次卡。
拼合素材
基本操作！背景模糊处理、字体和主体穿插排版。
当然，本案例着重演示流程，细节没完全处理好，如果再加以打磨，就可以“出街啦~。
Figma 插件加持下的统一流程
如果使用我的插件，那么整个流程会更加通畅点😂，过程我就不再赘述了，大家看视频：
想获取更多 AI 辅助设计和设计灵感趋势？ 欢迎关注我的公众号（设计小站）：sjxz 00。