AI DESIGNER / CREATIVE TECHNOLOGIST
Building a Visual Portfolio with AI
Build a visual portfolio from a virtual-character Hero and looped video to timeline characters, flashlight interaction assets and a production frontend in Codex.
English translation is not yet available. The complete Chinese original, images and prompts are shown below.
完整教程
这篇教程先用虚拟人 IP 制作强视觉 Hero 海报和可循环视频，再生成页面参考、时间轴人物、手电筒光圈与行走视频等交互素材，最后把完整素材和交互规则交给 Codex，落地成真实可用的视觉作品集网站。
1.1 准备虚拟人并生成 Hero 海报
先细化虚拟人物的皮肤与五官质感，再以同一人物为主体生成强视觉 Hero 静态图。
在 LiblibAI 中准备一个虚拟人 IP，先用人像质感调节处理肤质纹理等细节，降低明显的 AI 感。
选中人物，拖动加号并选择图片生成节点，输入视觉方向，让同一人物成为作品集 Hero 的核心视觉。
完整提示词
强视觉 Hero 海报
根据这个人 {{Image 1}} 生成一个高级风格的海报，要求视觉感比较强。
1.1 制作可循环 Hero 视频
用静态 Hero 生成只有人物轻微动作的循环视频，保持镜头不推进、首尾帧一致，再用片段重拍和局部画笔修正问题。
把静态 Hero 图连接到视频节点，要求人物只有轻微晃动、自然眨眼，整体构图和镜头保持不变。
局部不满意时不需要重抽整条视频，可以选中对应片段进行重拍；也可以在画面编辑中使用主体修改画笔，涂抹区域后通过对话精准修改。
操作步骤
- 从静态 Hero 图添加视频节点。
- 约束镜头、人物动作、循环首尾帧和 AI 伪影。
- 用片段重拍替换问题区间。
- 用主体修改画笔修正局部画面。
完整提示词
Hero 循环视频
人物在中间轻微晃动，正常睁眼闭眼，视频循环。
开始帧和结束帧要保持一致，不要明显的 AI 伪影；整体镜头不要推进，而是保持同一画面，只有画面中的人物在动。
1.2 生成作品集页面和时间轴人物
让 Hero 的视觉语言延伸到完整作品集页面，再针对时间轴单独生成人物动作和表情素材。
选择 Hero 图作为风格参考，说明页面需要包含个人介绍、工作经历时间轴和作品展示等内容，先生成完整长页面方向。
时间轴如果有更明确的想法，可以单独生成人物动作，再使用情绪调节修改表情，让姿势与情绪更贴合。
继续生成手指滑动视频，把人物动作放到长图的时间轴区域，让时间经历不只是静态文字。
完整提示词
视觉作品集页面
根据 {{Image 1}} 的设计风格，{{Image 2}} 为主要人物，生成一个设计师的作品集页面，包括个人介绍、工作经历时间轴、作品展示等内容。
1.3 制作手电筒与行走视频素材
把鼠标光圈和时间轴人物做成独立素材，后续由前端交互触发，而不是直接烘焙在页面截图里。
先生成银黑配色、具有 Blender 3D 游戏道具质感的手电筒，作为 Hero 区域的自定义鼠标。
再生成同一人物的侧面全身照，并把它转换成镜头固定、首尾帧一致的侧面行走循环视频，用于时间轴节点之间的移动。
完整提示词
手电筒素材
生成一个银色和黑色配色的手电筒，45 度角、纯色背景，手电筒照向后方而不是镜头；使用 Blender 3D 建模质感，酷帅、具有游戏道具感，不是真实世界中的普通产品，但要能一眼看出是手电筒。
侧面行走视频
生成一个侧面走路的视频，镜头固定不动，首尾帧保持一致，可以循环播放，禁止 AI 伪影。
2.1 用 Codex 落地可交互作品集
把页面参考、Hero 视频、滑动视频、手电筒和人物行走素材一次交给 Codex，并把鼠标、滚动和时间轴的触发规则写清楚。
把所有素材放进 Codex，明确每个素材出现的位置，以及鼠标移动和滚动分别触发什么效果，再通过多轮对话调整排版与交互细节。
最终页面必须是真实可用的前端，而不是把参考截图直接放上去；作品展示中暂缺的插图可以先补充占位，后续再替换为真实作品。
网站完成后，可以继续参考教程中的上线流程发布作品集。
完整提示词
作品集页面实现
根据我发给你的素材做一个作品集网站，图片是作品集参考。首先是 Hero 页面：两个 Hero 优先展示黑底，鼠标悬浮后，周围出现一圈虚化范围显示蓝底 Hero，视频循环播放。
把滑动视频放在第二屏。鼠标滚轮在时间轴范围内滚动一次，滑动视频就循环一次，对应的时间坐标轴向左移动一个时间节点。
生成一个可交互、真实可用的前端页面，而不是把截图放上去。严格参考提供的图片，每屏使用 16:9 比例，第一屏不需要受参考图比例限制。第三屏作品展示中缺少的插图可以先补充，后续再替换对应作品图片。
替换 Hero 鼠标
把 Hero 区的鼠标替换成这个手电筒，去掉背景后放上去。
时间轴行走人物
这个视频的 2–5 秒循环，放在时间轴对应节点上；每滑动一次，就让人物从一个节点走到下一个节点。使用叠加模式去掉背景，人物可以缩小一些。
Reusable methods
- Stabilize the character and visual baseline before expanding the page
- A loop needs constraints for camera, action and matching end frames
- Character motion should support the timeline narrative
- Generate interaction assets separately so the frontend can trigger them by state
- Tell Codex where each asset belongs, what triggers it and that the result must be real frontend code
Author and publication
Created by Song Summer Dazzle as part of the 2026 tutorial archive for the WeChat publication 送你整个夏天.